(docs) Moved Fuse Components and Other Components into UI for better visibility and better categorization

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)},
+                {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)},
             ]},
 
             // 404 & Catch all

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'
             }
         ]
     },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'card',
@@ -11,7 +11,7 @@ export class CardComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'fullscreen',
@@ -11,7 +11,7 @@ export class FullscreenComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 

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

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

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'highlight',
@@ -11,7 +11,7 @@ export class HighlightComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'scrollbar',
@@ -11,7 +11,7 @@ export class ScrollbarComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 

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

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

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

@@ -6,13 +6,13 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector       : 'core-features',
+    selector       : 'fuse-components',
-    templateUrl    : './core-features.component.html',
+    templateUrl    : './fuse-components.component.html',
-    styleUrls      : ['./core-features.component.scss'],
+    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'
                     }
                 ]
             }

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
+{
+}

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 { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
-import { MockApiComponent } from 'app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component';
+import { MockApiComponent } from 'app/modules/admin/ui/fuse-components/libraries/mock-api/mock-api.component';
-import { AlertComponent } from 'app/modules/admin/docs/core-features/components/alert/alert.component';
+import { AlertComponent } from 'app/modules/admin/ui/fuse-components/components/alert/alert.component';
-import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
+import { CardComponent } from 'app/modules/admin/ui/fuse-components/components/card/card.component';
-import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
+import { DateRangeComponent } from 'app/modules/admin/ui/fuse-components/components/date-range/date-range.component';
-import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
+import { DrawerComponent } from 'app/modules/admin/ui/fuse-components/components/drawer/drawer.component';
-import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
+import { FullscreenComponent } from 'app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component';
-import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
+import { HighlightComponent } from 'app/modules/admin/ui/fuse-components/components/highlight/highlight.component';
-import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
+import { MasonryComponent } from 'app/modules/admin/ui/fuse-components/components/masonry/masonry.component';
-import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
+import { NavigationComponent } from 'app/modules/admin/ui/fuse-components/components/navigation/navigation.component';
-import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
+import { ScrollbarComponent } from 'app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component';
-import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
+import { ScrollResetComponent } from 'app/modules/admin/ui/fuse-components/directives/scroll-reset/scroll-reset.component';
-import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
+import { ConfigComponent } from 'app/modules/admin/ui/fuse-components/services/config/config.component';
-import { MediaWatcherComponent } from 'app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component';
+import { MediaWatcherComponent } from 'app/modules/admin/ui/fuse-components/services/media-watcher/media-watcher.component';
-import { SplashScreenComponent } from 'app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component';
+import { SplashScreenComponent } from 'app/modules/admin/ui/fuse-components/services/splash-screen/splash-screen.component';
-import { FindByKeyComponent } from 'app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component';
+import { FindByKeyComponent } from 'app/modules/admin/ui/fuse-components/pipes/find-by-key/find-by-key.component';
-import { MustMatchComponent } from 'app/modules/admin/docs/core-features/validators/must-match/must-match.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      : '',

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'config',
@@ -11,7 +11,7 @@ export class ConfigComponent
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _coreFeaturesComponent: FuseComponentsComponent)
     {
     }
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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',