From 63f6edee9af3f0a3bdb3afd152c1cdb77e1c762b Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Mon, 5 Jul 2021 23:13:38 +0300
Subject: [PATCH 01/12] (tailwindcss) Fixed: Ordered lists with "s" modifier
 causes builder to throw errors

---
 tailwind.config.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 60201bb7..e11d245b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -290,7 +290,11 @@ const config = {
                         },
                         'tbody tr'         : {
                             borderBottomColor: 'var(--fuse-border)'
-                        }
+                        },
+                        'ol[type="A" s]'   : false,
+                        'ol[type="a" s]'   : false,
+                        'ol[type="I" s]'   : false,
+                        'ol[type="i" s]'   : false
                     }
                 },
                 sm     : {

From 58440b63a76ac453ffd941e0171588f02ff27a93 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 9 Jul 2021 11:12:07 +0300
Subject: [PATCH 02/12] (ui/material-components) Renamed the component

---
 src/app/app.routing.ts                                    | 4 ++--
 src/app/mock-api/common/navigation/data.ts                | 2 +-
 .../material-components.component.html}                   | 0
 .../material-components.component.ts}                     | 6 +++---
 .../material-components.module.ts}                        | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)
 rename src/app/modules/admin/ui/{angular-material/angular-material.component.html => material-components/material-components.component.html} (100%)
 rename src/app/modules/admin/ui/{angular-material/angular-material.component.ts => material-components/material-components.component.ts} (99%)
 rename src/app/modules/admin/ui/{angular-material/angular-material.module.ts => material-components/material-components.module.ts} (68%)

diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 0cccfb93..35d71c28 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -143,8 +143,8 @@ export const appRoutes: Route[] = [
             // 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)},
 
                 // TailwindCSS
                 {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts
index 2f2f5510..a6fd08ca 100644
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -686,7 +686,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 title: 'Material components',
                 type : 'basic',
                 icon : 'heroicons_outline:chip',
-                link : '/ui/angular-material'
+                link : '/ui/material-components'
             },
             {
                 id   : 'user-interface.tailwindcss',
diff --git a/src/app/modules/admin/ui/angular-material/angular-material.component.html b/src/app/modules/admin/ui/material-components/material-components.component.html
similarity index 100%
rename from src/app/modules/admin/ui/angular-material/angular-material.component.html
rename to src/app/modules/admin/ui/material-components/material-components.component.html
diff --git a/src/app/modules/admin/ui/angular-material/angular-material.component.ts b/src/app/modules/admin/ui/material-components/material-components.component.ts
similarity index 99%
rename from src/app/modules/admin/ui/angular-material/angular-material.component.ts
rename to src/app/modules/admin/ui/material-components/material-components.component.ts
index 7018211f..886afec7 100644
--- a/src/app/modules/admin/ui/angular-material/angular-material.component.ts
+++ b/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[];
 
diff --git a/src/app/modules/admin/ui/angular-material/angular-material.module.ts b/src/app/modules/admin/ui/material-components/material-components.module.ts
similarity index 68%
rename from src/app/modules/admin/ui/angular-material/angular-material.module.ts
rename to src/app/modules/admin/ui/material-components/material-components.module.ts
index 795eb091..d0776a5c 100644
--- a/src/app/modules/admin/ui/angular-material/angular-material.module.ts
+++ b/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
 {
 }

From b87fdc407cef0de234edd72318b24fe7a147bcaf Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 9 Jul 2021 11:12:52 +0300
Subject: [PATCH 03/12] (Navigation) Casing fixes on navigation data

---
 src/app/mock-api/common/navigation/data.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts
index a6fd08ca..30473755 100644
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/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,7 +683,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
         children: [
             {
                 id   : 'user-interface.material-components',
-                title: 'Material components',
+                title: 'Material Components',
                 type : 'basic',
                 icon : 'heroicons_outline:chip',
                 link : '/ui/material-components'
@@ -697,7 +697,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'
@@ -808,7 +808,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id      : 'user-interface.page-layouts',
-                title   : 'Page layouts',
+                title   : 'Page Layouts',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:template',
                 children: [

From 9abe887df1bcf077a8495dd7cf8262aeb690896f Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 9 Jul 2021 11:30:00 +0300
Subject: [PATCH 04/12] (docs) Moved Fuse Components and Other Components into
 UI for better visibility and better categorization

---
 src/app/app.routing.ts                        | 24 +++---
 src/app/mock-api/common/navigation/data.ts    | 28 +++----
 .../core-features/core-features.module.ts     | 76 -----------------
 .../theme-layouts/theme-layouts.html          |  4 +-
 .../directory-structure.html                  |  2 +-
 .../other-components.module.ts                | 54 ------------
 .../components/alert/alert.component.html     |  2 +-
 .../components/alert/alert.component.ts       |  4 +-
 .../components/card/card.component.html       |  2 +-
 .../components/card/card.component.ts         |  4 +-
 .../date-range/date-range.component.html      |  2 +-
 .../date-range/date-range.component.ts        |  4 +-
 .../components/drawer/drawer.component.html   |  2 +-
 .../components/drawer/drawer.component.ts     |  4 +-
 .../fullscreen/fullscreen.component.html      |  2 +-
 .../fullscreen/fullscreen.component.ts        |  4 +-
 .../highlight/highlight.component.html        |  2 +-
 .../highlight/highlight.component.ts          |  4 +-
 .../components/masonry/masonry.component.html |  2 +-
 .../components/masonry/masonry.component.ts   |  4 +-
 .../navigation/navigation.component.html      |  2 +-
 .../navigation/navigation.component.ts        |  4 +-
 .../scroll-reset/scroll-reset.component.html  |  2 +-
 .../scroll-reset/scroll-reset.component.ts    |  4 +-
 .../scrollbar/scrollbar.component.html        |  2 +-
 .../scrollbar/scrollbar.component.ts          |  4 +-
 .../fuse-components.component.html}           |  0
 .../fuse-components.component.scss}           |  2 +-
 .../fuse-components.component.ts}             | 84 +++++++++----------
 .../fuse-components/fuse-components.module.ts | 76 +++++++++++++++++
 .../fuse-components.routing.ts}               | 38 ++++-----
 .../mock-api/mock-api.component.html          |  2 +-
 .../libraries/mock-api/mock-api.component.ts  |  4 +-
 .../find-by-key/find-by-key.component.html    |  2 +-
 .../find-by-key/find-by-key.component.ts      |  4 +-
 .../services/config/config.component.html     |  2 +-
 .../services/config/config.component.ts       |  4 +-
 .../media-watcher.component.html              |  2 +-
 .../media-watcher/media-watcher.component.ts  |  4 +-
 .../splash-screen.component.html              |  2 +-
 .../splash-screen/splash-screen.component.ts  |  4 +-
 .../must-match/must-match.component.html      |  2 +-
 .../must-match/must-match.component.ts        |  4 +-
 .../common/languages/languages.component.html |  0
 .../common/languages/languages.component.ts   |  2 +-
 .../common/messages/messages.component.html   |  0
 .../common/messages/messages.component.ts     |  2 +-
 .../notifications.component.html              |  0
 .../notifications/notifications.component.ts  |  2 +-
 .../common/overview/overview.component.html   |  0
 .../common/overview/overview.component.ts     |  2 +-
 .../common/search/search.component.html       |  0
 .../common/search/search.component.ts         |  2 +-
 .../common/shortcuts/shortcuts.component.html |  0
 .../common/shortcuts/shortcuts.component.ts   |  2 +-
 .../common/user/user.component.html           |  0
 .../common/user/user.component.ts             |  2 +-
 .../other-components.component.html           |  0
 .../other-components.component.scss           |  0
 .../other-components.component.ts             | 50 +++++------
 .../other-components.module.ts                | 54 ++++++++++++
 .../other-components.routing.ts               | 24 +++---
 .../apex-charts/apex-charts.component.html    |  0
 .../apex-charts/apex-charts.component.ts      |  2 +-
 .../full-calendar.component.html              |  0
 .../full-calendar/full-calendar.component.ts  |  2 +-
 .../ngx-markdown/ngx-markdown.component.html  |  0
 .../ngx-markdown/ngx-markdown.component.ts    |  2 +-
 .../quill-editor/quill-editor.component.html  |  0
 .../quill-editor/quill-editor.component.ts    |  2 +-
 70 files changed, 317 insertions(+), 317 deletions(-)
 delete mode 100644 src/app/modules/admin/docs/core-features/core-features.module.ts
 delete mode 100644 src/app/modules/admin/docs/other-components/other-components.module.ts
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/alert/alert.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/alert/alert.component.ts (87%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/card/card.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/card/card.component.ts (77%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/date-range/date-range.component.html (98%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/date-range/date-range.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/drawer/drawer.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/drawer/drawer.component.ts (89%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/fullscreen/fullscreen.component.html (98%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/fullscreen/fullscreen.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/highlight/highlight.component.html (98%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/highlight/highlight.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/masonry/masonry.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/masonry/masonry.component.ts (93%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/navigation/navigation.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/components/navigation/navigation.component.ts (97%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/directives/scroll-reset/scroll-reset.component.html (97%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/directives/scroll-reset/scroll-reset.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/directives/scrollbar/scrollbar.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/directives/scrollbar/scrollbar.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features/core-features.component.html => ui/fuse-components/fuse-components.component.html} (100%)
 rename src/app/modules/admin/{docs/core-features/core-features.component.scss => ui/fuse-components/fuse-components.component.scss} (88%)
 rename src/app/modules/admin/{docs/core-features/core-features.component.ts => ui/fuse-components/fuse-components.component.ts} (66%)
 create mode 100644 src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
 rename src/app/modules/admin/{docs/core-features/core-features.routing.ts => ui/fuse-components/fuse-components.routing.ts} (67%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/libraries/mock-api/mock-api.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/libraries/mock-api/mock-api.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/pipes/find-by-key/find-by-key.component.html (99%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/pipes/find-by-key/find-by-key.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/services/config/config.component.html (98%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/services/config/config.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/services/media-watcher/media-watcher.component.html (98%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/services/media-watcher/media-watcher.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/services/splash-screen/splash-screen.component.html (97%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/services/splash-screen/splash-screen.component.ts (78%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/validators/must-match/must-match.component.html (98%)
 rename src/app/modules/admin/{docs/core-features => ui/fuse-components}/validators/must-match/must-match.component.ts (78%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/languages/languages.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/languages/languages.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/messages/messages.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/messages/messages.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/notifications/notifications.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/notifications/notifications.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/overview/overview.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/overview/overview.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/search/search.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/search/search.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/shortcuts/shortcuts.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/shortcuts/shortcuts.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/user/user.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/common/user/user.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/other-components.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/other-components.component.scss (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/other-components.component.ts (71%)
 create mode 100644 src/app/modules/admin/ui/other-components/other-components.module.ts
 rename src/app/modules/admin/{docs => ui}/other-components/other-components.routing.ts (64%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/apex-charts/apex-charts.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/apex-charts/apex-charts.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/full-calendar/full-calendar.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/full-calendar/full-calendar.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/ngx-markdown/ngx-markdown.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/ngx-markdown/ngx-markdown.component.ts (86%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/quill-editor/quill-editor.component.html (100%)
 rename src/app/modules/admin/{docs => ui}/other-components/third-party/quill-editor/quill-editor.component.ts (86%)

diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 35d71c28..8a473aad 100644
--- a/src/app/app.routing.ts
+++ b/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: [
 
-                // Material components
+                // 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
@@ -174,7 +180,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 +194,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
diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts
index 30473755..c635d259 100644
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -688,6 +688,20 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:chip',
                 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',
                 title: 'TailwindCSS',
@@ -956,20 +970,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'
             }
         ]
     },
diff --git a/src/app/modules/admin/docs/core-features/core-features.module.ts b/src/app/modules/admin/docs/core-features/core-features.module.ts
deleted file mode 100644
index 69aee9af..00000000
--- a/src/app/modules/admin/docs/core-features/core-features.module.ts
+++ /dev/null
@@ -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
-{
-}
diff --git a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html
index ce39fb63..e041ecf2 100644
--- a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html
+++ b/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>
diff --git a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html
index beec2abb..7e437330 100644
--- a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html
+++ b/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>
 
diff --git a/src/app/modules/admin/docs/other-components/other-components.module.ts b/src/app/modules/admin/docs/other-components/other-components.module.ts
deleted file mode 100644
index bb7d5bf7..00000000
--- a/src/app/modules/admin/docs/other-components/other-components.module.ts
+++ /dev/null
@@ -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
-{
-}
diff --git a/src/app/modules/admin/docs/core-features/components/alert/alert.component.html b/src/app/modules/admin/ui/fuse-components/components/alert/alert.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/components/alert/alert.component.html
rename to src/app/modules/admin/ui/fuse-components/components/alert/alert.component.html
index 472e8574..a8c2a4fc 100644
--- a/src/app/modules/admin/docs/core-features/components/alert/alert.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/alert/alert.component.ts b/src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts
similarity index 87%
rename from src/app/modules/admin/docs/core-features/components/alert/alert.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts
index ca61ba1a..722199b9 100644
--- a/src/app/modules/admin/docs/core-features/components/alert/alert.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent
     )
     {
     }
diff --git a/src/app/modules/admin/docs/core-features/components/card/card.component.html b/src/app/modules/admin/ui/fuse-components/components/card/card.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/components/card/card.component.html
rename to src/app/modules/admin/ui/fuse-components/components/card/card.component.html
index c6ec3ab3..8932a63f 100644
--- a/src/app/modules/admin/docs/core-features/components/card/card.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/card/card.component.ts b/src/app/modules/admin/ui/fuse-components/components/card/card.component.ts
similarity index 77%
rename from src/app/modules/admin/docs/core-features/components/card/card.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/card/card.component.ts
index 710b0b84..a0266b1b 100644
--- a/src/app/modules/admin/docs/core-features/components/card/card.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/components/date-range/date-range.component.html b/src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.html
similarity index 98%
rename from src/app/modules/admin/docs/core-features/components/date-range/date-range.component.html
rename to src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.html
index a4c4fbc7..89ef1be5 100644
--- a/src/app/modules/admin/docs/core-features/components/date-range/date-range.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/date-range/date-range.component.ts b/src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/components/date-range/date-range.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts
index c867db66..f27dbde5 100644
--- a/src/app/modules/admin/docs/core-features/components/date-range/date-range.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html b/src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html
rename to src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.html
index 7590fc49..ab2840e2 100644
--- a/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.ts b/src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts
similarity index 89%
rename from src/app/modules/admin/docs/core-features/components/drawer/drawer.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts
index c9797d52..0d226d83 100644
--- a/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent
     )
     {
         // Set the defaults
diff --git a/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html b/src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.html
similarity index 98%
rename from src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html
rename to src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.html
index 25c14cca..0d8c42c2 100644
--- a/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts b/src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts
index 8acc21e3..3586e769 100644
--- a/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html b/src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.html
similarity index 98%
rename from src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html
rename to src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.html
index 0a724cc4..1483a9bc 100644
--- a/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.ts b/src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/components/highlight/highlight.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts
index 990baa47..e5c02009 100644
--- a/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/components/masonry/masonry.component.html b/src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/components/masonry/masonry.component.html
rename to src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.html
index 04fd53cf..1ad60d40 100644
--- a/src/app/modules/admin/docs/core-features/components/masonry/masonry.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/masonry/masonry.component.ts b/src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts
similarity index 93%
rename from src/app/modules/admin/docs/core-features/components/masonry/masonry.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts
index 1d65a474..d11b1556 100644
--- a/src/app/modules/admin/docs/core-features/components/masonry/masonry.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent,
         private _fuseMediaWatcherService: FuseMediaWatcherService
     )
     {
diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html
rename to src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
index 35979879..970764b3 100644
--- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
similarity index 97%
rename from src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts
rename to src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
index ababfd73..b114c8e3 100644
--- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent
     )
     {
 
diff --git a/src/app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component.html b/src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.html
similarity index 97%
rename from src/app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component.html
rename to src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.html
index 2588b7f9..31c2fcd3 100644
--- a/src/app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component.ts b/src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component.ts
rename to src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts
index ebcbb26c..324e19e8 100644
--- a/src/app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component.html b/src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component.html
rename to src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.html
index 56fb1166..7d6c32a7 100644
--- a/src/app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component.ts b/src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component.ts
rename to src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts
index c0e14efe..f4dcfd79 100644
--- a/src/app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/core-features.component.html b/src/app/modules/admin/ui/fuse-components/fuse-components.component.html
similarity index 100%
rename from src/app/modules/admin/docs/core-features/core-features.component.html
rename to src/app/modules/admin/ui/fuse-components/fuse-components.component.html
diff --git a/src/app/modules/admin/docs/core-features/core-features.component.scss b/src/app/modules/admin/ui/fuse-components/fuse-components.component.scss
similarity index 88%
rename from src/app/modules/admin/docs/core-features/core-features.component.scss
rename to src/app/modules/admin/ui/fuse-components/fuse-components.component.scss
index 95a51f33..04e2db3a 100644
--- a/src/app/modules/admin/docs/core-features/core-features.component.scss
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.component.scss
@@ -1,4 +1,4 @@
-core-features {
+fuse-components {
 
     fuse-vertical-navigation {
 
diff --git a/src/app/modules/admin/docs/core-features/core-features.component.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.component.ts
similarity index 66%
rename from src/app/modules/admin/docs/core-features/core-features.component.ts
rename to src/app/modules/admin/ui/fuse-components/fuse-components.component.ts
index 2591ab32..3861b594 100644
--- a/src/app/modules/admin/docs/core-features/core-features.component.ts
+++ b/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,140 @@ 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.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'
                     }
                 ]
             }
diff --git a/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
new file mode 100644
index 00000000..949b662d
--- /dev/null
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
@@ -0,0 +1,76 @@
+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 { 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 { 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,
+        SplashScreenComponent,
+        MediaWatcherComponent,
+        FindByKeyComponent,
+        MustMatchComponent
+    ],
+    imports     : [
+        RouterModule.forChild(fuseComponentsRoutes),
+        MatButtonModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatTabsModule,
+        MatTreeModule,
+        FuseAlertModule,
+        FuseCardModule,
+        FuseDateRangeModule,
+        FuseDrawerModule,
+        FuseHighlightModule,
+        FuseMasonryModule,
+        FuseNavigationModule,
+        FuseScrollResetModule,
+        SharedModule
+    ]
+})
+export class FuseComponentsModule
+{
+}
diff --git a/src/app/modules/admin/docs/core-features/core-features.routing.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts
similarity index 67%
rename from src/app/modules/admin/docs/core-features/core-features.routing.ts
rename to src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts
index 900edb00..0aba7bcf 100644
--- a/src/app/modules/admin/docs/core-features/core-features.routing.ts
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts
@@ -1,26 +1,26 @@
 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 { 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      : '',
diff --git a/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html b/src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html
rename to src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.html
index 85805a8b..4f3ac100 100644
--- a/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.ts b/src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.ts
rename to src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts
index 3c13360e..cc1bdf24 100644
--- a/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component.html b/src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.html
similarity index 99%
rename from src/app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component.html
rename to src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.html
index 3e530fcd..258c4d39 100644
--- a/src/app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component.ts b/src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component.ts
rename to src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts
index 58acf540..907c973b 100644
--- a/src/app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/services/config/config.component.html b/src/app/modules/admin/ui/fuse-components/services/config/config.component.html
similarity index 98%
rename from src/app/modules/admin/docs/core-features/services/config/config.component.html
rename to src/app/modules/admin/ui/fuse-components/services/config/config.component.html
index 07b0b6d8..38e17a63 100644
--- a/src/app/modules/admin/docs/core-features/services/config/config.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/services/config/config.component.ts b/src/app/modules/admin/ui/fuse-components/services/config/config.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/services/config/config.component.ts
rename to src/app/modules/admin/ui/fuse-components/services/config/config.component.ts
index a098146e..5c6183db 100644
--- a/src/app/modules/admin/docs/core-features/services/config/config.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component.html b/src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.html
similarity index 98%
rename from src/app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component.html
rename to src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.html
index 43990cea..f7b90cdf 100644
--- a/src/app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component.ts b/src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component.ts
rename to src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts
index 2b61334e..056856b7 100644
--- a/src/app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component.html b/src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.html
similarity index 97%
rename from src/app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component.html
rename to src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.html
index a54b8fc3..c3a0fd59 100644
--- a/src/app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component.ts b/src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component.ts
rename to src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts
index 1ef75df8..542895ce 100644
--- a/src/app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/core-features/validators/must-match/must-match.component.html b/src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.html
similarity index 98%
rename from src/app/modules/admin/docs/core-features/validators/must-match/must-match.component.html
rename to src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.html
index e948fab1..2c7b3a99 100644
--- a/src/app/modules/admin/docs/core-features/validators/must-match/must-match.component.html
+++ b/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
diff --git a/src/app/modules/admin/docs/core-features/validators/must-match/must-match.component.ts b/src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts
similarity index 78%
rename from src/app/modules/admin/docs/core-features/validators/must-match/must-match.component.ts
rename to src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts
index 46e47f99..0fbd0e4d 100644
--- a/src/app/modules/admin/docs/core-features/validators/must-match/must-match.component.ts
+++ b/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 _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 
diff --git a/src/app/modules/admin/docs/other-components/common/languages/languages.component.html b/src/app/modules/admin/ui/other-components/common/languages/languages.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/languages/languages.component.html
rename to src/app/modules/admin/ui/other-components/common/languages/languages.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/languages/languages.component.ts b/src/app/modules/admin/ui/other-components/common/languages/languages.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/languages/languages.component.ts
rename to src/app/modules/admin/ui/other-components/common/languages/languages.component.ts
index f6a5c97b..8fd9a8db 100644
--- a/src/app/modules/admin/docs/other-components/common/languages/languages.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/common/messages/messages.component.html b/src/app/modules/admin/ui/other-components/common/messages/messages.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/messages/messages.component.html
rename to src/app/modules/admin/ui/other-components/common/messages/messages.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/messages/messages.component.ts b/src/app/modules/admin/ui/other-components/common/messages/messages.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/messages/messages.component.ts
rename to src/app/modules/admin/ui/other-components/common/messages/messages.component.ts
index e0397828..4d92b3ab 100644
--- a/src/app/modules/admin/docs/other-components/common/messages/messages.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html b/src/app/modules/admin/ui/other-components/common/notifications/notifications.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html
rename to src/app/modules/admin/ui/other-components/common/notifications/notifications.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts b/src/app/modules/admin/ui/other-components/common/notifications/notifications.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts
rename to src/app/modules/admin/ui/other-components/common/notifications/notifications.component.ts
index 7aff0fff..f75af741 100644
--- a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/common/overview/overview.component.html b/src/app/modules/admin/ui/other-components/common/overview/overview.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/overview/overview.component.html
rename to src/app/modules/admin/ui/other-components/common/overview/overview.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/overview/overview.component.ts b/src/app/modules/admin/ui/other-components/common/overview/overview.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/overview/overview.component.ts
rename to src/app/modules/admin/ui/other-components/common/overview/overview.component.ts
index 2a34e7f3..bafb821f 100644
--- a/src/app/modules/admin/docs/other-components/common/overview/overview.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/common/search/search.component.html b/src/app/modules/admin/ui/other-components/common/search/search.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/search/search.component.html
rename to src/app/modules/admin/ui/other-components/common/search/search.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/search/search.component.ts b/src/app/modules/admin/ui/other-components/common/search/search.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/search/search.component.ts
rename to src/app/modules/admin/ui/other-components/common/search/search.component.ts
index eb9a0810..167b1301 100644
--- a/src/app/modules/admin/docs/other-components/common/search/search.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html b/src/app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html
rename to src/app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts b/src/app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts
rename to src/app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component.ts
index 3da703ef..e2e22cba 100644
--- a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/common/user/user.component.html b/src/app/modules/admin/ui/other-components/common/user/user.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/common/user/user.component.html
rename to src/app/modules/admin/ui/other-components/common/user/user.component.html
diff --git a/src/app/modules/admin/docs/other-components/common/user/user.component.ts b/src/app/modules/admin/ui/other-components/common/user/user.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/common/user/user.component.ts
rename to src/app/modules/admin/ui/other-components/common/user/user.component.ts
index 2b766fba..d130215f 100644
--- a/src/app/modules/admin/docs/other-components/common/user/user.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/other-components.component.html b/src/app/modules/admin/ui/other-components/other-components.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/other-components.component.html
rename to src/app/modules/admin/ui/other-components/other-components.component.html
diff --git a/src/app/modules/admin/docs/other-components/other-components.component.scss b/src/app/modules/admin/ui/other-components/other-components.component.scss
similarity index 100%
rename from src/app/modules/admin/docs/other-components/other-components.component.scss
rename to src/app/modules/admin/ui/other-components/other-components.component.scss
diff --git a/src/app/modules/admin/docs/other-components/other-components.component.ts b/src/app/modules/admin/ui/other-components/other-components.component.ts
similarity index 71%
rename from src/app/modules/admin/docs/other-components/other-components.component.ts
rename to src/app/modules/admin/ui/other-components/other-components.component.ts
index b5cf254e..3a32cb1d 100644
--- a/src/app/modules/admin/docs/other-components/other-components.component.ts
+++ b/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'
                     }
                 ]
             }
diff --git a/src/app/modules/admin/ui/other-components/other-components.module.ts b/src/app/modules/admin/ui/other-components/other-components.module.ts
new file mode 100644
index 00000000..580deadf
--- /dev/null
+++ b/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
+{
+}
diff --git a/src/app/modules/admin/docs/other-components/other-components.routing.ts b/src/app/modules/admin/ui/other-components/other-components.routing.ts
similarity index 64%
rename from src/app/modules/admin/docs/other-components/other-components.routing.ts
rename to src/app/modules/admin/ui/other-components/other-components.routing.ts
index 693cbf69..6fb65504 100644
--- a/src/app/modules/admin/docs/other-components/other-components.routing.ts
+++ b/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[] = [
     {
diff --git a/src/app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component.html b/src/app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component.html
rename to src/app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component.html
diff --git a/src/app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component.ts b/src/app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component.ts
rename to src/app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component.ts
index e5d91eae..ac8b7e6e 100644
--- a/src/app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component.html b/src/app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component.html
rename to src/app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component.html
diff --git a/src/app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component.ts b/src/app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component.ts
rename to src/app/modules/admin/ui/other-components/third-party/full-calendar/full-calendar.component.ts
index 90a127e4..6a8fafcd 100644
--- a/src/app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component.html b/src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component.html
rename to src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.html
diff --git a/src/app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component.ts b/src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component.ts
rename to src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.ts
index 23b64e63..eabb5f6b 100644
--- a/src/app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component.ts
+++ b/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',
diff --git a/src/app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component.html b/src/app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component.html
similarity index 100%
rename from src/app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component.html
rename to src/app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component.html
diff --git a/src/app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component.ts b/src/app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component.ts
similarity index 86%
rename from src/app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component.ts
rename to src/app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component.ts
index 3f66e244..18c0708f 100644
--- a/src/app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component.ts
+++ b/src/app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.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   : 'quill-editor',

From d206c55e6e18eb3263366e48cfbe2340857754e2 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 9 Jul 2021 11:49:21 +0300
Subject: [PATCH 05/12] (ui/fuse-components) Renamed the component reference

---
 .../ui/fuse-components/components/alert/alert.component.ts    | 4 ++--
 .../ui/fuse-components/components/card/card.component.ts      | 4 ++--
 .../components/date-range/date-range.component.ts             | 4 ++--
 .../ui/fuse-components/components/drawer/drawer.component.ts  | 4 ++--
 .../components/fullscreen/fullscreen.component.ts             | 4 ++--
 .../components/highlight/highlight.component.ts               | 4 ++--
 .../fuse-components/components/masonry/masonry.component.ts   | 4 ++--
 .../components/navigation/navigation.component.ts             | 4 ++--
 .../directives/scroll-reset/scroll-reset.component.ts         | 4 ++--
 .../directives/scrollbar/scrollbar.component.ts               | 4 ++--
 .../fuse-components/libraries/mock-api/mock-api.component.ts  | 4 ++--
 .../pipes/find-by-key/find-by-key.component.ts                | 4 ++--
 .../ui/fuse-components/services/config/config.component.ts    | 4 ++--
 .../services/media-watcher/media-watcher.component.ts         | 4 ++--
 .../services/splash-screen/splash-screen.component.ts         | 4 ++--
 .../validators/must-match/must-match.component.ts             | 4 ++--
 16 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts b/src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts
index 722199b9..ba962821 100644
--- a/src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts
@@ -20,7 +20,7 @@ export class AlertComponent
      */
     constructor(
         private _fuseAlertService: FuseAlertService,
-        private _coreFeaturesComponent: FuseComponentsComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
     }
@@ -57,6 +57,6 @@ export class AlertComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/card/card.component.ts b/src/app/modules/admin/ui/fuse-components/components/card/card.component.ts
index a0266b1b..3e712d91 100644
--- a/src/app/modules/admin/ui/fuse-components/components/card/card.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/card/card.component.ts
@@ -11,7 +11,7 @@ export class CardComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class CardComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts b/src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts
index f27dbde5..f051ebc9 100644
--- a/src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts
@@ -11,7 +11,7 @@ export class DateRangeComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class DateRangeComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts b/src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts
index 0d226d83..b7791962 100644
--- a/src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts
@@ -16,7 +16,7 @@ export class DrawerComponent
      */
     constructor(
         private _fuseDrawerService: FuseDrawerService,
-        private _coreFeaturesComponent: FuseComponentsComponent
+        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();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts b/src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts
index 3586e769..4d4020cb 100644
--- a/src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts
@@ -11,7 +11,7 @@ export class FullscreenComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class FullscreenComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts b/src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts
index e5c02009..03cf4e4e 100644
--- a/src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts
@@ -11,7 +11,7 @@ export class HighlightComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class HighlightComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts b/src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts
index d11b1556..beef3401 100644
--- a/src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts
@@ -18,7 +18,7 @@ export class MasonryComponent implements OnInit
      * Constructor
      */
     constructor(
-        private _coreFeaturesComponent: FuseComponentsComponent,
+        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();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
index b114c8e3..b8dd4b3e 100644
--- a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
@@ -14,7 +14,7 @@ export class NavigationComponent
      */
     constructor(
         private _fuseNavigationService: FuseNavigationService,
-        private _coreFeaturesComponent: FuseComponentsComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
 
@@ -179,6 +179,6 @@ export class NavigationComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts b/src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts
index 324e19e8..c06e5fa2 100644
--- a/src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component.ts
@@ -11,7 +11,7 @@ export class ScrollResetComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class ScrollResetComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts b/src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts
index f4dcfd79..cc0baf33 100644
--- a/src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.ts
@@ -11,7 +11,7 @@ export class ScrollbarComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class ScrollbarComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts b/src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts
index cc1bdf24..b43bb89b 100644
--- a/src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component.ts
@@ -11,7 +11,7 @@ export class MockApiComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class MockApiComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts b/src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts
index 907c973b..bbd048be 100644
--- a/src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component.ts
@@ -11,7 +11,7 @@ export class FindByKeyComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class FindByKeyComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/services/config/config.component.ts b/src/app/modules/admin/ui/fuse-components/services/config/config.component.ts
index 5c6183db..f17d7055 100644
--- a/src/app/modules/admin/ui/fuse-components/services/config/config.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/services/config/config.component.ts
@@ -11,7 +11,7 @@ export class ConfigComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class ConfigComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts b/src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts
index 056856b7..875ce7a5 100644
--- a/src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component.ts
@@ -11,7 +11,7 @@ export class MediaWatcherComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class MediaWatcherComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts b/src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts
index 542895ce..9b0e45ce 100644
--- a/src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component.ts
@@ -11,7 +11,7 @@ export class SplashScreenComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class SplashScreenComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }
diff --git a/src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts b/src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts
index 0fbd0e4d..76f2577b 100644
--- a/src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/validators/must-match/must-match.component.ts
@@ -11,7 +11,7 @@ export class MustMatchComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +25,6 @@ export class MustMatchComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

From 178d09597bbe5a1520cf86eec45dbba6c81456f1 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Sat, 10 Jul 2021 22:03:58 +0300
Subject: [PATCH 06/12] (fuse/confirmation) First iteration of the
 FuseConfirmationService

---
 src/@fuse/fuse.module.ts                      |   2 +
 .../confirmation/confirmation.module.ts       |  31 ++
 .../confirmation/confirmation.service.ts      |  57 +++
 .../confirmation/confirmation.types.ts        |  22 +
 .../confirmation/dialog/dialog.component.html |  85 ++++
 .../confirmation/dialog/dialog.component.ts   |  38 ++
 src/@fuse/services/confirmation/index.ts      |   1 +
 src/@fuse/services/confirmation/public-api.ts |   3 +
 .../navigation/navigation.component.html      |   3 +-
 .../fuse-components.component.ts              |   6 +
 .../fuse-components/fuse-components.module.ts |  12 +-
 .../fuse-components.routing.ts                |   5 +
 .../confirmation/confirmation.component.html  | 420 ++++++++++++++++++
 .../confirmation/confirmation.component.ts    |  84 ++++
 14 files changed, 766 insertions(+), 3 deletions(-)
 create mode 100644 src/@fuse/services/confirmation/confirmation.module.ts
 create mode 100644 src/@fuse/services/confirmation/confirmation.service.ts
 create mode 100644 src/@fuse/services/confirmation/confirmation.types.ts
 create mode 100644 src/@fuse/services/confirmation/dialog/dialog.component.html
 create mode 100644 src/@fuse/services/confirmation/dialog/dialog.component.ts
 create mode 100644 src/@fuse/services/confirmation/index.ts
 create mode 100644 src/@fuse/services/confirmation/public-api.ts
 create mode 100644 src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
 create mode 100644 src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts

diff --git a/src/@fuse/fuse.module.ts b/src/@fuse/fuse.module.ts
index 3bd69876..455f1807 100644
--- a/src/@fuse/fuse.module.ts
+++ b/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,
diff --git a/src/@fuse/services/confirmation/confirmation.module.ts b/src/@fuse/services/confirmation/confirmation.module.ts
new file mode 100644
index 00000000..2ebbef45
--- /dev/null
+++ b/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)
+    {
+    }
+}
diff --git a/src/@fuse/services/confirmation/confirmation.service.ts b/src/@fuse/services/confirmation/confirmation.service.ts
new file mode 100644
index 00000000..10fe2e9a
--- /dev/null
+++ b/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
+        });
+    }
+}
diff --git a/src/@fuse/services/confirmation/confirmation.types.ts b/src/@fuse/services/confirmation/confirmation.types.ts
new file mode 100644
index 00000000..53bd2dc5
--- /dev/null
+++ b/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;
+}
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.html b/src/@fuse/services/confirmation/dialog/dialog.component.html
new file mode 100644
index 00000000..af0fee6d
--- /dev/null
+++ b/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>
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.ts b/src/@fuse/services/confirmation/dialog/dialog.component.ts
new file mode 100644
index 00000000..52d718c3
--- /dev/null
+++ b/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
+    // -----------------------------------------------------------------------------------------------------
+
+}
diff --git a/src/@fuse/services/confirmation/index.ts b/src/@fuse/services/confirmation/index.ts
new file mode 100644
index 00000000..f6f2fee1
--- /dev/null
+++ b/src/@fuse/services/confirmation/index.ts
@@ -0,0 +1 @@
+export * from '@fuse/services/confirmation/public-api';
diff --git a/src/@fuse/services/confirmation/public-api.ts b/src/@fuse/services/confirmation/public-api.ts
new file mode 100644
index 00000000..815db9fd
--- /dev/null
+++ b/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';
diff --git a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
index 970764b3..6bed662f 100644
--- a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
+++ b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
@@ -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
diff --git a/src/app/modules/admin/ui/fuse-components/fuse-components.component.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.component.ts
index 3861b594..017d93da 100644
--- a/src/app/modules/admin/ui/fuse-components/fuse-components.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.component.ts
@@ -127,6 +127,12 @@ export class FuseComponentsComponent implements OnInit, OnDestroy
                         type : 'basic',
                         link : '/ui/fuse-components/services/config'
                     },
+                    {
+                        id   : 'fuse-components.services.confirmation',
+                        title: 'Confirmation',
+                        type : 'basic',
+                        link : '/ui/fuse-components/services/confirmation'
+                    },
                     {
                         id   : 'fuse-components.services.splash-screen',
                         title: 'SplashScreen',
diff --git a/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
index 949b662d..6d80061b 100644
--- a/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
@@ -1,8 +1,12 @@
 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 { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTreeModule } from '@angular/material/tree';
 import { FuseCardModule } from '@fuse/components/card';
@@ -27,6 +31,7 @@ import { MasonryComponent } from 'app/modules/admin/ui/fuse-components/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';
@@ -48,16 +53,21 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
         ScrollbarComponent,
         ScrollResetComponent,
         ConfigComponent,
+        ConfirmationComponent,
         SplashScreenComponent,
         MediaWatcherComponent,
         FindByKeyComponent,
         MustMatchComponent
     ],
-    imports     : [
+    imports: [
         RouterModule.forChild(fuseComponentsRoutes),
         MatButtonModule,
+        MatFormFieldModule,
         MatIconModule,
+        MatInputModule,
+        MatSelectModule,
         MatSidenavModule,
+        MatSlideToggleModule,
         MatTabsModule,
         MatTreeModule,
         FuseAlertModule,
diff --git a/src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts
index 0aba7bcf..c8c27748 100644
--- a/src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.routing.ts
@@ -12,6 +12,7 @@ import { NavigationComponent } from 'app/modules/admin/ui/fuse-components/compon
 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';
@@ -108,6 +109,10 @@ export const fuseComponentsRoutes: Route[] = [
                         path     : 'config',
                         component: ConfigComponent
                     },
+                    {
+                        path     : 'confirmation',
+                        component: ConfirmationComponent
+                    },
                     {
                         path     : 'splash-screen',
                         component: SplashScreenComponent
diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
new file mode 100644
index 00000000..82b79463
--- /dev/null
+++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
@@ -0,0 +1,420 @@
+<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.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>message</div>
+                        </td>
+                        <td>
+                            Message of the confirmation dialog.
+                        </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>
+
+        <h2>Example</h2>
+        <p>
+            Below you can configure the dialog and preview it. You can use the generated configuration object within your code
+            to have the exact same dialog.
+        </p>
+        <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-slide-toggle
+                            [color]="'primary'"
+                            [formControlName]="'show'">
+                            Show Icon
+                        </mat-slide-toggle>
+                        <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-slide-toggle
+                                class="mt-2"
+                                [color]="'primary'"
+                                [formControlName]="'show'">
+                                Show Confirm button
+                            </mat-slide-toggle>
+                            <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-slide-toggle
+                                class="mt-2"
+                                [color]="'primary'"
+                                [formControlName]="'show'">
+                                Show Cancel button
+                            </mat-slide-toggle>
+                            <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-slide-toggle
+                        [color]="'primary'"
+                        [formControlName]="'dismissible'">
+                        Dismissible
+                    </mat-slide-toggle>
+                </form>
+
+                <div class="mt-12">
+                    <button
+                        mat-flat-button
+                        [color]="'primary'"
+                        (click)="openConfirmationDialog()">
+                        Open Confirmation Dialog
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Config as json -->
+        <textarea
+            fuse-highlight
+            [code]="configForm.value | json"
+            [lang]="'json'"></textarea>
+    </div>
+
+</div>
diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts
new file mode 100644
index 00000000..2e859b9d
--- /dev/null
+++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts
@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
+
+@Component({
+    selector   : 'confirmation',
+    templateUrl: './confirmation.component.html'
+})
+export class ConfirmationComponent implements OnInit
+{
+    configForm: FormGroup;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
+        private _fuseComponentsComponent: FuseComponentsComponent
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ 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);
+        });
+    }
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._fuseComponentsComponent.matDrawer.toggle();
+    }
+}

From c4914c80b33eb149d97fe6b6ad6438244b2a7a90 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Sat, 10 Jul 2021 22:11:39 +0300
Subject: [PATCH 07/12] (fuse/confirmation) Small fix on the docs

---
 .../services/confirmation/confirmation.component.html           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
index 82b79463..15b6d5fb 100644
--- a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
+++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
@@ -74,7 +74,7 @@
                         | 'warning'
                         | 'error';
                 };
-                actions: {
+                actions?: {
                     confirm?: {
                         show?: boolean;
                         label?: string;

From 747b4f44c843e09adf7209e64897f9f68d6c7c67 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Mon, 12 Jul 2021 12:37:06 +0300
Subject: [PATCH 08/12] (ui/advanced-search) Moved the routing information into
 the module file

---
 .../ui/advanced-search/advanced-search.module.ts     | 12 +++++++++---
 .../ui/advanced-search/advanced-search.routing.ts    |  9 ---------
 2 files changed, 9 insertions(+), 12 deletions(-)
 delete mode 100644 src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts

diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts b/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts
index 371a8dd0..4ee8ff9c 100644
--- a/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts
+++ b/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,
diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts b/src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts
deleted file mode 100644
index 47df94ab..00000000
--- a/src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts
+++ /dev/null
@@ -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
-    }
-];

From c04550b8875e3e97a8c91789c0d02bff05b8938a Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Mon, 12 Jul 2021 12:37:47 +0300
Subject: [PATCH 09/12] (ui/confirmation-dialog) Created a separate page for
 FuseConfirmationService and moved the example configurator to there for
 better visibility

---
 src/app/app.routing.ts                        |   3 +
 src/app/mock-api/common/navigation/data.ts    |   7 +
 .../confirmation-dialog.component.html        | 198 ++++++++++++++++++
 .../confirmation-dialog.component.ts          |  75 +++++++
 .../confirmation-dialog.module.ts             |  36 ++++
 .../fuse-components/fuse-components.module.ts |   2 -
 .../confirmation/confirmation.component.html  | 155 --------------
 .../confirmation/confirmation.component.ts    |  57 +----
 8 files changed, 321 insertions(+), 212 deletions(-)
 create mode 100644 src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
 create mode 100644 src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.ts
 create mode 100644 src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module.ts

diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 8a473aad..4e786c73 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -167,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)},
 
diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts
index c635d259..9bc29a0a 100644
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -737,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',
diff --git a/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html b/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
new file mode 100644
index 00000000..5fa36942
--- /dev/null
+++ b/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>
diff --git a/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.ts b/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.ts
new file mode 100644
index 00000000..0441b799
--- /dev/null
+++ b/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);
+        });
+    }
+}
diff --git a/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module.ts b/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module.ts
new file mode 100644
index 00000000..4c4edbaa
--- /dev/null
+++ b/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
+{
+}
diff --git a/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts b/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
index 6d80061b..113c0e58 100644
--- a/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
+++ b/src/app/modules/admin/ui/fuse-components/fuse-components.module.ts
@@ -6,7 +6,6 @@ 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 { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTreeModule } from '@angular/material/tree';
 import { FuseCardModule } from '@fuse/components/card';
