(docs) Updated the docs to reflect the latest changes

src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html

@@ -0,0 +1,107 @@
+<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">Core Features</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">Components</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">
+                    Fullscreen
+                </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>fuse-fullscreen</strong> is a small component that toggles the fullscreen on and off.
+        </p>
+        <p>
+            <strong>Exported as: </strong><code>fuseFullscreen</code>
+        </p>
+
+        <h2>Module</h2>
+        <textarea
+            fuse-highlight
+            lang="typescript">
+            import { FuseFullscreenModule } from '@fuse/components/fullscreen';
+        </textarea>
+
+        <h2>Usage</h2>
+        <p>
+            Here's the basic usage of the <code>fuse-fullscreen</code>:
+        </p>
+        <!-- @formatter:off -->
+        <textarea fuse-highlight
+                  lang="html">
+            &lt;fuse-fullscreen&gt;&lt;/fuse-fullscreen&gt;
+        </textarea>
+        <!-- @formatter:on -->
+
+        <h2>Properties</h2>
+        <div class="bg-card py-3 px-6 rounded shadow">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Default</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>@Input()</div>
+                            <div>iconTpl: TemplateRef&lt;any&gt;</div>
+                        </td>
+                        <td>
+                            Template reference for the icon.
+                        </td>
+                        <td>
+                            -
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="font-mono text-md text-secondary">
+                            <div>@Input()</div>
+                            <div>tooltip: string</div>
+                        </td>
+                        <td>
+                            Tooltip of the toggle button.
+                        </td>
+                        <td>
+                            'Toggle Fullscreen'
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+
+</div>

src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+
+@Component({
+    selector   : 'fullscreen',
+    templateUrl: './fullscreen.component.html',
+    styles     : ['']
+})
+export class FullscreenComponent
+{
+    /**
+     * Constructor
+     */
+    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._coreFeaturesComponent.matDrawer.toggle();
+    }
+}

src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html

@@ -49,7 +49,7 @@
         <textarea
             fuse-highlight
             lang="typescript">
-            import { FuseHighlightModule } from '@fuse/components/drawer';
+            import { FuseHighlightModule } from '@fuse/components/highlight';
         </textarea>
 
         <h2>Usage</h2>

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

@@ -71,6 +71,12 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
                         type : 'basic',
                         link : '/docs/core-features/components/drawer'
                     },
