Release 13.0.0

Author: a.idzikowski

angular-bootstrap-md-12.2.0.tgz

@@ -1,3 +1,22 @@
+13.0.0
+
+In version 13.0.0 we added support for Angular 13 and Font Awesome 6. Check what changed below:
+
+**Breaking changes:**
+
+* Added support for Angular 13, this Angular version is now required,
+* Checkbox - changed id input name to checkboxId,
+* Checkbox - styles will be loaded with other core global styles. This will allow you to use checkbox not only as mdb-checkboxcomponent, but also as a standard HTML element with material styles. The mdb-checkbox offers more features but cancause someperformance problems after adding many elements in one application view.
+
+**Dependencies:**
+
+* Updated Font Awesome to v6.0.0.
+
+**Fixes:**
+
+* Added type coercion for boolean and number inputs to resolve problems with inputs types,
+* Select - resolved problem with option type.
+
 12.2.0
 In version 12.2.0 we updated Bootstrap to v4.6.1 and added some fixes and new features for the existing components. Check what changed below:
 

angular-bootstrap-md-13.0.0.tgz

@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-md-lib",
-  "version": "12.2.0",
+  "version": "13.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -10,8 +10,8 @@
     "e2e": "ng e2e",
     "copy-scss": "cp -r projects/angular-bootstrap-md/src/lib/assets dist/angular-bootstrap-md/assets",
     "copy-files": "cp projects/angular-bootstrap-md/src/lib/changelog projects/angular-bootstrap-md/src/lib/License.pdf README.md dist/angular-bootstrap-md",
-    "pack-archive": "cd dist/angular-bootstrap-md && npm pack . && cp angular-bootstrap-md-12.*.tgz ../..",
-    "remove-archive": "rm dist/angular-bootstrap-md/angular-bootstrap-md-12.*.tgz && cd ../..",
+    "pack-archive": "cd dist/angular-bootstrap-md && npm pack . && cp angular-bootstrap-md-13.*.tgz ../..",
+    "remove-archive": "rm dist/angular-bootstrap-md/angular-bootstrap-md-13.*.tgz && cd ../..",
     "compile-lib": "ng-packagr -p projects/angular-bootstrap-md/ng-package.json && npm run copy-scss && npm run copy-files && npm run schematics:build && npm run pack-archive && npm run remove-archive",
     "schematics:build": "tsc -p projects/angular-bootstrap-md/tsconfig.schematics.json && npm run schematics:copy-schema && npm run schematics:copy-collection && npm run schematics:copy-migration",
     "schematics:copy-schema": "cp projects/angular-bootstrap-md/schematics/ng-add/schema.json dist/angular-bootstrap-md/schematics/ng-add",
@@ -32,7 +32,7 @@
     "@angular/router": "~13.2.6",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@types/chart.js": "^2.7.42",
-    "angular-bootstrap-md": "file:angular-bootstrap-md-12.2.0.tgz",
+    "angular-bootstrap-md": "file:angular-bootstrap-md-13.0.0.tgz",
     "chart.js": "^2.5.0",
     "hammerjs": "^2.0.8",
     "rxjs": "~7.5.0",

changelog

@@ -1,22 +1,27 @@
 {
   "name": "angular-bootstrap-md",
   "repository": "https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design",
-  "version": "12.2.0",
+  "version": "13.0.0",
   "schematics": "./schematics/collection.json",
   "ng-update": {
     "migrations": "./schematics/migration.json"
   },
-  "files": [
-    "**/*"
-  ],
   "dependencies": {
     "tslib": "^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"
+  },
+  "exports": {
+    "./assets/img/*": {
+      "default": "./assets/img/*"
+    },
+    "./assets/scss/*": {
+      "sass": "./assets/scss/*"
+    }
   }
 }

package-lock.json