@@ -67,7 +66,6 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
         MatInputModule,
         MatSelectModule,
         MatSidenavModule,
-        MatSlideToggleModule,
         MatTabsModule,
         MatTreeModule,
         FuseAlertModule,
diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
index 15b6d5fb..41cd757c 100644
--- a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
+++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
@@ -260,161 +260,6 @@
                 </tbody>
             </table>
         </div>
-
-        <h2>Example</h2>
-        <p>
-            Below you can configure the dialog and preview it. You can use the generated configuration object within your code
-            to have the exact same dialog.
-        </p>
-        <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-slide-toggle
-                            [color]="'primary'"
-                            [formControlName]="'show'">
-                            Show Icon
-                        </mat-slide-toggle>
-                        <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-slide-toggle
-                                class="mt-2"
-                                [color]="'primary'"
-                                [formControlName]="'show'">
-                                Show Confirm button
-                            </mat-slide-toggle>
-                            <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-slide-toggle
-                                class="mt-2"
-                                [color]="'primary'"
-                                [formControlName]="'show'">
-                                Show Cancel button
-                            </mat-slide-toggle>
-                            <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-slide-toggle
-                        [color]="'primary'"
-                        [formControlName]="'dismissible'">
-                        Dismissible
-                    </mat-slide-toggle>
-                </form>
-
-                <div class="mt-12">
-                    <button
-                        mat-flat-button
-                        [color]="'primary'"
-                        (click)="openConfirmationDialog()">
-                        Open Confirmation Dialog
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Config as json -->
-        <textarea
-            fuse-highlight
-            [code]="configForm.value | json"
-            [lang]="'json'"></textarea>
     </div>
 
 </div>
diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts
index 2e859b9d..13d1b510 100644
--- a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.ts
@@ -1,78 +1,25 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
+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 implements OnInit
+export class ConfirmationComponent
 {
-    configForm: FormGroup;
-
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder,
-        private _fuseConfirmationService: FuseConfirmationService,
         private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ 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);
-        });
-    }
-
     /**
      * Toggle the drawer
      */

From 35e56cd6afddabb6da513afdee0811d53928c78d Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Mon, 12 Jul 2021 12:39:52 +0300
Subject: [PATCH 10/12] (fuse/confirmation) Small tweak on the docs

---
 .../services/confirmation/confirmation.component.html         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
index 41cd757c..90aa2def 100644
--- a/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
+++ b/src/app/modules/admin/ui/fuse-components/services/confirmation/confirmation.component.html
@@ -106,7 +106,7 @@
                             <div>title</div>
                         </td>
                         <td>
-                            Title of the confirmation dialog.
+                            Title of the confirmation dialog, HTML is allowed.
                         </td>
                     </tr>
                     <tr>
@@ -114,7 +114,7 @@
                             <div>message</div>
                         </td>
                         <td>
-                            Message of the confirmation dialog.
+                            Message of the confirmation dialog, HTML is allowed.
                         </td>
                     </tr>
                     <tr>

From 8b977c0eeba38bc7ab8a37aba136e3ba5f5c9cce Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 16 Jul 2021 12:00:46 +0300
Subject: [PATCH 11/12] Updated Angular, Angular Material and couple other
 dependencies & increased the version number

---
 package-lock.json                          | 922 +++++++++++++--------
 package.json                               |  68 +-
 src/@fuse/version/fuse-version.ts          |   2 +-
 src/app/mock-api/common/navigation/data.ts |   2 +-
 4 files changed, 615 insertions(+), 379 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index af72b785..664f37bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,32 +1,33 @@
 {
     "name": "@fuse/demo",
-    "version": "13.2.0",
+    "version": "13.3.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
         "@angular-devkit/architect": {
-            "version": "0.1201.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1201.0.tgz",
-            "integrity": "sha512-tqIhGccWjI32xmLs0UIr2umET18Le+r5PxCf30ueOE5pv1q7XKD06EzGx9J05B1aUgDFb3LP/ArlKel5JnD+3g==",
+            "version": "0.1201.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1201.2.tgz",
+            "integrity": "sha512-hR5kI03WoeEY9dkAsQNLlhL1iEFC2L77ansaKquN+HCAeOGHby4w95suSlZUAg0r6ZhPhPH0tkIRZXU9NMa09g==",
             "dev": true,
             "requires": {
-                "@angular-devkit/core": "12.1.0",
+                "@angular-devkit/core": "12.1.2",
                 "rxjs": "6.6.7"
             }
         },
         "@angular-devkit/build-angular": {
-            "version": "12.1.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-12.1.0.tgz",
-            "integrity": "sha512-zgZJLp9qwxJ9w31NHLIVg2kJZAZw4I/tuafP3CDpsLasFCepDG9+oDNEMeOoixnvUqyQE3KhAqxBkHZhcDXnFA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-12.1.2.tgz",
+            "integrity": "sha512-tclYPz2fT422D7dCwAY0+NzGlWGaDbOzba4SJs4klbluzfl0vLyBq+mbKGc5HtDj8NMwvd/1yIcBiCJYEYXwiA==",
             "dev": true,
             "requires": {
-                "@angular-devkit/architect": "0.1201.0",
-                "@angular-devkit/build-optimizer": "0.1201.0",
-                "@angular-devkit/build-webpack": "0.1201.0",
-                "@angular-devkit/core": "12.1.0",
+                "@angular-devkit/architect": "0.1201.2",
+                "@angular-devkit/build-optimizer": "0.1201.2",
+                "@angular-devkit/build-webpack": "0.1201.2",
+                "@angular-devkit/core": "12.1.2",
                 "@babel/core": "7.14.6",
                 "@babel/generator": "7.14.5",
                 "@babel/helper-annotate-as-pure": "7.14.5",
+                "@babel/plugin-proposal-async-generator-functions": "7.14.7",
                 "@babel/plugin-transform-async-to-generator": "7.14.5",
                 "@babel/plugin-transform-runtime": "7.14.5",
                 "@babel/preset-env": "7.14.7",
@@ -34,7 +35,7 @@
                 "@babel/template": "7.14.5",
                 "@discoveryjs/json-ext": "0.5.3",
                 "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-                "@ngtools/webpack": "12.1.0",
+                "@ngtools/webpack": "12.1.2",
                 "ansi-colors": "4.1.1",
                 "babel-loader": "8.2.2",
                 "browserslist": "^4.9.1",
@@ -54,9 +55,9 @@
                 "karma-source-map-support": "1.4.0",
                 "less": "4.1.1",
                 "less-loader": "10.0.0",
-                "license-webpack-plugin": "2.3.19",
+                "license-webpack-plugin": "2.3.20",
                 "loader-utils": "2.0.0",
-                "mini-css-extract-plugin": "1.6.0",
+                "mini-css-extract-plugin": "1.6.2",
                 "minimatch": "3.0.4",
                 "open": "8.2.1",
                 "ora": "5.4.1",
@@ -83,7 +84,7 @@
                 "text-table": "0.2.0",
                 "tree-kill": "1.2.2",
                 "tslib": "2.3.0",
-                "webpack": "5.40.0",
+                "webpack": "5.42.0",
                 "webpack-dev-middleware": "5.0.0",
                 "webpack-dev-server": "3.11.2",
                 "webpack-merge": "5.8.0",
@@ -218,9 +219,9 @@
             }
         },
         "@angular-devkit/build-optimizer": {
-            "version": "0.1201.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1201.0.tgz",
-            "integrity": "sha512-FbvJfvT2fM1MNCqImfXtBjeIv6l5tDCBrXsSydyIG+2Fdp6NGlZQdMWYjfc0wGUDdCv1YjIGOL2BQ5hx6Q5HRA==",
+            "version": "0.1201.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1201.2.tgz",
+            "integrity": "sha512-ScrxpIiTbexs0iH64TeJv2NUh403X/NK/ConxDojxmQ7a2qZYXYKVm8F1d/AtUNfIPRZpWWmwoFlSmFhHGNWPw==",
             "dev": true,
             "requires": {
                 "source-map": "0.7.3",
@@ -237,19 +238,19 @@
             }
         },
         "@angular-devkit/build-webpack": {
-            "version": "0.1201.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1201.0.tgz",
-            "integrity": "sha512-l733LS0kV2AZwzYRGH6c93sjVfGz3Jw4g448c7qdXIMf1pSYuba8D2hsj6VqNcOZkXmZwtEB1soeahwwPjWRag==",
+            "version": "0.1201.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1201.2.tgz",
+            "integrity": "sha512-dQWInUvuQ5VTBxXGQBamekF4lRkiAlp0LxybYItAnSMRs7tXfPKtILg5RpJet1hnwvP33HFnu1AhNOCeBYu2bg==",
             "dev": true,
             "requires": {
-                "@angular-devkit/architect": "0.1201.0",
+                "@angular-devkit/architect": "0.1201.2",
                 "rxjs": "6.6.7"
             }
         },
         "@angular-devkit/core": {
-            "version": "12.1.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-12.1.0.tgz",
-            "integrity": "sha512-y6q/hn9/j6LwNgDzTBXe5pTXouU7nuc3KZFq3JwfTdo4yTIxN1Rdv9+zfzDkzEcYtyFoqLqqskQFme/DqdbEZw==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-12.1.2.tgz",
+            "integrity": "sha512-TeaRbvsNEeAkRJcIBlT6yUNh0vaVVBGBYfXYFIMg/I04ex/HI0ApEowu78GeTzCqlE0r4t+WaGT46m7+NIljKg==",
             "dev": true,
             "requires": {
                 "ajv": "8.6.0",
@@ -261,12 +262,12 @@
             }
         },
         "@angular-devkit/schematics": {
-            "version": "12.1.0",
-            "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-12.1.0.tgz",
-            "integrity": "sha512-KlE1fnvqWItt9dYCaQ89b9WoqFvOK64kemCLGGx49CllQ3con1lwXW2iauzT/29UoK1rSzvTVMvTJcDQOJ7isQ==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-12.1.2.tgz",
+            "integrity": "sha512-/UGcAJChq+g7wf46Exr5iIyuVw3j4TxTIntTpuKg/z/xf9Y+8mzJAZgGittu/yFcHAJ9aYcOHctffrfEdV7QSA==",
             "dev": true,
             "requires": {
-                "@angular-devkit/core": "12.1.0",
+                "@angular-devkit/core": "12.1.2",
                 "ora": "5.4.1",
                 "rxjs": "6.6.7"
             },
@@ -399,39 +400,42 @@
             }
         },
         "@angular-eslint/builder": {
-            "version": "12.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-12.2.0.tgz",
-            "integrity": "sha512-AlVe8VcJr9d/BohtHvAyxn3pyVGE9o0g3BqnmthQl6+g5G/WZ5SH5CyQlPF6ycyMbxuHuICgVBbIK9jedZxM1A==",
-            "dev": true
-        },
-        "@angular-eslint/eslint-plugin": {
-            "version": "12.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-12.2.0.tgz",
-            "integrity": "sha512-VKeRAql5AzhMrFFP865FjwkheUSsSGKpdTCa8jYZXZkmsXQnqta+omexBqvKT3CSYAEjSN3FLpQyqSXWWZysWg==",
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-12.3.1.tgz",
+            "integrity": "sha512-Py7Y9n0evIWGgEIrnMaLvalE1+Nw9HoY+fcYLYd9POfY0cug8j7hbkoPQ6rM7GzNHVcVsqEi/8C4DoF7RXXNRg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/experimental-utils": "4.23.0"
+                "@nrwl/devkit": ">= 12.0.0 < 13.0.0"
+            }
+        },
+        "@angular-eslint/eslint-plugin": {
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-12.3.1.tgz",
+            "integrity": "sha512-KBm27onYggRcusA/BxuSkDGpVnIs8yG4ARio8ZAhe0H2XIRJTzJZ7oIBBjugDau03AGX3VMG6wAXailjJvsywg==",
+            "dev": true,
+            "requires": {
+                "@typescript-eslint/experimental-utils": "4.28.2"
             }
         },
         "@angular-eslint/eslint-plugin-template": {
-            "version": "12.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-12.2.0.tgz",
-            "integrity": "sha512-DLZiv6x2ZF0OJ3a3KR/APQkhA3HZqebdVCJd29EzdF3qnZGQybNV5GfFONf67vDkm/wA/UaF8rO4Rc8WQv2PHQ==",
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-12.3.1.tgz",
+            "integrity": "sha512-pz+nO64ma/9Sp2aeRnQ+Vktt7Fo1Lay/J+CG//3TIc3lYsoCTj4h42P6yCcxxJ9b4N7SUxMAnchA8eE5mJS4Ug==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/experimental-utils": "4.23.0",
+                "@typescript-eslint/experimental-utils": "4.28.2",
                 "aria-query": "^4.2.2",
                 "axobject-query": "^2.2.0"
             }
         },
         "@angular-eslint/schematics": {
-            "version": "12.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-12.2.0.tgz",
-            "integrity": "sha512-HsUjfjvGzCv5zygwcxPP0zPp/qTCp4JZlA+8m59S1X5w+yy2zt/vQW/8bOFUtVJCFTa+KcxDt/fzU/qSZKpCGw==",
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-12.3.1.tgz",
+            "integrity": "sha512-r1yZaqyO0oJhKDIWio3gH9TWpWEN8bUpiftgkkR6Yyc4hKBbiR5N4RQo5aZ5bnGytdW8QP8zq2k1yYBWjhEX7A==",
             "dev": true,
             "requires": {
-                "@angular-eslint/eslint-plugin": "12.2.0",
-                "@angular-eslint/eslint-plugin-template": "12.2.0",
+                "@angular-eslint/eslint-plugin": "12.3.1",
+                "@angular-eslint/eslint-plugin-template": "12.3.1",
                 "ignore": "5.1.8",
                 "strip-json-comments": "3.1.1",
                 "tmp": "0.2.1"
@@ -449,41 +453,41 @@
             }
         },
         "@angular-eslint/template-parser": {
-            "version": "12.2.0",
-            "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-12.2.0.tgz",
-            "integrity": "sha512-Lz8VZVgmIf443lgCEQiplyivc673Lswh4GmeofmRWzSn5lWYkfOfhiKPljM/TzIzUC7urn2YHoErIPMTQQDyFw==",
+            "version": "12.3.1",
+            "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-12.3.1.tgz",
+            "integrity": "sha512-6DkXqTaVEHZdcN3isHQ2CDoTsKLuJ5C1SYEOuFzOU1Zp85SvjxO92v6gPkFPKk0iQNVRmQS2XcKef6weehUUGA==",
             "dev": true,
             "requires": {
                 "eslint-scope": "^5.1.0"
             }
         },
         "@angular/animations": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-12.1.1.tgz",
