Release 2.3.0

CHANGELOG.md

@@ -1,3 +1,34 @@
+## 2.3.0 (27.06.2022)
+
+### Fixes and improvements
+
+- [Sidenav](https://mdbootstrap.com/docs/b5/angular/navigation/sidenav/)
+  - Resolved problems with arrow position updates in slim mode and accordion mode
+  - Resolved problem with initialization of component with `[right]="true"` and `[hidden]="false"` options
+  - Fixed problem with long content display in component with `[right]="true"` option
+- Fixed problems with long label positioning in [checkbox](https://mdbootstrap.com/docs/b5/angular/forms/checkbox/), [switch](https://mdbootstrap.com/docs/b5/angular/forms/switch/) and [radio](https://mdbootstrap.com/docs/b5/angular/forms/radio/)
+- Resolved problem with multiple `paginationChange` events emitted on [datatable](https://mdbootstrap.com/docs/b5/angular/data/datatables/) initialization
+- Resolved problems with [pagination](https://mdbootstrap.com/docs/b5/angular/navigation/pagination/) and [accordion](https://mdbootstrap.com/docs/b5/angular/components/accordion/) styles when using [theme](https://mdbootstrap.com/docs/b5/angular/content-styles/theme/)
+- Fixed problem with max file quantity in [file upload](https://mdbootstrap.com/docs/b5/angular/plugins/file-upload/) plugin with `multiple` mode
+- Resolved problem with first option highlight in [select](https://mdbootstrap.com/docs/b5/angular/forms/select/) with a `[highlightFirst]="false"` option
+- Added `type="button"` to the 'insert horizontal line' button in [WYSIWYG](https://mdbootstrap.com/docs/b5/angular/plugins/wysiwyg-editor/) to resolve problem with form submit
+- Zero-length [tooltip](https://mdbootstrap.com/docs/b5/angular/components/tooltips/) and [popover](https://mdbootstrap.com/docs/b5/angular/components/popovers/) will no longer be displayed
+- Fixed problem with multiple `(selected)` events emitted after click on [autocomplete](https://mdbootstrap.com/docs/b5/angular/forms/autocomplete/) option
+
+### New
+
+- Addew new [onboarding plugin](https://mdbootstrap.com/docs/b5/angular/plugins/onboarding/)
+- [Stepper](https://mdbootstrap.com/docs/b5/angular/components/stepper/)
+  - Added possibility to block step navigation on step header click
+  - Added possibility to edit buttons and header text in mobile mode
+- Added new `--mdb-bg-opacity` CSS variable
+- Added optional auto select on tab-out in [select](https://mdbootstrap.com/docs/b5/angular/forms/select/) and [autocomplete](https://mdbootstrap.com/docs/b5/angular/forms/autocomplete/)
+- Added list group new variant with `.list-group-light` class
+- Added `.table-group-divider` and `.table-divider-color` classes to emphasize the separation of thead from tbody
+- Added new `.divider-horizontal`, `.divider-vertical`, `.divider-horizontal-blurry` and `.divider-vertical-blurry` classes
+
+---
+
 ## 2.2.0 (16.05.2022)
 
 ### Fixes and improvements:

README.txt

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

package.json

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

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

@@ -1,3 +1,34 @@
+## 2.3.0 (27.06.2022)
+
+### Fixes and improvements
+
+- [Sidenav](https://mdbootstrap.com/docs/b5/angular/navigation/sidenav/)
+  - Resolved problems with arrow position updates in slim mode and accordion mode
+  - Resolved problem with initialization of component with `[right]="true"` and `[hidden]="false"` options
+  - Fixed problem with long content display in component with `[right]="true"` option
+- Fixed problems with long label positioning in [checkbox](https://mdbootstrap.com/docs/b5/angular/forms/checkbox/), [switch](https://mdbootstrap.com/docs/b5/angular/forms/switch/) and [radio](https://mdbootstrap.com/docs/b5/angular/forms/radio/)
+- Resolved problem with multiple `paginationChange` events emitted on [datatable](https://mdbootstrap.com/docs/b5/angular/data/datatables/) initialization
+- Resolved problems with [pagination](https://mdbootstrap.com/docs/b5/angular/navigation/pagination/) and [accordion](https://mdbootstrap.com/docs/b5/angular/components/accordion/) styles when using [theme](https://mdbootstrap.com/docs/b5/angular/content-styles/theme/)
+- Fixed problem with max file quantity in [file upload](https://mdbootstrap.com/docs/b5/angular/plugins/file-upload/) plugin with `multiple` mode
+- Resolved problem with first option highlight in [select](https://mdbootstrap.com/docs/b5/angular/forms/select/) with a `[highlightFirst]="false"` option
+- Added `type="button"` to the 'insert horizontal line' button in [WYSIWYG](https://mdbootstrap.com/docs/b5/angular/plugins/wysiwyg-editor/) to resolve problem with form submit
+- Zero-length [tooltip](https://mdbootstrap.com/docs/b5/angular/components/tooltips/) and [popover](https://mdbootstrap.com/docs/b5/angular/components/popovers/) will no longer be displayed
+- Fixed problem with multiple `(selected)` events emitted after click on [autocomplete](https://mdbootstrap.com/docs/b5/angular/forms/autocomplete/) option
+
+### New
+
+- Addew new [onboarding plugin](https://mdbootstrap.com/docs/b5/angular/plugins/onboarding/)
+- [Stepper](https://mdbootstrap.com/docs/b5/angular/components/stepper/)
+  - Added possibility to block step navigation on step header click
+  - Added possibility to edit buttons and header text in mobile mode
+- Added new `--mdb-bg-opacity` CSS variable
+- Added optional auto select on tab-out in [select](https://mdbootstrap.com/docs/b5/angular/forms/select/) and [autocomplete](https://mdbootstrap.com/docs/b5/angular/forms/autocomplete/)
+- Added list group new variant with `.list-group-light` class
+- Added `.table-group-divider` and `.table-divider-color` classes to emphasize the separation of thead from tbody
+- Added new `.divider-horizontal`, `.divider-vertical`, `.divider-horizontal-blurry` and `.divider-vertical-blurry` classes
+
+---
+
 ## 2.2.0 (16.05.2022)
 
 ### Fixes and improvements:

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

@@ -8,3 +8,36 @@
     transition: 0.5s;
   }
 }
+
+.list-group-light {
+  .list-group-item {
+    padding: 1rem 0;
+    border: 2px solid hsl(0, 0%, 96%);
+  }
+  > .list-group-item {
+    border-width: 0 0 2px;
+    &:last-of-type {
+      border: none;
+    }
+  }
+  .active {
+    border: none;
+    border-radius: 0.5rem;
+    background-color: hsl(217, 88.2%, 90%);
+    color: hsl(217, 88.8%, 35.1%);
+  }
+  .list-group-item-action {
+    &:hover {
+      border-radius: 0.5rem;
+    }
+    &:focus {
+      border-radius: 0.5rem;
+    }
+  }
+}
+
+.list-group-small {
+  .list-group-item {
+    padding: 0.5rem 0;
+  }
+}

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

@@ -1,3 +1,4 @@
 :root {
   --mdb-font-roboto: #{inspect($font-family-roboto)};
+  --mdb-bg-opacity: 1;
 }

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

@@ -42,3 +42,12 @@
     background-color: var(--#{$variable-prefix}table-hover-bg);
   }
 }
+
+.table-group-divider {
+  border-top: (2 * $table-border-width) solid;
+  border-top-color: inherit;
+}
+
+.table-divider-color {
+  border-top-color: rgba(0, 0, 0, 0.1);
+}

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

@@ -174,3 +174,34 @@ $utilities: map-merge(
     ),
   )
 );
+
+hr.divider-horizontal:not([size]) {
+  height: 2px;
+}
+
+.divider-horizontal {
+  opacity: 1;
+  background-color: #f5f5f5;
+  height: 2px;
+}
+
+.divider-vertical {
+  opacity: 1;
+  background-color: #f5f5f5;
+  display: inline-block;
+  width: 2px;
+  margin: 0 1rem;
+}
+
+hr.divider-horizontal-blurry {
+  background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent);
+  background-color: transparent;
+}
+
+hr.divider-vertical-blurry {
+  background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent);
+  background-color: transparent;
+  width: 1px;
+  top: 0;
+  right: 0;
+}

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

@@ -83,7 +83,7 @@
   &[type='checkbox'] {
     border-radius: $form-check-input-checkbox-border-radius;
     margin-top: 0.19em;
-    margin-right: 8px;
+    margin-right: 4px;
 
     &:focus {
       &:after {
@@ -153,7 +153,7 @@
     width: $form-check-input-radio-width;
     height: $form-check-input-radio-height;
     margin-top: 0.125em;
-    margin-right: 6px;
+    margin-right: 4px;
 
     &:before {
       width: $form-check-input-radio-before-width;
@@ -214,7 +214,7 @@
     height: $form-switch-form-check-input-height;
     background-color: $form-switch-form-check-input-background-color;
     margin-top: 0.3em;
-    margin-right: 8px;
+    margin-right: 4px;
 
     &:after {
       content: '';

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

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { MdbCollapseDirective } from '.';
 import { MdbCollapseModule } from './collapse.module';
 
 const template = `
   <button id="button" (click)="collapse.toggle()">Button</button>
-  <div mdbCollapse #collapse="mdbCollapse" class="collapse" [collapsed]="collapsed" (collapseShown)="onShown()" (collapseHidden)="onHidden()">
+  <div mdbCollapse #collapse="mdbCollapse" class="collapse" [collapsed]="collapsed">
     Collapse directive content
   </div>
 `;
@@ -14,12 +15,13 @@ const template = `
   template,
 })
 class TestCollapseComponent {
+  @ViewChild('collapse') collapse: MdbCollapseDirective;
+
   collapsed = true;
-  onShown = () => {};
-  onHidden = () => {};
 }
 
 describe('MDB Collapse', () => {
+  const ANIMATION_TIME = 355;
   let fixture: ComponentFixture<TestCollapseComponent>;
   let element: any;
   let component: any;
@@ -42,28 +44,68 @@ describe('MDB Collapse', () => {
     expect(collapse.classList.contains('show')).toBe(false);
   });
 
-  it('should have content expanded if collapsed input is set to false', () => {
-    // const onShownSpy = jest.spyOn(component, 'onShown');
-    // component.collapsed = false;
-    // fixture.detectChanges();
-    // onShownSpy.and.callFake(() => {
-    //   expect(collapse.classList.contains('show')).toBe(true);
-    // });
-  });
+  it('should be expanded if collapsed input is set to false', fakeAsync(() => {
+    component.collapsed = false;
+    fixture.detectChanges();
 
-  it('should allow toggling component by clicking on another element', () => {
-    // const onShownSpy = jest.spyOn(component, 'onShown');
-    // const onHiddenSpy = jest.spyOn(component, 'onHidden');
-    // const buttonEl = fixture.nativeElement.querySelector('#button');
-    // buttonEl.click();
-    // fixture.detectChanges();
-    // onShownSpy.and.callFake(() => {
-    //   expect(collapse.classList.contains('show')).toBe(true);
-    // });
-    // buttonEl.click();
-    // fixture.detectChanges();
-    // onHiddenSpy.and.callFake(() => {
-    //   expect(collapse.classList.contains('show')).toBe(false);
-    // });
-  });
+    tick(ANIMATION_TIME);
+    flush();
+    fixture.detectChanges();
+
+    expect(collapse.classList).toContain('show');
+  }));
+
+  it('should allow toggling component by clicking on another element', fakeAsync(() => {
+    const button = fixture.nativeElement.querySelector('button');
+
+    expect(collapse.classList).not.toContain('show');
+
+    button.click();
+    fixture.detectChanges();
+
+    tick(ANIMATION_TIME);
+    flush();
+    fixture.detectChanges();
+
+    expect(collapse.classList).toContain('show');
+
+    button.click();
+    fixture.detectChanges();
+
+    tick(ANIMATION_TIME);
+    flush();
+    fixture.detectChanges();
+
+    expect(collapse.classList).not.toContain('show');
+  }));
+
+  it('should emit events on collapse and expand', fakeAsync(() => {
+    const button = fixture.nativeElement.querySelector('button');
+    const showSpy = jest.spyOn(component.collapse.collapseShow, 'emit');
+    const shownSpy = jest.spyOn(component.collapse.collapseShown, 'emit');
+    const hideSpy = jest.spyOn(component.collapse.collapseHide, 'emit');
+    const hiddenSpy = jest.spyOn(component.collapse.collapseHidden, 'emit');
+
+    button.click();
+    fixture.detectChanges();
+
+    expect(showSpy).toHaveBeenCalled();
+
+    tick(ANIMATION_TIME);
+    flush();
+    fixture.detectChanges();
+
+    expect(shownSpy).toHaveBeenCalled();
+
+    button.click();
+    fixture.detectChanges();
+
+    expect(hideSpy).toHaveBeenCalled();
+
+    tick(ANIMATION_TIME);
+    flush();
+    fixture.detectChanges();
+
+    expect(hiddenSpy).toHaveBeenCalled();
+  }));
 });