Updated version numbers

.npmrc

@@ -1 +0,0 @@
-legacy-peer-deps=true

angular.json

@@ -32,7 +32,7 @@
                             "crypto-js/hmac-sha256",
                             "crypto-js/enc-base64",
                             "flat",
-                            "quill"
+                            "quill-delta"
                         ],
                         "assets": [
                             "src/favicon-16x16.png",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse-angular",
-    "version": "19.0.0",
+    "version": "19.1.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -13,54 +13,53 @@
         "test": "ng test"
     },
     "dependencies": {
-        "@angular/animations": "17.0.3",
+        "@angular/animations": "17.2.4",
-        "@angular/cdk": "17.0.1",
+        "@angular/cdk": "17.2.2",
-        "@angular/common": "17.0.3",
+        "@angular/common": "17.2.4",
-        "@angular/compiler": "17.0.3",
+        "@angular/compiler": "17.2.4",
-        "@angular/core": "17.0.3",
+        "@angular/core": "17.2.4",
-        "@angular/forms": "17.0.3",
+        "@angular/forms": "17.2.4",
-        "@angular/material": "17.0.1",
+        "@angular/material": "17.2.2",
-        "@angular/material-luxon-adapter": "17.0.1",
+        "@angular/material-luxon-adapter": "17.2.2",
-        "@angular/platform-browser": "17.0.3",
+        "@angular/platform-browser": "17.2.4",
-        "@angular/platform-browser-dynamic": "17.0.3",
+        "@angular/platform-browser-dynamic": "17.2.4",
-        "@angular/router": "17.0.3",
+        "@angular/router": "17.2.4",
-        "@ngneat/transloco": "6.0.0",
+        "@ngneat/transloco": "6.0.4",
-        "apexcharts": "3.44.0",
+        "apexcharts": "3.47.0",
-        "crypto-js": "3.3.0",
+        "crypto-js": "4.2.0",
         "highlight.js": "11.9.0",
         "lodash-es": "4.17.21",
         "luxon": "3.4.4",
-        "ng-apexcharts": "1.8.0",
+        "ng-apexcharts": "1.9.0",
-        "ngx-quill": "24.0.2",
+        "ngx-quill": "25.1.1",
         "perfect-scrollbar": "1.5.5",
-        "quill": "1.3.7",
         "rxjs": "7.8.1",
         "tslib": "2.6.2",
-        "zone.js": "0.14.2"
+        "zone.js": "0.14.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "17.0.1",
+        "@angular-devkit/build-angular": "17.2.3",
-        "@angular/cli": "17.0.1",
+        "@angular/cli": "17.2.3",
-        "@angular/compiler-cli": "17.0.3",
+        "@angular/compiler-cli": "17.2.4",
         "@tailwindcss/typography": "0.5.10",
-        "@types/chroma-js": "2.4.3",
+        "@types/chroma-js": "2.4.4",
-        "@types/crypto-js": "3.1.47",
+        "@types/crypto-js": "4.2.2",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "5.1.2",
+        "@types/jasmine": "5.1.4",
-        "@types/lodash": "4.14.201",
+        "@types/lodash": "4.14.202",
-        "@types/lodash-es": "4.17.11",
+        "@types/lodash-es": "4.17.12",
-        "@types/luxon": "3.3.4",
+        "@types/luxon": "3.4.2",
-        "autoprefixer": "10.4.16",
+        "autoprefixer": "10.4.18",
         "chroma-js": "2.4.2",
-        "jasmine-core": "5.1.1",
+        "jasmine-core": "5.1.2",
-        "karma": "6.4.2",
+        "karma": "6.4.3",
         "karma-chrome-launcher": "3.2.0",
         "karma-coverage": "2.2.1",
         "karma-jasmine": "5.1.0",
-        "karma-jasmine-html-reporter": "2.0.0",
+        "karma-jasmine-html-reporter": "2.1.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.31",
+        "postcss": "8.4.35",
-        "tailwindcss": "3.3.5",
+        "tailwindcss": "3.4.1",
-        "typescript": "5.2.2"
+        "typescript": "5.3.3"
     }
 }

src/@fuse/components/fullscreen/fullscreen.component.ts

@@ -1,46 +1,27 @@
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
 
 @Component({
-    selector       : 'fuse-fullscreen',
+    selector: 'fuse-fullscreen',
-    templateUrl    : './fullscreen.component.html',
+    templateUrl: './fullscreen.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseFullscreen',
+    exportAs: 'fuseFullscreen',
-    standalone     : true,
+    standalone: true,
-    imports        : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
+    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
 })
