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();
+ }));
 });