Skip to content

Commit 95ef4ef

Browse files
author
a.idzikowski
committed
Release 1.0.0
1 parent ac1f193 commit 95ef4ef

29 files changed

+587
-14
lines changed

‎CHANGELOG.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
1+
## 1.0.0 (09.08.2021)
2+
3+
In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.
4+
5+
### Breaking changes:
6+
7+
- Inputs - removed `margin-bottom` styles from inputs with validation classes.
8+
9+
### Fixes and improvements:
10+
11+
- Select - dropdown will be correctly removed on component destroy,
12+
- Select - resolved problem with select-all option state on component initialization,
13+
- Select - resolved problem with selection of options with false values,
14+
- Dropdown - resolved problem with opening component on icon click,
15+
- Toasts/Alerts - resolved problem with z-index,
16+
- Popconfirm - resolved problem with `onClose` and `onConfirm` events,
17+
- Loading management - backdrop will be correctly removed on component destroy when fullscreen option is used,
18+
- Timepicker - resolved problem with setting default value using Angular form controls,
19+
- Datepicker - previous/next button disabled state will be now correctly updated on component initialization,
20+
- Datepicker/Timepicker - click on toggle button will no longer submit form,
21+
- Datepicker/Timepicker - resolved problems with `valueChanges` event and validation status updates,
22+
- Datatables - resolved problem with scroll position when component is rendered inside a tab.
23+
24+
### New components:
25+
26+
- [Accordion](https://mdbootstrap.com/docs/b5/angular/components/accordion/)
27+
- [Charts advanced](https://mdbootstrap.com/docs/b5/angular/data/charts-advanced/)
28+
- [Lightbox](https://mdbootstrap.com/docs/b5/angular/components/lightbox/)
29+
- [Smooth scroll](https://mdbootstrap.com/docs/b5/angular/methods/smooth-scroll/)
30+
31+
---
32+
133
## 1.0.0-beta8 (12.07.2021)
234

335
In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# MDB 5 Angular
44

5-
### Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT
5+
### Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT
66

77
**[>> Get Started in 4 steps](https://mdbootstrap.com/docs/b5/angular/getting-started/installation/)**
88

‎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 1.0.0 Beta 8
3+
Version: FREE 1.0.0
44

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

‎package-lock.json

Lines changed: 1 addition & 1 deletion
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": "1.0.0-beta8",
3+
"version": "1.0.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
1+
## 1.0.0 (09.08.2021)
2+
3+
In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.
4+
5+
### Breaking changes:
6+
7+
- Inputs - removed `margin-bottom` styles from inputs with validation classes.
8+
9+
### Fixes and improvements:
10+
11+
- Select - dropdown will be correctly removed on component destroy,
12+
- Select - resolved problem with select-all option state on component initialization,
13+
- Select - resolved problem with selection of options with false values,
14+
- Dropdown - resolved problem with opening component on icon click,
15+
- Toasts/Alerts - resolved problem with z-index,
16+
- Popconfirm - resolved problem with `onClose` and `onConfirm` events,
17+
- Loading management - backdrop will be correctly removed on component destroy when fullscreen option is used,
18+
- Timepicker - resolved problem with setting default value using Angular form controls,
19+
- Datepicker - previous/next button disabled state will be now correctly updated on component initialization,
20+
- Datepicker/Timepicker - click on toggle button will no longer submit form,
21+
- Datepicker/Timepicker - resolved problems with `valueChanges` event and validation status updates,
22+
- Datatables - resolved problem with scroll position when component is rendered inside a tab.
23+
24+
### New components:
25+
26+
- [Accordion](https://mdbootstrap.com/docs/b5/angular/components/accordion/)
27+
- [Charts advanced](https://mdbootstrap.com/docs/b5/angular/data/charts-advanced/)
28+
- [Lightbox](https://mdbootstrap.com/docs/b5/angular/components/lightbox/)
29+
- [Smooth scroll](https://mdbootstrap.com/docs/b5/angular/methods/smooth-scroll/)
30+
31+
---
32+
133
## 1.0.0-beta8 (12.07.2021)
234

335
In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
# MDB 5 Angular
44

5-
### Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT
5+
### Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT
66

77
**[>> Get Started in 4 steps](https://mdbootstrap.com/docs/b5/angular/getting-started/installation/)**
88

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, InjectionToken, TemplateRef } from '@angular/core';
2+
3+
export const MDB_ACCORDION_ITEM_BODY = new InjectionToken<MdbAccordionItemBodyDirective>(
4+
'MdbAccordionItemBodyDirective'
5+
);
6+
7+
@Directive({
8+
// eslint-disable-next-line @angular-eslint/directive-selector
9+
selector: '[mdbAccordionItemBody]',
10+
providers: [{ provide: MDB_ACCORDION_ITEM_BODY, useExisting: MdbAccordionItemBodyDirective }],
11+
})
12+
export class MdbAccordionItemBodyDirective {
13+
constructor(public template: TemplateRef<any>) {}
14+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, InjectionToken, TemplateRef } from '@angular/core';
2+
3+
export const MDB_ACCORDION_ITEM_HEADER = new InjectionToken<MdbAccordionItemHeaderDirective>(
4+
'MdbAccordionItemHeaderDirective'
5+
);
6+
7+
@Directive({
8+
// eslint-disable-next-line @angular-eslint/directive-selector
9+
selector: '[mdbAccordionItemHeader]',
10+
providers: [{ provide: MDB_ACCORDION_ITEM_HEADER, useExisting: MdbAccordionItemHeaderDirective }],
11+
})
12+
export class MdbAccordionItemHeaderDirective {
13+
constructor(public template: TemplateRef<any>) {}
14+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<h2 class="accordion-header" [id]="_headerId">
2+
<button
3+
class="accordion-button"
4+
type="button"
5+
[attr.aria-expanded]="!_collapsed"
6+
[attr.aria-controls]="id"
7+
[class.collapsed]="_addCollapsedClass"
8+
(click)="toggle()"
9+
>
10+
{{ header }}
11+
<ng-template *ngIf="_headerTemplate" [ngTemplateOutlet]="_headerTemplate"></ng-template>
12+
</button>
13+
</h2>
14+
<div
15+
mdbCollapse
16+
(collapseShow)="onShow()"
17+
(collapseHide)="onHide()"
18+
(collapseShow)="onShown()"
19+
(collapseHide)="onHidden()"
20+
[attr.id]="id"
21+
[attr.aria-labelledby]="_headerId"
22+
>
23+
<div class="accordion-body">
24+
<ng-template *ngIf="_bodyTemplate" [ngTemplateOutlet]="_bodyTemplate"></ng-template>
25+
</div>
26+
</div>

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
ChangeDetectorRef,
4+
Component,
5+
ContentChild,
6+
EventEmitter,
7+
HostBinding,
8+
Input,
9+
OnInit,
10+
Output,
11+
TemplateRef,
12+
ViewChild,
13+
} from '@angular/core';
14+
import { MdbCollapseDirective } from 'mdb-angular-ui-kit/collapse';
15+
import { Subject } from 'rxjs';
16+
import { MDB_ACCORDION_ITEM_BODY } from './accordion-item-content.directive';
17+
import { MDB_ACCORDION_ITEM_HEADER } from './accordion-item-header.directive';
18+
19+
let uniqueHeaderId = 0;
20+
let uniqueId = 0;
21+
22+
@Component({
23+
selector: 'mdb-accordion-item',
24+
templateUrl: './accordion-item.component.html',
25+
changeDetection: ChangeDetectionStrategy.OnPush,
26+
})
27+
export class MdbAccordionItemComponent implements OnInit {
28+
@ContentChild(MDB_ACCORDION_ITEM_HEADER, { read: TemplateRef, static: true })
29+
_headerTemplate: TemplateRef<any>;
30+
31+
@ContentChild(MDB_ACCORDION_ITEM_BODY, { read: TemplateRef, static: true })
32+
_bodyTemplate: TemplateRef<any>;
33+
34+
@ViewChild(MdbCollapseDirective, { static: true }) collapse: MdbCollapseDirective;
35+
36+
@Input() header: string;
37+
@Input()
38+
set collapsed(value: boolean) {
39+
if (!this._isInitialized) {
40+
if (!value) {
41+
this._shouldOpenOnInit = true;
42+
}
43+
return;
44+
}
45+
46+
if (value) {
47+
this.hide();
48+
} else {
49+
this.show();
50+
}
51+
}
52+
53+
@Input() id = `mdb-accordion-item-${uniqueId++}`;
54+
55+
_headerId = `mdb-accordion-item-header-${uniqueHeaderId++}`;
56+
57+
private _isInitialized = false;
58+
private _shouldOpenOnInit = false;
59+
60+
@Output() itemShow: EventEmitter<MdbAccordionItemComponent> = new EventEmitter();
61+
@Output() itemShown: EventEmitter<MdbAccordionItemComponent> = new EventEmitter();
62+
@Output() itemHide: EventEmitter<MdbAccordionItemComponent> = new EventEmitter();
63+
@Output() itemHidden: EventEmitter<MdbAccordionItemComponent> = new EventEmitter();
64+
65+
@HostBinding('class.accordion-item') accordionItem = true;
66+
67+
ngOnInit(): void {
68+
this._isInitialized = true;
69+
70+
if (this._shouldOpenOnInit) {
71+
this.show();
72+
}
73+
}
74+
75+
show$ = new Subject<MdbAccordionItemComponent>();
76+
77+
_collapsed = true;
78+
_addCollapsedClass = true;
79+
80+
constructor(private _cdRef: ChangeDetectorRef) {}
81+
82+
toggle(): void {
83+
this.collapse.toggle();
84+
}
85+
86+
show(): void {
87+
this.collapse.show();
88+
this._cdRef.markForCheck();
89+
}
90+
91+
hide(): void {
92+
this.collapse.hide();
93+
this._cdRef.markForCheck();
94+
}
95+
96+
onShow(): void {
97+
this._addCollapsedClass = false;
98+
this.itemShow.emit(this);
99+
100+
this.show$.next(this);
101+
}
102+
103+
onHide(): void {
104+
this._addCollapsedClass = true;
105+
this.itemHide.emit(this);
106+
}
107+
108+
onShown(): void {
109+
this._collapsed = false;
110+
this.itemShown.emit(this);
111+
}
112+
113+
onHidden(): void {
114+
this._collapsed = true;
115+
this.itemHidden.emit(this);
116+
}
117+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
AfterContentInit,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ContentChildren,
6+
HostBinding,
7+
Input,
8+
QueryList,
9+
} from '@angular/core';
10+
import { startWith, switchMap } from 'rxjs/operators';
11+
import { merge } from 'rxjs';
12+
import { MdbAccordionItemComponent } from './accordion-item.component';
13+
14+
@Component({
15+
selector: 'mdb-accordion',
16+
templateUrl: './accordion.component.html',
17+
changeDetection: ChangeDetectionStrategy.OnPush,
18+
})
19+
export class MdbAccordionComponent implements AfterContentInit {
20+
@ContentChildren(MdbAccordionItemComponent) items: QueryList<MdbAccordionItemComponent>;
21+
22+
@Input() flush = false;
23+
@Input() multiple = false;
24+
25+
@HostBinding('class.accordion') accordion = true;
26+
@HostBinding('class.accordion-flush')
27+
get addFlushClass(): boolean {
28+
return this.flush;
29+
}
30+
31+
constructor() {}
32+
33+
ngAfterContentInit(): void {
34+
this.items.changes
35+
.pipe(
36+
startWith(this.items),
37+
switchMap((items: QueryList<MdbAccordionItemComponent>) => {
38+
return merge(...items.map((item: MdbAccordionItemComponent) => item.show$));
39+
})
40+
)
41+
.subscribe((clickedItem: MdbAccordionItemComponent) =>
42+
this._handleMultipleItems(clickedItem)
43+
);
44+
}
45+
46+
private _handleMultipleItems(clickedItem: MdbAccordionItemComponent): void {
47+
if (!this.multiple) {
48+
const itemsToClose = this.items.filter(
49+
(item: MdbAccordionItemComponent) => item !== clickedItem && !item._collapsed
50+
);
51+
52+
itemsToClose.forEach((item: MdbAccordionItemComponent) => item.hide());
53+
}
54+
}
55+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { MdbAccordionComponent } from './accordion.component';
4+
import { MdbAccordionItemComponent } from './accordion-item.component';
5+
import { MdbAccordionItemHeaderDirective } from './accordion-item-header.directive';
6+
import { MdbAccordionItemBodyDirective } from './accordion-item-content.directive';
7+
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
8+
9+
@NgModule({
10+
declarations: [
11+
MdbAccordionComponent,
12+
MdbAccordionItemComponent,
13+
MdbAccordionItemHeaderDirective,
14+
MdbAccordionItemBodyDirective,
15+
],
16+
imports: [CommonModule, MdbCollapseModule],
17+
exports: [
18+
MdbAccordionComponent,
19+
MdbAccordionItemComponent,
20+
MdbAccordionItemHeaderDirective,
21+
MdbAccordionItemBodyDirective,
22+
],
23+
})
24+
export class MdbAccordionModule {}

0 commit comments

Comments
 (0)