-export class FuseFullscreenComponent implements OnInit
+export class FuseFullscreenComponent
 {
     @Input() iconTpl: TemplateRef<any>;
     @Input() tooltip: string;
-    private _fsDoc: FSDocument;
-    private _fsDocEl: FSDocumentElement;
-    private _isFullscreen: boolean = false;
 
     /**
      * Constructor
      */
-    constructor(@Inject(DOCUMENT) private _document: Document)
+    constructor(@Inject(DOCUMENT) private _document: Document) { }
-    {
-        this._fsDoc = _document as FSDocument;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        this._fsDocEl = document.documentElement as FSDocumentElement;
-    }
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
@@ -51,121 +32,27 @@ export class FuseFullscreenComponent implements OnInit
      */
     toggleFullscreen(): void
     {
-        // Check if the fullscreen is open
+        if (!this._document.fullscreenEnabled)
-        this._isFullscreen = this._getBrowserFullscreenElement() !== null;
+        {
+            console.log('Fullscreen is not available in this browser.');
+            return;
+        }
+
+        // Check if the fullscreen is already open
+        const fullScreen = this._document.fullscreenElement;
 
         // Toggle the fullscreen
-        if ( this._isFullscreen )
+        if (fullScreen)
         {
-            this._closeFullscreen();
+            this._document.exitFullscreen();
         }
         else
         {
-            this._openFullscreen();
+            this._document.documentElement.requestFullscreen()
-        }
+                .catch(() =>
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get browser's fullscreen element
-     *
-     * @private
-     */
-    private _getBrowserFullscreenElement(): Element
                 {
-        if ( typeof this._fsDoc.fullscreenElement !== 'undefined' )
+                    console.error('Entering fullscreen mode failed.');
-        {
+                });
-            return this._fsDoc.fullscreenElement;
-        }
-
-        if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' )
-        {
-            return this._fsDoc.mozFullScreenElement;
-        }
-
-        if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' )
-        {
-            return this._fsDoc.msFullscreenElement;
-        }
-
-        if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' )
-        {
-            return this._fsDoc.webkitFullscreenElement;
-        }
-
-        throw new Error('Fullscreen mode is not supported by this browser');
-    }
-
-    /**
-     * Open the fullscreen
-     *
-     * @private
-     */
-    private _openFullscreen(): void
-    {
-        if ( this._fsDocEl.requestFullscreen )
-        {
-            this._fsDocEl.requestFullscreen();
-            return;
-        }
-
-        // Firefox
-        if ( this._fsDocEl.mozRequestFullScreen )
-        {
-            this._fsDocEl.mozRequestFullScreen();
-            return;
-        }
-
-        // Chrome, Safari and Opera
-        if ( this._fsDocEl.webkitRequestFullscreen )
-        {
-            this._fsDocEl.webkitRequestFullscreen();
-            return;
-        }
-
-        // IE/Edge
-        if ( this._fsDocEl.msRequestFullscreen )
-        {
-            this._fsDocEl.msRequestFullscreen();
-            return;
-        }
-    }
-
-    /**
-     * Close the fullscreen
-     *
-     * @private
-     */
-    private _closeFullscreen(): void
-    {
-        if ( this._fsDoc.exitFullscreen )
-        {
-            this._fsDoc.exitFullscreen();
-            return;
-        }
-
-        // Firefox
-        if ( this._fsDoc.mozCancelFullScreen )
-        {
-            this._fsDoc.mozCancelFullScreen();
-            return;
-        }
-
-        // Chrome, Safari and Opera
-        if ( this._fsDoc.webkitExitFullscreen )
-        {
-            this._fsDoc.webkitExitFullscreen();
-            return;
-        }
-
-        // IE/Edge
-        else if ( this._fsDoc.msExitFullscreen )
-        {
-            this._fsDoc.msExitFullscreen();
-            return;
         }
     }
 }

src/@fuse/components/fullscreen/fullscreen.types.ts

@@ -1,16 +0,0 @@
-export interface FSDocument extends HTMLDocument
-{
-    mozFullScreenElement?: Element;
-    mozCancelFullScreen?: () => void;
-    msFullscreenElement?: Element;
-    msExitFullscreen?: () => void;
-    webkitFullscreenElement?: Element;
-    webkitExitFullscreen?: () => void;
-}
-
-export interface FSDocumentElement extends HTMLElement
-{
-    mozRequestFullScreen?: () => void;
-    msRequestFullscreen?: () => void;
-    webkitRequestFullscreen?: () => void;
-}

src/@fuse/components/fullscreen/public-api.ts

@@ -1,2 +1 @@
 export * from '@fuse/components/fullscreen/fullscreen.component';
-export * from '@fuse/components/fullscreen/fullscreen.types';

src/@fuse/styles/tailwind.scss

@@ -121,7 +121,7 @@
     }
 
     /* Set the foreground color for disabled elements */
