Updated changelog

(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",
-    "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",
-        "e2e": "ng e2e"
+        "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "12.1.1",
-        "@angular/cdk": "12.1.1",
-        "@angular/common": "12.1.1",
-        "@angular/compiler": "12.1.1",
-        "@angular/core": "12.1.1",
-        "@angular/forms": "12.1.1",
-        "@angular/material": "12.1.1",
-        "@angular/material-moment-adapter": "12.1.1",
-        "@angular/platform-browser": "12.1.1",
-        "@angular/platform-browser-dynamic": "12.1.1",
-        "@angular/router": "12.1.1",
+        "@angular/animations": "12.1.2",
+        "@angular/cdk": "12.1.2",
+        "@angular/common": "12.1.2",
+        "@angular/compiler": "12.1.2",
+        "@angular/core": "12.1.2",
+        "@angular/forms": "12.1.2",
+        "@angular/material": "12.1.2",
+        "@angular/material-moment-adapter": "12.1.2",
+        "@angular/platform-browser": "12.1.2",
+        "@angular/platform-browser-dynamic": "12.1.2",
+        "@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",
-        "apexcharts": "3.27.1",
+        "@ngneat/transloco": "2.22.0",
+        "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-eslint/builder": "12.2.0",
-        "@angular-eslint/eslint-plugin": "12.2.0",
-        "@angular-eslint/eslint-plugin-template": "12.2.0",
-        "@angular-eslint/schematics": "12.2.0",
-        "@angular-eslint/template-parser": "12.2.0",
-        "@angular/cli": "12.1.0",
-        "@angular/compiler-cli": "12.1.1",
+        "@angular-devkit/build-angular": "12.1.2",
+        "@angular-eslint/builder": "12.3.1",
+        "@angular-eslint/eslint-plugin": "12.3.1",
+        "@angular-eslint/eslint-plugin-template": "12.3.1",
+        "@angular-eslint/schematics": "12.3.1",
+        "@angular-eslint/template-parser": "12.3.1",
+        "@angular/cli": "12.1.2",
+        "@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/lodash": "4.14.170",
+        "@types/jasmine": "3.8.1",
+        "@types/lodash": "4.14.171",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.15",
-        "@typescript-eslint/eslint-plugin": "4.28.1",
-        "@typescript-eslint/parser": "4.28.1",
-        "autoprefixer": "10.2.6",
+        "@types/node": "12.20.16",
+        "@typescript-eslint/eslint-plugin": "4.28.3",
+        "@typescript-eslint/parser": "4.28.3",
+        "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/app.routing.ts

@@ -105,7 +105,7 @@ export const appRoutes: Route[] = [
                 // Authentication
                 {path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
 
-                // Coming soon
+                // Coming Soon
                 {path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
 
                 // Error
@@ -140,16 +140,22 @@ export const appRoutes: Route[] = [
                 {path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
             ]},
 
-            // User interface
+            // User Interface
             {path: 'ui', children: [
 
-                // Angular Material
-                {path: 'angular-material', loadChildren: () => import('app/modules/admin/ui/angular-material/angular-material.module').then(m => m.AngularMaterialModule)},
+                // Material Components
+                {path: 'material-components', loadChildren: () => import('app/modules/admin/ui/material-components/material-components.module').then(m => m.MaterialComponentsModule)},
+
+                // Fuse Components
+                {path: 'fuse-components', loadChildren: () => import('app/modules/admin/ui/fuse-components/fuse-components.module').then(m => m.FuseComponentsModule)},
+
+                // Other Components
+                {path: 'other-components', loadChildren: () => import('app/modules/admin/ui/other-components/other-components.module').then(m => m.OtherComponentsModule)},
 
                 // TailwindCSS
                 {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
 
-                // Advanced search
+                // Advanced Search
                 {path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)},
 
                 // Animations
@@ -161,6 +167,9 @@ export const appRoutes: Route[] = [
                 // Colors
                 {path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
 
+                // Confirmation Dialog
+                {path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module').then(m => m.ConfirmationDialogModule)},
+
                 // Datatable
                 {path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
 
@@ -174,7 +183,7 @@ export const appRoutes: Route[] = [
                 // Icons
                 {path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
 
-                // Page layouts
+                // Page Layouts
                 {path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
 
                 // Typography
@@ -188,13 +197,7 @@ export const appRoutes: Route[] = [
                 {path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
 
                 // Guides
-                {path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)},
-
-                // Core features
-                {path: 'core-features', loadChildren: () => import('app/modules/admin/docs/core-features/core-features.module').then(m => m.CoreFeaturesModule)},
-
-                // Other components
-                {path: 'other-components', loadChildren: () => import('app/modules/admin/docs/other-components/other-components.module').then(m => m.OtherComponentsModule)},
+                {path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)}
             ]},
 
             // 404 & Catch all

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
             })

src/app/mock-api/common/navigation/data.ts

@@ -77,14 +77,14 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id   : 'apps.file-manager',
-                title: 'File manager',
+                title: 'File Manager',
                 type : 'basic',
                 icon : 'heroicons_outline:cloud',
                 link : '/apps/file-manager'
             },
             {
                 id      : 'apps.help-center',
-                title   : 'Help center',
+                title   : 'Help Center',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:support',
                 link    : '/apps/help-center',
@@ -523,7 +523,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id      : 'pages.coming-soon',
-                title   : 'Coming soon',
+                title   : 'Coming Soon',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:clock',
                 link    : '/pages/coming-soon',
@@ -683,10 +683,24 @@ export const defaultNavigation: FuseNavigationItem[] = [
         children: [
             {
                 id   : 'user-interface.material-components',
-                title: 'Material components',
+                title: 'Material Components',
                 type : 'basic',
                 icon : 'heroicons_outline:chip',
-                link : '/ui/angular-material'
+                link : '/ui/material-components'
+            },
+            {
+                id   : 'user-interface.fuse-components',
+                title: 'Fuse Components',
+                type : 'basic',
+                icon : 'heroicons_outline:chip',
+                link : '/ui/fuse-components'
+            },
+            {
+                id   : 'user-interface.other-components',
+                title: 'Other Components',
+                type : 'basic',
+                icon : 'heroicons_outline:chip',
+                link : '/ui/other-components'
             },
             {
                 id   : 'user-interface.tailwindcss',
@@ -697,7 +711,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id   : 'user-interface.advanced-search',
-                title: 'Advanced search',
+                title: 'Advanced Search',
                 type : 'basic',
                 icon : 'heroicons_outline:search-circle',
                 link : '/ui/advanced-search'
@@ -723,6 +737,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:color-swatch',
                 link : '/ui/colors'
             },
+            {
+                id   : 'user-interface.confirmation-dialog',
+                title: 'Confirmation Dialog',
+                type : 'basic',
+                icon : 'heroicons_outline:question-mark-circle',
+                link : '/ui/confirmation-dialog'
+            },
             {
                 id   : 'user-interface.datatable',
                 title: 'Datatable',
@@ -808,7 +829,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id      : 'user-interface.page-layouts',
-                title   : 'Page layouts',
+                title   : 'Page Layouts',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:template',
                 children: [
@@ -946,7 +967,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '13.2.0',
+                    title  : '13.3.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },
@@ -956,20 +977,6 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 type : 'basic',
                 icon : 'heroicons_outline:book-open',
                 link : '/docs/guides'
-            },
-            {
-                id   : 'documentation.core-features',
-                title: 'Core features',
-                type : 'basic',
-                icon : 'heroicons_outline:book-open',
-                link : '/docs/core-features'
-            },
-            {
-                id   : 'documentation.other-components',
-                title: 'Other components',
-                type : 'basic',
-                icon : 'heroicons_outline:book-open',
-                link : '/docs/other-components'
             }
         ]
     },

src/app/modules/admin/apps/contacts/details/details.component.ts

@@ -6,6 +6,7 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
 import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
 import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
@@ -42,6 +43,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
         private _contactsListComponent: ContactsListComponent,
         private _contactsService: ContactsService,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
         private _overlay: Overlay,
@@ -276,41 +278,61 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
      */
     deleteContact(): void
     {
-        // Get the current contact's id
-        const id = this.contact.id;
-
-        // Get the next/previous contact's id
-        const currentContactIndex = this.contacts.findIndex(item => item.id === id);
-        const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
-        const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
-
-        // Delete the contact
-        this._contactsService.deleteContact(id)
-            .subscribe((isDeleted) => {
-
-                // Return if the contact wasn't deleted...
-                if ( !isDeleted )
-                {
-                    return;
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete contact',
+            message: 'Are you sure you want to delete this contact? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
                 }
+            }
+        });
 
-                // Navigate to the next contact if available
-                if ( nextContactId )
-                {
-                    this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
-                }
-                // Otherwise, navigate to the parent
-                else
-                {
-                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                }
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
 
-                // Toggle the edit mode off
-                this.toggleEditMode(false);
-            });
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+                // Get the current contact's id
+                const id = this.contact.id;
+
+                // Get the next/previous contact's id
+                const currentContactIndex = this.contacts.findIndex(item => item.id === id);
+                const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
+                const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
+
+                // Delete the contact
+                this._contactsService.deleteContact(id)
+                    .subscribe((isDeleted) => {
+
+                        // Return if the contact wasn't deleted...
+                        if ( !isDeleted )
+                        {
+                            return;
+                        }
+
+                        // Navigate to the next contact if available
+                        if ( nextContactId )
+                        {
+                            this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
+                        }
+                        // Otherwise, navigate to the parent
+                        else
+                        {
+                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
+                        }
+
+                        // Toggle the edit mode off
+                        this.toggleEditMode(false);
+                    });
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            }
+        });
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts

@@ -6,6 +6,7 @@ import { MatSort } from '@angular/material/sort';
 import { merge, Observable, Subject } from 'rxjs';
 import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators';
 import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
 import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
 
@@ -62,6 +63,7 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _formBuilder: FormBuilder,
         private _inventoryService: InventoryService
     )
@@ -525,14 +527,34 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
      */
     deleteSelectedProduct(): void
     {
-        // Get the product object
-        const product = this.selectedProductForm.getRawValue();
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete product',
+            message: 'Are you sure you want to remove this product? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
+                }
+            }
+        });
 
-        // Delete the product on the server
-        this._inventoryService.deleteProduct(product.id).subscribe(() => {
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
 
-            // Close the details
-            this.closeDetails();
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Get the product object
+                const product = this.selectedProductForm.getRawValue();
+
+                // Delete the product on the server
+                this._inventoryService.deleteProduct(product.id).subscribe(() => {
+
+                    // Close the details
+                    this.closeDetails();
+                });
+            }
         });
     }
 