-            "integrity": "sha512-79TfDx1AAxrVNM56oY+OwRpku9eCF6w3ko2DWDeQpgCvqM6/a53B5rPhz6yuwgadIqUdQH0T4CeE/v5hXYdOMA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-12.1.2.tgz",
+            "integrity": "sha512-gFRObY32h33tHI60NS0A6DXKL/Y9h8Efo3s2leIsInuYdxZBb7/vlJu4i5AJWEdFZNcY6TDBxK1vi37xlLdLlQ==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/cdk": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.1.tgz",
-            "integrity": "sha512-MJENa8qmfLAr6t59u1+mEC2YPbCn4n3vsY6k8fKyf+ILXwwGHWNZlYblaRMBjrF/crSx1Kd5vb30RCqIcNTGsA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.2.tgz",
+            "integrity": "sha512-ALupZejZDsVYcbNZcEH1cV8SDgVBL40FAwDnlSZxCgd0HOBHH0ZqQV+8z0uCQeMatoNM+SwmJ8Y1JXYh9Bqfiw==",
             "requires": {
                 "parse5": "^5.0.0",
                 "tslib": "^2.2.0"
             }
         },
         "@angular/cli": {
-            "version": "12.1.0",
-            "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.1.0.tgz",
-            "integrity": "sha512-3xvweF9oiR1X9KlXIFPGQtylctqPi9t7SjI/8M2z/qRP4GkMu2CiScNysWFMdJsNsrRvLGQdtAbJFBWfW1vmkA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.1.2.tgz",
+            "integrity": "sha512-oBJcSqXJyPzWGYft5/nD3hJhunxTGXlI4++9ehzdF/fRipOLLMqf77vi/4rUA2DGuaPMbYJeunBnIsgXRGIHIg==",
             "dev": true,
             "requires": {
-                "@angular-devkit/architect": "0.1201.0",
-                "@angular-devkit/core": "12.1.0",
-                "@angular-devkit/schematics": "12.1.0",
-                "@schematics/angular": "12.1.0",
+                "@angular-devkit/architect": "0.1201.2",
+                "@angular-devkit/core": "12.1.2",
+                "@angular-devkit/schematics": "12.1.2",
+                "@schematics/angular": "12.1.2",
                 "@yarnpkg/lockfile": "1.1.0",
                 "ansi-colors": "4.1.1",
                 "debug": "4.3.1",
@@ -635,25 +639,25 @@
             }
         },
         "@angular/common": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.1.1.tgz",
-            "integrity": "sha512-NnRwGMatzjthvDQ4+8tm09Ak5i27Qga8x4BdzINN1RjLmzQ0zW00Mn2AUGYEDZHt9HXVHff5stsZGqj+Ne4QJw==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.1.2.tgz",
+            "integrity": "sha512-/sf8iPZwHceMD4xNH4E8qjxXWAypjxmJBlv+9OczS1pGvYATBB9CaKCJQ73c6Yks9Cqz37q1DMWK3S376YWZMQ==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/compiler": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.1.1.tgz",
-            "integrity": "sha512-QV56c+A18vdY8AB/SoWq0UkHhJxYDWY+VUY75RM2dxcsXoNeO5FTCjBRkA7yMiX6Q6cahH2ivC7tmqVU2mYHuA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.1.2.tgz",
+            "integrity": "sha512-G0KKpV4jL/qErUN9i/tKHHIO0P6GGtoDyexz4qh4m+K7dxn5WHd9FcqbTTLHbnGg7RnfuKou3muAWhvSoPqhSw==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/compiler-cli": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-12.1.1.tgz",
-            "integrity": "sha512-3PEi7dol8sU0TVEjnBubJXgwDALBk85XlIhmZ9lZa7okUM8Su6dQ9uFi+PXCosn/SlbpUnOizs8wBRqScCX5ug==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-12.1.2.tgz",
+            "integrity": "sha512-+29dnsU6w5CWkMOCFIUQNAKqI9y1mKT7bPNaVgqEgWWlloY5D2myE9ceBuIt7WDQhxz5kfAOSIgy6Chw1bqpMg==",
             "dev": true,
             "requires": {
                 "@babel/core": "^7.8.6",
@@ -769,57 +773,57 @@
             }
         },
         "@angular/core": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.1.1.tgz",
-            "integrity": "sha512-7Q4na8zCXi4ITBG8kgbS+vnnVK0GDU2WXU80/il096+8YPFKfj6MyDWZH79KA3jrIg9/yhLwSQx8x8wnj8dqBA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.1.2.tgz",
+            "integrity": "sha512-+JvM9fNICKMdfXpaKR0zSWMrrMCp78N1056Di2/RxLxvycm/TegjHq0IXVqpY9hMccZXjjCTl0EUNVMFZ2mkcg==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/forms": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.1.1.tgz",
-            "integrity": "sha512-up5P9jdqsPjrX3YgNMSIkTCwRzVNJbAlDiKrnww7pt5RL2fZGq+x/ddvtTSjdne9oknRKitADFkjuPozPH+LOg==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.1.2.tgz",
+            "integrity": "sha512-cJ8zoaQpOtjTwPc0ObH6qXM0k9MWl+8eGL3jDtf01n0ByZXWFZ+2oQHmU64rO8sJntUR8LPvbXFJRMNd0ZpdsQ==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/material": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.1.tgz",
-            "integrity": "sha512-q2vhbVQfjr+88beqCotCVlaPRyy9y2O2asiR3+0BU9OJ1DjTo1QpBmMpck5InP7Es49t9RTk9RzzC0t18p45yA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.2.tgz",
+            "integrity": "sha512-DpqnvwnVqaudFRXTNyJR8r/gbKG4RtE3RGc6q4FgdN9SOfRh/q/yYyNnOUnbCwPgLTmkfGz+bj7++GA8gzhSkg==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/material-moment-adapter": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.1.1.tgz",
-            "integrity": "sha512-YQs4BFiQ0rCYhWzcPJ6IS6zJRM+iKAjAEo/Z89G4tR1vekA4Fl95PBs9DVoCLS2uptOPL99tnUMqeNtFjUM6wQ==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.1.2.tgz",
+            "integrity": "sha512-Y3v1nqOB7pMS+oWpjyp8n/34bgTnXM8ydGLs6OfoY9ALpEjbJYSEzFBLQEvnYBppHFwJbIn3VNHmo1hulmdlMA==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/platform-browser": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.1.1.tgz",
-            "integrity": "sha512-R78K0DYxplYUvctq/7MvoBjuMDgMNrL1h8Bov0g7lN5hQWBQwBjl//CiJgx8H7uSiba9DQ0Jwu5Xxvkzkr8ggA==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.1.2.tgz",
+            "integrity": "sha512-QDtRZQDn0yrcuNoxDLrawCG8Pe5DdhJFy4tmMEpUYBpFZT+9qsRf5RD01QbzvbDKxwxgsce/783WZoPImMqaIA==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/platform-browser-dynamic": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.1.1.tgz",
-            "integrity": "sha512-x8bIQzRvrdA/LfnIp5/Fo15BqD7g5j+XQe/KyWM+jBnpKr9queet0xvSAWD+KGkdrebI1xIgNtNNTxPCxREbiQ==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.1.2.tgz",
+            "integrity": "sha512-y7O2vu6p2shnO2kKoyaIjsQP1seg73ky3ORur2oaLTIfa1Uxeho2Ow0V6O0RUL230ol4qGetL64TMK7SjyoPhQ==",
             "requires": {
                 "tslib": "^2.2.0"
             }
         },
         "@angular/router": {
-            "version": "12.1.1",
-            "resolved": "https://registry.npmjs.org/@angular/router/-/router-12.1.1.tgz",
-            "integrity": "sha512-rv4I9uVQq7gunEGzGFkJDlu4fetOCSAGKPr83Q0Ekx+MuMr6zK0VbRgymMW/5LUaDl5Pobi+XeC3Y5tfjCI3Lg==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@angular/router/-/router-12.1.2.tgz",
+            "integrity": "sha512-iYf8c5HMdchHiEhZ01HCXyZjUmxUWI+es17V/GnsR1+S1NeF3TeYhGf3X2wdhVDvPfxq/4kZZRSddM0PAm0Lfw==",
             "requires": {
                 "tslib": "^2.2.0"
             }
@@ -1969,12 +1973,12 @@
             "dev": true
         },
         "@es-joy/jsdoccomment": {
-            "version": "0.8.0",
-            "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.8.0.tgz",
-            "integrity": "sha512-Xd3GzYsL2sz2pcdtYt5Q0Wz1ol/o9Nt2UQL4nFPDcaEomvPmwjJsbjkKx1SKhl2h3TgwazNBLdcNr2m0UiGiFA==",
+            "version": "0.9.0-alpha.1",
+            "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.9.0-alpha.1.tgz",
+            "integrity": "sha512-Clxxc0PwpISoYYBibA+1L2qFJ7gvFVhI2Hos87S06K+Q0cXdOhZQJNKWuaQGPAeHjZEuUB/YoWOfwjuF2wirqA==",
             "dev": true,
             "requires": {
-                "comment-parser": "^1.1.5",
+                "comment-parser": "1.1.6-beta.0",
                 "esquery": "^1.4.0",
                 "jsdoc-type-pratt-parser": "1.0.4"
             }
@@ -2009,9 +2013,9 @@
                     }
                 },
                 "globals": {
-                    "version": "13.9.0",
-                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
-                    "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
+                    "version": "13.10.0",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+                    "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
                     "dev": true,
                     "requires": {
                         "type-fest": "^0.20.2"
@@ -2093,6 +2097,23 @@
                 "purgecss": "^4.0.3"
             }
         },
+        "@humanwhocodes/config-array": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+            "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
+            "dev": true,
+            "requires": {
+                "@humanwhocodes/object-schema": "^1.2.0",
+                "debug": "^4.1.1",
+                "minimatch": "^3.0.4"
+            }
+        },
+        "@humanwhocodes/object-schema": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
+            "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
+            "dev": true
+        },
         "@istanbuljs/schema": {
             "version": "0.1.3",
             "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -2113,9 +2134,9 @@
             }
         },
         "@ngneat/transloco": {
-            "version": "2.21.0",
-            "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-2.21.0.tgz",
-            "integrity": "sha512-KrlGTQwVp+MWPtghCvy6pT9P5wCBzk/tRdljog2NB0QIcLQr18Sf7diNPK+fkpk9Q5ntFV3bNSwEVGZFBWdmCg==",
+            "version": "2.22.0",
+            "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-2.22.0.tgz",
+            "integrity": "sha512-mJ8KVm3nPoSyKlMqsP4D3nNClugwnwxmVrP3QtO16jEiLn8U0ipsAlj7SyQqjIWKSLxxVZuJX25lmk6Ye9iYoA==",
             "requires": {
                 "@ngneat/transloco-utils": "^1.0.6",
                 "flat": "5.0.2",
@@ -2149,9 +2170,9 @@
             }
         },
         "@ngtools/webpack": {
-            "version": "12.1.0",
-            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.1.0.tgz",
-            "integrity": "sha512-b35mXdPYVuLwHNZ4r29Zt/SIOI9eFc8GbF1MzirdzM2X4k/wWD1kFIAVseDeA12jb04Jj7UnU6eZo0dDe24WFw==",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.1.2.tgz",
+            "integrity": "sha512-7anwzgkVz3A6QV7IdtiqYrFRXwjO4jQHYk02EpVA+m6Pk7skpz6MjHpgJqSGUm27z1RRyR9zaLjJ/Zlaot60DA==",
             "dev": true,
             "requires": {
                 "enhanced-resolve": "5.8.2"
@@ -2258,14 +2279,159 @@
                 "read-package-json-fast": "^2.0.1"
             }
         },