@@ -6,7 +6,7 @@ import { addPackageToPackageJson } from './package';
 // Just return the tree
 export function ngAdd(options: Schema): Rule {
   return (tree: Tree, context: SchematicContext) => {
-    const angularDependencyVersion = '^9.0.0';
+    const angularDependencyVersion = '^13.0.0';
 
     addPackageToPackageJson(tree, '@angular/cdk', angularDependencyVersion);
     addPackageToPackageJson(tree, '@angular/forms', angularDependencyVersion);
@@ -15,7 +15,7 @@ export function ngAdd(options: Schema): Rule {
     if (options.externalDependencies) {
       addPackageToPackageJson(tree, 'chart.js', '^2.7.2');
       addPackageToPackageJson(tree, '@types/chart.js', '^2.7.40');
-      addPackageToPackageJson(tree, '@fortawesome/fontawesome-free', '~5.6.3');
+      addPackageToPackageJson(tree, '@fortawesome/fontawesome-free', '~6.0.0');
       addPackageToPackageJson(tree, 'hammerjs', '~2.0.8');
       addPackageToPackageJson(tree, 'animate.css', '~3.7.2');
     }

package.json

@@ -61,7 +61,7 @@ $custom-mdb-file-text: (
   zh: '選擇',
   de: 'Wählen',
   ru: 'выбирать',
-);
+) !default;
 
 // Blockquote
 $blockquote-padding-y: 0.5rem !default;

projects/angular-bootstrap-md/package.json

@@ -7,3 +7,4 @@
 @import 'core/msc/switch';
 @import 'core/msc/carousel';
 @import 'core/msc/bootstrap-select';
+@import 'core/msc/checkbox';

projects/angular-bootstrap-md/schematics/ng-add/index.ts

@@ -1,3 +1,22 @@
+13.0.0
+
+In version 13.0.0 we added support for Angular 13 and Font Awesome 6. Check what changed below:
+
+**Breaking changes:**
+
+* Added support for Angular 13, this Angular version is now required,
+* Checkbox - changed id input name to checkboxId,
+* Checkbox - styles will be loaded with other core global styles. This will allow you to use checkbox not only as mdb-checkboxcomponent, but also as a standard HTML element with material styles. The mdb-checkbox offers more features but cancause someperformance problems after adding many elements in one application view.
+
+**Dependencies:**
+
+* Updated Font Awesome to v6.0.0.
+
+**Fixes:**
+
+* Added type coercion for boolean and number inputs to resolve problems with inputs types,
+* Select - resolved problem with option type.
+
 12.2.0
 In version 12.2.0 we updated Bootstrap to v4.6.1 and added some fixes and new features for the existing components. Check what changed below:
 

projects/angular-bootstrap-md/src/lib/assets/scss/core/_variables.scss

@@ -1,3 +1,4 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   Component,
   ElementRef,
@@ -17,14 +18,85 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MDBBadgeComponent implements OnInit {
-  @Input() @HostBinding('class.badge-default') default: boolean;
-  @Input() @HostBinding('class.badge-primary') primary: boolean;
-  @Input() @HostBinding('class.badge-secondary') secondary: boolean;
-  @Input() @HostBinding('class.badge-success') success: boolean;
-  @Input() @HostBinding('class.badge-info') info: boolean;
-  @Input() @HostBinding('class.badge-warning') warning: boolean;
-  @Input() @HostBinding('class.badge-danger') danger: boolean;
-  @Input() @HostBinding('class.badge-pill') pill: boolean;
+  @Input()
+  @HostBinding('class.badge-default')
+  get default(): boolean {
+    return this._default;
+  }
+  set default(value: BooleanInput) {
+    this._default = coerceBooleanProperty(value);
+  }
+  private _default = false;
+
+  @Input()
+  @HostBinding('class.badge-primary')
+  get primary(): boolean {
+    return this._primary;
+  }
+  set primary(value: BooleanInput) {
+    this._primary = coerceBooleanProperty(value);
+  }
+  private _primary = false;
+
+  @Input()
+  @HostBinding('class.badge-secondary')
+  get secondary(): boolean {
+    return this._secondary;
+  }
+  set secondary(value: BooleanInput) {
+    this._secondary = coerceBooleanProperty(value);
+  }
+  private _secondary = false;
+
+  @Input()
+  @HostBinding('class.badge-success')
+  get success(): boolean {
+    return this._success;
+  }
+  set success(value: BooleanInput) {
+    this._success = coerceBooleanProperty(value);
+  }
+  private _success = false;
+
+  @Input()
+  @HostBinding('class.badge-info')
+  get info(): boolean {
+    return this._info;
+  }
+  set info(value: BooleanInput) {
+    this._info = coerceBooleanProperty(value);
+  }
+  private _info = false;
+
+  @Input()
+  @HostBinding('class.badge-warning')
+  get warning(): boolean {
+    return this._warning;
+  }
+  set warning(value: BooleanInput) {
+    this._warning = coerceBooleanProperty(value);
+  }
+  private _warning = false;
+
+  @Input()
+  @HostBinding('class.badge-danger')
+  get danger(): boolean {
+    return this._danger;
+  }
+  set danger(value: BooleanInput) {
+    this._danger = coerceBooleanProperty(value);
+  }
+  private _danger = false;
+
+  @Input()
+  @HostBinding('class.badge-pill')
+  get pill(): boolean {
+    return this._pill;
+  }
+  set pill(value: BooleanInput) {
+    this._pill = coerceBooleanProperty(value);
+  }
+  private _pill = false;
 
   @Input() classInside: string;
 

projects/angular-bootstrap-md/src/lib/free/checkbox/_checkbox.scss renamed to projects/angular-bootstrap-md/src/lib/assets/scss/core/msc/_checkbox.scss

@@ -1,3 +1,4 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   Component,
   ElementRef,
@@ -10,22 +11,64 @@ import {
 } from '@angular/core';
 
 @Component({
-  // tslint:disable-next-line:component-selector
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: '[mdbBtn]',
   template: '<ng-content></ng-content>',
   styleUrls: ['./buttons-module.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-// tslint:disable-next-line:component-class-suffix
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbBtnDirective implements OnInit, OnChanges {
   @Input() color = '';
-  @Input() rounded = false;
+
+  @Input()
+  get rounded(): boolean {
+    return this._rounded;
+  }
+  set rounded(value: BooleanInput) {
+    this._rounded = coerceBooleanProperty(value);
+  }
+  private _rounded = false;
+
   @Input() gradient = '';
-  @Input() outline = false;
-  @Input() flat = false;
+
+  @Input()
+  get outline(): boolean {
+    return this._outline;
+  }
+  set outline(value: BooleanInput) {
+    this._outline = coerceBooleanProperty(value);
+  }
+  private _outline = false;
+
+  @Input()
+  get flat(): boolean {
+    return this._flat;
+  }
+  set flat(value: BooleanInput) {
+    this._flat = coerceBooleanProperty(value);
+  }
+  private _flat = false;
+
   @Input() size = '';
-  @Input() block = false;
-  @Input() floating = false;
+
+  @Input()
+  get block(): boolean {
+    return this._block;
+  }
+  set block(value: BooleanInput) {
+    this._block = coerceBooleanProperty(value);
+  }
+  private _block = false;
+
+  @Input()
+  get floating(): boolean {
+    return this._floating;
+  }
+  set floating(value: BooleanInput) {
+    this._floating = coerceBooleanProperty(value);
+  }
+  private _floating = false;
 
   public simpleChange: string;
   public simpleChangeValue: string;

projects/angular-bootstrap-md/src/lib/assets/scss/msc.scss

@@ -3,7 +3,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
-  // tslint:disable-next-line: no-use-before-declare
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   useExisting: forwardRef(() => ButtonCheckboxDirective),
   multi: true,
 };

projects/angular-bootstrap-md/src/lib/changelog

@@ -3,7 +3,7 @@ import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
 @Directive({ selector: '[mdbFixedCaption]' })
 export class FixedButtonCaptionDirective implements OnInit {
   @Input('mdbFixedCaption') caption: string;
-  // tslint:disable-next-line:no-input-rename
+  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('collapseButton') collapseButtonActivator: any;
   private paragraphEl: any;
   constructor(private renderer: Renderer2, private el: ElementRef) {}

projects/angular-bootstrap-md/src/lib/free/badge/mdb-badge.component.ts

@@ -1,3 +1,4 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   Directive,
   ElementRef,
@@ -12,7 +13,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
-  // tslint:disable-next-line: no-use-before-declare
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   useExisting: forwardRef(() => ButtonRadioDirective),
   multi: true,
 };
@@ -30,7 +31,14 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
   /** Radio button value, will be set to `ngModel` */
   @Input() public mdbRadio: any;
   /** If `true` — radio button can be unchecked */
-  @Input() public uncheckable: boolean;
+  @Input()
+  get uncheckable(): boolean {
+    return this._uncheckable;
+  }
+  set uncheckable(value: BooleanInput) {
+    this._uncheckable = coerceBooleanProperty(value);
+  }
+  private _uncheckable = false;
   /** Current value of radio component or group */
   @Input() public value: any;
 
@@ -52,7 +60,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
       this.el.nativeElement.parentElement.childNodes.forEach((element: any) => {
         this.radioElementsArray.push(element);
       });
-      this.radioElementsArray.forEach(element => {
+      this.radioElementsArray.forEach((element) => {
         this.renderer.removeClass(element, 'active');
       });
       this.renderer.addClass(event.target, 'active');