src/app/modules/admin/apps/scrumboard/board/board.component.html

@@ -85,7 +85,7 @@
                                         <mat-icon
                                             class="icon-size-5"
                                             [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                                        Rename List
+                                        Rename list
                                     </button>
                                     <button
                                         mat-menu-item
@@ -93,7 +93,7 @@
                                         <mat-icon
                                             class="icon-size-5"
                                             [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                        Delete List
+                                        Delete list
                                     </button>
                                 </mat-menu>
                             </div>

src/app/modules/admin/apps/scrumboard/board/board.component.ts

@@ -3,9 +3,10 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import * as moment from 'moment';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
-import * as moment from 'moment';
 
 @Component({
     selector       : 'scrumboard-board',
@@ -31,6 +32,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _scrumboardService: ScrumboardService
     )
     {
@@ -148,8 +150,28 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     deleteList(id): void
     {
-        // Delete the list
-        this._scrumboardService.deleteList(id).subscribe();
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete list',
+            message: 'Are you sure you want to delete this list and its cards? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
+                }
+            }
+        });
+
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
+
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Delete the list
+                this._scrumboardService.deleteList(id).subscribe();
+            }
+        });
     }
 
     /**

src/app/modules/admin/apps/tasks/details/details.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
 import { assign } from 'lodash-es';
@@ -40,6 +41,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
         private _activatedRoute: ActivatedRoute,
         private _changeDetectorRef: ChangeDetectorRef,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
         private _tasksListComponent: TasksListComponent,
@@ -472,38 +474,58 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
      */
     deleteTask(): void
     {
-        // Get the current task's id
-        const id = this.task.id;
-
-        // Get the next/previous task's id
-        const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
-        const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
-        const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
-
-        // Delete the task
-        this._tasksService.deleteTask(id)
-            .subscribe((isDeleted) => {
-
-                // Return if the task wasn't deleted...
-                if ( !isDeleted )
-                {
-                    return;
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete task',
+            message: 'Are you sure you want to delete this task? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
                 }
+            }
+        });
 