-        "@schematics/angular": {
-            "version": "12.1.0",
-            "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.1.0.tgz",
-            "integrity": "sha512-BUCBiW+DQsOofSs4TE26M2OhlS0g9Mdyd0xWF4FD2Ab3xwQgkV1gogZgCl9dZtNfiimYebdM9LOeHqYWmvqCdw==",
+        "@nrwl/devkit": {
+            "version": "12.5.8",
+            "resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-12.5.8.tgz",
+            "integrity": "sha512-Rhcx8fU30qfoaCMrMUND5lZIDu/0Fik26dE3flgKRgfeGprPSctq/w/k81+HJy7inGVvis20JBSeYH1HSPcePw==",
             "dev": true,
             "requires": {
-                "@angular-devkit/core": "12.1.0",
-                "@angular-devkit/schematics": "12.1.0",
+                "@nrwl/tao": "12.5.8",
+                "ejs": "^3.1.5",
+                "ignore": "^5.0.4",
+                "semver": "7.3.4",
+                "tslib": "^2.0.0"
+            },
+            "dependencies": {
+                "semver": {
+                    "version": "7.3.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+                    "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+                    "dev": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
+                }
+            }
+        },
+        "@nrwl/tao": {
+            "version": "12.5.8",
+            "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-12.5.8.tgz",
+            "integrity": "sha512-sbVxUnnZMLAFFwbEE/dx4W7U4fUKW5pTIIzlnNuzzTn8KDN3rAON6KqXF+KR/Ny9cGlmkBKlWSq8PvhUrSaZvw==",
+            "dev": true,
+            "requires": {
+                "chalk": "4.1.0",
+                "enquirer": "~2.3.6",
+                "fs-extra": "^9.1.0",
+                "jsonc-parser": "3.0.0",
+                "rxjs": "^6.5.4",
+                "rxjs-for-await": "0.0.2",
+                "semver": "7.3.4",
+                "tmp": "~0.2.1",
+                "tslib": "^2.0.0",
+                "yargs-parser": "20.0.0"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "chalk": {
+                    "version": "4.1.0",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+                    "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+                    "dev": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true
+                },
+                "fs-extra": {
+                    "version": "9.1.0",
+                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+                    "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+                    "dev": true,
+                    "requires": {
+                        "at-least-node": "^1.0.0",
+                        "graceful-fs": "^4.2.0",
+                        "jsonfile": "^6.0.1",
+                        "universalify": "^2.0.0"
+                    }
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true
+                },
+                "jsonfile": {
+                    "version": "6.1.0",
+                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+                    "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+                    "dev": true,
+                    "requires": {
+                        "graceful-fs": "^4.1.6",
+                        "universalify": "^2.0.0"
+                    }
+                },
+                "semver": {
+                    "version": "7.3.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+                    "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+                    "dev": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                },
+                "tmp": {
+                    "version": "0.2.1",
+                    "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+                    "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+                    "dev": true,
+                    "requires": {
+                        "rimraf": "^3.0.0"
+                    }
+                },
+                "universalify": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+                    "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+                    "dev": true
+                },
+                "yargs-parser": {
+                    "version": "20.0.0",
+                    "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.0.0.tgz",
+                    "integrity": "sha512-8eblPHTL7ZWRkyjIZJjnGf+TijiKJSwA24svzLRVvtgoi/RZiKa9fFQTrlx0OKLnyHSdt/enrdadji6WFfESVA==",
+                    "dev": true
+                }
+            }
+        },
+        "@schematics/angular": {
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.1.2.tgz",
+            "integrity": "sha512-nnFPp9uHLinP05r9TFsWT+fwlbwbLHg3yzJr+0aIOX1OsZQFV8hblEFEqdzFQJyx1uGMp4nvBHvCUlYv9GVQLg==",
+            "dev": true,
+            "requires": {
+                "@angular-devkit/core": "12.1.2",
+                "@angular-devkit/schematics": "12.1.2",
                 "jsonc-parser": "3.0.0"
             }
         },
@@ -2336,9 +2502,9 @@
             "dev": true
         },
         "@types/eslint": {
-            "version": "7.2.13",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.13.tgz",
-            "integrity": "sha512-LKmQCWAlnVHvvXq4oasNUMTJJb2GwSyTY8+1C7OH5ILR8mPLaljv1jxL1bXW3xB3jFbQxTKxJAvI8PyjB09aBg==",
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
+            "integrity": "sha512-07XlgzX0YJUn4iG1ocY4IX9DzKSmMGUs6ESKlxWhZRaa0fatIWaHWUVapcuGa8r5HFnTqzj+4OCjd5f7EZ/i/A==",
             "dev": true,
             "requires": {
                 "@types/estree": "*",
@@ -2346,9 +2512,9 @@
             }
         },
         "@types/eslint-scope": {
-            "version": "3.7.0",
-            "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.0.tgz",
-            "integrity": "sha512-O/ql2+rrCUe2W2rs7wMR+GqPRcgB6UiqN5RhrR5xruFlY7l9YLMn0ZkDzjoHLeiFkR8MCQZVudUuuvQ2BLC9Qw==",
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
+            "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
             "dev": true,
             "requires": {
                 "@types/eslint": "*",
@@ -2356,15 +2522,15 @@
             }
         },
         "@types/estree": {
-            "version": "0.0.47",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.47.tgz",
-            "integrity": "sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==",
+            "version": "0.0.48",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
+            "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
             "dev": true
         },
         "@types/glob": {
-            "version": "7.1.3",
-            "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
-            "integrity": "sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==",
+            "version": "7.1.4",
+            "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
+            "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==",
             "dev": true,
             "requires": {
                 "@types/minimatch": "*",
@@ -2381,15 +2547,15 @@
             }
         },
         "@types/jasmine": {
-            "version": "3.6.11",
-            "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.6.11.tgz",
-            "integrity": "sha512-S6pvzQDvMZHrkBz2Mcn/8Du7cpr76PlRJBAoHnSDNbulULsH5dp0Gns+WRyNX5LHejz/ljxK4/vIHK/caHt6SQ==",
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.8.1.tgz",
+            "integrity": "sha512-ioRNoJvv0eXL1c9BZKpnywZWb5YflhaSiF3IOp9deyoh30MOwkB3bNuzi4UW76EFEhcmqpoEpdWhcUAAilomTw==",
             "dev": true
         },
         "@types/json-schema": {
-            "version": "7.0.7",
-            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
-            "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+            "version": "7.0.8",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
+            "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
             "dev": true
         },
         "@types/json5": {
@@ -2399,9 +2565,9 @@
             "dev": true
         },
         "@types/lodash": {
-            "version": "4.14.170",
-            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.170.tgz",
-            "integrity": "sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==",
+            "version": "4.14.171",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.171.tgz",
+            "integrity": "sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==",
             "dev": true
         },
         "@types/lodash-es": {
@@ -2419,15 +2585,15 @@
             "integrity": "sha512-lbhSN1rht/tQ+dSWxawCzGgTfxe9DB31iLgiT1ZVT5lshpam/nyOA1m3tKHRoNPctB2ukSL22JZI5Fr+WI/zYg=="
         },
         "@types/minimatch": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-            "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+            "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
             "dev": true
         },
         "@types/node": {
-            "version": "12.20.15",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.15.tgz",
-            "integrity": "sha512-F6S4Chv4JicJmyrwlDkxUdGNSplsQdGwp1A0AJloEVDirWdZOAiRHhovDlsFkKUrquUXhz1imJhXHsf59auyAg==",
+            "version": "12.20.16",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.16.tgz",
+            "integrity": "sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==",
             "dev": true
         },
         "@types/parse-json": {
@@ -2442,9 +2608,9 @@
             "dev": true
         },
         "@types/webpack-sources": {
-            "version": "0.1.8",
-            "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz",
-            "integrity": "sha512-JHB2/xZlXOjzjBB6fMOpH1eQAfsrpqVVIbneE0Rok16WXwFaznaI5vfg75U5WgGJm7V9W1c4xeRQDjX/zwvghA==",
+            "version": "0.1.9",
+            "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.9.tgz",
+            "integrity": "sha512-bvzMnzqoK16PQIC8AYHNdW45eREJQMd6WG/msQWX5V2+vZmODCOPb4TJcbgRljTZZTwTM4wUMcsI8FftNA7new==",
             "dev": true,
             "requires": {
                 "@types/node": "*",
@@ -2461,13 +2627,13 @@
             }
         },
         "@typescript-eslint/eslint-plugin": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.1.tgz",
-            "integrity": "sha512-9yfcNpDaNGQ6/LQOX/KhUFTR1sCKH+PBr234k6hI9XJ0VP5UqGxap0AnNwBnWFk1MNyWBylJH9ZkzBXC+5akZQ==",
+            "version": "4.28.3",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.3.tgz",
+            "integrity": "sha512-jW8sEFu1ZeaV8xzwsfi6Vgtty2jf7/lJmQmDkDruBjYAbx5DA8JtbcMnP0rNPUG+oH5GoQBTSp+9613BzuIpYg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/experimental-utils": "4.28.1",
-                "@typescript-eslint/scope-manager": "4.28.1",
+                "@typescript-eslint/experimental-utils": "4.28.3",
+                "@typescript-eslint/scope-manager": "4.28.3",
                 "debug": "^4.3.1",
                 "functional-red-black-tree": "^1.0.1",
                 "regexpp": "^3.1.0",
@@ -2476,43 +2642,43 @@
             },
             "dependencies": {
                 "@typescript-eslint/experimental-utils": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.1.tgz",
-                    "integrity": "sha512-n8/ggadrZ+uyrfrSEchx3jgODdmcx7MzVM2sI3cTpI/YlfSm0+9HEUaWw3aQn2urL2KYlWYMDgn45iLfjDYB+Q==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.3.tgz",
+                    "integrity": "sha512-zZYl9TnrxwEPi3FbyeX0ZnE8Hp7j3OCR+ELoUfbwGHGxWnHg9+OqSmkw2MoCVpZksPCZYpQzC559Ee9pJNHTQw==",
                     "dev": true,
                     "requires": {
                         "@types/json-schema": "^7.0.7",
-                        "@typescript-eslint/scope-manager": "4.28.1",
-                        "@typescript-eslint/types": "4.28.1",
-                        "@typescript-eslint/typescript-estree": "4.28.1",
+                        "@typescript-eslint/scope-manager": "4.28.3",
+                        "@typescript-eslint/types": "4.28.3",
+                        "@typescript-eslint/typescript-estree": "4.28.3",
                         "eslint-scope": "^5.1.1",
                         "eslint-utils": "^3.0.0"
                     }
                 },
                 "@typescript-eslint/scope-manager": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.1.tgz",
-                    "integrity": "sha512-o95bvGKfss6705x7jFGDyS7trAORTy57lwJ+VsYwil/lOUxKQ9tA7Suuq+ciMhJc/1qPwB3XE2DKh9wubW8YYA==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.3.tgz",
+                    "integrity": "sha512-/8lMisZ5NGIzGtJB+QizQ5eX4Xd8uxedFfMBXOKuJGP0oaBBVEMbJVddQKDXyyB0bPlmt8i6bHV89KbwOelJiQ==",
                     "dev": true,
                     "requires": {
-                        "@typescript-eslint/types": "4.28.1",
-                        "@typescript-eslint/visitor-keys": "4.28.1"
+                        "@typescript-eslint/types": "4.28.3",
+                        "@typescript-eslint/visitor-keys": "4.28.3"
                     }
                 },
                 "@typescript-eslint/types": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.1.tgz",
-                    "integrity": "sha512-4z+knEihcyX7blAGi7O3Fm3O6YRCP+r56NJFMNGsmtdw+NCdpG5SgNz427LS9nQkRVTswZLhz484hakQwB8RRg==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.3.tgz",
+                    "integrity": "sha512-kQFaEsQBQVtA9VGVyciyTbIg7S3WoKHNuOp/UF5RG40900KtGqfoiETWD/v0lzRXc+euVE9NXmfer9dLkUJrkA==",
                     "dev": true
                 },
                 "@typescript-eslint/typescript-estree": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.1.tgz",
-                    "integrity": "sha512-GhKxmC4sHXxHGJv8e8egAZeTZ6HI4mLU6S7FUzvFOtsk7ZIDN1ksA9r9DyOgNqowA9yAtZXV0Uiap61bIO81FQ==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.3.tgz",
+                    "integrity": "sha512-YAb1JED41kJsqCQt1NcnX5ZdTA93vKFCMP4lQYG6CFxd0VzDJcKttRlMrlG+1qiWAw8+zowmHU1H0OzjWJzR2w==",
                     "dev": true,
                     "requires": {
-                        "@typescript-eslint/types": "4.28.1",
-                        "@typescript-eslint/visitor-keys": "4.28.1",
+                        "@typescript-eslint/types": "4.28.3",
+                        "@typescript-eslint/visitor-keys": "4.28.3",
                         "debug": "^4.3.1",
                         "globby": "^11.0.3",
                         "is-glob": "^4.0.1",
@@ -2521,76 +2687,67 @@
                     }
                 },
                 "@typescript-eslint/visitor-keys": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.1.tgz",
