From a25147d386356bd04da5b09d36e55ba8e5536223 Mon Sep 17 00:00:00 2001
From: idzark <23485709+idzark@users.noreply.github.com>
Date: Mon, 15 Jan 2024 16:21:48 +0100
Subject: [PATCH] Release 6.0.0
---
CHANGELOG.md | 37 ++++++
README.md | 4 +-
README.txt | 2 +-
package-lock.json | 4 +-
package.json | 2 +-
projects/mdb-angular-ui-kit/CHANGELOG.md | 37 ++++++
projects/mdb-angular-ui-kit/README.md | 4 +-
.../assets/scss/bootstrap/_alert.scss | 4 +-
.../assets/scss/bootstrap/_list-group.scss | 4 +-
.../assets/scss/bootstrap/mixins/_grid.scss | 2 +-
.../assets/scss/bootstrap/vendor/_rfs.scss | 6 +-
.../assets/scss/mdb.free.scss | 4 +-
.../mdb-angular-ui-kit/assets/scss/mdb.scss | 4 +-
.../forms/input.directive.ts | 11 +-
projects/mdb-angular-ui-kit/package.json | 12 +-
.../popover/popover.component.ts | 5 +-
.../popover/popover.directive.ts | 50 +++-----
.../schematics/ng-add/index.ts | 2 +-
.../schematics/ng-add/mdb-setup.ts | 115 +++++++++++++-----
src/styles.scss | 5 +-
20 files changed, 211 insertions(+), 103 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4df8afe4..361ead01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,40 @@
+## 6.0.0 (15.01.2024)
+
+This version requires Angular v17. Follow the [Angular Update Guide](https://update.angular.io/?l=3&v=16.0-17.0) to migrate your project to Angular 17.
+
+### Breaking changes:
+
+- Updated Angular to v17, this version is required in MDB Angular v6
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) - changed type of `defaultView` input from `string` to `MdbCalendarView`
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed type of `options` input from `any` to `MdbDatepickerOptions`
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+ - Changed type of `options` input from `Options` to `MdbTimepickerOptions` and made all parameters optional
+ - Changed `SelectedTime` type name to `MdbTimepickerSelectedTime` and added this type to public exports
+- [Popover](https://mdbootstrap.com/docs/angular/components/popover/) - removed unused `template` input
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
+ - Changed return type of all events from `MdbSidenavComponent` to `void`
+ - Removed redundant `li` element from `MdbSidenavItemComponent` template
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+ - Changed `onSearchOutput` event name to `searchOutput`
+ - Changed `selectOutput` event name to `selectOutput`
+ - Changed `onChange` event name to `listChange`
+ - Changed `onSearch` event name to `itemSearch`
+ - Changed `onSelect` event name to `itemSelect`
+
+### Fixes and improvements:
+
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - removed height animation transition
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - blocked input clearing in disabled component
+- [Input fields](https://mdbootstrap.com/docs/angular/forms/input-fields/) - resolved problem with default label position in all inputs with built-in placeholder (like `datetime-local` or `time`)
+- [Lightbox](https://mdbootstrap.com/docs/angular/components/lightbox/) - resolved problem with component removal from DOM after using browser's back button
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved problem with font size in landscape view
+
+### New fetures:
+
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `inputId` and `inputFilterId` inputs that allow to declare ids for input elements
+
+---
+
## 5.2.0 (04.12.2023)
### Fixes and improvements:
diff --git a/README.md b/README.md
index 2e0c00d9..22b477eb 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-Bootstrap 5 & Angular 16 UI KIT - 700+ components, MIT license, simple installation.
+Bootstrap 5 & Angular 17 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 16
+## About Material Design for Bootstrap 5 & Angular 17
Created by
diff --git a/README.txt b/README.txt
index 741a028b..d98138ef 100644
--- a/README.txt
+++ b/README.txt
@@ -1,6 +1,6 @@
MDB 5 Angular
-Version: FREE 5.2.0
+Version: FREE 6.0.0
Documentation:
https://mdbootstrap.com/docs/angular/
diff --git a/package-lock.json b/package-lock.json
index 1eb39211..17f3c35e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "mdb-angular-ui-kit-free",
- "version": "5.2.0",
+ "version": "6.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "mdb-angular-ui-kit-free",
- "version": "5.2.0",
+ "version": "6.0.0",
"dependencies": {
"@angular/animations": "^17.0.7",
"@angular/cdk": "^17.0.4",
diff --git a/package.json b/package.json
index 47376e76..1adab0fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mdb-angular-ui-kit-free",
- "version": "5.2.0",
+ "version": "6.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
diff --git a/projects/mdb-angular-ui-kit/CHANGELOG.md b/projects/mdb-angular-ui-kit/CHANGELOG.md
index 4df8afe4..361ead01 100644
--- a/projects/mdb-angular-ui-kit/CHANGELOG.md
+++ b/projects/mdb-angular-ui-kit/CHANGELOG.md
@@ -1,3 +1,40 @@
+## 6.0.0 (15.01.2024)
+
+This version requires Angular v17. Follow the [Angular Update Guide](https://update.angular.io/?l=3&v=16.0-17.0) to migrate your project to Angular 17.
+
+### Breaking changes:
+
+- Updated Angular to v17, this version is required in MDB Angular v6
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) - changed type of `defaultView` input from `string` to `MdbCalendarView`
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed type of `options` input from `any` to `MdbDatepickerOptions`
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+ - Changed type of `options` input from `Options` to `MdbTimepickerOptions` and made all parameters optional
+ - Changed `SelectedTime` type name to `MdbTimepickerSelectedTime` and added this type to public exports
+- [Popover](https://mdbootstrap.com/docs/angular/components/popover/) - removed unused `template` input
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
+ - Changed return type of all events from `MdbSidenavComponent` to `void`
+ - Removed redundant `li` element from `MdbSidenavItemComponent` template
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+ - Changed `onSearchOutput` event name to `searchOutput`
+ - Changed `selectOutput` event name to `selectOutput`
+ - Changed `onChange` event name to `listChange`
+ - Changed `onSearch` event name to `itemSearch`
+ - Changed `onSelect` event name to `itemSelect`
+
+### Fixes and improvements:
+
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - removed height animation transition
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - blocked input clearing in disabled component
+- [Input fields](https://mdbootstrap.com/docs/angular/forms/input-fields/) - resolved problem with default label position in all inputs with built-in placeholder (like `datetime-local` or `time`)
+- [Lightbox](https://mdbootstrap.com/docs/angular/components/lightbox/) - resolved problem with component removal from DOM after using browser's back button
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved problem with font size in landscape view
+
+### New fetures:
+
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `inputId` and `inputFilterId` inputs that allow to declare ids for input elements
+
+---
+
## 5.2.0 (04.12.2023)
### Fixes and improvements:
diff --git a/projects/mdb-angular-ui-kit/README.md b/projects/mdb-angular-ui-kit/README.md
index 2e0c00d9..22b477eb 100644
--- a/projects/mdb-angular-ui-kit/README.md
+++ b/projects/mdb-angular-ui-kit/README.md
@@ -1,4 +1,4 @@
-Bootstrap 5 & Angular 16 UI KIT - 700+ components, MIT license, simple installation.
+Bootstrap 5 & Angular 17 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 16
+## About Material Design for Bootstrap 5 & Angular 17
Created by
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
index c8bc91b4..41adbcc4 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
@@ -1,7 +1,7 @@
//
// Base styles
//
-
+@use 'sass:math';
.alert {
// scss-docs-start alert-css-vars
--#{$prefix}alert-bg: transparent;
@@ -62,7 +62,7 @@
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
- $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
+ $alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
index c0ec1646..414feddc 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
@@ -1,7 +1,7 @@
// Base class
//
// Easily usable on
, , or .
-
+@use 'sass:math';
.list-group {
// scss-docs-start list-group-css-vars
--#{$prefix}list-group-color: #{$list-group-color};
@@ -184,7 +184,7 @@
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
- $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
+ $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), math.abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
index 38e2239f..99b1e7de 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
@@ -56,7 +56,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
- width: divide(100%, $count);
+ width: percentage(divide(1, $count));
}
}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
index 7e9a6c7a..fbd8ae04 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
@@ -7,7 +7,7 @@
// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
// Configuration
-
+@use 'sass:math';
// Base value
$rfs-base-value: 1.25rem !default;
$rfs-unit: rem !default;
@@ -54,8 +54,8 @@ $rfs-base-value-unit: unit($rfs-base-value);
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
- $dividend: abs($dividend);
- $divisor: abs($divisor);
+ $dividend: math.abs($dividend);
+ $divisor: math.abs($divisor);
@if $dividend == 0 {
@return 0;
}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
index 439f6845..523455ce 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
@@ -102,5 +102,5 @@
@import './free/accordion';
@import './free/carousel';
-@import '~@angular/cdk/overlay-prebuilt.css';
-@import '~@angular/cdk/text-field-prebuilt.css';
+@import '@angular/cdk/overlay-prebuilt.css';
+@import '@angular/cdk/text-field-prebuilt.css';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
index ca44a2d4..002dac95 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
@@ -104,5 +104,5 @@
@import './free/carousel';
-@import '~@angular/cdk/overlay-prebuilt.css';
-@import '~@angular/cdk/text-field-prebuilt.css';
+@import '@angular/cdk/overlay-prebuilt.css';
+@import '@angular/cdk/text-field-prebuilt.css';
diff --git a/projects/mdb-angular-ui-kit/forms/input.directive.ts b/projects/mdb-angular-ui-kit/forms/input.directive.ts
index be4a7faf..35c950b7 100644
--- a/projects/mdb-angular-ui-kit/forms/input.directive.ts
+++ b/projects/mdb-angular-ui-kit/forms/input.directive.ts
@@ -44,7 +44,7 @@ export class MdbInputDirective
if (typeof getComputedStyle === 'function') {
this._color = getComputedStyle(this._elementRef.nativeElement).color;
- if (this._elementRef.nativeElement.type === 'date') {
+ if (this._hasTypeInterferingPlaceholder()) {
this._updateTextColorForDateType();
}
}
@@ -109,7 +109,7 @@ export class MdbInputDirective
@HostListener('focus')
_onFocus(): void {
this._focused = true;
- if (this._elementRef.nativeElement.type === 'date') {
+ if (this._hasTypeInterferingPlaceholder()) {
this._updateTextColorForDateType();
}
this.stateChanges.next();
@@ -118,7 +118,7 @@ export class MdbInputDirective
@HostListener('blur')
_onBlur(): void {
this._focused = false;
- if (this._elementRef.nativeElement.type === 'date') {
+ if (this._hasTypeInterferingPlaceholder()) {
this._updateTextColorForDateType();
}
this.stateChanges.next();
@@ -152,6 +152,11 @@ export class MdbInputDirective
return this.focused || this.hasValue || this.autofilled;
}
+ private _hasTypeInterferingPlaceholder() {
+ const typesArray = ['date', 'datetime-local', 'time', 'month', 'week'];
+ return typesArray.includes(this._elementRef.nativeElement.type);
+ }
+
static ngAcceptInputType_disabled: BooleanInput;
static ngAcceptInputType_readonly: BooleanInput;
diff --git a/projects/mdb-angular-ui-kit/package.json b/projects/mdb-angular-ui-kit/package.json
index 6e97f526..f4849ace 100644
--- a/projects/mdb-angular-ui-kit/package.json
+++ b/projects/mdb-angular-ui-kit/package.json
@@ -4,13 +4,13 @@
"homepage": "https://mdbootstrap.com/docs/b5/angular/",
"author": "MDBootstrap",
"license": "MIT",
- "version": "5.2.0",
+ "version": "6.0.0",
"peerDependencies": {
- "@angular/common": "^16.0.0",
- "@angular/core": "^16.0.0",
- "@angular/animations": "^16.0.0",
- "@angular/forms": "^16.0.0",
- "@angular/cdk": "^16.0.0"
+ "@angular/common": "^17.0.0",
+ "@angular/core": "^17.0.0",
+ "@angular/animations": "^17.0.0",
+ "@angular/forms": "^17.0.0",
+ "@angular/cdk": "^17.0.0"
},
"schematics": "./schematics/collection.json",
"dependencies": {
diff --git a/projects/mdb-angular-ui-kit/popover/popover.component.ts b/projects/mdb-angular-ui-kit/popover/popover.component.ts
index 1dde2d5e..d26e5814 100644
--- a/projects/mdb-angular-ui-kit/popover/popover.component.ts
+++ b/projects/mdb-angular-ui-kit/popover/popover.component.ts
@@ -4,6 +4,7 @@ import {
Component,
Input,
TemplateRef,
+ booleanAttribute,
} from '@angular/core';
import { trigger, style, animate, transition, state, AnimationEvent } from '@angular/animations';
import { Subject } from 'rxjs';
@@ -21,10 +22,10 @@ import { Subject } from 'rxjs';
],
})
export class MdbPopoverComponent {
- @Input() title: string;
+ @Input({ transform: booleanAttribute }) animation: boolean;
@Input() content: string | TemplateRef
;
- @Input() animation: boolean;
@Input() context: any;
+ @Input() title: string;
get isContentTemplate(): boolean {
return this.content instanceof TemplateRef;
diff --git a/projects/mdb-angular-ui-kit/popover/popover.directive.ts b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
index f7c05ecf..433fc244 100644
--- a/projects/mdb-angular-ui-kit/popover/popover.directive.ts
+++ b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
@@ -8,6 +8,8 @@ import {
OnInit,
Output,
TemplateRef,
+ booleanAttribute,
+ numberAttribute,
} from '@angular/core';
import {
ConnectedPosition,
@@ -20,7 +22,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
import { MdbPopoverComponent } from './popover.component';
import { fromEvent, Subject } from 'rxjs';
import { first, takeUntil } from 'rxjs/operators';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MdbPopoverPosition } from './popover.types';
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
@@ -29,40 +31,21 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
})
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class MdbPopoverDirective implements OnInit, OnDestroy {
+ @Input({ transform: booleanAttribute }) animation = true;
+ @Input({ transform: numberAttribute }) delayHide = 0;
+ @Input({ transform: numberAttribute }) delayShow = 0;
@Input() mdbPopover: TemplateRef | string = '';
- @Input() mdbPopoverTitle = '';
@Input() mdbPopoverData: any;
-
- @Input()
- get popoverDisabled(): boolean {
- return this._popoverDisabled;
- }
- set popoverDisabled(value: boolean) {
- this._popoverDisabled = coerceBooleanProperty(value);
- }
- private _popoverDisabled = false;
-
- @Input() placement = 'top';
- @Input() template: TemplateRef;
-
- @Input()
- get animation(): boolean {
- return this._animation;
- }
- set animation(value: boolean) {
- this._animation = coerceBooleanProperty(value);
- }
- private _animation = false;
-
+ @Input() mdbPopoverTitle = '';
+ @Input({ transform: numberAttribute }) offset = 4;
+ @Input() placement: MdbPopoverPosition = 'top';
+ @Input({ transform: booleanAttribute }) popoverDisabled = false;
@Input() trigger = 'click';
- @Input() delayShow = 0;
- @Input() delayHide = 0;
- @Input() offset = 4;
- @Output() popoverShow: EventEmitter = new EventEmitter();
- @Output() popoverShown: EventEmitter = new EventEmitter();
- @Output() popoverHide: EventEmitter = new EventEmitter();
- @Output() popoverHidden: EventEmitter = new EventEmitter();
+ @Output() popoverShow = new EventEmitter();
+ @Output() popoverShown = new EventEmitter();
+ @Output() popoverHide = new EventEmitter();
+ @Output() popoverHidden = new EventEmitter();
private _overlayRef: OverlayRef;
private _tooltipRef: ComponentRef;
@@ -212,7 +195,7 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
this._tooltipRef = this._overlayRef.attach(tooltipPortal);
- this._tooltipRef.instance.content = this.template || this.mdbPopover;
+ this._tooltipRef.instance.content = this.mdbPopover;
this._tooltipRef.instance.title = this.mdbPopoverTitle;
this._tooltipRef.instance.animation = this.animation;
this._tooltipRef.instance.context = this.mdbPopoverData;
@@ -256,7 +239,4 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
this.show();
}
}
-
- static ngAcceptInputType_animation: BooleanInput;
- static ngAcceptInputType_popoverDisabled: BooleanInput;
}
diff --git a/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts b/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts
index 876e83a1..33994c82 100644
--- a/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts
+++ b/projects/mdb-angular-ui-kit/schematics/ng-add/index.ts
@@ -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 = '^16.0.0';
+ const angularDependencyVersion = '^17.0.0';
addPackageToPackageJson(tree, '@angular/cdk', angularDependencyVersion);
addPackageToPackageJson(tree, '@angular/forms', angularDependencyVersion);
diff --git a/projects/mdb-angular-ui-kit/schematics/ng-add/mdb-setup.ts b/projects/mdb-angular-ui-kit/schematics/ng-add/mdb-setup.ts
index 5f3c5a7a..ae9cd848 100644
--- a/projects/mdb-angular-ui-kit/schematics/ng-add/mdb-setup.ts
+++ b/projects/mdb-angular-ui-kit/schematics/ng-add/mdb-setup.ts
@@ -2,7 +2,6 @@ import { SchematicContext, Tree, chain } from '@angular-devkit/schematics';
import { getWorkspace } from '@schematics/angular/utility/workspace';
import { ProjectType } from '@schematics/angular/utility/workspace-models';
import {
- getAppModulePath,
getProjectMainFile,
hasNgModuleImport,
addModuleImportToRootModule,
@@ -10,7 +9,14 @@ import {
getProjectIndexFiles,
appendHtmlElementToHead,
getProjectStyleFile,
+ isStandaloneApp,
+ getAppModulePath,
} from '@angular/cdk/schematics';
+import {
+ addFunctionalProvidersToStandaloneBootstrap,
+ callsProvidersFunction,
+ importsProvidersFrom,
+} from '@schematics/angular/private/components';
import { Schema } from './schema';
const mdbModules = [
@@ -31,7 +37,7 @@ const mdbModules = [
{ name: 'MdbValidationModule', path: 'mdb-angular-ui-kit/validation'},
];
-// tslint:disable-next-line: space-before-function-paren
+// eslint-disable-next-line space-before-function-paren
export default function (options: Schema): any {
return async (tree: Tree) => {
const workspace: any = await getWorkspace(tree);
@@ -55,6 +61,11 @@ function addMdbModulesImports(options: Schema): any {
return async (tree: Tree) => {
const workspace: any = await getWorkspace(tree);
const project = getProjectFromWorkspace(workspace, options.project);
+ const mainFile = getProjectMainFile(project);
+
+ if (isStandaloneApp(tree, mainFile)) {
+ return;
+ }
if (options.modules) {
mdbModules.forEach((module) => {
@@ -70,28 +81,78 @@ function addAngularAnimationsModule(options: Schema): any {
return async (tree: Tree, context: SchematicContext) => {
const workspace: any = await getWorkspace(tree);
const project = getProjectFromWorkspace(workspace, options.project);
- const appModulePath = getAppModulePath(tree, getProjectMainFile(project));
- const browserAnimationModule = 'BrowserAnimationsModule';
- const animationsModulePath = '@angular/platform-browser/animations';
- const noopAnimationModule = 'NoopAnimationsModule';
-
- if (options.animations) {
- if (hasNgModuleImport(tree, appModulePath, noopAnimationModule)) {
- context.logger.error(
- `Could not add ${browserAnimationModule} because ${noopAnimationModule} is already added`
- );
- return;
- }
+ const mainFile = getProjectMainFile(project);
- addModuleImportToRootModule(tree, browserAnimationModule, animationsModulePath, project);
- } else if (!hasNgModuleImport(tree, appModulePath, noopAnimationModule)) {
- addModuleImportToRootModule(tree, noopAnimationModule, animationsModulePath, project);
+ if (isStandaloneApp(tree, mainFile)) {
+ addAngularAnimationsForStandaloneApp(options, tree, context, mainFile);
+ } else {
+ addAngularAnimationsForNonStandaloneApp(options, tree, context, mainFile, project);
}
return tree;
};
}
+function addAngularAnimationsForStandaloneApp(
+ options: Schema,
+ tree: Tree,
+ context: SchematicContext,
+ mainFile: string
+): any {
+ const animationsProvider = 'provideAnimations';
+ const noopAnimationsProvider = 'provideNoopAnimations';
+ const animationsProvidersPath = '@angular/platform-browser/animations';
+
+ if (options.animations) {
+ if (callsProvidersFunction(tree, mainFile, noopAnimationsProvider)) {
+ context.logger.error(
+ `Could not add ${animationsProvider} because ${noopAnimationsProvider} is already added`
+ );
+ return;
+ } else {
+ addFunctionalProvidersToStandaloneBootstrap(
+ tree,
+ mainFile,
+ animationsProvider,
+ animationsProvidersPath
+ );
+ }
+ } else if (!options.animations && !importsProvidersFrom(tree, mainFile, animationsProvider)) {
+ addFunctionalProvidersToStandaloneBootstrap(
+ tree,
+ mainFile,
+ noopAnimationsProvider,
+ animationsProvidersPath
+ );
+ }
+}
+
+function addAngularAnimationsForNonStandaloneApp(
+ options: Schema,
+ tree: Tree,
+ context: SchematicContext,
+ mainFile: string,
+ project: any
+): any {
+ const browserAnimationModule = 'BrowserAnimationsModule';
+ const noopAnimationModule = 'NoopAnimationsModule';
+ const animationsModulePath = '@angular/platform-browser/animations';
+ const appModule = getAppModulePath(tree, mainFile);
+
+ if (options.animations) {
+ if (hasNgModuleImport(tree, appModule, noopAnimationModule)) {
+ context.logger.error(
+ `Could not add ${browserAnimationModule} because ${noopAnimationModule} is already added`
+ );
+ return;
+ }
+
+ addModuleImportToRootModule(tree, browserAnimationModule, animationsModulePath, project);
+ } else if (!options.animations && !hasNgModuleImport(tree, appModule, noopAnimationModule)) {
+ addModuleImportToRootModule(tree, noopAnimationModule, animationsModulePath, project);
+ }
+}
+
function addRobotoFontToIndexHtml(options: Schema): any {
return async (tree: Tree, context: SchematicContext) => {
const fontUrl = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap';
@@ -145,10 +206,7 @@ function addStylesImports(options: Schema): any {
if (options.fontAwesome) {
newContent =
- `@import '@fortawesome/fontawesome-free/scss/fontawesome.scss';\n` +
- `@import '@fortawesome/fontawesome-free/scss/solid.scss';\n` +
- `@import '@fortawesome/fontawesome-free/scss/regular.scss';\n` +
- `@import '@fortawesome/fontawesome-free/scss/brands.scss';\n \n` +
+ `@import '@fortawesome/fontawesome-free/css/all.css';\n` +
`@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';\n`;
} else {
newContent = `@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';\n`;
@@ -205,16 +263,6 @@ function updateAppComponentContent(): any {
const fileContent = buffer.toString();
- const defaultContent =
- `\n` +
- `\n` +
- `\n` +
- `\n` +
- `\n` +
- `\n` +
- `\n` +
- `\n`;
-
const newContent =
`\n` +
`
\n` +
@@ -241,7 +289,10 @@ function updateAppComponentContent(): any {
`
`;
const hasNewContent = fileContent.includes(newContent);
- const hasDefaultContent = fileContent.includes(defaultContent);
+ const hasDefaultContent =
+ fileContent.includes('Delete the template below') &&
+ fileContent.includes('to get started with your project!') &&
+ fileContent.includes('Congratulations! Your app is running.');
if (hasNewContent || !hasDefaultContent) {
return;
diff --git a/src/styles.scss b/src/styles.scss
index 8ded7ab7..c690c22d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,4 @@
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
-@import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
-@import '@fortawesome/fontawesome-free/scss/solid.scss';
-@import '@fortawesome/fontawesome-free/scss/regular.scss';
-@import '@fortawesome/fontawesome-free/scss/brands.scss';
+@import '@fortawesome/fontawesome-free/css/all.css';
@import '../projects/mdb-angular-ui-kit/assets/scss/mdb.scss';
\ No newline at end of file