-                // Navigate to the next task if available
-                if ( nextTaskId )
-                {
-                    this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
-                }
-                // Otherwise, navigate to the parent
-                else
-                {
-                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                }
-            });
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Get the current task's id
+                const id = this.task.id;
+
+                // Get the next/previous task's id
+                const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
+                const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
+                const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
+
+                // Delete the task
+                this._tasksService.deleteTask(id)
+                    .subscribe((isDeleted) => {
+
+                        // Return if the task wasn't deleted...
+                        if ( !isDeleted )
+                        {
+                            return;
+                        }
+
+                        // Navigate to the next task if available
+                        if ( nextTaskId )
+                        {
+                            this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
+                        }
+                        // Otherwise, navigate to the parent
+                        else
+                        {
+                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
+                        }
+                    });
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            }
+        });
     }
 
     /**

src/app/modules/admin/dashboards/analytics/analytics.component.ts

@@ -18,20 +18,11 @@ export class AnalyticsComponent implements OnInit, OnDestroy
     chartImpressions: ApexOptions;
     chartVisits: ApexOptions;
     chartVisitorsVsPageViews: ApexOptions;
-    data: any;
-
-    chartAge: ApexOptions;
-    averagePurchaseValueOptions: ApexOptions;
-    browsersOptions: ApexOptions;
-    channelsOptions: ApexOptions;
-    devicesOptions: ApexOptions;
-    chartGender: ApexOptions;
-    chartLanguage: ApexOptions;
     chartNewVsReturning: ApexOptions;
-    refundsOptions: ApexOptions;
-    totalVisitsOptions: ApexOptions;
-    uniqueVisitorsOptions: ApexOptions;
-    uniquePurchasesOptions: ApexOptions;
+    chartGender: ApexOptions;
+    chartAge: ApexOptions;
+    chartLanguage: ApexOptions;
+    data: any;
 
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 

src/app/modules/admin/docs/changelog/changelog.ts

@@ -11,6 +11,40 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v13.3.0
+        {
+            version    : 'v13.3.0',
+            releaseDate: 'July 16, 2021',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(fuse/confirmation) A service to quickly configure and show confirmation dialogs'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v12.1.2',
+                        '(dependencies) Updated various other packages',
+                        '(dashboards/analytics) Removed unused chart options declarations',
+                        '(apps/contacts) Added confirmation to the "Delete contact" action using FuseConfirmationService',
+                        '(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',
+                        '(ui/confirmation-dialog) Created a separate page for FuseConfirmationService and put the example configurator in there for better visibility',
+                        '(docs) Moved Fuse Components and Other Components into UI for better visibility and better categorization'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(transloco) Undefined fallback language causes issues in some cases',
+                        '(tailwindcss) Ordered lists with "s" modifier causes builder to throw errors'
+                    ]
+                }
+            ]
+        },
         // v13.2.0
         {
             version    : 'v13.2.0',
@@ -37,7 +71,7 @@ export class ChangelogComponent
                         '(apps/tasks) Explicitly define the overlay position strategy properties',
                         '(tailwindcss) Breaking: Removed 5, 6 & 12 fractional spacing values since they are not used in Demo by default and they are mostly not needed because of Flex and Grid. If you happen to use them, you can manually add them back.',
                         '(docs) Updated docs',
-                        '(package.json) Added "description" and "author" fields',
+                        '(package.json) Added "description" and "author" fields'
                     ]
                 },
                 {

src/app/modules/admin/docs/core-features/core-features.module.ts

@@ -1,76 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTreeModule } from '@angular/material/tree';
-import { FuseCardModule } from '@fuse/components/card';
-import { FuseDateRangeModule } from '@fuse/components/date-range';
-import { FuseDrawerModule } from '@fuse/components/drawer';
-import { FuseHighlightModule } from '@fuse/components/highlight';
-import { FuseAlertModule } from '@fuse/components/alert';
-import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
-import { FuseNavigationModule } from '@fuse/components/navigation';
-import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
-import { SharedModule } from 'app/shared/shared.module';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
-import { MockApiComponent } from 'app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component';
-import { AlertComponent } from 'app/modules/admin/docs/core-features/components/alert/alert.component';
-import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
-import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
-import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
-import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
-import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
-import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
-import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
-import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
-import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
-import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
-import { MediaWatcherComponent } from 'app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component';
-import { SplashScreenComponent } from 'app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component';
-import { FindByKeyComponent } from 'app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component';
-import { MustMatchComponent } from 'app/modules/admin/docs/core-features/validators/must-match/must-match.component';
-import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-features.routing';
-
-@NgModule({
-    declarations: [
-        CoreFeaturesComponent,
-        MockApiComponent,
-        AlertComponent,
-        CardComponent,
-        DateRangeComponent,
-        DrawerComponent,
-        FullscreenComponent,
-        HighlightComponent,
-        MasonryComponent,
-        NavigationComponent,
-        ScrollbarComponent,
-        ScrollResetComponent,
-        ConfigComponent,
-        SplashScreenComponent,
-        MediaWatcherComponent,
-        FindByKeyComponent,
-        MustMatchComponent
-    ],
-    imports     : [
-        RouterModule.forChild(coreFeaturesRoutes),
-        MatButtonModule,
-        MatIconModule,
-        MatSidenavModule,
-        MatTabsModule,
-        MatTreeModule,
-        FuseAlertModule,
-        FuseCardModule,
-        FuseDateRangeModule,
-        FuseDrawerModule,
-        FuseHighlightModule,
-        FuseMasonryModule,
-        FuseNavigationModule,
-        FuseScrollResetModule,
-        SharedModule
-    ]
-})
-export class CoreFeaturesModule
-{
-}

src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html

@@ -51,8 +51,8 @@
             [appearance]="'border'"
             [type]="'info'">
             More detailed information about <code>FuseConfigService</code> can be found in the
-            <a [routerLink]="['../../../core-features/services/config']">Core features > Services >
-                Config
+            <a [routerLink]="['/ui/fuse-components/services/config']">
+                Fuse Components > Services > Config
             </a>
             section of this documentation.
         </fuse-alert>

src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html

@@ -195,7 +195,7 @@
         <p>
             This directory is designed to contain data services for custom made MockAPI library. Detailed information about this directory and the MockAPI library can be found
             in the
-            <a [routerLink]="['../../../core-features/libraries/mock-api']">Core features > Libraries > MockAPI</a>
+            <a [routerLink]="['/ui/fuse-components/libraries/mock-api']">Fuse Components > Libraries > MockAPI</a>
             section of this documentation.
         </p>
 

src/app/modules/admin/docs/other-components/other-components.module.ts

@@ -1,54 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { FuseHighlightModule } from '@fuse/components/highlight';
-import { FuseAlertModule } from '@fuse/components/alert';
-import { FuseNavigationModule } from '@fuse/components/navigation';
-import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
-import { SharedModule } from 'app/shared/shared.module';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
-import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
-import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
-import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
-import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
-import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
-import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
-import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
-import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
-import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
-import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
-import { QuillEditorComponent } from 'app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component';
-import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/other-components.routing';
-
-@NgModule({
-    declarations: [
-        OtherComponentsComponent,
-        OverviewComponent,
-        LanguagesComponent,
-        MessagesComponent,
-        NotificationsComponent,
-        SearchComponent,
-        ShortcutsComponent,
-        UserComponent,
-        ApexChartsComponent,
-        FullCalendarComponent,
-        NgxMarkdownComponent,
-        QuillEditorComponent
-    ],
-    imports     : [
-        RouterModule.forChild(otherComponentsRoutes),
-        MatButtonModule,
-        MatIconModule,
-        MatSidenavModule,
-        FuseHighlightModule,
-        FuseAlertModule,
-        FuseNavigationModule,
-        FuseScrollResetModule,
-        SharedModule
-    ]
-})
-export class OtherComponentsModule
-{
-}

src/app/modules/admin/ui/advanced-search/advanced-search.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Route, RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,14 +8,20 @@ import { MatSelectModule } from '@angular/material/select';
 import { FuseHighlightModule } from '@fuse/components/highlight';
 import { SharedModule } from 'app/shared/shared.module';
 import { AdvancedSearchComponent } from 'app/modules/admin/ui/advanced-search/advanced-search.component';
-import { advancedSearchRoutes } from 'app/modules/admin/ui/advanced-search/advanced-search.routing';
+
+export const routes: Route[] = [
+    {
+        path     : '',
+        component: AdvancedSearchComponent
+    }
+];
 
 @NgModule({
     declarations: [
         AdvancedSearchComponent
     ],
     imports     : [
-        RouterModule.forChild(advancedSearchRoutes),
+        RouterModule.forChild(routes),
         MatButtonModule,
         MatCheckboxModule,
         MatFormFieldModule,

src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts

@@ -1,9 +0,0 @@
-import { Route } from '@angular/router';
-import { AdvancedSearchComponent } from 'app/modules/admin/ui/advanced-search/advanced-search.component';
-
-export const advancedSearchRoutes: Route[] = [
-    {
-        path     : '',
-        component: AdvancedSearchComponent
-    }
-];

src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,198 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex flex-wrap items-center font-medium">
+                <div>
+                    <a class="whitespace-nowrap text-primary-500">User Interface</a>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Confirmation Dialog
+                </h2>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main -->
+    <div class="flex-auto p-6 sm:p-10">
+
+        <div class="max-w-3xl">
+            <div class="max-w-3xl prose prose-sm">
+                <p>
+                    One of the repetitive and tedious jobs in Angular is to create confirmation dialogs. Since dialogs require their own component
+                    you have to either create a separate component every time you need a confirmation dialog or you have to create your own
+                    confirmation dialog system that can be configured.
+                </p>
+                <p>
+                    In order for you to save time while developing with Fuse, we have created a simple yet powerful <code>FuseConfirmationService</code>
+                    to create customized confirmation dialogs on-the-fly.
+                </p>
+                <p>
+                    Below you can configure and preview the confirmation dialog. You can use the generated configuration object within your code to have
+                    the exact same dialog.
+                </p>
+                <p>
+                    For more detailed information and API documentation, check the
+                    <a [routerLink]="'/ui/fuse-components/services/confirmation'">documentation</a>
+                    page.
+                </p>
+            </div>
+            <div class="example-viewer">
+
+                <div class="title">
+                    <h6>Configure the dialog and preview it</h6>
+                </div>
+
+                <div class="flex flex-col p-8 pt-0">
+
+                    <form
+                        [formGroup]="configForm"
+                        class="flex flex-col items-start">
+
+                        <!-- Title -->
+                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                            <mat-label>Title</mat-label>
+                            <input
+                                matInput
+                                [formControlName]="'title'">
+                        </mat-form-field>
+
+                        <!-- Message -->
+                        <mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
+                            <mat-label>Message</mat-label>
+                            <textarea
+                                matInput
+                                [formControlName]="'message'">
+                            </textarea>
+                        </mat-form-field>
+
+                        <!-- Divider -->
+                        <div class="w-full mt-8 mb-7 border-b"></div>
+
+                        <!-- Icon -->
+                        <div
+                            class="flex flex-col w-full"
+                            [formGroupName]="'icon'">
+                            <mat-checkbox
+                                [color]="'primary'"
+                                [formControlName]="'show'">
+                                Show Icon
+                            </mat-checkbox>
+                            <div class="flex items-center w-full mt-6">
+                                <!-- Icon name -->
+                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                    <mat-label>Icon name</mat-label>
+                                    <input
+                                        matInput
+                                        [formControlName]="'name'">
+                                </mat-form-field>
+
+                                <!-- Icon color -->
+                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                    <mat-label>Icon color</mat-label>
+                                    <mat-select [formControlName]="'color'">
+                                        <ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
+                                            <mat-option [value]="color">{{color | titlecase}}</mat-option>
+                                        </ng-container>
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
+                        </div>
+
+                        <!-- Divider -->
+                        <div class="w-full mt-8 mb-7 border-b"></div>
+
+                        <!-- Actions -->
+                        <div
+                            class="w-full"
+                            [formGroupName]="'actions'">
+                            <!-- Confirm -->
+                            <div
+                                class="flex flex-col w-full"
+                                [formGroupName]="'confirm'">
+                                <mat-checkbox
+                                    class="mt-2"
+                                    [color]="'primary'"
+                                    [formControlName]="'show'">
+                                    Show Confirm button
+                                </mat-checkbox>
+                                <div class="flex items-center w-full mt-4">
+                                    <!-- Confirm label -->
+                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                        <mat-label>Confirm button label</mat-label>
+                                        <input
+                                            matInput
+                                            [formControlName]="'label'">
+                                    </mat-form-field>
+
+                                    <!-- Confirm color -->
+                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                        <mat-label>Confirm button color</mat-label>
+                                        <mat-select [formControlName]="'color'">
+                                            <ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
+                                                <mat-option [value]="color">{{color | titlecase}}</mat-option>
+                                            </ng-container>
+                                        </mat-select>
+                                    </mat-form-field>
+                                </div>
+                            </div>
+
+                            <!-- Cancel -->
+                            <div
+                                class="flex flex-col w-full mt-6"
+                                [formGroupName]="'cancel'">
+                                <mat-checkbox
+                                    class="mt-2"
+                                    [color]="'primary'"
+                                    [formControlName]="'show'">
+                                    Show Cancel button
+                                </mat-checkbox>
+                                <div class="flex items-center w-full mt-4">
+                                    <!-- Cancel label -->
+                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                        <mat-label>Cancel button label</mat-label>
+                                        <input
+                                            matInput
+                                            [formControlName]="'label'">
+                                    </mat-form-field>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Divider -->
+                        <div class="w-full mt-8 mb-7 border-b"></div>
+
+                        <!-- Dismissible -->
+                        <mat-checkbox
+                            [color]="'primary'"
+                            [formControlName]="'dismissible'">
+                            Dismissible
+                        </mat-checkbox>
+                    </form>
+
+                    <div class="mt-12">
+                        <button
+                            mat-flat-button
+                            [color]="'primary'"
+                            (click)="openConfirmationDialog()">
+                            Open Confirmation Dialog
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Config as json -->
+            <div class="dark w-full mt-8 p-4 rounded-2xl overflow-hidden">
+                <textarea
+                    fuse-highlight
+                    [code]="configForm.value | json"
+                    [lang]="'json'"></textarea>
+            </div>
+        </div>
+    </div>
+</div>

src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+@Component({
+    selector       : 'confirmation',
+    templateUrl    : './confirmation-dialog.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ConfirmationDialogComponent implements OnInit
+{
+    configForm: FormGroup;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Build the config form
+        this.configForm = this._formBuilder.group({
+            title      : 'Remove contact',
+            message    : 'Are you sure you want to remove this contact permanently? <span class="font-medium">This action cannot be undone!</span>',
+            icon       : this._formBuilder.group({
+                show : true,
+                name : 'heroicons_outline:exclamation',
+                color: 'warn'
+            }),
+            actions    : this._formBuilder.group({
+                confirm: this._formBuilder.group({
+                    show : true,
+                    label: 'Remove',
+                    color: 'warn'
+                }),
+                cancel : this._formBuilder.group({
+                    show : true,
+                    label: 'Cancel'
+                })
+            }),
+            dismissible: true
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open confirmation dialog
+     */
+    openConfirmationDialog(): void
+    {
+        // Open the dialog and save the reference of it
+        const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
+
+        // Subscribe to afterClosed from the dialog reference
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log(result);
+        });
+    }
+}