-                    "integrity": "sha512-K4HMrdFqr9PFquPu178SaSb92CaWe2yErXyPumc8cYWxFmhgJsNY9eSePmO05j0JhBvf2Cdhptd6E6Yv9HVHcg==",
-                    "dev": true,
-                    "requires": {
-                        "@typescript-eslint/types": "4.28.1",
-                        "eslint-visitor-keys": "^2.0.0"
-                    }
-                },
-                "eslint-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-                    "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.3.tgz",
+                    "integrity": "sha512-ri1OzcLnk1HH4gORmr1dllxDzzrN6goUIz/P4MHFV0YZJDCADPR3RvYNp0PW2SetKTThar6wlbFTL00hV2Q+fg==",
                     "dev": true,
                     "requires": {
+                        "@typescript-eslint/types": "4.28.3",
                         "eslint-visitor-keys": "^2.0.0"
                     }
                 }
             }
         },
         "@typescript-eslint/experimental-utils": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.23.0.tgz",
-            "integrity": "sha512-WAFNiTDnQfrF3Z2fQ05nmCgPsO5o790vOhmWKXbbYQTO9erE1/YsFot5/LnOUizLzU2eeuz6+U/81KV5/hFTGA==",
+            "version": "4.28.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.2.tgz",
+            "integrity": "sha512-MwHPsL6qo98RC55IoWWP8/opTykjTp4JzfPu1VfO2Z0MshNP0UZ1GEV5rYSSnZSUI8VD7iHvtIPVGW5Nfh7klQ==",
             "dev": true,
             "requires": {
-                "@types/json-schema": "^7.0.3",
-                "@typescript-eslint/scope-manager": "4.23.0",
-                "@typescript-eslint/types": "4.23.0",
-                "@typescript-eslint/typescript-estree": "4.23.0",
-                "eslint-scope": "^5.0.0",
-                "eslint-utils": "^2.0.0"
+                "@types/json-schema": "^7.0.7",
+                "@typescript-eslint/scope-manager": "4.28.2",
+                "@typescript-eslint/types": "4.28.2",
+                "@typescript-eslint/typescript-estree": "4.28.2",
+                "eslint-scope": "^5.1.1",
+                "eslint-utils": "^3.0.0"
             }
         },
         "@typescript-eslint/parser": {
-            "version": "4.28.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.1.tgz",
-            "integrity": "sha512-UjrMsgnhQIIK82hXGaD+MCN8IfORS1CbMdu7VlZbYa8LCZtbZjJA26De4IPQB7XYZbL8gJ99KWNj0l6WD0guJg==",
+            "version": "4.28.3",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.3.tgz",
+            "integrity": "sha512-ZyWEn34bJexn/JNYvLQab0Mo5e+qqQNhknxmc8azgNd4XqspVYR5oHq9O11fLwdZMRcj4by15ghSlIEq+H5ltQ==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "4.28.1",
-                "@typescript-eslint/types": "4.28.1",
-                "@typescript-eslint/typescript-estree": "4.28.1",
+                "@typescript-eslint/scope-manager": "4.28.3",
+                "@typescript-eslint/types": "4.28.3",
+                "@typescript-eslint/typescript-estree": "4.28.3",
                 "debug": "^4.3.1"
             },
             "dependencies": {
                 "@typescript-eslint/scope-manager": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.1.tgz",
-                    "integrity": "sha512-o95bvGKfss6705x7jFGDyS7trAORTy57lwJ+VsYwil/lOUxKQ9tA7Suuq+ciMhJc/1qPwB3XE2DKh9wubW8YYA==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.3.tgz",
+                    "integrity": "sha512-/8lMisZ5NGIzGtJB+QizQ5eX4Xd8uxedFfMBXOKuJGP0oaBBVEMbJVddQKDXyyB0bPlmt8i6bHV89KbwOelJiQ==",
                     "dev": true,
                     "requires": {
-                        "@typescript-eslint/types": "4.28.1",
-                        "@typescript-eslint/visitor-keys": "4.28.1"
+                        "@typescript-eslint/types": "4.28.3",
+                        "@typescript-eslint/visitor-keys": "4.28.3"
                     }
                 },
                 "@typescript-eslint/types": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.1.tgz",
-                    "integrity": "sha512-4z+knEihcyX7blAGi7O3Fm3O6YRCP+r56NJFMNGsmtdw+NCdpG5SgNz427LS9nQkRVTswZLhz484hakQwB8RRg==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.3.tgz",
+                    "integrity": "sha512-kQFaEsQBQVtA9VGVyciyTbIg7S3WoKHNuOp/UF5RG40900KtGqfoiETWD/v0lzRXc+euVE9NXmfer9dLkUJrkA==",
                     "dev": true
                 },
                 "@typescript-eslint/typescript-estree": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.1.tgz",
-                    "integrity": "sha512-GhKxmC4sHXxHGJv8e8egAZeTZ6HI4mLU6S7FUzvFOtsk7ZIDN1ksA9r9DyOgNqowA9yAtZXV0Uiap61bIO81FQ==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.3.tgz",
+                    "integrity": "sha512-YAb1JED41kJsqCQt1NcnX5ZdTA93vKFCMP4lQYG6CFxd0VzDJcKttRlMrlG+1qiWAw8+zowmHU1H0OzjWJzR2w==",
                     "dev": true,
                     "requires": {
-                        "@typescript-eslint/types": "4.28.1",
-                        "@typescript-eslint/visitor-keys": "4.28.1",
+                        "@typescript-eslint/types": "4.28.3",
+                        "@typescript-eslint/visitor-keys": "4.28.3",
                         "debug": "^4.3.1",
                         "globby": "^11.0.3",
                         "is-glob": "^4.0.1",
@@ -2599,55 +2756,55 @@
                     }
                 },
                 "@typescript-eslint/visitor-keys": {
-                    "version": "4.28.1",
-                    "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.1.tgz",
-                    "integrity": "sha512-K4HMrdFqr9PFquPu178SaSb92CaWe2yErXyPumc8cYWxFmhgJsNY9eSePmO05j0JhBvf2Cdhptd6E6Yv9HVHcg==",
+                    "version": "4.28.3",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.3.tgz",
+                    "integrity": "sha512-ri1OzcLnk1HH4gORmr1dllxDzzrN6goUIz/P4MHFV0YZJDCADPR3RvYNp0PW2SetKTThar6wlbFTL00hV2Q+fg==",
                     "dev": true,
                     "requires": {
-                        "@typescript-eslint/types": "4.28.1",
+                        "@typescript-eslint/types": "4.28.3",
                         "eslint-visitor-keys": "^2.0.0"
                     }
                 }
             }
         },
         "@typescript-eslint/scope-manager": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.23.0.tgz",
-            "integrity": "sha512-ZZ21PCFxPhI3n0wuqEJK9omkw51wi2bmeKJvlRZPH5YFkcawKOuRMQMnI8mH6Vo0/DoHSeZJnHiIx84LmVQY+w==",
+            "version": "4.28.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.2.tgz",
+            "integrity": "sha512-MqbypNjIkJFEFuOwPWNDjq0nqXAKZvDNNs9yNseoGBB1wYfz1G0WHC2AVOy4XD7di3KCcW3+nhZyN6zruqmp2A==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "4.23.0",
-                "@typescript-eslint/visitor-keys": "4.23.0"
+                "@typescript-eslint/types": "4.28.2",
+                "@typescript-eslint/visitor-keys": "4.28.2"
             }
         },
         "@typescript-eslint/types": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.23.0.tgz",
-            "integrity": "sha512-oqkNWyG2SLS7uTWLZf6Sr7Dm02gA5yxiz1RP87tvsmDsguVATdpVguHr4HoGOcFOpCvx9vtCSCyQUGfzq28YCw==",
+            "version": "4.28.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.2.tgz",
+            "integrity": "sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA==",
             "dev": true
         },
         "@typescript-eslint/typescript-estree": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.23.0.tgz",
-            "integrity": "sha512-5Sty6zPEVZF5fbvrZczfmLCOcby3sfrSPu30qKoY1U3mca5/jvU5cwsPb/CO6Q3ByRjixTMIVsDkqwIxCf/dMw==",
+            "version": "4.28.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.2.tgz",
+            "integrity": "sha512-86lLstLvK6QjNZjMoYUBMMsULFw0hPHJlk1fzhAVoNjDBuPVxiwvGuPQq3fsBMCxuDJwmX87tM/AXoadhHRljg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "4.23.0",
-                "@typescript-eslint/visitor-keys": "4.23.0",
-                "debug": "^4.1.1",
-                "globby": "^11.0.1",
+                "@typescript-eslint/types": "4.28.2",
+                "@typescript-eslint/visitor-keys": "4.28.2",
+                "debug": "^4.3.1",
+                "globby": "^11.0.3",
                 "is-glob": "^4.0.1",
-                "semver": "^7.3.2",
-                "tsutils": "^3.17.1"
+                "semver": "^7.3.5",
+                "tsutils": "^3.21.0"
             }
         },
         "@typescript-eslint/visitor-keys": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.23.0.tgz",
-            "integrity": "sha512-5PNe5cmX9pSifit0H+nPoQBXdbNzi5tOEec+3riK+ku4e3er37pKxMKDH5Ct5Y4fhWxcD4spnlYjxi9vXbSpwg==",
+            "version": "4.28.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.2.tgz",
+            "integrity": "sha512-aT2B4PLyyRDUVUafXzpZFoc0C9t0za4BJAKP5sgWIhG+jHECQZUEjuQSCIwZdiJJ4w4cgu5r3Kh20SOdtEBl0w==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "4.23.0",
+                "@typescript-eslint/types": "4.28.2",
                 "eslint-visitor-keys": "^2.0.0"
             }
         },
@@ -2844,9 +3001,9 @@
             "dev": true
         },
         "acorn-jsx": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-            "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
             "dev": true
         },
         "acorn-node": {
@@ -2998,9 +3155,9 @@
             }
         },
         "apexcharts": {
-            "version": "3.27.1",
-            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.27.1.tgz",
-            "integrity": "sha512-2pfw3pxeWhI0ap5lfxyfGNGoGScfEwfc8XnTpbnzgRdr1AOH5JJN9hh3MvfwrC9TQQfJYC2TZc8P/q9qXUj1bQ==",
+            "version": "3.27.2",
+            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.27.2.tgz",
+            "integrity": "sha512-FjW0OW6Oq9kbWJiF6wIZEsMNNHme6WNv3eh+p4azuWVELNY/LigXU+01s4TP+Obplhy6byV9bw9x7GhrbN2YsQ==",
             "requires": {
                 "svg.draggable.js": "^2.2.2",
                 "svg.easing.js": "^2.0.0",
@@ -3197,6 +3354,12 @@
             "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
             "dev": true
         },
+        "at-least-node": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+            "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+            "dev": true
+        },
         "atob": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -3204,17 +3367,25 @@
             "dev": true
         },
         "autoprefixer": {
-            "version": "10.2.6",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
-            "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
+            "version": "10.3.1",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
+            "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
             "dev": true,
             "requires": {
                 "browserslist": "^4.16.6",
-                "caniuse-lite": "^1.0.30001230",
+                "caniuse-lite": "^1.0.30001243",
                 "colorette": "^1.2.2",
                 "fraction.js": "^4.1.1",
                 "normalize-range": "^0.1.2",
                 "postcss-value-parser": "^4.1.0"
+            },
+            "dependencies": {
+                "caniuse-lite": {
+                    "version": "1.0.30001245",
+                    "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz",
+                    "integrity": "sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==",
+                    "dev": true
+                }
             }
         },
         "aws-sign2": {
@@ -3906,9 +4077,9 @@
             "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
         },
         "comment-parser": {
-            "version": "1.1.5",
-            "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.1.5.tgz",
-            "integrity": "sha512-RePCE4leIhBlmrqiYTvaqEeGYg7qpSl4etaIabKtdOQVi+mSTIBBklGUwIr79GXYnl3LpMwmDw4KeR2stNc6FA==",
+            "version": "1.1.6-beta.0",
+            "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.1.6-beta.0.tgz",
+            "integrity": "sha512-q3cA8TSMyqW7wcPSYWzbO/rMahnXgzs4SLG/UIWXdEsnXTFPZkEkWAdNgPiHig2OzxgpPLOh4WwsmClDxndwHw==",
             "dev": true
         },
         "commondir": {
@@ -4104,12 +4275,12 @@
                     }
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -4485,12 +4656,12 @@
                     "dev": true
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -4540,12 +4711,12 @@
                     }
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -5144,6 +5315,15 @@
             "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
             "dev": true
         },
+        "ejs": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
+            "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+            "dev": true,
+            "requires": {
+                "jake": "^10.6.1"
+            }
+        },
         "electron-to-chromium": {
             "version": "1.3.763",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.763.tgz",
@@ -5360,13 +5540,14 @@
             "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
         },
         "eslint": {
-            "version": "7.29.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.29.0.tgz",
-            "integrity": "sha512-82G/JToB9qIy/ArBzIWG9xvvwL3R86AlCjtGw+A29OMZDqhTybz/MByORSukGxeI+YPCR4coYyITKk8BFH9nDA==",
+            "version": "7.30.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.30.0.tgz",
+            "integrity": "sha512-VLqz80i3as3NdloY44BQSJpFw534L9Oh+6zJOUaViV4JPd+DaHwutqP7tcpkW3YiXbK6s05RZl7yl7cQn+lijg==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "7.12.11",
                 "@eslint/eslintrc": "^0.4.2",
+                "@humanwhocodes/config-array": "^0.5.0",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -5484,6 +5665,23 @@
                     "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
                     "dev": true
                 },
