Skip to content

Commit a25147d

Browse files
idzarkidzark
committed
Release 6.0.0
1 parent a7d3e3d commit a25147d

File tree

20 files changed

+211
-103
lines changed

20 files changed

+211
-103
lines changed

‎CHANGELOG.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1+
## 6.0.0 (15.01.2024)
2+
3+
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.
4+
5+
### Breaking changes:
6+
7+
- Updated Angular to v17, this version is required in MDB Angular v6
8+
- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) - changed type of `defaultView` input from `string` to `MdbCalendarView`
9+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed type of `options` input from `any` to `MdbDatepickerOptions`
10+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
11+
- Changed type of `options` input from `Options` to `MdbTimepickerOptions` and made all parameters optional
12+
- Changed `SelectedTime` type name to `MdbTimepickerSelectedTime` and added this type to public exports
13+
- [Popover](https://mdbootstrap.com/docs/angular/components/popover/) - removed unused `template` input
14+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
15+
- Changed return type of all events from `MdbSidenavComponent` to `void`
16+
- Removed redundant `li` element from `MdbSidenavItemComponent` template
17+
- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
18+
- Changed `onSearchOutput` event name to `searchOutput`
19+
- Changed `selectOutput` event name to `selectOutput`
20+
- Changed `onChange` event name to `listChange`
21+
- Changed `onSearch` event name to `itemSearch`
22+
- Changed `onSelect` event name to `itemSelect`
23+
24+
### Fixes and improvements:
25+
26+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - removed height animation transition
27+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - blocked input clearing in disabled component
28+
- [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`)
29+
- [Lightbox](https://mdbootstrap.com/docs/angular/components/lightbox/) - resolved problem with component removal from DOM after using browser's back button
30+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved problem with font size in landscape view
31+
32+
### New fetures:
33+
34+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `inputId` and `inputFilterId` inputs that allow to declare ids for input elements
35+
36+
---
37+
138
## 5.2.0 (04.12.2023)
239

340
### Fixes and improvements:

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Bootstrap 5 & Angular 16 UI KIT - 700+ components, MIT license, simple installation.
1+
Bootstrap 5 & Angular 17 UI KIT - 700+ components, MIT license, simple installation.
22

33
MDB is a collection of free Bootstrap templates, themes, design tools & resources.
44

@@ -17,7 +17,7 @@ One click setup! MDB GO allows you to create a WordPress page with a single clic
1717
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.
1818

1919

20-
## About Material Design for Bootstrap 5 & Angular 16
20+
## About Material Design for Bootstrap 5 & Angular 17
2121

2222
<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>
2323
<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>

‎README.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 Angular
22

3-
Version: FREE 5.2.0
3+
Version: FREE 6.0.0
44

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

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-angular-ui-kit-free",
3-
"version": "5.2.0",
3+
"version": "6.0.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1+
## 6.0.0 (15.01.2024)
2+
3+
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.
4+
5+
### Breaking changes:
6+
7+
- Updated Angular to v17, this version is required in MDB Angular v6
8+
- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) - changed type of `defaultView` input from `string` to `MdbCalendarView`
9+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed type of `options` input from `any` to `MdbDatepickerOptions`
10+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
11+
- Changed type of `options` input from `Options` to `MdbTimepickerOptions` and made all parameters optional
12+
- Changed `SelectedTime` type name to `MdbTimepickerSelectedTime` and added this type to public exports
13+
- [Popover](https://mdbootstrap.com/docs/angular/components/popover/) - removed unused `template` input
14+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
15+
- Changed return type of all events from `MdbSidenavComponent` to `void`
16+
- Removed redundant `li` element from `MdbSidenavItemComponent` template
17+
- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
18+
- Changed `onSearchOutput` event name to `searchOutput`
19+
- Changed `selectOutput` event name to `selectOutput`
20+
- Changed `onChange` event name to `listChange`
21+
- Changed `onSearch` event name to `itemSearch`
22+
- Changed `onSelect` event name to `itemSelect`
23+
24+
### Fixes and improvements:
25+
26+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - removed height animation transition
27+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - blocked input clearing in disabled component
28+
- [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`)
29+
- [Lightbox](https://mdbootstrap.com/docs/angular/components/lightbox/) - resolved problem with component removal from DOM after using browser's back button
30+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved problem with font size in landscape view
31+
32+
### New fetures:
33+
34+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `inputId` and `inputFilterId` inputs that allow to declare ids for input elements
35+
36+
---
37+
138
## 5.2.0 (04.12.2023)
239

340
### Fixes and improvements:

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Bootstrap 5 & Angular 16 UI KIT - 700+ components, MIT license, simple installation.
1+
Bootstrap 5 & Angular 17 UI KIT - 700+ components, MIT license, simple installation.
22

33
MDB is a collection of free Bootstrap templates, themes, design tools & resources.
44

@@ -17,7 +17,7 @@ One click setup! MDB GO allows you to create a WordPress page with a single clic
1717
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.
1818

1919

20-
## About Material Design for Bootstrap 5 & Angular 16
20+
## About Material Design for Bootstrap 5 & Angular 17
2121

2222
<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>
2323
<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>

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
//
22
// Base styles
33
//
4-
4+
@use 'sass:math';
55
.alert {
66
// scss-docs-start alert-css-vars
77
--#{$prefix}alert-bg: transparent;
@@ -62,7 +62,7 @@
6262
$alert-color: shift-color($value, $alert-color-scale);
6363

6464
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
65-
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
65+
$alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
6666
}
6767
.alert-#{$state} {
6868
@include alert-variant($alert-background, $alert-border, $alert-color);

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Base class
22
//
33
// Easily usable on <ul>, <ol>, or <div>.
4-
4+
@use 'sass:math';
55
.list-group {
66
// scss-docs-start list-group-css-vars
77
--#{$prefix}list-group-color: #{$list-group-color};
@@ -184,7 +184,7 @@
184184
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
185185
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
186186
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
187-
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
187+
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), math.abs($list-group-item-color-scale));
188188
}
189189