src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { FuseHighlightModule } from '@fuse/components/highlight';
+import { SharedModule } from 'app/shared/shared.module';
+import { ConfirmationDialogComponent } from 'app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component';
+
+export const routes: Route[] = [
+    {
+        path     : '',
+        component: ConfirmationDialogComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        ConfirmationDialogComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        FuseHighlightModule,
+        SharedModule
+    ]
+})
+export class ConfirmationDialogModule
+{
+}

src/app/modules/admin/ui/fuse-components/components/alert/alert.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FuseAlertService } from '@fuse/components/alert';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'alert',
@@ -20,7 +20,7 @@ export class AlertComponent
      */
     constructor(
         private _fuseAlertService: FuseAlertService,
-        private _coreFeaturesComponent: CoreFeaturesComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
     }
@@ -57,6 +57,6 @@ export class AlertComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/card/card.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/card/card.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'card',
@@ -11,7 +11,7 @@ export class CardComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class CardComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'date-range',
@@ -11,7 +11,7 @@ export class DateRangeComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class DateRangeComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FuseDrawerMode, FuseDrawerService } from '@fuse/components/drawer';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'drawer',
@@ -16,7 +16,7 @@ export class DrawerComponent
      */
     constructor(
         private _fuseDrawerService: FuseDrawerService,
-        private _coreFeaturesComponent: CoreFeaturesComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
         // Set the defaults
@@ -63,6 +63,6 @@ export class DrawerComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'fullscreen',
@@ -11,7 +11,7 @@ export class FullscreenComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class FullscreenComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'highlight',
@@ -11,7 +11,7 @@ export class HighlightComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class HighlightComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 import { Subject } from 'rxjs';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { takeUntil } from 'rxjs/operators';
@@ -18,7 +18,7 @@ export class MasonryComponent implements OnInit
      * Constructor
      */
     constructor(
-        private _coreFeaturesComponent: CoreFeaturesComponent,
+        private _fuseComponentsComponent: FuseComponentsComponent,
         private _fuseMediaWatcherService: FuseMediaWatcherService
     )
     {
@@ -76,6 +76,6 @@ export class MasonryComponent implements OnInit
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon
@@ -73,8 +73,7 @@
 
         <h2>Navigation item</h2>
         <p>
-            This is the type alias for the <em>Navigation item</em>. It's used to create the navigation and both <em>vertical</em> and <em>horizontal</em> variations use the
-            same item type:
+            This is the interface of the <em>Navigation item</em>. Both <em>vertical</em> and <em>horizontal</em> navigation items use the same interface:
         </p>
         <!-- @formatter:off -->
         <textarea fuse-highlight

src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FuseNavigationItem, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'navigation',
@@ -14,7 +14,7 @@ export class NavigationComponent
      */
     constructor(
         private _fuseNavigationService: FuseNavigationService,
-        private _coreFeaturesComponent: CoreFeaturesComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
 
@@ -179,6 +179,6 @@ export class NavigationComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'scroll-reset',
@@ -11,7 +11,7 @@ export class ScrollResetComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class ScrollResetComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'scrollbar',
@@ -11,7 +11,7 @@ export class ScrollbarComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class ScrollbarComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/fuse-components.component.scss

@@ -1,4 +1,4 @@
-core-features {
+fuse-components {
 
     fuse-vertical-navigation {
 

src/app/modules/admin/ui/fuse-components/fuse-components.component.ts

@@ -6,13 +6,13 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector       : 'core-features',
-    templateUrl    : './core-features.component.html',
-    styleUrls      : ['./core-features.component.scss'],
+    selector       : 'fuse-components',
+    templateUrl    : './fuse-components.component.html',
+    styleUrls      : ['./fuse-components.component.scss'],
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CoreFeaturesComponent implements OnInit, OnDestroy
+export class FuseComponentsComponent implements OnInit, OnDestroy
 {
     @ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
     drawerMode: 'side' | 'over';
@@ -30,140 +30,146 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
     {
         this.menuData = [
             {
-                id      : 'core-features.libraries',
+                id      : 'fuse-components.libraries',
                 title   : 'Libraries',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'core-features.libraries.mock-api',
+                        id   : 'fuse-components.libraries.mock-api',
                         title: 'MockAPI',
                         type : 'basic',
-                        link : '/docs/core-features/libraries/mock-api'
+                        link : '/ui/fuse-components/libraries/mock-api'
                     }
                 ]
             },
             {
-                id      : 'core-features.components',
+                id      : 'fuse-components.components',
                 title   : 'Components',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'core-features.components.alert',
+                        id   : 'fuse-components.components.alert',
                         title: 'Alert',
                         type : 'basic',
-                        link : '/docs/core-features/components/alert'
+                        link : '/ui/fuse-components/components/alert'
                     },
                     {
-                        id   : 'core-features.components.card',
+                        id   : 'fuse-components.components.card',
                         title: 'Card',
                         type : 'basic',
-                        link : '/docs/core-features/components/card'
+                        link : '/ui/fuse-components/components/card'
                     },
                     {
-                        id   : 'core-features.components.date-range',
+                        id   : 'fuse-components.components.date-range',
                         title: 'DateRange',
                         type : 'basic',
-                        link : '/docs/core-features/components/date-range'
+                        link : '/ui/fuse-components/components/date-range'
                     },
                     {
-                        id   : 'core-features.components.drawer',
+                        id   : 'fuse-components.components.drawer',
                         title: 'Drawer',
                         type : 'basic',
-                        link : '/docs/core-features/components/drawer'
+                        link : '/ui/fuse-components/components/drawer'
                     },
                     {
-                        id   : 'core-features.components.fullscreen',
+                        id   : 'fuse-components.components.fullscreen',
                         title: 'Fullscreen',
                         type : 'basic',
-                        link : '/docs/core-features/components/fullscreen'
+                        link : '/ui/fuse-components/components/fullscreen'
                     },
                     {
-                        id   : 'core-features.components.highlight',
+                        id   : 'fuse-components.components.highlight',
                         title: 'Highlight',
                         type : 'basic',
-                        link : '/docs/core-features/components/highlight'
+                        link : '/ui/fuse-components/components/highlight'
                     },
                     {
-                        id   : 'core-features.components.masonry',
+                        id   : 'fuse-components.components.masonry',
                         title: 'Masonry',
                         type : 'basic',
-                        link : '/docs/core-features/components/masonry'
+                        link : '/ui/fuse-components/components/masonry'
                     },
                     {
-                        id   : 'core-features.components.navigation',
+                        id   : 'fuse-components.components.navigation',
                         title: 'Navigation',
                         type : 'basic',
-                        link : '/docs/core-features/components/navigation'
+                        link : '/ui/fuse-components/components/navigation'
                     }
                 ]
             },
             {
-                id      : 'core-features.directives',
+                id      : 'fuse-components.directives',
                 title   : 'Directives',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'core-features.directives.scrollbar',
+                        id   : 'fuse-components.directives.scrollbar',
                         title: 'Scrollbar',
                         type : 'basic',
-                        link : '/docs/core-features/directives/scrollbar'
+                        link : '/ui/fuse-components/directives/scrollbar'
                     },
                     {
-                        id   : 'core-features.directives.scroll-reset',
+                        id   : 'fuse-components.directives.scroll-reset',
                         title: 'ScrollReset',
                         type : 'basic',
-                        link : '/docs/core-features/directives/scroll-reset'
+                        link : '/ui/fuse-components/directives/scroll-reset'
                     }
                 ]
             },
             {
-                id      : 'core-features.services',
+                id      : 'fuse-components.services',
                 title   : 'Services',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'core-features.services.config',
+                        id   : 'fuse-components.services.config',
                         title: 'Config',
                         type : 'basic',
-                        link : '/docs/core-features/services/config'
+                        link : '/ui/fuse-components/services/config'
                     },
                     {
-                        id   : 'core-features.services.splash-screen',
+                        id   : 'fuse-components.services.confirmation',
+                        title: 'Confirmation',
+                        type : 'basic',
+                        link : '/ui/fuse-components/services/confirmation'
+                    },
+                    {
+                        id   : 'fuse-components.services.splash-screen',
                         title: 'SplashScreen',
                         type : 'basic',
-                        link : '/docs/core-features/services/splash-screen'
+                        link : '/ui/fuse-components/services/splash-screen'
                     },
                     {
-                        id   : 'core-features.services.media-watcher',
+                        id   : 'fuse-components.services.media-watcher',
                         title: 'MediaWatcher',
                         type : 'basic',
-                        link : '/docs/core-features/services/media-watcher'
+                        link : '/ui/fuse-components/services/media-watcher'
                     }
                 ]
             },
             {
-                id      : 'core-features.pipes',
+                id      : 'fuse-components.pipes',
                 title   : 'Pipes',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'core-features.pipes.find-by-key',
+                        id   : 'fuse-components.pipes.find-by-key',
                         title: 'FindByKey',
                         type : 'basic',
-                        link : '/docs/core-features/pipes/find-by-key'
+                        link : '/ui/fuse-components/pipes/find-by-key'
                     }
                 ]
             },
             {
-                id      : 'core-features.validators',
+                id      : 'fuse-components.validators',
                 title   : 'Validators',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'core-features.validators.must-match',
+                        id   : 'fuse-components.validators.must-match',
                         title: 'MustMatch',
                         type : 'basic',
-                        link : '/docs/core-features/validators/must-match'
+                        link : '/ui/fuse-components/validators/must-match'
                     }
                 ]
             }

