Release 6.0.0

mdbootstrap · Jan 15, 2024 · a25147d · a25147d
1 parent a7d3e3d
commit a25147d
Show file tree

Hide file tree

Showing 20 changed files with 211 additions and 103 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,40 @@
+## 6.0.0 (15.01.2024)
+
+This version requires Angular v17. Follow the [Angular Update Guide](https://update.angular.io/?l=3&v=16.0-17.0) to migrate your project to Angular 17.
+
+### Breaking changes:
+
+- Updated Angular to v17, this version is required in MDB Angular v6
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) - changed type of `defaultView` input from `string` to `MdbCalendarView`
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed type of `options` input from `any` to `MdbDatepickerOptions`
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Changed type of `options` input from `Options` to `MdbTimepickerOptions` and made all parameters optional
+  - Changed `SelectedTime` type name to `MdbTimepickerSelectedTime` and added this type to public exports
+- [Popover](https://mdbootstrap.com/docs/angular/components/popover/) - removed unused `template` input
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
+  - Changed return type of all events from `MdbSidenavComponent` to `void`
+  - Removed redundant `li` element from `MdbSidenavItemComponent` template
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+  - Changed `onSearchOutput` event name to `searchOutput`
+  - Changed `selectOutput` event name to `selectOutput`
+  - Changed `onChange` event name to `listChange`
+  - Changed `onSearch` event name to `itemSearch`
+  - Changed `onSelect` event name to `itemSelect`
+
+### Fixes and improvements:
+
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - removed height animation transition
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - blocked input clearing in disabled component
+- [Input fields](https://mdbootstrap.com/docs/angular/forms/input-fields/) - resolved problem with default label position in all inputs with built-in placeholder (like `datetime-local` or `time`)
+- [Lightbox](https://mdbootstrap.com/docs/angular/components/lightbox/) - resolved problem with component removal from DOM after using browser's back button
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved problem with font size in landscape view
+
+### New fetures:
+
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `inputId` and `inputFilterId` inputs that allow to declare ids for input elements
+
+---
+
 ## 5.2.0 (04.12.2023)
 
 ### Fixes and improvements:

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-Bootstrap 5 & Angular 16 UI KIT - 700+ components, MIT license, simple installation.
+Bootstrap 5 & Angular 17 UI KIT - 700+ components, MIT license, simple installation.
 
 MDB is a collection of free Bootstrap templates, themes, design tools & resources.
 
@@ -17,7 +17,7 @@ One click setup! MDB GO allows you to create a WordPress page with a single clic
 Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.
 
 
-## About Material Design for Bootstrap 5 & Angular 16
+## About Material Design for Bootstrap 5 & Angular 17
 
 <p>Created by <a href="https://mdbootstrap.com"><img height="30" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-angular-r.png"></a>
 <a href="https://npmcharts.com/compare/angular-bootstrap-md?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads" alt="Downloads"></a>

diff --git a/README.txt b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 5.2.0
+Version: FREE 6.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/angular/

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "5.2.0",
+  "version": "6.0.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
@@ -1,3 +1,40 @@
+## 6.0.0 (15.01.2024)
+
+This version requires Angular v17. Follow the [Angular Update Guide](https://update.angular.io/?l=3&v=16.0-17.0) to migrate your project to Angular 17.
+
+### Breaking changes:
+
+- Updated Angular to v17, this version is required in MDB Angular v6
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) - changed type of `defaultView` input from `string` to `MdbCalendarView`
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed type of `options` input from `any` to `MdbDatepickerOptions`
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Changed type of `options` input from `Options` to `MdbTimepickerOptions` and made all parameters optional
+  - Changed `SelectedTime` type name to `MdbTimepickerSelectedTime` and added this type to public exports
+- [Popover](https://mdbootstrap.com/docs/angular/components/popover/) - removed unused `template` input
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
+  - Changed return type of all events from `MdbSidenavComponent` to `void`
+  - Removed redundant `li` element from `MdbSidenavItemComponent` template
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+  - Changed `onSearchOutput` event name to `searchOutput`
+  - Changed `selectOutput` event name to `selectOutput`
+  - Changed `onChange` event name to `listChange`
+  - Changed `onSearch` event name to `itemSearch`
+  - Changed `onSelect` event name to `itemSelect`
+
+### Fixes and improvements:
+
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - removed height animation transition
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - blocked input clearing in disabled component
+- [Input fields](https://mdbootstrap.com/docs/angular/forms/input-fields/) - resolved problem with default label position in all inputs with built-in placeholder (like `datetime-local` or `time`)
+- [Lightbox](https://mdbootstrap.com/docs/angular/components/lightbox/) - resolved problem with component removal from DOM after using browser's back button
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved problem with font size in landscape view
+
+### New fetures:
+
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `inputId` and `inputFilterId` inputs that allow to declare ids for input elements
+
+---
+
 ## 5.2.0 (04.12.2023)
 
 ### Fixes and improvements:

diff --git a/projects/mdb-angular-ui-kit/README.md b/projects/mdb-angular-ui-kit/README.md
@@ -1,4 +1,4 @@
-Bootstrap 5 & Angular 16 UI KIT - 700+ components, MIT license, simple installation.
+Bootstrap 5 & Angular 17 UI KIT - 700+ components, MIT license, simple installation.
 
 MDB is a collection of free Bootstrap templates, themes, design tools & resources.
 
@@ -17,7 +17,7 @@ One click setup! MDB GO allows you to create a WordPress page with a single clic
 Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.
 
 
-## About Material Design for Bootstrap 5 & Angular 16
+## About Material Design for Bootstrap 5 & Angular 17
 
 <p>Created by <a href="https://mdbootstrap.com"><img height="30" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-angular-r.png"></a>
 <a href="https://npmcharts.com/compare/angular-bootstrap-md?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads" alt="Downloads"></a>

diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
@@ -1,7 +1,7 @@
 //
 // Base styles
 //
-
+@use 'sass:math';
 .alert {
   // scss-docs-start alert-css-vars
   --#{$prefix}alert-bg: transparent;
@@ -62,7 +62,7 @@
   $alert-color: shift-color($value, $alert-color-scale);
 
   @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
+    $alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
   }
   .alert-#{$state} {
     @include alert-variant($alert-background, $alert-border, $alert-color);

diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
@@ -1,7 +1,7 @@
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
-
+@use 'sass:math';
 .list-group {
   // scss-docs-start list-group-css-vars
   --#{$prefix}list-group-color: #{$list-group-color};
@@ -184,7 +184,7 @@
   $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
   $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
   @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
-    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
+    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), math.abs($list-group-item-color-scale));
   }
 
   @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);

diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
@@ -56,7 +56,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: divide(100%, $count);
+    width: percentage(divide(1, $count));
   }
 }
 

diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
@@ -7,7 +7,7 @@
 // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
 
 // Configuration
-
+@use 'sass:math';
 // Base value
 $rfs-base-value: 1.25rem !default;
 $rfs-unit: rem !default;
@@ -54,8 +54,8 @@ $rfs-base-value-unit: unit($rfs-base-value);
 
 @function divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
   @if $dividend == 0 {
     @return 0;
   }

diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
@@ -102,5 +102,5 @@
 @import './free/accordion';
 @import './free/carousel';
 
-@import '~@angular/cdk/overlay-prebuilt.css';
-@import '~@angular/cdk/text-field-prebuilt.css';
+@import '@angular/cdk/overlay-prebuilt.css';
+@import '@angular/cdk/text-field-prebuilt.css';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
@@ -104,5 +104,5 @@
 @import './free/carousel';
 
 
-@import '~@angular/cdk/overlay-prebuilt.css';
-@import '~@angular/cdk/text-field-prebuilt.css';
+@import '@angular/cdk/overlay-prebuilt.css';
+@import '@angular/cdk/text-field-prebuilt.css';
diff --git a/projects/mdb-angular-ui-kit/forms/input.directive.ts b/projects/mdb-angular-ui-kit/forms/input.directive.ts
@@ -44,7 +44,7 @@ export class MdbInputDirective
     if (typeof getComputedStyle === 'function') {
       this._color = getComputedStyle(this._elementRef.nativeElement).color;
 
-      if (this._elementRef.nativeElement.type === 'date') {
+      if (this._hasTypeInterferingPlaceholder()) {
         this._updateTextColorForDateType();
       }
     }
@@ -109,7 +109,7 @@ export class MdbInputDirective
   @HostListener('focus')
   _onFocus(): void {
     this._focused = true;
-    if (this._elementRef.nativeElement.type === 'date') {
+    if (this._hasTypeInterferingPlaceholder()) {
       this._updateTextColorForDateType();
     }
     this.stateChanges.next();
@@ -118,7 +118,7 @@ export class MdbInputDirective
   @HostListener('blur')
   _onBlur(): void {
     this._focused = false;
-    if (this._elementRef.nativeElement.type === 'date') {
+    if (this._hasTypeInterferingPlaceholder()) {
       this._updateTextColorForDateType();
     }
     this.stateChanges.next();
@@ -152,6 +152,11 @@ export class MdbInputDirective
     return this.focused || this.hasValue || this.autofilled;
   }
 
+  private _hasTypeInterferingPlaceholder() {
+    const typesArray = ['date', 'datetime-local', 'time', 'month', 'week'];
+    return typesArray.includes(this._elementRef.nativeElement.type);
+  }
+
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_readonly: BooleanInput;
 

diff --git a/projects/mdb-angular-ui-kit/package.json b/projects/mdb-angular-ui-kit/package.json
@@ -4,13 +4,13 @@
   "homepage": "https://mdbootstrap.com/docs/b5/angular/",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "peerDependencies": {
-    "@angular/common": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/animations": "^16.0.0",
-    "@angular/forms": "^16.0.0",
-    "@angular/cdk": "^16.0.0"
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/animations": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/cdk": "^17.0.0"
   },
   "schematics": "./schematics/collection.json",
   "dependencies": {

diff --git a/projects/mdb-angular-ui-kit/popover/popover.component.ts b/projects/mdb-angular-ui-kit/popover/popover.component.ts
@@ -4,6 +4,7 @@ import {
   Component,
   Input,
   TemplateRef,
+  booleanAttribute,
 } from '@angular/core';
 import { trigger, style, animate, transition, state, AnimationEvent } from '@angular/animations';
 import { Subject } from 'rxjs';
@@ -21,10 +22,10 @@ import { Subject } from 'rxjs';
   ],
 })
 export class MdbPopoverComponent {
-  @Input() title: string;
+  @Input({ transform: booleanAttribute }) animation: boolean;
   @Input() content: string | TemplateRef<any>;
-  @Input() animation: boolean;
   @Input() context: any;
+  @Input() title: string;
 
   get isContentTemplate(): boolean {
     return this.content instanceof TemplateRef;

diff --git a/projects/mdb-angular-ui-kit/popover/popover.directive.ts b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
@@ -8,6 +8,8 @@ import {
   OnInit,
   Output,
   TemplateRef,
+  booleanAttribute,
+  numberAttribute,
 } from '@angular/core';
 import {
   ConnectedPosition,
@@ -20,7 +22,7 @@ import { ComponentPortal } 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';
+import { MdbPopoverPosition } from './popover.types';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
@@ -29,40 +31,21 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbPopoverDirective implements OnInit, OnDestroy {
+  @Input({ transform: booleanAttribute }) animation = true;
+  @Input({ transform: numberAttribute }) delayHide = 0;
+  @Input({ transform: numberAttribute }) delayShow = 0;
   @Input() mdbPopover: TemplateRef<any> | string = '';
-  @Input() mdbPopoverTitle = '';
   @Input() mdbPopoverData: any;
-
-  @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()
-  get animation(): boolean {
-    return this._animation;
-  }
-  set animation(value: boolean) {
-    this._animation = coerceBooleanProperty(value);
-  }
-  private _animation = false;
-
+  @Input() mdbPopoverTitle = '';
+  @Input({ transform: numberAttribute }) offset = 4;
+  @Input() placement: MdbPopoverPosition = 'top';
+  @Input({ transform: booleanAttribute }) popoverDisabled = false;
   @Input() trigger = 'click';
-  @Input() delayShow = 0;
-  @Input() delayHide = 0;
-  @Input() offset = 4;
 
-  @Output() popoverShow: EventEmitter<MdbPopoverDirective> = new EventEmitter();
-  @Output() popoverShown: EventEmitter<MdbPopoverDirective> = new EventEmitter();
-  @Output() popoverHide: EventEmitter<MdbPopoverDirective> = new EventEmitter();
-  @Output() popoverHidden: EventEmitter<MdbPopoverDirective> = new EventEmitter();
+  @Output() popoverShow = new EventEmitter<MdbPopoverDirective>();
+  @Output() popoverShown = new EventEmitter<MdbPopoverDirective>();
+  @Output() popoverHide = new EventEmitter<MdbPopoverDirective>();
+  @Output() popoverHidden = new EventEmitter<MdbPopoverDirective>();
 
   private _overlayRef: OverlayRef;
   private _tooltipRef: ComponentRef<MdbPopoverComponent>;
@@ -212,7 +195,7 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
 
       this._tooltipRef = this._overlayRef.attach(tooltipPortal);
 
-      this._tooltipRef.instance.content = this.template || this.mdbPopover;
+      this._tooltipRef.instance.content = this.mdbPopover;
       this._tooltipRef.instance.title = this.mdbPopoverTitle;
       this._tooltipRef.instance.animation = this.animation;
       this._tooltipRef.instance.context = this.mdbPopoverData;
@@ -256,7 +239,4 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
       this.show();
     }
   }
-
-  static ngAcceptInputType_animation: BooleanInput;
-  static ngAcceptInputType_popoverDisabled: BooleanInput;
 }
diff --git a/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts b/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts
@@ -6,7 +6,7 @@ import { addPackageToPackageJson } from './package';
 // Just return the tree
 export function ngAdd(options: Schema): Rule {
   return (tree: Tree, context: SchematicContext) => {
-    const angularDependencyVersion = '^16.0.0';
+    const angularDependencyVersion = '^17.0.0';
 
     addPackageToPackageJson(tree, '@angular/cdk', angularDependencyVersion);
     addPackageToPackageJson(tree, '@angular/forms', angularDependencyVersion);