First step for upgrading to Angular & Angular Material v15

.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

package.json

@@ -14,17 +14,17 @@
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "14.2.4",
+        "@angular/animations": "15.0.0-rc.0",
-        "@angular/cdk": "14.2.3",
+        "@angular/cdk": "15.0.0-next.5",
-        "@angular/common": "14.2.4",
+        "@angular/common": "15.0.0-rc.0",
-        "@angular/compiler": "14.2.4",
+        "@angular/compiler": "15.0.0-rc.0",
-        "@angular/core": "14.2.4",
+        "@angular/core": "15.0.0-rc.0",
-        "@angular/forms": "14.2.4",
+        "@angular/forms": "15.0.0-rc.0",
-        "@angular/material": "14.2.3",
+        "@angular/material": "15.0.0-next.5",
-        "@angular/material-luxon-adapter": "14.2.3",
+        "@angular/material-luxon-adapter": "15.0.0-next.5",
-        "@angular/platform-browser": "14.2.4",
+        "@angular/platform-browser": "15.0.0-rc.0",
-        "@angular/platform-browser-dynamic": "14.2.4",
+        "@angular/platform-browser-dynamic": "15.0.0-rc.0",
-        "@angular/router": "14.2.4",
+        "@angular/router": "15.0.0-rc.0",
         "@ngneat/transloco": "4.1.1",
         "apexcharts": "3.35.5",
         "crypto-js": "3.3.0",
@@ -41,14 +41,14 @@
         "zone.js": "0.11.8"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "14.2.4",
+        "@angular-devkit/build-angular": "15.0.0-rc.0",
         "@angular-eslint/builder": "14.1.2",
         "@angular-eslint/eslint-plugin": "14.1.2",
         "@angular-eslint/eslint-plugin-template": "14.1.2",
         "@angular-eslint/schematics": "14.1.2",
         "@angular-eslint/template-parser": "14.1.2",
-        "@angular/cli": "14.2.4",
+        "@angular/cli": "15.0.0-rc.0",
-        "@angular/compiler-cli": "14.2.4",
+        "@angular/compiler-cli": "15.0.0-rc.0",
         "@tailwindcss/line-clamp": "0.4.2",
         "@tailwindcss/typography": "0.5.7",
         "@types/chroma-js": "2.1.4",
@@ -75,6 +75,6 @@
         "lodash": "4.17.21",
         "postcss": "8.4.17",
         "tailwindcss": "3.1.8",
-        "typescript": "4.7.4"
+        "typescript": "4.8.4"
     }
 }

src/@fuse/styles/themes.scss

@@ -1,167 +1,146 @@
-@use '@angular/material' as mat;
 @use "sass:map";
