Merge remote-tracking branch 'origin/demo' into starter

(apps/ecommerce/inventory) Added confirmation to the "Delete product" action using FuseConfirmationService
(apps/scrumboard) Added confirmation to the "Delete list" action using FuseConfirmationService
(apps/tasks) Added confirmation to the "Delete task" action using FuseConfirmationService

karma.conf.js

@@ -26,7 +26,7 @@ module.exports = function (config)
             suppressAll: true // removes the duplicated traces
         },
         coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/angular12'),
+            dir      : require('path').join(__dirname, './coverage/fuse'),
             subdir   : '.',
             reporters: [
                 {type: 'html'},

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@fuse/demo",
+    "name": "@fuse/starter",
-    "version": "13.2.0",
+    "version": "13.3.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -10,21 +10,20 @@
         "start": "ng serve",
         "build": "ng build",
         "test": "ng test",
-        "lint": "ng lint",
+        "lint": "ng lint"
-        "e2e": "ng e2e"
     },
     "dependencies": {
-        "@angular/animations": "12.1.1",
+        "@angular/animations": "12.1.2",
-        "@angular/cdk": "12.1.1",
+        "@angular/cdk": "12.1.2",
-        "@angular/common": "12.1.1",
+        "@angular/common": "12.1.2",
-        "@angular/compiler": "12.1.1",
+        "@angular/compiler": "12.1.2",
-        "@angular/core": "12.1.1",
+        "@angular/core": "12.1.2",
-        "@angular/forms": "12.1.1",
+        "@angular/forms": "12.1.2",
-        "@angular/material": "12.1.1",
+        "@angular/material": "12.1.2",
-        "@angular/material-moment-adapter": "12.1.1",
+        "@angular/material-moment-adapter": "12.1.2",
-        "@angular/platform-browser": "12.1.1",
+        "@angular/platform-browser": "12.1.2",
-        "@angular/platform-browser-dynamic": "12.1.1",
+        "@angular/platform-browser-dynamic": "12.1.2",
-        "@angular/router": "12.1.1",
+        "@angular/router": "12.1.2",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -33,15 +32,15 @@
         "@fullcalendar/moment": "4.4.2",
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
-        "@ngneat/transloco": "2.21.0",
+        "@ngneat/transloco": "2.22.0",
-        "apexcharts": "3.27.1",
+        "apexcharts": "3.27.2",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.0.1",
+        "highlight.js": "11.1.0",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
         "ng-apexcharts": "1.5.12",
         "ngx-markdown": "12.0.1",
-        "ngx-quill": "14.1.1",
+        "ngx-quill": "14.1.2",
         "perfect-scrollbar": "1.5.1",
         "quill": "1.3.7",
         "rrule": "2.6.8",
@@ -51,38 +50,38 @@
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.1.0",
+        "@angular-devkit/build-angular": "12.1.2",
-        "@angular-eslint/builder": "12.2.0",
+        "@angular-eslint/builder": "12.3.1",
-        "@angular-eslint/eslint-plugin": "12.2.0",
+        "@angular-eslint/eslint-plugin": "12.3.1",
-        "@angular-eslint/eslint-plugin-template": "12.2.0",
+        "@angular-eslint/eslint-plugin-template": "12.3.1",
-        "@angular-eslint/schematics": "12.2.0",
+        "@angular-eslint/schematics": "12.3.1",
-        "@angular-eslint/template-parser": "12.2.0",
+        "@angular-eslint/template-parser": "12.3.1",
-        "@angular/cli": "12.1.0",
+        "@angular/cli": "12.1.2",
-        "@angular/compiler-cli": "12.1.1",
+        "@angular/compiler-cli": "12.1.2",
         "@tailwindcss/aspect-ratio": "0.2.1",
         "@tailwindcss/line-clamp": "0.2.1",
         "@tailwindcss/typography": "0.4.1",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.6.11",
+        "@types/jasmine": "3.8.1",
-        "@types/lodash": "4.14.170",
+        "@types/lodash": "4.14.171",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.15",
+        "@types/node": "12.20.16",
-        "@typescript-eslint/eslint-plugin": "4.28.1",
+        "@typescript-eslint/eslint-plugin": "4.28.3",
-        "@typescript-eslint/parser": "4.28.1",
+        "@typescript-eslint/parser": "4.28.3",
-        "autoprefixer": "10.2.6",
+        "autoprefixer": "10.3.1",
         "chroma-js": "2.1.2",
-        "eslint": "7.29.0",
+        "eslint": "7.30.0",
         "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "35.4.1",
+        "eslint-plugin-jsdoc": "35.4.3",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.7.1",
+        "jasmine-core": "3.8.0",
         "karma": "6.3.4",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
-        "karma-jasmine-html-reporter": "1.6.0",
+        "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
         "postcss": "8.3.5",
         "tailwindcss": "2.2.4",

src/@fuse/fuse.module.ts

@@ -1,5 +1,6 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { FuseConfirmationModule } from '@fuse/services/confirmation';
 import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
 import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
 import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
@@ -7,6 +8,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
 
 @NgModule({
     imports  : [
+        FuseConfirmationModule,
         FuseMediaWatcherModule,
         FuseSplashScreenModule,
         FuseTailwindConfigModule,

src/@fuse/services/confirmation/confirmation.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+    declarations: [
+        FuseConfirmationDialogComponent
+    ],
+    imports: [
+        MatButtonModule,
+        MatDialogModule,
+        MatIconModule,
+        CommonModule
+    ],
+    providers   : [
+        FuseConfirmationService
+    ]
+})
+export class FuseConfirmationModule
+{
+    /**
+     * Constructor
+     */
+    constructor(private _fuseConfirmationService: FuseConfirmationService)
+    {
+    }
+}

src/@fuse/services/confirmation/confirmation.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { merge } from 'lodash-es';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
+
+@Injectable()
+export class FuseConfirmationService
+{
+    private _defaultConfig: FuseConfirmationConfig = {
+        title      : 'Confirm action',
+        message    : 'Are you sure you want to confirm this action?',
+        icon       : {
+            show : true,
+            name : 'heroicons_outline:exclamation',
+            color: 'warn'
+        },
+        actions    : {
+            confirm: {
+                show : true,
+                label: 'Confirm',
+                color: 'warn'
+            },
+            cancel : {
+                show : true,
+                label: 'Cancel'
+            }
+        },
+        dismissible: false
+    };
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _matDialog: MatDialog
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    open(config: FuseConfirmationConfig = {}): MatDialogRef<FuseConfirmationDialogComponent>
+    {
+        // Merge the user config with the default config
+        const userConfig = merge({}, this._defaultConfig, config);
+
+        // Open the dialog
+        return this._matDialog.open(FuseConfirmationDialogComponent, {
+            autoFocus   : false,
+            disableClose: !userConfig.dismissible,
+            data        : userConfig
+        });
+    }
+}

src/@fuse/services/confirmation/confirmation.types.ts

@@ -0,0 +1,22 @@
+export interface FuseConfirmationConfig
+{
+    title?: string;
+    message?: string;
+    icon?: {
+        show?: boolean;
+        name?: string;
+        color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error';
+    };
+    actions?: {
+        confirm?: {
+            show?: boolean;
+            label?: string;
+            color?: 'primary' | 'accent' | 'warn';
+        };
+        cancel?: {
+            show?: boolean;
+            label?: string;
+        };
+    };
+    dismissible?: boolean;
+}

src/@fuse/services/confirmation/dialog/dialog.component.html

@@ -0,0 +1,85 @@
+<div class="relative flex flex-col md:w-128 -m-6">
+
+    <!-- Dismiss button -->
+    <ng-container *ngIf="data.dismissible">
+        <div class="absolute top-0 right-0 pt-4 pr-4">
+            <button
+                mat-icon-button
+                [matDialogClose]="undefined">
+                <mat-icon
+                    class="text-secondary"
+                    [svgIcon]="'heroicons_outline:x'"></mat-icon>
+            </button>
+        </div>
+    </ng-container>
+
+    <!-- Content -->
+    <div class="flex flex-col sm:flex-row items-center sm:items-start p-8 pb-6 sm:pb-8">
+
+        <!-- Icon -->
+        <ng-container *ngIf="data.icon.show">
+            <div
+                class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
+                [ngClass]="{'text-primary-600 bg-primary-100': data.icon.color === 'primary',
+                            'text-accent-600 bg-accent-100': data.icon.color === 'accent',
+                            'text-warn-600 bg-warn-100': data.icon.color === 'warn',
+                            'text-gray-600 bg-gray-100': data.icon.color === 'basic',
+                            'text-blue-600 bg-blue-100': data.icon.color === 'info',
+                            'text-green-500 bg-green-100': data.icon.color === 'success',
+                            'text-amber-500 bg-amber-100': data.icon.color === 'warning',
+                            'text-red-600 bg-red-100': data.icon.color === 'error'
+                            }">
+                <mat-icon
+                    class="text-current"
+                    [svgIcon]="data.icon.name"></mat-icon>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="data.title || data.message">
+            <div class="flex flex-col items-center sm:items-start mt-4 sm:mt-0 sm:pr-8 space-y-1 text-center sm:text-left">
+
+                <!-- Title -->
+                <ng-container *ngIf="data.title">
+                    <div
+                        class="text-xl leading-6 font-medium"
+                        [innerHTML]="data.title"></div>
+                </ng-container>
+
+                <!-- Message -->
+                <ng-container *ngIf="data.message">
+                    <div
+                        class="text-secondary"
+                        [innerHTML]="data.message"></div>
+                </ng-container>
+            </div>
+        </ng-container>
+
+    </div>
+
+    <!-- Buttons -->
+    <ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
+        <div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50">
+
+            <!-- Cancel -->
+            <ng-container *ngIf="data.actions.cancel.show">
+                <button
+                    mat-stroked-button
+                    [matDialogClose]="'cancelled'">
+                    {{data.actions.cancel.label}}
+                </button>
+            </ng-container>
+
+            <!-- Confirm -->
+            <ng-container *ngIf="data.actions.confirm.show">
+                <button
+                    mat-flat-button
+                    [color]="data.actions.confirm.color"
+                    [matDialogClose]="'confirmed'">
+                    {{data.actions.confirm.label}}
+                </button>
+            </ng-container>
+
+        </div>
+    </ng-container>
+
+</div>

src/@fuse/services/confirmation/dialog/dialog.component.ts

@@ -0,0 +1,38 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
+
+@Component({
+    selector     : 'fuse-confirmation-dialog',
+    templateUrl  : './dialog.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseConfirmationDialogComponent implements OnInit
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig,
+        public matDialogRef: MatDialogRef<FuseConfirmationDialogComponent>
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}

src/@fuse/services/confirmation/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/services/confirmation/public-api';

src/@fuse/services/confirmation/public-api.ts

@@ -0,0 +1,3 @@
+export * from '@fuse/services/confirmation/confirmation.module';
+export * from '@fuse/services/confirmation/confirmation.service';
+export * from '@fuse/services/confirmation/confirmation.types';

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('13.2.0').full;
+export const FUSE_VERSION = new Version('13.3.0').full;

src/app/app.module.ts

@@ -14,8 +14,8 @@ import { AppComponent } from 'app/app.component';
 import { appRoutes } from 'app/app.routing';
 
 const routerConfig: ExtraOptions = {
-    scrollPositionRestoration: 'enabled',
+    preloadingStrategy       : PreloadAllModules,
-    preloadingStrategy       : PreloadAllModules
+    scrollPositionRestoration: 'enabled'
 };
 
 @NgModule({

src/app/core/transloco/transloco.module.ts

@@ -23,6 +23,7 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
                     }
                 ],
                 defaultLang         : 'en',
+                fallbackLang        : 'en',
                 reRenderOnLangChange: true,
                 prodMode            : environment.production
             })

tailwind.config.js

@@ -290,7 +290,11 @@ const config = {
                         },
                         'tbody tr'         : {
                             borderBottomColor: 'var(--fuse-border)'
-                        }
+                        },
+                        'ol[type="A" s]'   : false,
+                        'ol[type="a" s]'   : false,
+                        'ol[type="I" s]'   : false,
+                        'ol[type="i" s]'   : false
                     }
                 },
                 sm     : {