Release 4.0.0

Author: idzark

CHANGELOG.md

@@ -1,3 +1,50 @@
+## 4.0.0 (09.01.2023)
+
+### Design updates:
+
+Our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to v4.0.0.
+
+Read [colors docs](https://mdbootstrap.com/docs/angular/content-styles/colors/) to learn more about new palette.
+
+### Breaking changes:
+
+- Added support for Angular 15, this Angular version is now required,
+- Improved [buttons](https://mdbootstrap.com/docs/angular/components/buttons/)
+- Improved existing [accordion](https://mdbootstrap.com/docs/angular/components/accordion/) and added new examples
+- Improved [stepper](https://mdbootstrap.com/docs/angular/components/stepper/) design
+- Improved [badges](https://mdbootstrap.com/docs/angular/components/badges/) design and added new examples
+- Improved [popovers](https://mdbootstrap.com/docs/angular/components/popovers/) and [popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) design
+- Removed default configuration of `chartjs-plugin-datalabels` from [charts](https://mdbootstrap.com/docs/angular/data/charts/), all plugins must be now registered before use
+
+### Fixes and improvements:
+
+- Resolved problem with [scrollbar](https://mdbootstrap.com/docs/angular/methods/scrollbar/) initialization on element with a `mdbScrollbar` directive
+- Removed unnecessary border animation on initialization of `mdb-form-control` component
+- Resolved problem with global registration of controllers and plugins in [charts](https://mdbootstrap.com/docs/angular/data/charts/)
+- Improved types in `mdbChart` directive inputs
+- Added some fixes to the [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+  - Improved 'select all' option implementation
+  - Resolved problems with value updates in search bar input
+  - Resolved problems with component view updates when using pagination
+- Improved theme styles in the following components:
+  - List group
+  - Pagination
+  - Datepicker
+
+### New:
+
+- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin
+- Addew new [multi item carousel plugin](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/)
+- Addew new [ecommerce gallery plugin](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/)
+- Addew new `[borderless]` input to [accordion](https://mdbootstrap.com/docs/angular/components/accordion/)
+- Added new `[withPush]` input to [dropdown](https://mdbootstrap.com/docs/angular/components/dropdown/)
+- Added new `[plugins]` input to [charts](https://mdbootstrap.com/docs/angular/data/charts/)
+- Added public access to the chart instance in `mdbChart` directive
+- Added new `[ofText]` input to [datatables](https://mdbootstrap.com/docs/angular/data/datatables/)
+- Added new `[titleSource]` and `[titleTarget]` inputs to [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+
+---
+
 ## 3.0.1 (05.12.2022)
 
 ### Fixes and improvements:
@@ -19,6 +66,7 @@
 
 ### New:
 
+- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/)
 - Addew new [scroll status plugin](https://mdbootstrap.com/docs/angular/plugins/scroll-status/)
 
 ---

README.md

@@ -1,4 +1,4 @@
-Bootstrap 5 & Angular 14 UI KIT - 700+ components, MIT license, simple installation.
+Bootstrap 5 & Angular 15 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 14
+## About Material Design for Bootstrap 5 & Angular 15
 
 <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>

README.txt

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -31,7 +31,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/jest": "13.0.3",
+    "@angular-builders/jest": "15.0.0",
     "@angular-devkit/build-angular": "^15.0.2",
     "@angular/cli": "^15.0.2",
     "@angular/compiler-cli": "^15.0.2",

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

@@ -1,3 +1,50 @@
+## 4.0.0 (09.01.2023)
+
+### Design updates:
+
+Our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to v4.0.0.
+
+Read [colors docs](https://mdbootstrap.com/docs/angular/content-styles/colors/) to learn more about new palette.
+
+### Breaking changes:
+
+- Added support for Angular 15, this Angular version is now required,
+- Improved [buttons](https://mdbootstrap.com/docs/angular/components/buttons/)
+- Improved existing [accordion](https://mdbootstrap.com/docs/angular/components/accordion/) and added new examples
+- Improved [stepper](https://mdbootstrap.com/docs/angular/components/stepper/) design
+- Improved [badges](https://mdbootstrap.com/docs/angular/components/badges/) design and added new examples
+- Improved [popovers](https://mdbootstrap.com/docs/angular/components/popovers/) and [popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) design
+- Removed default configuration of `chartjs-plugin-datalabels` from [charts](https://mdbootstrap.com/docs/angular/data/charts/), all plugins must be now registered before use
+
+### Fixes and improvements:
+
+- Resolved problem with [scrollbar](https://mdbootstrap.com/docs/angular/methods/scrollbar/) initialization on element with a `mdbScrollbar` directive
+- Removed unnecessary border animation on initialization of `mdb-form-control` component
+- Resolved problem with global registration of controllers and plugins in [charts](https://mdbootstrap.com/docs/angular/data/charts/)
+- Improved types in `mdbChart` directive inputs
+- Added some fixes to the [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+  - Improved 'select all' option implementation
+  - Resolved problems with value updates in search bar input
+  - Resolved problems with component view updates when using pagination
+- Improved theme styles in the following components:
+  - List group
+  - Pagination
+  - Datepicker
+
+### New:
+
+- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin
+- Addew new [multi item carousel plugin](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/)
+- Addew new [ecommerce gallery plugin](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/)
+- Addew new `[borderless]` input to [accordion](https://mdbootstrap.com/docs/angular/components/accordion/)
+- Added new `[withPush]` input to [dropdown](https://mdbootstrap.com/docs/angular/components/dropdown/)
+- Added new `[plugins]` input to [charts](https://mdbootstrap.com/docs/angular/data/charts/)
+- Added public access to the chart instance in `mdbChart` directive
+- Added new `[ofText]` input to [datatables](https://mdbootstrap.com/docs/angular/data/datatables/)
+- Added new `[titleSource]` and `[titleTarget]` inputs to [transfer plugin](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+
+---
+
 ## 3.0.1 (05.12.2022)
 
 ### Fixes and improvements:
@@ -19,6 +66,7 @@
 
 ### New:
 
+- Addew new [color picker plugin](https://mdbootstrap.com/docs/angular/plugins/color-picker/)
 - Addew new [scroll status plugin](https://mdbootstrap.com/docs/angular/plugins/scroll-status/)
 
 ---

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

@@ -63,6 +63,7 @@ export class MdbAccordionItemComponent implements OnInit {
   @Output() itemHidden: EventEmitter<MdbAccordionItemComponent> = new EventEmitter();
 
   @HostBinding('class.accordion-item') accordionItem = true;
+  @HostBinding('class.d-block') accordionItemDisplayBlock = true;
 
   ngOnInit(): void {
     this._isInitialized = true;

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

@@ -20,6 +20,15 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 export class MdbAccordionComponent implements AfterContentInit {
   @ContentChildren(MdbAccordionItemComponent) items: QueryList<MdbAccordionItemComponent>;
 
+  @Input()
+  get borderless(): boolean {
+    return this._borderless;
+  }
+  set borderless(value: boolean) {
+    this._borderless = coerceBooleanProperty(value);
+  }
+  private _borderless = false;
+
   @Input()
   get flush(): boolean {
     return this._flush;
@@ -39,6 +48,12 @@ export class MdbAccordionComponent implements AfterContentInit {
   private _multiple = false;
 
   @HostBinding('class.accordion') accordion = true;
+
+  @HostBinding('class.accordion-borderless')
+  get addBorderlessClass(): boolean {
+    return this.borderless;
+  }
+
   @HostBinding('class.accordion-flush')
   get addFlushClass(): boolean {
     return this.flush;
@@ -69,6 +84,7 @@ export class MdbAccordionComponent implements AfterContentInit {
     }
   }
 
+  static ngAcceptInputType_borderless: BooleanInput;
   static ngAcceptInputType_flush: BooleanInput;
   static ngAcceptInputType_multiple: BooleanInput;
 }

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

@@ -6,7 +6,7 @@ import { MdbAccordionModule } from './accordion.module';
 const ANIMATION_TIME = 350; // animation time from collapse directive
 
 const template = `
-<mdb-accordion [multiple]="multiple" [flush]="flush">
+<mdb-accordion [multiple]="multiple" [flush]="flush" [borderless]="borderless">
     <mdb-accordion-item>
         <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
         <ng-template mdbAccordionItemBody>
@@ -53,6 +53,7 @@ class TestAccordionComponent {
   @ViewChildren(MdbAccordionItemComponent) _accordionItems: QueryList<MdbAccordionItemComponent>;
   multiple = false;
   flush = false;
+  borderless = false;
 
   get accordionItems(): MdbAccordionItemComponent[] {
     return this._accordionItems.toArray();
@@ -172,6 +173,17 @@ describe('MDB Accordion', () => {
     expect(accordion.classList).toContain('accordion-flush');
   });
 
+  it('should add accordion-borderless class if borderless is set to true', () => {
+    const accordion = document.querySelector('.accordion');
+
+    expect(accordion.classList).not.toContain('accordion-borderless');
+
+    component.borderless = true;
+    fixture.detectChanges();
+
+    expect(accordion.classList).toContain('accordion-borderless');
+  });
+
   it('should emit correct events on item collapse and expand', fakeAsync(() => {
     const item = component.accordionItems[0];
 

projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss

@@ -252,7 +252,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions

projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss

@@ -25,7 +25,7 @@
   background-size: contain;
   border: $form-check-input-border;
   appearance: none;
-  color-adjust: exact; // Keep themed appearance for print
+  print-color-adjust: exact; // Keep themed appearance for print
   @include transition($form-check-transition);
 
   &[type='checkbox'] {

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

@@ -1,9 +1,5 @@
 // Accordion
 
-.accordion-item {
-  display: block;
-}
-
 .accordion-button {
   &:not(.collapsed) {
     &:focus {
@@ -17,3 +13,26 @@
     box-shadow: none;
   }
 }
+
+.accordion-flush {
+  .accordion-button:not(.collapsed) {
+    box-shadow: $accordion-flush-button-box-shadow;
+  }
+  .accordion-item {
+    border-bottom: $accordion-flush-item-border-bottom;
+  }
+}
+
+.accordion-borderless {
+  .accordion-item {
+    border: 0;
+    .accordion-button {
+      border-radius: $accordion-borderless-button-border-radius;
+      &:not(.collapsed) {
+        background-color: $accordion-borderless-button-bgc;
+        color: $accordion-borderless-button-color;
+        box-shadow: none;
+      }
+    }
+  }
+}

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

@@ -17,3 +17,22 @@
 .parent-alert-relative {
   position: relative;
 }
+
+@each $color, $value in $alerts {
+  .alert-#{$color} {
+    background-color: map-get($value, background-color);
+    color: map-get($value, text-color);
+
+    i {
+      color: map-get($value, icon-color);
+    }
+
+    .alert-link {
+      color: map-get($value, text-color);
+
+      &:hover {
+        color: shift-color(map-get($value, text-color), 20%);
+      }
+    }
+  }
+}

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

@@ -25,13 +25,13 @@
   padding: $badge-notification-padding-y $badge-notification-padding-x;
 }
 
-@each $name, $color in $badges {
-  .badge-#{$name} {
-    background-color: map-get($color, background-color);
-    color: map-get($color, text-color);
+@each $color, $value in $badges {
+  .badge-#{$color} {
+    background-color: map-get($value, background-color);
+    color: map-get($value, text-color);
 
     i {
-      color: map-get($color, icon-color);
+      color: map-get($value, icon-color);
     }
   }
 }