+@use '@angular/material' as mat;
+@use "user-themes" as userThemes;
+
+/* Set the base colors for light themes */
+$light-base: (
+    foreground: (
+        base: #000000,
+        divider: #E2E8F0, /* slate.200 */
+        dividers: #E2E8F0, /* slate.200 */
+        disabled: #94A3B8, /* slate.400 */
+        disabled-button: #94A3B8, /* slate.400 */
+        disabled-text: #94A3B8, /* slate.400 */
+        elevation: #000000,
+        hint-text: #94A3B8, /* slate.400 */
+        secondary-text: #64748B, /* slate.500 */
+        icon: #64748B, /* slate.500 */
+        icons: #64748B, /* slate.500 */
+        mat-icon: #64748B, /* slate.500 */
+        text: #1E293B, /* slate.800 */
+        slider-min: #1E293B, /* slate.800 */
+        slider-off: #CBD5E1, /* slate.300 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #CBD5E1, /* slate.300 */
+        app-bar: #FFFFFF,
+        background: #F1F5F9, /* slate.100 */
+        hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
+        card: #FFFFFF,
+        dialog: #FFFFFF,
+        disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
+        raised-button: #FFFFFF,
+        focused-button: #64748B, /* slate.500 */
+        selected-button: #E2E8F0, /* slate.200 */
+        selected-disabled-button: #E2E8F0, /* slate.200 */
+        disabled-button-toggle: #CBD5E1, /* slate.300 */
+        unselected-chip: #E2E8F0, /* slate.200 */
+        disabled-list-option: #CBD5E1, /* slate.300 */
+        tooltip: #1E293B /* slate.800 */
+    )
+);
+
+/* Set the base colors for dark themes */
+$dark-base: (
+    foreground: (
+        base: #FFFFFF,
+        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        disabled: #475569, /* slate.600 */
+        disabled-button: #1E293B, /* slate.800 */
+        disabled-text: #475569, /* slate.600 */
+        elevation: #000000,
+        hint-text: #64748B, /* slate.500 */
+        secondary-text: #94A3B8, /* slate.400 */
+        icon: #F1F5F9, /* slate.100 */
+        icons: #F1F5F9, /* slate.100 */
+        mat-icon: #94A3B8, /* slate.400 */
+        text: #FFFFFF,
+        slider-min: #FFFFFF,
+        slider-off: #64748B, /* slate.500 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #0F172A, /* slate.900 */
+        app-bar: #0F172A, /* slate.900 */
+        background: #0F172A, /* slate.900 */
+        hover: rgba(255, 255, 255, 0.05),
+        card: #1E293B, /* slate.800 */
+        dialog: #1E293B, /* slate.800 */
+        disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
+        raised-button: #0F172A, /* slate.900 */
+        focused-button: #E2E8F0, /* slate.200 */
+        selected-button: rgba(255, 255, 255, 0.05),
+        selected-disabled-button: #1E293B, /* slate.800 */
+        disabled-button-toggle: #0F172A, /* slate.900 */
+        unselected-chip: #475569, /* slate.600 */
+        disabled-list-option: #E2E8F0, /* slate.200 */
+        tooltip: #64748B /* slate.500 */
+    )
+);
 
 /* Include the core Angular Material styles */
 @include mat.core();
 
-/* Create a base theme without color.
+/* Create a base theme without any color to set the density and typography */
-    This will globally set the density and typography for all future color themes. */
 @include mat.all-component-themes((
     color: null,
-    density: -2,
+    density: 0,
     typography: mat.define-typography-config(
         $font-family: theme('fontFamily.sans'),
-        $title: mat.define-typography-level(1.25rem, 2rem, 600),
+            /* $title: mat.define-typography-level(1.25rem, 2rem, 600), */
         $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
         $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-        $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
+        $subtitle-1: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
     )
 ));
 