+                "eslint-utils": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+                    "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+                    "dev": true,
+                    "requires": {
+                        "eslint-visitor-keys": "^1.1.0"
+                    },
+                    "dependencies": {
+                        "eslint-visitor-keys": {
+                            "version": "1.3.0",
+                            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+                            "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+                            "dev": true
+                        }
+                    }
+                },
                 "glob-parent": {
                     "version": "5.1.2",
                     "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -5494,9 +5692,9 @@
                     }
                 },
                 "globals": {
-                    "version": "13.9.0",
-                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
-                    "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
+                    "version": "13.10.0",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+                    "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
                     "dev": true,
                     "requires": {
                         "type-fest": "^0.20.2"
@@ -5781,20 +5979,31 @@
             }
         },
         "eslint-plugin-jsdoc": {
-            "version": "35.4.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-35.4.1.tgz",
-            "integrity": "sha512-lnpu2Bj+ta2eAqwCWnb6f3Xjc78TWKo/oMCpDH5NfpPhYnePNtGZJzoAMgU5uo9BQqmXJ8pql8aiodOhg82ofw==",
+            "version": "35.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-35.4.3.tgz",
+            "integrity": "sha512-hBEn+VNjVX0IKoZ2OdZs0Z1fU8CqZkBSzLqD8ZpwZEamrdi2TUgKvujvETe8gXYQ/67hpRtbR5iPFTgmWpRevw==",
             "dev": true,
             "requires": {
-                "@es-joy/jsdoccomment": "^0.8.0",
-                "comment-parser": "1.1.5",
-                "debug": "^4.3.1",
+                "@es-joy/jsdoccomment": "^0.9.0-alpha.1",
+                "comment-parser": "1.1.6-beta.0",
+                "debug": "^4.3.2",
                 "esquery": "^1.4.0",
                 "jsdoc-type-pratt-parser": "^1.0.4",
                 "lodash": "^4.17.21",
                 "regextras": "^0.8.0",
                 "semver": "^7.3.5",
                 "spdx-expression-parse": "^3.0.1"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "4.3.2",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+                    "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+                    "dev": true,
+                    "requires": {
+                        "ms": "2.1.2"
+                    }
+                }
             }
         },
         "eslint-plugin-prefer-arrow": {
@@ -5814,20 +6023,12 @@
             }
         },
         "eslint-utils": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-            "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+            "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
             "dev": true,
             "requires": {
-                "eslint-visitor-keys": "^1.1.0"
-            },
-            "dependencies": {
-                "eslint-visitor-keys": {
-                    "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-                    "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-                    "dev": true
-                }
+                "eslint-visitor-keys": "^2.0.0"
             }
         },
         "eslint-visitor-keys": {
@@ -6262,6 +6463,15 @@
             "dev": true,
             "optional": true
         },
+        "filelist": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
+            "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+            "dev": true,
+            "requires": {
+                "minimatch": "^3.0.4"
+            }
+        },
         "fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -6339,9 +6549,9 @@
             }
         },
         "flatted": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
-            "integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==",
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.1.tgz",
+            "integrity": "sha512-OMQjaErSFHmHqZe+PSidH5n8j3O0F2DdnVh8JB4j4eUQ2k6KvB0qGfrKIhapvez5JerBbmWkaLYUYWISaESoXg==",
             "dev": true
         },
         "flatten": {
@@ -6738,9 +6948,9 @@
             "dev": true
         },
         "highlight.js": {
-            "version": "11.0.1",
-            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
-            "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ=="
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.1.0.tgz",
+            "integrity": "sha512-X9VVhYKHQPPuwffO8jk4bP/FVj+ibNCy3HxZZNDXFtJrq4O5FdcdCDRIkDis5MiMnjh7UwEdHgRZJcHFYdzDdA=="
         },
         "hosted-git-info": {
             "version": "4.0.2",
@@ -7816,10 +8026,30 @@
                 "istanbul-lib-report": "^3.0.0"
             }
         },
+        "jake": {
+            "version": "10.8.2",
+            "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
+            "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
+            "dev": true,
+            "requires": {
+                "async": "0.9.x",
+                "chalk": "^2.4.2",
+                "filelist": "^1.0.1",
+                "minimatch": "^3.0.4"
+            },
+            "dependencies": {
+                "async": {
+                    "version": "0.9.2",
+                    "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+                    "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
+                    "dev": true
+                }
+            }
+        },
         "jasmine-core": {
-            "version": "3.7.1",
-            "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.7.1.tgz",
-            "integrity": "sha512-DH3oYDS/AUvvr22+xUBW62m1Xoy7tUlY1tsxKEJvl5JeJ7q8zd1K5bUwiOxdH+erj6l2vAMM3hV25Xs9/WrmuQ==",
+            "version": "3.8.0",
+            "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.8.0.tgz",
+            "integrity": "sha512-zl0nZWDrmbCiKns0NcjkFGYkVTGCPUgoHypTaj+G2AzaWus7QGoXARSlYsSle2VRpSdfJmM+hzmFKzQNhF2kHg==",
             "dev": true
         },
         "jest-worker": {
@@ -8141,9 +8371,9 @@
             }
         },
         "karma-jasmine-html-reporter": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.6.0.tgz",
-            "integrity": "sha512-ELO9yf0cNqpzaNLsfFgXd/wxZVYkE2+ECUwhMHUD4PZ17kcsPsYsVyjquiRqyMn2jkd2sHt0IeMyAyq1MC23Fw==",
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
+            "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
             "dev": true
         },
         "karma-source-map-support": {
@@ -8252,9 +8482,9 @@
             }
         },
         "license-webpack-plugin": {
-            "version": "2.3.19",
-            "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-2.3.19.tgz",
-            "integrity": "sha512-z/izhwFRYHs1sCrDgrTUsNJpd+Xsd06OcFWSwHz/TiZygm5ucweVZi1Hu14Rf6tOj/XAl1Ebyc7GW6ZyyINyWA==",
+            "version": "2.3.20",
+            "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-2.3.20.tgz",
+            "integrity": "sha512-AHVueg9clOKACSHkhmEI+PCC9x8+qsQVuKECZD3ETxETK5h/PCv5/MUzyG1gm8OMcip/s1tcNxqo9Qb7WhjGsg==",
             "dev": true,
             "requires": {
                 "@types/webpack-sources": "^0.1.5",
@@ -8480,9 +8710,9 @@
             }
         },
         "make-fetch-happen": {
-            "version": "9.0.3",
-            "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.0.3.tgz",
-            "integrity": "sha512-uZ/9Cf2vKqsSWZyXhZ9wHHyckBrkntgbnqV68Bfe8zZenlf7D6yuGMXvHZQ+jSnzPkjosuNP1HGasj1J4h8OlQ==",
+            "version": "9.0.4",
+            "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.0.4.tgz",
+            "integrity": "sha512-sQWNKMYqSmbAGXqJg2jZ+PmHh5JAybvwu0xM8mZR/bsTjGiTASj3ldXJV7KFHy1k/IJIBkjxQFoWIVsv9+PQMg==",
             "dev": true,
             "requires": {
                 "agentkeepalive": "^4.1.3",
@@ -8685,9 +8915,9 @@
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
         },
         "mini-css-extract-plugin": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz",
-            "integrity": "sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==",
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
+            "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
             "dev": true,
             "requires": {
                 "loader-utils": "^2.0.0",
@@ -8714,12 +8944,12 @@
                     "dev": true
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -8765,9 +8995,9 @@
             }
         },
         "minipass-fetch": {
-            "version": "1.3.3",
-            "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.3.3.tgz",
-            "integrity": "sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ==",
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.3.4.tgz",
+            "integrity": "sha512-TielGogIzbUEtd1LsjZFs47RWuHHfhl6TiCx1InVxApBAmQ8bL0dL5ilkLGcRvuyW/A9nE+Lvn855Ewz8S0PnQ==",
             "dev": true,
             "requires": {
                 "encoding": "^0.1.12",
@@ -8928,9 +9158,9 @@
             "dev": true
         },
         "needle": {
-            "version": "2.6.0",
-            "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
-            "integrity": "sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==",
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/needle/-/needle-2.8.0.tgz",
+            "integrity": "sha512-ZTq6WYkN/3782H1393me3utVYdq2XyqNUFBsprEE3VMAT0+hP/cItpnITpqsY6ep2yeFE4Tqtqwc74VqUlUYtw==",
             "dev": true,
             "optional": true,
             "requires": {
@@ -8992,11 +9222,11 @@
             }
         },
         "ngx-quill": {
-            "version": "14.1.1",
-            "resolved": "https://registry.npmjs.org/ngx-quill/-/ngx-quill-14.1.1.tgz",
-            "integrity": "sha512-b5tsfzH6mZEa3Gkbe9Rw/EWlsWrwVzu7xTrdt8Ut2FqJAmKjwxHF+k0ArHkyu3QWRgIWIDqxFThDjit2oD1GDg==",
+            "version": "14.1.2",
+            "resolved": "https://registry.npmjs.org/ngx-quill/-/ngx-quill-14.1.2.tgz",
+            "integrity": "sha512-pmBm2WCdwp3dClu/a56Rh1H6WxoeWRAm8y+h5B+iI5C80irw7cyb2hY5RtdVZkXrKQspNkpvh3z6ZjSyyyybfQ==",
             "requires": {
-                "tslib": "^2.1.0"
+                "tslib": "^2.2.0"
             }
         },
         "nice-try": {
@@ -11667,12 +11897,12 @@
                     "dev": true
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -12208,6 +12438,12 @@
                 }
             }
         },
+        "rxjs-for-await": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/rxjs-for-await/-/rxjs-for-await-0.0.2.tgz",
+            "integrity": "sha512-IJ8R/ZCFMHOcDIqoABs82jal00VrZx8Xkgfe7TOKoaRPAW5nH/VFlG23bXpeGdrmtqI9UobFPgUKgCuFc7Lncw==",
+            "dev": true
+        },
         "safe-buffer": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -13142,12 +13378,12 @@
                     "dev": true
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -13615,12 +13851,12 @@
                     }
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -14126,17 +14362,17 @@
             "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA=="
         },
         "webpack": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.40.0.tgz",
-            "integrity": "sha512-c7f5e/WWrxXWUzQqTBg54vBs5RgcAgpvKE4F4VegVgfo4x660ZxYUF2/hpMkZUnLjgytVTitjeXaN4IPlXCGIw==",
+            "version": "5.42.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.42.0.tgz",
+            "integrity": "sha512-Ln8HL0F831t1x/yPB/qZEUVmZM4w9BnHZ1EQD/sAUHv8m22hthoPniWTXEzFMh/Sf84mhrahut22TX5KxWGuyQ==",
             "dev": true,
             "requires": {
                 "@types/eslint-scope": "^3.7.0",
-                "@types/estree": "^0.0.47",
+                "@types/estree": "^0.0.48",
                 "@webassemblyjs/ast": "1.11.0",
                 "@webassemblyjs/wasm-edit": "1.11.0",
                 "@webassemblyjs/wasm-parser": "1.11.0",
-                "acorn": "^8.2.1",
+                "acorn": "^8.4.1",
                 "browserslist": "^4.14.5",
                 "chrome-trace-event": "^1.0.2",
                 "enhanced-resolve": "^5.8.0",
@@ -14175,12 +14411,12 @@
                     "dev": true
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
@@ -14236,12 +14472,12 @@
                     "dev": true
                 },
                 "schema-utils": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-                    "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+                    "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
                     "dev": true,
                     "requires": {
-                        "@types/json-schema": "^7.0.6",
+                        "@types/json-schema": "^7.0.7",
                         "ajv": "^6.12.5",
                         "ajv-keywords": "^3.5.2"
                     }
diff --git a/package.json b/package.json
index 30bf8e69..aa164662 100644
--- a/package.json
+++ b/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",
@@ -13,17 +13,17 @@
         "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",
@@ -32,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",
@@ -50,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",
diff --git a/src/@fuse/version/fuse-version.ts b/src/@fuse/version/fuse-version.ts
index 43095ce0..757bd8e4 100644
--- a/src/@fuse/version/fuse-version.ts
+++ b/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;
diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts
index 9bc29a0a..850a2621 100644
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -967,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'
                 }
             },

From 961b86c8cb3fe1ef079f0caedb1be06b0d708c91 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Fri, 16 Jul 2021 12:28:43 +0300
Subject: [PATCH 12/12] (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

---
 .../contacts/details/details.component.ts     | 84 ++++++++++++-------
 .../inventory/list/inventory.component.ts     | 34 ++++++--
 .../scrumboard/board/board.component.html     |  4 +-
 .../apps/scrumboard/board/board.component.ts  | 28 ++++++-
 .../apps/tasks/details/details.component.ts   | 80 +++++++++++-------
 5 files changed, 159 insertions(+), 71 deletions(-)

diff --git a/src/app/modules/admin/apps/contacts/details/details.component.ts b/src/app/modules/admin/apps/contacts/details/details.component.ts
index cb35e01f..9a75de85 100644
--- a/src/app/modules/admin/apps/contacts/details/details.component.ts
+++ b/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();
     }
 
     /**
diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts
index 5c50c301..afde147c 100644
--- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts
+++ b/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();
+                });
+            }
         });
     }
 
diff --git a/src/app/modules/admin/apps/scrumboard/board/board.component.html b/src/app/modules/admin/apps/scrumboard/board/board.component.html
index 6708c41f..e90debb7 100644
--- a/src/app/modules/admin/apps/scrumboard/board/board.component.html
+++ b/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>
diff --git a/src/app/modules/admin/apps/scrumboard/board/board.component.ts b/src/app/modules/admin/apps/scrumboard/board/board.component.ts
index 15d22a3b..7654596a 100644
--- a/src/app/modules/admin/apps/scrumboard/board/board.component.ts
+++ b/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();
+            }
+        });
     }
 
     /**
diff --git a/src/app/modules/admin/apps/tasks/details/details.component.ts b/src/app/modules/admin/apps/tasks/details/details.component.ts
index 9bfdb44f..fe103de5 100644
--- a/src/app/modules/admin/apps/tasks/details/details.component.ts
+++ b/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();
+            }
+        });
     }
 
     /**