src/app/modules/admin/ui/fuse-components/fuse-components.module.ts

@@ -0,0 +1,84 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+import { FuseCardModule } from '@fuse/components/card';
+import { FuseDateRangeModule } from '@fuse/components/date-range';
+import { FuseDrawerModule } from '@fuse/components/drawer';
+import { FuseHighlightModule } from '@fuse/components/highlight';
+import { FuseAlertModule } from '@fuse/components/alert';
+import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
+import { FuseNavigationModule } from '@fuse/components/navigation';
+import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
+import { SharedModule } from 'app/shared/shared.module';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
+import { MockApiComponent } from 'app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component';
+import { AlertComponent } from 'app/modules/admin/ui/fuse-components/components/alert/alert.component';
+import { CardComponent } from 'app/modules/admin/ui/fuse-components/components/card/card.component';
+import { DateRangeComponent } from 'app/modules/admin/ui/fuse-components/components/date-range/date-range.component';
+import { DrawerComponent } from 'app/modules/admin/ui/fuse-components/components/drawer/drawer.component';
+import { FullscreenComponent } from 'app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component';
+import { HighlightComponent } from 'app/modules/admin/ui/fuse-components/components/highlight/highlight.component';
+import { NavigationComponent } from 'app/modules/admin/ui/fuse-components/components/navigation/navigation.component';
+import { MasonryComponent } from 'app/modules/admin/ui/fuse-components/components/masonry/masonry.component';
+import { ScrollbarComponent } from 'app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component';
+import { ScrollResetComponent } from 'app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component';
+import { ConfigComponent } from 'app/modules/admin/ui/fuse-components/services/config/config.component';
+import { ConfirmationComponent } from 'app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component';
+import { MediaWatcherComponent } from 'app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component';
+import { SplashScreenComponent } from 'app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component';
+import { FindByKeyComponent } from 'app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component';
+import { MustMatchComponent } from 'app/modules/admin/ui/fuse-components/validators/must-match/must-match.component';
+import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-components.routing';
+
+@NgModule({
+    declarations: [
+        FuseComponentsComponent,
+        MockApiComponent,
+        AlertComponent,
+        CardComponent,
+        DateRangeComponent,
+        DrawerComponent,
+        FullscreenComponent,
+        HighlightComponent,
+        MasonryComponent,
+        NavigationComponent,
+        ScrollbarComponent,
+        ScrollResetComponent,
+        ConfigComponent,
+        ConfirmationComponent,
+        SplashScreenComponent,
+        MediaWatcherComponent,
+        FindByKeyComponent,
+        MustMatchComponent
+    ],
+    imports: [
+        RouterModule.forChild(fuseComponentsRoutes),
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatTabsModule,
+        MatTreeModule,
+        FuseAlertModule,
+        FuseCardModule,
+        FuseDateRangeModule,
+        FuseDrawerModule,
+        FuseHighlightModule,
+        FuseMasonryModule,
+        FuseNavigationModule,
+        FuseScrollResetModule,
+        SharedModule
+    ]
+})
+export class FuseComponentsModule
+{
+}