+                    {
+                        id   : 'core-features.components.fullscreen',
+                        title: 'Fullscreen',
+                        type : 'basic',
+                        link : '/docs/core-features/components/fullscreen'
+                    },
                     {
                         id   : 'core-features.components.highlight',
                         title: 'Highlight',

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

@@ -20,6 +20,7 @@ import { AlertComponent } from 'app/modules/admin/docs/core-features/components/
 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';
@@ -40,6 +41,7 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
         CardComponent,
         DateRangeComponent,
         DrawerComponent,
+        FullscreenComponent,
         HighlightComponent,
         MasonryComponent,
         NavigationComponent,

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

@@ -5,6 +5,7 @@ import { AlertComponent } from 'app/modules/admin/docs/core-features/components/
 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';
@@ -59,6 +60,10 @@ export const coreFeaturesRoutes: Route[] = [
                         path     : 'drawer',
                         component: DrawerComponent
                     },
+                    {
+                        path     : 'fullscreen',
+                        component: FullscreenComponent
+                    },
                     {
                         path     : 'highlight',
                         component: HighlightComponent

src/app/modules/admin/docs/other-components/common/languages/languages.component.html

@@ -0,0 +1,57 @@
+<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">Other 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">Common</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">
+                    Languages
+                </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>
+            This component can be used for changing the language and managing the side effects of changing the active language such as updating the navigation.
+        </p>
+
+        <h2>Usage</h2>
+        <p>
+            Here's the basic usage of the component:
+        </p>
+        <textarea
+            fuse-highlight
+            lang="html">
+            <language></language>
+        </textarea>
+
+    </div>
+
+</div>

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

@@ -2,11 +2,10 @@ import { Component } from '@angular/core';
 import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
 
 @Component({
-    selector   : 'user-menu',
+    selector   : 'languages',
-    templateUrl: './user-menu.component.html',
+    templateUrl: './languages.component.html'
-    styles     : ['']
 })
-export class UserMenuComponent
+export class LanguagesComponent
 {
     /**
      * Constructor

src/app/modules/admin/docs/other-components/common/messages/messages.component.html

@@ -52,13 +52,10 @@
         </ul>
 
         <h2>Usage</h2>
-        <p>
-            The component only has one input to supply the messages:
-        </p>
         <textarea
             fuse-highlight
             lang="html">
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
         </textarea>
 
         <h2>Message</h2>
@@ -184,16 +181,15 @@
         </div>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
-                store(messages: Message[])
+                getAll(): Observable&lt;Message[]&gt;
             </div>
             <div class="p-6">
-                Store messages on the service. This will replace the current messages and can be used as an alternative to <em>messages</em> input of the
+                Get all messages from the server.
-                component.
             </div>
         </div>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
-                create(message: Message): Observable&lt;Messages&gt;
+                create(message: Message): Observable&lt;Message&gt;
             </div>
             <div class="p-6">
                 Create a new message on the server.

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

@@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
 @Component({
     selector   : 'messages',
     templateUrl: './messages.component.html',
-    styles     : ['']
 })
 export class MessagesComponent
 {

src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html

@@ -52,13 +52,10 @@
         </ul>
 
         <h2>Usage</h2>
-        <p>
-            The component only has one input to supply the notifications:
-        </p>
         <textarea
             fuse-highlight
             lang="html">
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
         </textarea>
 
         <h2>Notification</h2>
@@ -184,16 +181,15 @@
         </div>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
-                store(notifications: Notification[])
+                getAll(): Observable&lt;Notification[]&gt;
             </div>
             <div class="p-6">
-                Store notifications on the service. This will replace the current notifications and can be used as an alternative to <em>notifications</em> input of the
+                Get all notifications from the server.
-                component.
             </div>
         </div>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
-                create(notification: Notification): Observable&lt;Notifications&gt;
+                create(notification: Notification): Observable&lt;Notification&gt;
             </div>
             <div class="p-6">
                 Create a new notification on the server.

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

@@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
 @Component({
     selector   : 'notifications',
     templateUrl: './notifications.component.html',
-    styles     : ['']
 })
 export class NotificationsComponent
 {

src/app/modules/admin/docs/other-components/common/overview/overview.component.html

@@ -76,7 +76,7 @@
                 <p>A user customizable panel to show shortcuts to internal/external pages.</p>
             </li>
             <li>
-                <p><strong>User Menu</strong></p>
+                <p><strong>User</strong></p>
                 <p>A user avatar and menu component to show user related information and actions.</p>
             </li>
         </ul>

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

@@ -3,8 +3,7 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
 
 @Component({
     selector   : 'search',
-    templateUrl: './search.component.html',
+    templateUrl: './search.component.html'
-    styles     : ['']
 })
 export class SearchComponent
 {

src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html

@@ -44,13 +44,10 @@
         </p>
 
         <h2>Usage</h2>
-        <p>
-            The component only has one input to supply the shortcuts:
-        </p>
         <textarea
             fuse-highlight
             lang="html">
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <shortcuts></shortcuts>
         </textarea>
 
         <h2>Message</h2>
@@ -149,16 +146,15 @@
         </div>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
-                store(shortcuts: Shortcut[])
+                getAll(): Observable&lt;Shortcut[]&gt;
             </div>
             <div class="p-6">
-                Store shortcuts on the service. This will replace the current shortcuts and can be used as an alternative to <em>shortcuts</em> input of the
+                Get all shortcuts from the server.
-                component.
             </div>
         </div>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
-                create(shortcut: Shortcut): Observable&lt;Shortcuts&gt;
+                create(shortcut: Shortcut): Observable&lt;Shortcut&gt;
             </div>
             <div class="p-6">
                 Create a new shortcut on the server.

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

@@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
 @Component({
     selector   : 'shortcuts',
     templateUrl: './shortcuts.component.html',
-    styles     : ['']
 })
 export class ShortcutsComponent
 {

src/app/modules/admin/docs/other-components/common/user/user.component.html

@@ -24,7 +24,7 @@
             <!-- Title -->
             <div class="mt-2">
                 <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
-                    User Menu
+                    User
                 </h2>
             </div>
         </div>
@@ -49,7 +49,7 @@
         <textarea
             fuse-highlight
             lang="html">
-            <user-menu [user]="data.user"></user-menu>
+            <user></user>
         </textarea>
 
         <h2>Properties</h2>
@@ -75,18 +75,6 @@
                             <code class="whitespace-nowrap">true</code>
                         </td>
                     </tr>
-                    <tr>
-                        <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
-                            <div>user: User</div>
-                        </td>
-                        <td>
-                            The user data.
-                        </td>
-                        <td>
-                            -
-                        </td>
-                    </tr>
                 </tbody>
             </table>
         </div>

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

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
+
+@Component({
+    selector   : 'user',
+    templateUrl: './user.component.html'
+})
+export class UserComponent
+{
+    /**
+     * Constructor
+     */
+    constructor(private _otherComponentsComponent: OtherComponentsComponent)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the drawer
+     */
+    toggleDrawer(): void
+    {
+        // Toggle the drawer
+        this._otherComponentsComponent.matDrawer.toggle();
+    }
+}

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

@@ -41,6 +41,12 @@ export class OtherComponentsComponent implements OnInit, OnDestroy
                         type : 'basic',
                         link : '/docs/other-components/common/overview'
                     },
+                    {
+                        id   : 'common.languages',
+                        title: 'Languages',
+                        type : 'basic',
+                        link : '/docs/other-components/common/languages'
+                    },
                     {
                         id   : 'common.messages',
                         title: 'Messages',

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

@@ -10,11 +10,12 @@ 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 { UserMenuComponent } from 'app/modules/admin/docs/other-components/common/user-menu/user-menu.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';
@@ -25,11 +26,12 @@ import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/o
     declarations: [
         OtherComponentsComponent,
         OverviewComponent,
+        LanguagesComponent,
         MessagesComponent,
         NotificationsComponent,
         SearchComponent,
         ShortcutsComponent,
-        UserMenuComponent,
+        UserComponent,
         ApexChartsComponent,
         FullCalendarComponent,
         NgxMarkdownComponent,

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

@@ -1,11 +1,12 @@
 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 { UserMenuComponent } from 'app/modules/admin/docs/other-components/common/user-menu/user-menu.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';
@@ -33,6 +34,10 @@ export const otherComponentsRoutes: Route[] = [
                         path     : 'overview',
                         component: OverviewComponent
                     },
+                    {
+                        path     : 'languages',
+                        component: LanguagesComponent
+                    },
                     {
                         path     : 'messages',
                         component: MessagesComponent
@@ -51,7 +56,7 @@ export const otherComponentsRoutes: Route[] = [
                     },
                     {
                         path     : 'user',
-                        component: UserMenuComponent
+                        component: UserComponent
                     }
                 ]
             },