190190
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
@mixin row-cols($count) {
5757
> * {
5858
flex: 0 0 auto;
59-
width: divide(100%, $count);
59+
width: percentage(divide(1, $count));
6060
}
6161
}
6262

‎projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
88

99
// Configuration
10-
10+
@use 'sass:math';
1111
// Base value
1212
$rfs-base-value: 1.25rem !default;
1313
$rfs-unit: rem !default;
@@ -54,8 +54,8 @@ $rfs-base-value-unit: unit($rfs-base-value);
5454

5555
@function divide($dividend, $divisor, $precision: 10) {
5656
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
57-
$dividend: abs($dividend);
58-
$divisor: abs($divisor);
57+
$dividend: math.abs($dividend);
58+
$divisor: math.abs($divisor);
5959
@if $dividend == 0 {
6060
@return 0;
6161
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,5 +102,5 @@
102102
@import './free/accordion';
103103
@import './free/carousel';
104104

105-
@import '~@angular/cdk/overlay-prebuilt.css';
106-
@import '~@angular/cdk/text-field-prebuilt.css';
105+
@import '@angular/cdk/overlay-prebuilt.css';
106+
@import '@angular/cdk/text-field-prebuilt.css';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,5 +104,5 @@
104104
@import './free/carousel';
105105

106106

107-
@import '~@angular/cdk/overlay-prebuilt.css';
108-
@import '~@angular/cdk/text-field-prebuilt.css';
107+
@import '@angular/cdk/overlay-prebuilt.css';
108+
@import '@angular/cdk/text-field-prebuilt.css';

‎projects/mdb-angular-ui-kit/forms/input.directive.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export class MdbInputDirective
4444
if (typeof getComputedStyle === 'function') {
4545
this._color = getComputedStyle(this._elementRef.nativeElement).color;
4646

47-
if (this._elementRef.nativeElement.type === 'date') {
47+
if (this._hasTypeInterferingPlaceholder()) {
4848
this._updateTextColorForDateType();
4949
}
5050
}
@@ -109,7 +109,7 @@ export class MdbInputDirective
109109
@HostListener('focus')
110110
_onFocus(): void {
111111
this._focused = true;
112-
if (this._elementRef.nativeElement.type === 'date') {
112+
if (this._hasTypeInterferingPlaceholder()) {
113113
this._updateTextColorForDateType();
114114
}
115115
this.stateChanges.next();
@@ -118,7 +118,7 @@ export class MdbInputDirective
118118
@HostListener('blur')
119119
_onBlur(): void {
120120
this._focused = false;
121-
if (this._elementRef.nativeElement.type === 'date') {
121+
if (this._hasTypeInterferingPlaceholder()) {
122122
this._updateTextColorForDateType();
123123
}
124124
this.stateChanges.next();
@@ -152,6 +152,11 @@ export class MdbInputDirective
152152
return this.focused || this.hasValue || this.autofilled;
153153
}
154154

155+
private _hasTypeInterferingPlaceholder() {
156+
const typesArray = ['date', 'datetime-local', 'time', 'month', 'week'];
157+
return typesArray.includes(this._elementRef.nativeElement.type);
158+
}
159+
155160
static ngAcceptInputType_disabled: BooleanInput;
156161
static ngAcceptInputType_readonly: BooleanInput;
157162

‎projects/mdb-angular-ui-kit/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
"homepage": "https://mdbootstrap.com/docs/b5/angular/",
55
"author": "MDBootstrap",
66
"license": "MIT",
7-
"version": "5.2.0",
7+
"version": "6.0.0",
88
"peerDependencies": {
9-
"@angular/common": "^16.0.0",
10-
"@angular/core": "^16.0.0",
11-
"@angular/animations": "^16.0.0",
12-
"@angular/forms": "^16.0.0",
13-
"@angular/cdk": "^16.0.0"
9+
"@angular/common": "^17.0.0",
10+
"@angular/core": "^17.0.0",
11+
"@angular/animations": "^17.0.0",
12+
"@angular/forms": "^17.0.0",
13+
"@angular/cdk": "^17.0.0"
1414
},
1515
"schematics": "./schematics/collection.json",
1616
"dependencies": {

‎projects/mdb-angular-ui-kit/popover/popover.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Component,
55
Input,
66
TemplateRef,
7+
booleanAttribute,
78
} from '@angular/core';
89
import { trigger, style, animate, transition, state, AnimationEvent } from '@angular/animations';
910
import { Subject } from 'rxjs';
@@ -21,10 +22,10 @@ import { Subject } from 'rxjs';
2122
],
2223
})
2324
export class MdbPopoverComponent {
24-
@Input() title: string;
25+
@Input({ transform: booleanAttribute }) animation: boolean;
2526
@Input() content: string | TemplateRef<any>;
26-
@Input() animation: boolean;
2727
@Input() context: any;
28+
@Input() title: string;
2829

2930
get isContentTemplate(): boolean {
3031
return this.content instanceof TemplateRef;

‎projects/mdb-angular-ui-kit/popover/popover.directive.ts

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
OnInit,
99
Output,
1010
TemplateRef,
11+
booleanAttribute,
12+
numberAttribute,
1113
} from '@angular/core';
1214
import {
1315
ConnectedPosition,
@@ -20,7 +22,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
2022
import { MdbPopoverComponent } from './popover.component';
2123
import { fromEvent, Subject } from 'rxjs';
2224
import { first, takeUntil } from 'rxjs/operators';
23-
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
25+
import { MdbPopoverPosition } from './popover.types';
2426

2527
@Directive({
2628
// eslint-disable-next-line @angular-eslint/directive-selector
@@ -29,40 +31,21 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
2931
})
3032
// eslint-disable-next-line @angular-eslint/component-class-suffix
3133
export class MdbPopoverDirective implements OnInit, OnDestroy {
34+
@Input({ transform: booleanAttribute }) animation = true;
35+
@Input({ transform: numberAttribute }) delayHide = 0;
36+
@Input({ transform: numberAttribute }) delayShow = 0;
3237
@Input() mdbPopover: TemplateRef<any> | string = '';
33-
@Input() mdbPopoverTitle = '';
3438
@Input() mdbPopoverData: any;
35-
36-
@Input()
37-
get popoverDisabled(): boolean {
38-
return this._popoverDisabled;
39-
}
40-
set popoverDisabled(value: boolean) {
41-
this._popoverDisabled = coerceBooleanProperty(value);
42-
}
43-
private _popoverDisabled = false;
44-
45-
@Input() placement = 'top';
46-
@Input() template: TemplateRef<any>;
47-
48-
@Input()
49-
get animation(): boolean {
50-
return this._animation;
51-
}
52-
set animation(value: boolean) {
53-
this._animation = coerceBooleanProperty(value);
54-
}
55-
private _animation = false;
56-
39+
@Input() mdbPopoverTitle = '';
40+
@Input({ transform: numberAttribute }) offset = 4;
41+
@Input() placement: MdbPopoverPosition = 'top';
42+
@Input({ transform: booleanAttribute }) popoverDisabled = false;
5743
@Input() trigger = 'click';
58-
@Input() delayShow = 0;
59-
@Input() delayHide = 0;
60-
@Input() offset = 4;
6144

62-
@Output() popoverShow: EventEmitter<MdbPopoverDirective> = new EventEmitter();
63-
@Output() popoverShown: EventEmitter<MdbPopoverDirective> = new EventEmitter();
64-
@Output() popoverHide: EventEmitter<MdbPopoverDirective> = new EventEmitter();
65-
@Output() popoverHidden: EventEmitter<MdbPopoverDirective> = new EventEmitter();
45+
@Output() popoverShow = new EventEmitter<MdbPopoverDirective>();
46+
@Output() popoverShown = new EventEmitter<MdbPopoverDirective>();
47+
@Output() popoverHide = new EventEmitter<MdbPopoverDirective>();
48+
@Output() popoverHidden = new EventEmitter<MdbPopoverDirective>();
6649

6750
private _overlayRef: OverlayRef;
6851
private _tooltipRef: ComponentRef<MdbPopoverComponent>;
@@ -212,7 +195,7 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
212195

213196
this._tooltipRef = this._overlayRef.attach(tooltipPortal);
214197

215-
this._tooltipRef.instance.content = this.template || this.mdbPopover;
198+
this._tooltipRef.instance.content = this.mdbPopover;
216199
this._tooltipRef.instance.title = this.mdbPopoverTitle;
217200
this._tooltipRef.instance.animation = this.animation;
218201
this._tooltipRef.instance.context = this.mdbPopoverData;
@@ -256,7 +239,4 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
256239
this.show();
257240
}
258241
}
259-
260-
static ngAcceptInputType_animation: BooleanInput;
261-
static ngAcceptInputType_popoverDisabled: BooleanInput;
262242
}

‎projects/mdb-angular-ui-kit/schematics/ng-add/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { addPackageToPackageJson } from './package';
66
// Just return the tree
77
export function ngAdd(options: Schema): Rule {
88
return (tree: Tree, context: SchematicContext) => {
9-
const angularDependencyVersion = '^16.0.0';
9+
const angularDependencyVersion = '^17.0.0';
1010

1111
addPackageToPackageJson(tree, '@angular/cdk', angularDependencyVersion);
1212
addPackageToPackageJson(tree, '@angular/forms', angularDependencyVersion);

0 commit comments

Comments
 (0)