src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts

@@ -1,26 +1,27 @@
 import { Route } from '@angular/router';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
-import { MockApiComponent } from 'app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component';
-import { AlertComponent } from 'app/modules/admin/docs/core-features/components/alert/alert.component';
-import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
-import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
-import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
-import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
-import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
-import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
-import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
-import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
-import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
-import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
-import { MediaWatcherComponent } from 'app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component';
-import { SplashScreenComponent } from 'app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component';
-import { FindByKeyComponent } from 'app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component';
-import { MustMatchComponent } from 'app/modules/admin/docs/core-features/validators/must-match/must-match.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
+import { MockApiComponent } from 'app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component';
+import { AlertComponent } from 'app/modules/admin/ui/fuse-components/components/alert/alert.component';
+import { CardComponent } from 'app/modules/admin/ui/fuse-components/components/card/card.component';
+import { DateRangeComponent } from 'app/modules/admin/ui/fuse-components/components/date-range/date-range.component';
+import { DrawerComponent } from 'app/modules/admin/ui/fuse-components/components/drawer/drawer.component';
+import { FullscreenComponent } from 'app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component';
+import { HighlightComponent } from 'app/modules/admin/ui/fuse-components/components/highlight/highlight.component';
+import { MasonryComponent } from 'app/modules/admin/ui/fuse-components/components/masonry/masonry.component';
+import { NavigationComponent } from 'app/modules/admin/ui/fuse-components/components/navigation/navigation.component';
+import { ScrollbarComponent } from 'app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component';
+import { ScrollResetComponent } from 'app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component';
+import { ConfigComponent } from 'app/modules/admin/ui/fuse-components/services/config/config.component';
+import { ConfirmationComponent } from 'app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component';
+import { MediaWatcherComponent } from 'app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component';
+import { SplashScreenComponent } from 'app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component';
+import { FindByKeyComponent } from 'app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component';
+import { MustMatchComponent } from 'app/modules/admin/ui/fuse-components/validators/must-match/must-match.component';
 