-    [disabled] * {
+    [disabled] {
         @apply text-disabled #{'!important'};
     }
 

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

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

src/app/layout/common/messages/messages.component.html

@@ -32,6 +32,7 @@
             <div class="text-lg font-medium leading-10">Messages</div>
             <div class="ml-auto">
                 <button
+                    class="dark:text-white"
                     mat-icon-button
                     [disabled]="unreadCount === 0"
                     [matTooltip]="'Mark all as read'"

src/app/layout/common/notifications/notifications.component.html

@@ -32,6 +32,7 @@
             <div class="text-lg font-medium leading-10">Notifications</div>
             <div class="ml-auto">
                 <button
+                    class="dark:text-white"
                     mat-icon-button
                     [matTooltip]="'Mark all as read'"
                     [disabled]="unreadCount === 0"

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

@@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:megaphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '19.0.0',
+                    title  : '19.1.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full',
                 },
             },

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

@@ -13,6 +13,28 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v19.1.0
+        {
+            version    : 'v19.1.0',
+            releaseDate: 'Mar 11, 2024',
+            changes: [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material',
+                        '(Dependencies) Updated various other dependencies',
+                        '(@fuse/fullscreen) Updated the fullscreen component to use the new Fullscreen API',
+                    ],
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        'Legacy peer dependeny resolution',
+                    ],
+                },
+            ]
+        },
+
         // v19.0.0
         {
             version    : 'v19.0.0',

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

@@ -236,47 +236,11 @@
             If you use SSR (Server Side Rendering) you can even include your <strong>landing</strong> page as one of the modules and keep everything in a single app.
         </p>
 
-        <h3>app/shared/</h3>
-        <p>
-            This directory is designed to contain anything re-usable such as components, directives and pipes. By default, it doesn't include any of them but when you create
-            one for your app, you can put it here.
-        </p>
-        <p>
-            The only file here is the <code>shared.module.ts</code> file which simply imports and exports some of the common Angular modules so you don't have to import them
-            one by one. You can just import the <code>shared.module.ts</code> into your module whenever you need one of those common modules.
-        </p>
-        <p>
-            Currently it imports and exports:
-        </p>
-        <ul>
-            <li>
-                <p><strong>CommonModule</strong></p>
-                <p>Required for common directives such as *ngIf and *ngFor</p>
-            </li>
-            <li>
-                <p><strong>FormsModule</strong></p>
-                <p>Required for form directives</p>
-            </li>
-            <li>
-                <p><strong>ReactiveFormsModule</strong></p>
-                <p>Required for reactive form directives</p>
-            </li>
-        </ul>
-        <p>
-            You can add/remove anything to/from the <code>shared.module.ts</code> file and use the module to import commonly used modules without needing to remember them
-            one by one.
-        </p>
-
         <h2>assets/</h2>
         <p>
             Default Angular assets folder.
         </p>
 
-        <h2>environments/</h2>
-        <p>
-            Default Angular environments folder.
-        </p>
-
         <h2>styles/</h2>
         <p>
             This folder contains 4 different scss files:

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

@@ -72,12 +72,10 @@ export class DirectoryStructureComponent implements OnInit
                         name    : 'core/',
                         children: [
                             {name: 'auth/'},
-                            {name: 'config/'},
                             {name: 'icons/'},
                             {name: 'navigation/'},
                             {name: 'transloco/'},
                             {name: 'user/'},
-                            {name: 'core.module.ts'},
                         ],
                     },
                     {
@@ -88,8 +86,6 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'layout.component.html'},
                             {name: 'layout.component.scss'},
                             {name: 'layout.component.ts'},
-                            {name: 'layout.module.ts'},
-                            {name: 'layout.types.ts'},
                         ],
                     },
                     {
@@ -111,16 +107,9 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'landing/'},
                         ],
                     },
-                    {
-                        name    : 'shared/',
-                        children: [
-                            {name: 'shared.module.ts'},
-                        ],
-                    },
                     {name: 'app.component.html'},
                     {name: 'app.component.scss'},
                     {name: 'app.component.ts'},
-                    {name: 'app.module.ts'},
                     {name: 'app.resolvers.ts'},
                     {name: 'app.routing.ts'},
                 ],
@@ -145,7 +134,7 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'tailwind/'},
                             {name: 'validators/'},
                             {name: 'version/'},
-                            {name: 'fuse.module.ts'},
+                            {name: 'fuse.provider.ts'},
                             {name: 'index.ts'},
                         ],
                     },
@@ -160,13 +149,6 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'styles/'},
                         ],
                     },
-                    {
-                        name    : 'environments/',
-                        children: [
-                            {name: 'environment.prod.ts'},
-                            {name: 'environment.ts'},
-                        ],
-                    },
                     {
                         name    : 'styles/',
                         children: [
@@ -177,11 +159,8 @@ export class DirectoryStructureComponent implements OnInit
                     },
                     {name: 'favicon-16x16.png'},
                     {name: 'favicon-32x32.png'},
-                    {name: 'global.d.ts'},
                     {name: 'index.html'},
                     {name: 'main.ts'},
-                    {name: 'polyfills.ts'},
-                    {name: 'test.ts'},
                 ],
             },
         ];