-/* Generate Primary, Accent and Warn palettes */
+/* Loop through user themes and generate Angular Material themes */
-$palettes: ();
+@each $name, $theme in userThemes.$user-themes {
-@each $name in (primary, accent, warn) {
-    $palettes: map.merge($palettes, (#{$name}: (
-        50: var(--fuse-#{$name}-50),
-        100: var(--fuse-#{$name}-100),
-        200: var(--fuse-#{$name}-200),
-        300: var(--fuse-#{$name}-300),
-        400: var(--fuse-#{$name}-400),
-        500: var(--fuse-#{$name}-500),
-        600: var(--fuse-#{$name}-600),
-        700: var(--fuse-#{$name}-700),
-        800: var(--fuse-#{$name}-800),
-        900: var(--fuse-#{$name}-900),
-        contrast: (
-            50: var(--fuse-on-#{$name}-50),
-            100: var(--fuse-on-#{$name}-100),
-            200: var(--fuse-on-#{$name}-200),
-            300: var(--fuse-on-#{$name}-300),
-            400: var(--fuse-on-#{$name}-400),
-            500: var(--fuse-on-#{$name}-500),
-            600: var(--fuse-on-#{$name}-600),
-            700: var(--fuse-on-#{$name}-700),
-            800: var(--fuse-on-#{$name}-800),
-            900: var(--fuse-on-#{$name}-900)
-        ),
-        default: var(--fuse-#{$name}),
-        lighter: var(--fuse-#{$name}-100),
-        darker: var(--fuse-#{$name}-700),
-        text: var(--fuse-#{$name}),
-        default-contrast: var(--fuse-on-#{$name}),
-        lighter-contrast: var(--fuse-on-#{$name}-100),
-        darker-contrast: var(--fuse-on-#{$name}-700)
-    )));
-}
 
-/* Generate Angular Material themes. Since we are using CSS Custom Properties,
+    /* Generate the palettes */
-    we don't have to generate a separate Angular Material theme for each color
+    $palettes: ();
-    set. We can just create one light and one dark theme and then switch the
+    @each $name in (primary, accent, warn) {
-    CSS Custom Properties to dynamically switch the colors. */
+
-body.light,
+        /* Define the Angular Material theme */
-body .light {
+        $palette: mat.define-palette(map.get($theme, $name));
-    $base-light-theme: mat.define-light-theme((
+
+        /* Replace the default colors on the defined Material palette */
+        $palette: map.merge($palette, (
+            default: map.get(map.get($theme, $name), DEFAULT),
+            lighter: map.get(map.get($theme, $name), 100),
+            darker: map.get(map.get($theme, $name), 700),
+            text: map.get(map.get($theme, $name), DEFAULT),
+            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
+            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
+            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700),
+        ));
+
+        $palettes: map.merge($palettes, (#{$name}: $palette));
+    }
+
+    /* Define a light & dark Angular Material theme with the generated palettes */
+    $light-theme: mat.define-light-theme((
         color: ($palettes)
     ));
 
-    $light-theme: (
+    $dark-theme: mat.define-dark-theme((
-        color: (
-            primary: map.get(map.get($base-light-theme, color), primary),
-            accent: map.get(map.get($base-light-theme, color), accent),
-            warn: map.get(map.get($base-light-theme, color), warn),
-            is-dark: map.get(map.get($base-light-theme, color), is-dark),
-            foreground: (
-                base: #000000,
-                divider: #E2E8F0, /* slate.200 */
-                dividers: #E2E8F0, /* slate.200 */
-                disabled: #94A3B8, /* slate.400 */
-                disabled-button: #94A3B8, /* slate.400 */
-                disabled-text: #94A3B8, /* slate.400 */
-                elevation: #000000,
-                hint-text: #94A3B8, /* slate.400 */
-                secondary-text: #64748B, /* slate.500 */
-                icon: #64748B, /* slate.500 */
-                icons: #64748B, /* slate.500 */
-                mat-icon: #64748B, /* slate.500 */
-                text: #1E293B, /* slate.800 */
-                slider-min: #1E293B, /* slate.800 */
-                slider-off: #CBD5E1, /* slate.300 */
-                slider-off-active: #94A3B8 /* slate.400 */
-            ),
-            background: (
-                status-bar: #CBD5E1, /* slate.300 */
-                app-bar: #FFFFFF,
-                background: #F1F5F9, /* slate.100 */
-                hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
-                card: #FFFFFF,
-                dialog: #FFFFFF,
-                disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
-                raised-button: #FFFFFF,
-                focused-button: #64748B, /* slate.500 */
-                selected-button: #E2E8F0, /* slate.200 */
-                selected-disabled-button: #E2E8F0, /* slate.200 */
-                disabled-button-toggle: #CBD5E1, /* slate.300 */
-                unselected-chip: #E2E8F0, /* slate.200 */
-                disabled-list-option: #CBD5E1, /* slate.300 */
-                tooltip: #1E293B /* slate.800 */
-            )
-        )
-    );
-
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($light-theme);
-}
-
-body.dark,
-body .dark {
-    $base-dark-theme: mat.define-dark-theme((
         color: ($palettes)
     ));
 
-    $dark-theme: (
+    /* Merge the custom base colors with the generated themes */
-        color: (
+    $light-theme: map.merge($light-theme, $light-base);
-            primary: map.get(map.get($base-dark-theme, color), primary),
+    $dark-theme: map.merge($dark-theme, $dark-base);
-            accent: map.get(map.get($base-dark-theme, color), accent),
-            warn: map.get(map.get($base-dark-theme, color), warn),
-            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-            foreground: (
-                base: #FFFFFF,
-                divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-                dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-                disabled: #475569, /* slate.600 */
-                disabled-button: #1E293B, /* slate.800 */
-                disabled-text: #475569, /* slate.600 */
-                elevation: #000000,
-                hint-text: #64748B, /* slate.500 */
-                secondary-text: #94A3B8, /* slate.400 */
-                icon: #F1F5F9, /* slate.100 */
-                icons: #F1F5F9, /* slate.100 */
-                mat-icon: #94A3B8, /* slate.400 */
-                text: #FFFFFF,
-                slider-min: #FFFFFF,
-                slider-off: #64748B, /* slate.500 */
-                slider-off-active: #94A3B8 /* slate.400 */
-            ),
-            background: (
-                status-bar: #0F172A, /* slate.900 */
-                app-bar: #0F172A, /* slate.900 */
-                background: #0F172A, /* slate.900 */
-                hover: rgba(255, 255, 255, 0.05),
-                card: #1E293B, /* slate.800 */
-                dialog: #1E293B, /* slate.800 */
-                disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
-                raised-button: #0F172A, /* slate.900 */
-                focused-button: #E2E8F0, /* slate.200 */
-                selected-button: rgba(255, 255, 255, 0.05),
-                selected-disabled-button: #1E293B, /* slate.800 */
-                disabled-button-toggle: #0F172A, /* slate.900 */
-                unselected-chip: #475569, /* slate.600 */
-                disabled-list-option: #E2E8F0, /* slate.200 */
-                tooltip: #64748B /* slate.500 */
-            )
-        )
-    );
 
-    /* Use all-component-colors to only generate the colors */
+    /* Generate and encapsulate Angular Material themes */
-    @include mat.all-component-colors($dark-theme);
+    #{map.get($theme, selector)} .light,
+    #{map.get($theme, selector)}.light {
+        @include mat.all-component-colors($light-theme);
+    }
+
+    #{map.get($theme, selector)} .dark,
+    #{map.get($theme, selector)}.dark {
+        @include mat.all-component-colors($dark-theme);
+    }
 }

src/@fuse/tailwind/plugins/theming.js

@@ -1,10 +1,12 @@
 const chroma = require('chroma-js');
 const _ = require('lodash');
+const fs = require('fs');
 const path = require('path');
 const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
 const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
+const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
 
 // -----------------------------------------------------------------------------------------------------
 // @ Utilities
@@ -39,6 +41,70 @@ const theming = plugin.withOptions((options) => ({
         theme
     }) =>
     {
+        /**
+         * Create user themes object by going through the provided themes and
+         * merging them with the provided "default" so, we can have a complete
+         * set of color palettes for each user theme.
+         */
+        const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+            themeName,
+            _.defaults({}, theme, options.themes['default'])
+        ]));
+
+        /**
+         * Normalize the themes and assign it to the themes object. This will
+         * be the final object that we create a SASS map from
+         */
+        let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
+            themeName,
+            normalizeTheme(theme)
+        ]));
+
+        /**
+         * Go through the themes to generate the contrasts and filter the
+         * palettes to only have "primary", "accent" and "warn" objects.
+         */
+        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+            themeName,
+            _.pick(
+                _.fromPairs(_.map(theme, (palette, paletteName) => [
+                    paletteName,
+                    {
+                        ...palette,
+                        contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
+                            hue,
+                            _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
+                        ]))
+                    }
+                ])),
+                ['primary', 'accent', 'warn']
+            )
+        ]));
+
+        /**
+         * Go through the themes and attach appropriate class selectors so,
+         * we can use them to encapsulate each theme.
+         */
+        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+            themeName,
+            {
+                selector: `".theme-${themeName}"`,
+                ...theme
+            }
+        ]));
+
+        /* Generate the SASS map using the themes object */
+        const sassMap = jsonToSassMap(JSON.stringify({'user-themes': themes}));
+
+        /* Write the SASS map to the file */
+        fs.writeFile(path.resolve(__dirname, ('../../styles/user-themes.scss')), sassMap, (err) =>
+        {
+            if ( err )
+            {
+                return console.log(err);
+            }
+        });
+
         /**
          * Iterate through the user's themes and build Tailwind components containing
          * CSS Custom Properties using the colors from them. This allows switching
@@ -61,9 +127,9 @@ const theming = plugin.withOptions((options) => ({
             ]))
         );
 
-        // -----------------------------------------------------------------------------------------------------
+        /**
-        // @ Generate scheme based css custom properties and utility classes
+         * Generate scheme based css custom properties and utility classes
-        // -----------------------------------------------------------------------------------------------------
+         */
         const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) =>
         {
             const isDark = colorScheme === 'dark';
@@ -78,7 +144,7 @@ const theming = plugin.withOptions((options) => ({
                     /**
                      * If a custom property is not available, browsers will use
                      * the fallback value. In this case, we want to use '--is-dark'
-                     * as the indicator of a dark theme so we can use it like this:
+                     * as the indicator of a dark theme so, we can use it like this:
                      * background-color: var(--is-dark, red);
                      *
                      * If we set '--is-dark' as "true" on dark themes, the above rule
@@ -99,7 +165,7 @@ const theming = plugin.withOptions((options) => ({
                      */
                     ...(!isDark ? {'--is-dark': 'false'} : {}),
 
-                    // Generate custom properties from customProps
+                    /* Generate custom properties from customProps */
                     ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
                     ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
                 }
@@ -108,7 +174,7 @@ const theming = plugin.withOptions((options) => ({
 
         const schemeUtilities = (() =>
         {
-            // Generate general styles & utilities
+            /* Generate general styles & utilities */
             return {};
         })();
 

src/@fuse/tailwind/utils/json-to-sass-map.js

@@ -0,0 +1,67 @@
+const _ = require('lodash');
+
+module.exports = (data) =>
+{
+    if ( !data )
+    {
+        return;
+    }
+
+    data = JSON.parse(data);
+
+    const getSCSS = (chunk) =>
+    {
+        let scss = '';
+
+        if ( typeof chunk === "object" && !Array.isArray(chunk) )
+        {
+            _.mapKeys(chunk, (value, key) =>
+            {
+                scss += key + ': ';
+
+                if ( typeof value === "object" )
+                {
+                    if ( Array.isArray(value) )
+                    {
+                        scss += '(';
+                        _.each(value, (val1) =>
+                        {
+                            if ( Array.isArray(val1) )
+                            {
+                                _.each(val1, (val2) =>
+                                {
+                                    scss += val2 + ' ';
+                                });
+                                scss = scss.slice(0, -1) + ', ';
+                            }
+                            else
+                            {
+                                scss += val1 + ', ';
+                            }
+                        });
+                        scss = scss.slice(0, -2);
+                        scss += ')';
+                    }
+                    else
+                    {
+                        scss += '(' + getSCSS(value) + ')';
+                    }
+                }
+                else
+                {
+                    scss += getSCSS(value);
+                }
+                scss += ', ';
+            });
+            scss = scss.slice(0, -2);
+        }
+        else
+        {
+            scss += chunk;
+        }
+
+        return scss;
+    };
+
+    return '$' + getSCSS(data) + ';';
+};

src/app/modules/admin/ui/forms/fields/fields.component.html

@@ -455,38 +455,32 @@
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
                         class="flex-auto">
-                        <mat-chip-list #chipList01>
+                        <mat-chip-grid #chipGrid01>
-                            <mat-chip
+                            <mat-chip-row [editable]="true">
-                                [removable]="true"
-                                [selectable]="true">
                                 Lemon
                                 <mat-icon
                                     class="icon-size-5"
                                     matChipRemove
                                     [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
-                            <mat-chip
+                            <mat-chip-row [editable]="true">
-                                [removable]="true"
-                                [selectable]="true">
                                 Lime
                                 <mat-icon
                                     class="icon-size-5"
                                     matChipRemove
                                     [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
-                            <mat-chip
+                            <mat-chip-row [editable]="true">
-                                [removable]="true"
-                                [selectable]="true">
                                 Apple
                                 <mat-icon
                                     class="icon-size-5"
                                     matChipRemove
                                     [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
                             <input
                                 [placeholder]="'New fruit...'"
-                                [matChipInputFor]="chipList01">
+                                [matChipInputFor]="chipGrid01">
-                        </mat-chip-list>
+                        </mat-chip-grid>
                     </mat-form-field>
                 </div>
                 <div class="flex">
@@ -734,38 +728,32 @@
                     <mat-form-field
                         [ngClass]="formFieldHelpers"
                         class="flex-auto">
-                        <mat-chip-list #chipList02>
+                        <mat-chip-grid #chipGrid02>
-                            <mat-chip
+                            <mat-chip-row [editable]="true">
-                                [removable]="true"
-                                [selectable]="true">
                                 Lemon
                                 <mat-icon
                                     class="icon-size-5"
                                     matChipRemove
                                     [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
-                            <mat-chip
+                            <mat-chip-row [editable]="true">
-                                [removable]="true"
-                                [selectable]="true">
                                 Lime
                                 <mat-icon
                                     class="icon-size-5"
                                     matChipRemove
                                     [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
-                            <mat-chip
+                            <mat-chip-row [editable]="true">
-                                [removable]="true"
-                                [selectable]="true">
                                 Apple
                                 <mat-icon
                                     class="icon-size-5"
                                     matChipRemove
                                     [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
                             <input
                                 [placeholder]="'New fruit...'"
-                                [matChipInputFor]="chipList02">
+                                [matChipInputFor]="chipGrid02">
-                        </mat-chip-list>
+                        </mat-chip-grid>
                     </mat-form-field>
                 </div>
                 <div class="flex">

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

@@ -393,9 +393,11 @@
                                     Toggle determinate mode
                                 </mat-slide-toggle>
 
-                                <mat-slider
+                                <mat-slider [color]="'primary'">
-                                    [color]="'primary'"
+                                    <input
-                                    (change)="setProgress($event)">
+                                        matSliderThumb
+                                        [(value)]="sliderValue"
+                                        (valueChange)="setProgress()">
                                     Progress value
                                 </mat-slider>
 

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

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { MatSliderChange } from '@angular/material/slider';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { finalize } from 'rxjs';
 import { FuseLoadingService } from '@fuse/services/loading';
@@ -14,6 +13,7 @@ export class LoadingBarComponent
 {
     apiCallStatus: string = '-';
     mode: 'determinate' | 'indeterminate' = 'indeterminate';
+    sliderValue: number = 0;
 
     /**
      * Constructor
@@ -96,11 +96,9 @@ export class LoadingBarComponent
 
     /**
      * Set the progress
-     *
-     * @param change
      */
-    setProgress(change: MatSliderChange): void
+    setProgress(): void
     {
-        this._fuseLoadingService.setProgress(change.value);
+        this._fuseLoadingService.setProgress(this.sliderValue);
     }
 }

src/test.ts

@@ -4,21 +4,8 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-    context(path: string, deep?: boolean, filter?: RegExp): {
-        <T>(id: string): T;
-        keys(): string[];
-    };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting()
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-
-// And load the modules.
-context.keys().forEach(context);

tailwind.config.js

@@ -17,7 +17,7 @@ const customPalettes = {
  * Themes
  */
 const themes = {
-    // Default theme is required for theming system to work correctly
+    // Default theme is required for theming system to work correctly!
     'default': {
         primary  : {
             ...colors.indigo,
@@ -36,7 +36,7 @@ const themes = {
         }
     },
     // Rest of the themes will use the 'default' as the base
-    // theme and extend it with their given configuration
+    // theme and will extend it with their given configuration.
     'brand' : {
         primary: customPalettes.brand
     },

tsconfig.json

@@ -11,12 +11,13 @@
         "experimentalDecorators": true,
         "moduleResolution": "node",
         "importHelpers": true,
-        "target": "es2020",
+        "target": "ES2022",
         "module": "es2020",
         "lib": [
             "es2020",
             "dom"
-        ]
+        ],
+        "useDefineForClassFields": false
     },
     "angularCompilerOptions": {
         "enableI18nLegacyMessageIdFormat": false