-export const coreFeaturesRoutes: Route[] = [
+export const fuseComponentsRoutes: Route[] = [
     {
         path     : '',
-        component: CoreFeaturesComponent,
+        component: FuseComponentsComponent,
         children : [
             {
                 path      : '',
@@ -108,6 +109,10 @@ export const coreFeaturesRoutes: Route[] = [
                         path     : 'config',
                         component: ConfigComponent
                     },
+                    {
+                        path     : 'confirmation',
+                        component: ConfirmationComponent
+                    },
                     {
                         path     : 'splash-screen',
                         component: SplashScreenComponent

src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'mock-api',
@@ -11,7 +11,7 @@ export class MockApiComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class MockApiComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'find-by-key',
@@ -11,7 +11,7 @@ export class FindByKeyComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class FindByKeyComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/services/config/config.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/services/config/config.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'config',
@@ -11,7 +11,7 @@ export class ConfigComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class ConfigComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html

@@ -0,0 +1,265 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex flex-wrap items-center font-medium">
+                <div>
+                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
+                </div>
+                <div class="flex items-center ml-1 whitespace-nowrap">
+                    <mat-icon
+                        class="icon-size-5 text-secondary"
+                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+                    <span class="ml-1 text-secondary">Services</span>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Confirmation
+                </h2>
+            </div>
+        </div>
+        <button
+            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
+            mat-icon-button
+            (click)="toggleDrawer()">
+            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
+        </button>
+    </div>
+
+    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
+
+        <p>
+            <strong>FuseConfirmationService</strong> is a singleton service for creating confirmation and information dialogs. Internally it uses MatDialog to create and
+            show the dialog.
+        </p>
+
+        <h2>Module</h2>
+        <textarea
+            fuse-highlight
+            lang="typescript">
+            import { FuseConfirmationModule } from '@fuse/services/confirmation';
+        </textarea>
+
+        <h2>Confirmation Config</h2>
+        <p>
+            Here is the interface for the <em>Confirmation configuration</em>:
+        </p>
+        <!-- @formatter:off -->
+        <textarea fuse-highlight
+                  lang="typescript">
+            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;
+            }
+        </textarea>
+        <!-- @formatter:on -->
+        <div class="bg-card py-3 px-6 mt-2 rounded shadow">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>title</div>
+                        </td>
+                        <td>
+                            Title of the confirmation dialog, HTML is allowed.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>message</div>
+                        </td>
+                        <td>
+                            Message of the confirmation dialog, HTML is allowed.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>icon.show</div>
+                        </td>
+                        <td>
+                            Whether to show the icon.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>icon.name</div>
+                        </td>
+                        <td>
+                            Name of the icon.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>icon.color</div>
+                        </td>
+                        <td>
+                            Color of the icon.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>actions.confirm.show</div>
+                        </td>
+                        <td>
+                            Whether to show the confirmation button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>actions.confirm.label</div>
+                        </td>
+                        <td>
+                            Label of the confirmation button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>actions.confirm.color</div>
+                        </td>
+                        <td>
+                            Color of the confirmation button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>actions.cancel.show</div>
+                        </td>
+                        <td>
+                            Whether to show the cancel button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>actions.confirm.label</div>
+                        </td>
+                        <td>
+                            Label of the cancel button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>dismissible</div>
+                        </td>
+                        <td>
+                            Sets the dismissible status of the confirmation dialog.<br>
+                            If <code>false</code>, confirmation dialog cannot be closed by clicking on backdrop or pressing Escape key.
+                            The close button on the top right corner also won't show up.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h2>Methods</h2>
+        <div class="bg-card rounded shadow mt-4">
+            <div class="px-6 py-3 font-mono text-secondary border-b">
+                open(config: FuseConfirmationConfig): MatDialogRef&lt;FuseConfirmationDialogComponent&gt;
+            </div>
+            <div class="p-6">
+                Opens the confirmation dialog with the given configuration
+            </div>
+        </div>
+
+        <h2>MatDialogRef</h2>
+        <p>
+            Since <code>FuseConfirmationService</code> uses <em>MatDialog</em> behind the scenes, it returns
+            a reference to the created dialog. Using that reference, you can access to the user input:
+        </p>
+        <!-- @formatter:off -->
+        <textarea
+            fuse-highlight
+            [lang]="'ts'">
+            // Open the confirmation and save the reference
+            const dialogRef = this._fuseConfirmationService.open({...});
+
+            // Subscribe to afterClosed from the dialog reference
+            dialogRef.afterClosed().subscribe((result) => {
+                console.log(result);
+            });
+        </textarea>
+        <!-- @formatter:on -->
+        <div class="bg-card py-3 px-6 mt-2 rounded shadow">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Result</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div><code>'confirmed'</code></div>
+                        </td>
+                        <td>
+                            This is the result if the user pressed the Confirm button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div><code>'cancelled'</code></div>
+                        </td>
+                        <td>
+                            This is the result if the user pressed the Cancel button.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div><code>undefined</code></div>
+                        </td>
+                        <td>
+                            This is the result if the confirmation dismissed either using the close button,
+                            clicking on the backdrop or pressing the Escape key.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</div>

src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
+
+@Component({
+    selector   : 'confirmation',
+    templateUrl: './confirmation.component.html'
+})
+export class ConfirmationComponent
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        private _fuseComponentsComponent: FuseComponentsComponent
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._fuseComponentsComponent.matDrawer.toggle();
+    }
+}

src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'media-watcher',
@@ -11,7 +11,7 @@ export class MediaWatcherComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class MediaWatcherComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'splash-screen',
@@ -11,7 +11,7 @@ export class SplashScreenComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class SplashScreenComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'must-match',
@@ -11,7 +11,7 @@ export class MustMatchComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class MustMatchComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/material-components/material-components.component.ts

@@ -1,11 +1,11 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-    selector     : 'angular-material',
-    templateUrl  : './angular-material.component.html',
+    selector     : 'material-components',
+    templateUrl  : './material-components.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class AngularMaterialComponent
+export class MaterialComponentsComponent
 {
     components: any[];
 

src/app/modules/admin/ui/material-components/material-components.module.ts

@@ -3,18 +3,18 @@ import { Route, RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { SharedModule } from 'app/shared/shared.module';
-import { AngularMaterialComponent } from 'app/modules/admin/ui/angular-material/angular-material.component';
+import { MaterialComponentsComponent } from 'app/modules/admin/ui/material-components/material-components.component';
 
 export const routes: Route[] = [
     {
         path     : '',
-        component: AngularMaterialComponent
+        component: MaterialComponentsComponent
     }
 ];
 
 @NgModule({
     declarations: [
-        AngularMaterialComponent
+        MaterialComponentsComponent
     ],
     imports     : [
         RouterModule.forChild(routes),
@@ -23,6 +23,6 @@ export const routes: Route[] = [
         SharedModule
     ]
 })
-export class AngularMaterialModule
+export class MaterialComponentsModule
 {
 }

src/app/modules/admin/ui/other-components/common/languages/languages.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'languages',

src/app/modules/admin/ui/other-components/common/messages/messages.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'messages',

src/app/modules/admin/ui/other-components/common/notifications/notifications.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'notifications',

src/app/modules/admin/ui/other-components/common/overview/overview.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'overview',

src/app/modules/admin/ui/other-components/common/search/search.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'search',

src/app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'shortcuts',

src/app/modules/admin/ui/other-components/common/user/user.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'user',

src/app/modules/admin/ui/other-components/other-components.component.ts

@@ -30,88 +30,88 @@ export class OtherComponentsComponent implements OnInit, OnDestroy
     {
         this.menuData = [
             {
-                id      : 'common',
+                id      : 'other-components.common',
                 title   : 'Common',
                 subtitle: 'Custom made high-level components',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'common.overview',
+                        id   : 'other-components.common.overview',
                         title: 'Overview',
                         type : 'basic',
-                        link : '/docs/other-components/common/overview'
+                        link : '/ui/other-components/common/overview'
                     },
                     {
-                        id   : 'common.languages',
+                        id   : 'other-components.common.languages',
                         title: 'Languages',
                         type : 'basic',
-                        link : '/docs/other-components/common/languages'
+                        link : '/ui/other-components/common/languages'
                     },
                     {
-                        id   : 'common.messages',
+                        id   : 'other-components.common.messages',
                         title: 'Messages',
                         type : 'basic',
-                        link : '/docs/other-components/common/messages'
+                        link : '/ui/other-components/common/messages'
                     },
                     {
-                        id   : 'common.notifications',
+                        id   : 'other-components.common.notifications',
                         title: 'Notifications',
                         type : 'basic',
-                        link : '/docs/other-components/common/notifications'
+                        link : '/ui/other-components/common/notifications'
                     },
                     {
-                        id   : 'common.search',
+                        id   : 'other-components.common.search',
                         title: 'Search',
                         type : 'basic',
-                        link : '/docs/other-components/common/search'
+                        link : '/ui/other-components/common/search'
                     },
                     {
-                        id   : 'common.shortcuts',
+                        id   : 'other-components.common.shortcuts',
                         title: 'Shortcuts',
                         type : 'basic',
-                        link : '/docs/other-components/common/shortcuts'
+                        link : '/ui/other-components/common/shortcuts'
                     },
                     {
-                        id   : 'common.user',
+                        id   : 'other-components.common.user',
                         title: 'User',
                         type : 'basic',
-                        link : '/docs/other-components/common/user'
+                        link : '/ui/other-components/common/user'
                     }
                 ]
             },
             {
-                id  : 'divider-1',
+                id  : 'other-components.divider-1',
                 type: 'divider'
             },
             {
-                id      : 'third-party',
+                id      : 'other-components.third-party',
                 title   : 'Third party',
                 subtitle: 'Supported components',
                 type    : 'group',
                 children: [
                     {
-                        id   : 'third-party.apex-charts',
+                        id   : 'other-components.third-party.apex-charts',
                         title: 'ApexCharts',
                         type : 'basic',
-                        link : '/docs/other-components/third-party/apex-charts'
+                        link : '/ui/other-components/third-party/apex-charts'
                     },
                     {
-                        id   : 'third-party.full-calendar',
+                        id   : 'other-components.third-party.full-calendar',
                         title: 'FullCalendar',
                         type : 'basic',
-                        link : '/docs/other-components/third-party/full-calendar'
+                        link : '/ui/other-components/third-party/full-calendar'
                     },
                     {
-                        id   : 'third-party.ngx-markdown',
+                        id   : 'other-components.third-party.ngx-markdown',
                         title: 'ngx-markdown',
                         type : 'basic',
-                        link : '/docs/other-components/third-party/ngx-markdown'
+                        link : '/ui/other-components/third-party/ngx-markdown'
                     },
                     {
-                        id   : 'third-party.quill-editor',
+                        id   : 'other-components.third-party.quill-editor',
                         title: 'Quill editor',
                         type : 'basic',
-                        link : '/docs/other-components/third-party/quill-editor'
+                        link : '/ui/other-components/third-party/quill-editor'
                     }
                 ]
             }

src/app/modules/admin/ui/other-components/other-components.module.ts

@@ -0,0 +1,54 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { FuseHighlightModule } from '@fuse/components/highlight';
+import { FuseAlertModule } from '@fuse/components/alert';
+import { FuseNavigationModule } from '@fuse/components/navigation';
+import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
+import { SharedModule } from 'app/shared/shared.module';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
+import { OverviewComponent } from 'app/modules/admin/ui/other-components/common/overview/overview.component';
+import { LanguagesComponent } from 'app/modules/admin/ui/other-components/common/languages/languages.component';
+import { MessagesComponent } from 'app/modules/admin/ui/other-components/common/messages/messages.component';
+import { NotificationsComponent } from 'app/modules/admin/ui/other-components/common/notifications/notifications.component';
+import { SearchComponent } from 'app/modules/admin/ui/other-components/common/search/search.component';
+import { ShortcutsComponent } from 'app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component';
+import { UserComponent } from 'app/modules/admin/ui/other-components/common/user/user.component';
+import { ApexChartsComponent } from 'app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component';
+import { FullCalendarComponent } from 'app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component';
+import { NgxMarkdownComponent } from 'app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component';
+import { QuillEditorComponent } from 'app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component';
+import { otherComponentsRoutes } from 'app/modules/admin/ui/other-components/other-components.routing';
+
+@NgModule({
+    declarations: [
+        OtherComponentsComponent,
+        OverviewComponent,
+        LanguagesComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        UserComponent,
+        ApexChartsComponent,
+        FullCalendarComponent,
+        NgxMarkdownComponent,
+        QuillEditorComponent
+    ],
+    imports     : [
+        RouterModule.forChild(otherComponentsRoutes),
+        MatButtonModule,
+        MatIconModule,
+        MatSidenavModule,
+        FuseHighlightModule,
+        FuseAlertModule,
+        FuseNavigationModule,
+        FuseScrollResetModule,
+        SharedModule
+    ]
+})
+export class OtherComponentsModule
+{
+}

src/app/modules/admin/ui/other-components/other-components.routing.ts

@@ -1,16 +1,16 @@
 import { Route } from '@angular/router';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
-import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
-import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
-import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
-import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
-import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
-import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
-import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
-import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
-import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
-import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
-import { QuillEditorComponent } from 'app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
+import { OverviewComponent } from 'app/modules/admin/ui/other-components/common/overview/overview.component';
+import { LanguagesComponent } from 'app/modules/admin/ui/other-components/common/languages/languages.component';
+import { MessagesComponent } from 'app/modules/admin/ui/other-components/common/messages/messages.component';
+import { NotificationsComponent } from 'app/modules/admin/ui/other-components/common/notifications/notifications.component';
+import { SearchComponent } from 'app/modules/admin/ui/other-components/common/search/search.component';
+import { ShortcutsComponent } from 'app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component';
+import { UserComponent } from 'app/modules/admin/ui/other-components/common/user/user.component';
+import { ApexChartsComponent } from 'app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component';
+import { FullCalendarComponent } from 'app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component';
+import { NgxMarkdownComponent } from 'app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component';
+import { QuillEditorComponent } from 'app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component';
 
 export const otherComponentsRoutes: Route[] = [
     {

src/app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'apex-charts',

src/app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'full-calendar',

src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
 
 @Component({
     selector   : 'ngx-markdown',