Release 2.0.0

CHANGELOG.md

@@ -1,3 +1,27 @@
+## 2.0.0 (28.02.2022)
+
+### Breaking changes:
+
+- Added support for Angular 13, this Angular version is now required,
+- Sidenav - removed support for automatic item expansion based on an active link ([in our documentation](https://mdbootstrap.com/docs/b5/angular/navigation/sidenav/) you can find information on how to achieve this effect using methods provided by Angular Router).
+
+### Dependencies:
+
+- Updated Font Awesome to v6.0.0
+
+### Fixes and improvements:
+
+- Toasts/Alerts - resolved problem with positioning when stacking and position bottom options are used,
+- Select/Datepicker - resolved problems with input, label and icons styles when `form-white` class is used on `mdb-form-control` component,
+- Select - resolved problem with selection when multiple options have the same label (in some cases component incorrectly displayed option value instead of option label in input),
+- Datatable pagination - component will now display correct information when data source is empty.
+
+### New features:
+
+- Tabs - added new `[navColumnClass]` and `[contentColumnClass]` inputs that allow to customize width of the navigation and content sections in vertical mode.
+
+---
+
 ## 1.6.1 (24.01.2022)
 
 ### Optimization:

README.txt

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

package.json

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

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

@@ -1,3 +1,27 @@
+## 2.0.0 (28.02.2022)
+
+### Breaking changes:
+
+- Added support for Angular 13, this Angular version is now required,
+- Sidenav - removed support for automatic item expansion based on an active link ([in our documentation](https://mdbootstrap.com/docs/b5/angular/navigation/sidenav/) you can find information on how to achieve this effect using methods provided by Angular Router).
+
+### Dependencies:
+
+- Updated Font Awesome to v6.0.0
+
+### Fixes and improvements:
+
+- Toasts/Alerts - resolved problem with positioning when stacking and position bottom options are used,
+- Select/Datepicker - resolved problems with input, label and icons styles when `form-white` class is used on `mdb-form-control` component,
+- Select - resolved problem with selection when multiple options have the same label (in some cases component incorrectly displayed option value instead of option label in input),
+- Datatable pagination - component will now display correct information when data source is empty.
+
+### New features:
+
+- Tabs - added new `[navColumnClass]` and `[contentColumnClass]` inputs that allow to customize width of the navigation and content sections in vertical mode.
+
+---
+
 ## 1.6.1 (24.01.2022)
 
 ### Optimization:

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

@@ -64,10 +64,10 @@ describe('MDB Accordion', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [TestAccordionComponent],
-    imports: [MdbAccordionModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [TestAccordionComponent],
+      imports: [MdbAccordionModule],
+      teardown: { destroyAfterEach: false },
+    });
     fixture = TestBed.createComponent(TestAccordionComponent);
     fixture.detectChanges();
     component = fixture.componentInstance;

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

@@ -335,7 +335,7 @@
       margin-bottom: $fixed-action-btn-li-margin-bottom;
       margin-left: auto;
       &:first-of-type {
-        margin-top: $fixed-action-btn-li-margin-bottom / 2;
+        margin-top: $fixed-action-btn-li-margin-bottom * 0.5;
       }
     }
     a {

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

@@ -57,10 +57,10 @@ describe('MDB Carousel', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [CarouselTestComponent],
-    imports: [MdbCarouselModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [CarouselTestComponent],
+      imports: [MdbCarouselModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     fixture = TestBed.createComponent(CarouselTestComponent);
     component = fixture.componentInstance;

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

@@ -13,10 +13,10 @@ describe('MDB Checkbox', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [BasicCheckboxComponent],
-    imports: [MdbCheckboxModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [BasicCheckboxComponent],
+      imports: [MdbCheckboxModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     fixture = TestBed.createComponent(BasicCheckboxComponent);
     checkbox = fixture.componentInstance;

projects/mdb-angular-ui-kit/collapse/collapse.directive.spec.ts

@@ -27,10 +27,10 @@ describe('MDB Collapse', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [TestCollapseComponent],
-    imports: [MdbCollapseModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [TestCollapseComponent],
+      imports: [MdbCollapseModule],
+      teardown: { destroyAfterEach: false },
+    });
     fixture = TestBed.createComponent(TestCollapseComponent);
     fixture.detectChanges();
     component = fixture.componentInstance;

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

@@ -3,7 +3,7 @@ import { Component, DebugElement } from '@angular/core';
 import { MdbDropdownModule } from './index';
 import { MdbDropdownDirective } from './index';
 import { By } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { OverlayContainer } from '@angular/cdk/overlay';
 
 describe('MDB Dropdown', () => {
@@ -18,10 +18,10 @@ describe('MDB Dropdown', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-    imports: [MdbDropdownModule, BrowserAnimationsModule],
-    declarations: [TestDropdownComponent],
-    teardown: { destroyAfterEach: false }
-});
+        imports: [MdbDropdownModule, NoopAnimationsModule],
+        declarations: [TestDropdownComponent],
+        teardown: { destroyAfterEach: false },
+      });
 
       inject([OverlayContainer], (container: OverlayContainer) => {
         overlayContainer = container;

projects/mdb-angular-ui-kit/forms/form-control.spec.ts

@@ -12,10 +12,10 @@ describe('MDB Checkbox', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [BasicFormControlComponent],
-    imports: [MdbFormsModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [BasicFormControlComponent],
+      imports: [MdbFormsModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     fixture = TestBed.createComponent(BasicFormControlComponent);
     component = fixture.componentInstance;

projects/mdb-angular-ui-kit/forms/input.spec.ts

@@ -10,10 +10,10 @@ describe('MDB Checkbox', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [BasicInputComponent],
-    imports: [MdbFormsModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [BasicInputComponent],
+      imports: [MdbFormsModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     fixture = TestBed.createComponent(BasicInputComponent);
     component = fixture.componentInstance;

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

@@ -5,9 +5,9 @@ import { MdbModalContainerComponent } from './modal-container.component';
 import { MdbModalService } from './modal.service';
 
 @NgModule({
-    imports: [OverlayModule, PortalModule],
-    exports: [MdbModalContainerComponent],
-    declarations: [MdbModalContainerComponent],
-    providers: [MdbModalService]
+  imports: [OverlayModule, PortalModule],
+  exports: [MdbModalContainerComponent],
+  declarations: [MdbModalContainerComponent],
+  providers: [MdbModalService],
 })
 export class MdbModalModule {}

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

@@ -40,8 +40,8 @@ class BasicModalComponent {
 }
 
 @NgModule({
-    declarations: [BasicModalComponent],
-    imports: [BrowserModule]
+  declarations: [BasicModalComponent],
+  imports: [BrowserModule],
 })
 class TestModalModule {}
 
@@ -53,9 +53,9 @@ describe('MDB Modal', () => {
 
   beforeEach(fakeAsync(() => {
     const module = TestBed.configureTestingModule({
-    imports: [MdbModalModule, TestModalModule],
-    teardown: { destroyAfterEach: false }
-});
+      imports: [MdbModalModule, TestModalModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     TestBed.compileComponents();
     fixture = module.createComponent(BasicModalComponent);

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

@@ -1,18 +1,24 @@
 {
   "name": "mdb-angular-ui-kit",
   "repository": "https://github.com/mdbootstrap/mdb-angular-ui-kit",
+  "homepage": "https://mdbootstrap.com/docs/b5/angular/",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "1.6.1",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/common": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/animations": "^12.0.0",
-    "@angular/forms": "^12.0.0",
-    "@angular/cdk": "^12.0.0"
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@angular/animations": "^13.0.0",
+    "@angular/forms": "^13.0.0",
+    "@angular/cdk": "^13.0.0"
   },
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "tslib": "^2.0.0"
+  },
+  "exports": {
+    "./assets/scss/mdb.scss": {
+      "sass": "./assets/scss/mdb.scss"
+    }
   }
 }

projects/mdb-angular-ui-kit/popover/popover.component.html

@@ -8,7 +8,7 @@
     {{ title }}
   </div>
   <div *ngIf="isContentTemplate" class="popover-body">
-    <ng-container [ngTemplateOutlet]="content"></ng-container>
+    <ng-container [ngTemplateOutlet]="$any(content)"></ng-container>
   </div>
   <div *ngIf="!isContentTemplate" class="popover-body">
     {{ content }}

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

@@ -5,7 +5,7 @@ import { MdbPopoverDirective } from './popover.directive';
 import { MdbPopoverComponent } from './popover.component';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('MDB Popover', () => {
   describe('after init', () => {
@@ -16,10 +16,10 @@ describe('MDB Popover', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-    imports: [MdbPopoverModule, BrowserAnimationsModule],
-    declarations: [TestPopoverComponent],
-    teardown: { destroyAfterEach: false }
-}).overrideModule(BrowserDynamicTestingModule, {
+        imports: [MdbPopoverModule, NoopAnimationsModule],
+        declarations: [TestPopoverComponent],
+        teardown: { destroyAfterEach: false },
+      }).overrideModule(BrowserDynamicTestingModule, {
         set: {
           entryComponents: [MdbPopoverComponent],
         },
@@ -98,10 +98,10 @@ describe('MDB Popover', () => {
       let element: any;
 
       TestBed.configureTestingModule({
-    imports: [MdbPopoverModule, BrowserAnimationsModule],
-    declarations: [TestPopoverComponent2],
-    teardown: { destroyAfterEach: false }
-}).overrideModule(BrowserDynamicTestingModule, {
+        imports: [MdbPopoverModule, NoopAnimationsModule],
+        declarations: [TestPopoverComponent2],
+        teardown: { destroyAfterEach: false },
+      }).overrideModule(BrowserDynamicTestingModule, {
         set: {
           entryComponents: [MdbPopoverComponent],
         },
@@ -139,10 +139,10 @@ describe('MDB Popover', () => {
       let element: any;
 
       TestBed.configureTestingModule({
-    imports: [MdbPopoverModule, BrowserAnimationsModule],
-    declarations: [TestPopoverComponent3],
-    teardown: { destroyAfterEach: false }
-}).overrideModule(BrowserDynamicTestingModule, {
+        imports: [MdbPopoverModule, NoopAnimationsModule],
+        declarations: [TestPopoverComponent3],
+        teardown: { destroyAfterEach: false },
+      }).overrideModule(BrowserDynamicTestingModule, {
         set: {
           entryComponents: [MdbPopoverComponent],
         },

projects/mdb-angular-ui-kit/popover/public_api.ts

@@ -1,3 +1,4 @@
 export { MdbPopoverDirective } from './popover.directive';
 export { MdbPopoverModule } from './popover.module';
 export { MdbPopoverPosition } from './popover.types';
+export { MdbPopoverComponent } from './popover.component';

projects/mdb-angular-ui-kit/radio/radio-group.directive.spec.ts

@@ -9,10 +9,10 @@ describe('MDB Checkbox', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [BasicRadioGroupComponent],
-    imports: [MdbRadioModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [BasicRadioGroupComponent],
+      imports: [MdbRadioModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     fixture = TestBed.createComponent(BasicRadioGroupComponent);
     component = fixture.componentInstance;

projects/mdb-angular-ui-kit/radio/radio.directive.spec.ts

@@ -9,10 +9,10 @@ describe('MDB Checkbox', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [BasicRadioComponent],
-    imports: [MdbRadioModule],
-    teardown: { destroyAfterEach: false }
-});
+      declarations: [BasicRadioComponent],
+      imports: [MdbRadioModule],
+      teardown: { destroyAfterEach: false },
+    });
 
     fixture = TestBed.createComponent(BasicRadioComponent);
     component = fixture.componentInstance;