Merge branch 'dev' into dev-starter

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse-angular",
-    "version": "15.1.0",
+    "version": "15.2.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -14,19 +14,19 @@
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "14.1.0",
+        "@angular/animations": "14.1.3",
-        "@angular/cdk": "14.1.0",
+        "@angular/cdk": "14.1.3",
-        "@angular/common": "14.1.0",
+        "@angular/common": "14.1.3",
-        "@angular/compiler": "14.1.0",
+        "@angular/compiler": "14.1.3",
-        "@angular/core": "14.1.0",
+        "@angular/core": "14.1.3",
-        "@angular/forms": "14.1.0",
+        "@angular/forms": "14.1.3",
-        "@angular/material": "14.1.0",
+        "@angular/material": "14.1.3",
-        "@angular/material-moment-adapter": "14.1.0",
+        "@angular/material-moment-adapter": "14.1.3",
-        "@angular/platform-browser": "14.1.0",
+        "@angular/platform-browser": "14.1.3",
-        "@angular/platform-browser-dynamic": "14.1.0",
+        "@angular/platform-browser-dynamic": "14.1.3",
-        "@angular/router": "14.1.0",
+        "@angular/router": "14.1.3",
         "@ngneat/transloco": "4.1.1",
-        "apexcharts": "3.35.3",
+        "apexcharts": "3.35.5",
         "crypto-js": "3.3.0",
         "highlight.js": "11.6.0",
         "lodash-es": "4.17.21",
@@ -38,43 +38,42 @@
         "quill": "1.3.7",
         "rxjs": "7.5.6",
         "tslib": "2.4.0",
-        "zone.js": "0.11.6"
+        "zone.js": "0.11.8"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "14.1.0",
+        "@angular-devkit/build-angular": "14.1.3",
         "@angular-eslint/builder": "14.0.2",
         "@angular-eslint/eslint-plugin": "14.0.2",
         "@angular-eslint/eslint-plugin-template": "14.0.2",
         "@angular-eslint/schematics": "14.0.2",
         "@angular-eslint/template-parser": "14.0.2",
-        "@angular/cli": "14.1.0",
+        "@angular/cli": "14.1.3",
-        "@angular/compiler-cli": "14.1.0",
+        "@angular/compiler-cli": "14.1.3",
-        "@tailwindcss/aspect-ratio": "0.4.0",
         "@tailwindcss/line-clamp": "0.4.0",
         "@tailwindcss/typography": "0.5.4",
         "@types/chroma-js": "2.1.4",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
         "@types/jasmine": "4.0.3",
-        "@types/lodash": "4.14.182",
+        "@types/lodash": "4.14.184",
         "@types/lodash-es": "4.17.6",
-        "@typescript-eslint/eslint-plugin": "5.30.7",
+        "@typescript-eslint/eslint-plugin": "5.33.1",
-        "@typescript-eslint/parser": "5.30.7",
+        "@typescript-eslint/parser": "5.33.1",
-        "autoprefixer": "10.4.7",
+        "autoprefixer": "10.4.8",
         "chroma-js": "2.4.2",
-        "eslint": "8.20.0",
+        "eslint": "8.22.0",
         "eslint-plugin-import": "2.26.0",
-        "eslint-plugin-jsdoc": "39.3.3",
+        "eslint-plugin-jsdoc": "39.3.6",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "4.2.0",
+        "jasmine-core": "4.3.0",
         "karma": "6.4.0",
         "karma-chrome-launcher": "3.1.1",
         "karma-coverage": "2.2.0",
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.0.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.14",
+        "postcss": "8.4.16",
-        "tailwindcss": "3.1.6",
+        "tailwindcss": "3.1.8",
         "typescript": "4.7.4"
     }
 }

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

@@ -11,7 +11,9 @@ const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-co
 // -----------------------------------------------------------------------------------------------------
 
 /**
- * Normalize the provided theme
+ * Normalizes the provided theme by omitting empty values and values that
+ * start with "on" from each palette. Also sets the correct DEFAULT value
+ * of each palette.
  *
  * @param theme
  */
@@ -28,67 +30,6 @@ const normalizeTheme = (theme) =>
     ));
 };
 
-/**
- * Generates variable colors for the 'colors'
- * configuration from the provided theme
- *
- * @param theme
- */
-const generateVariableColors = (theme) =>
-{
-    // https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
-    const customPropertiesWithOpacity = (name) => ({
-        opacityVariable,
-        opacityValue
-    }) =>
-    {
-        if ( opacityValue )
-        {
-            return `rgba(var(--fuse-${name}-rgb), ${opacityValue})`;
-        }
-        if ( opacityVariable )
-        {
-            return `rgba(var(--fuse-${name}-rgb), var(${opacityVariable}, 1))`;
-        }
-        return `rgb(var(--fuse-${name}-rgb))`;
-    };
-
-    return _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(theme))), (name) => [
-        [name, customPropertiesWithOpacity(name)],
-        [`on-${name}`, customPropertiesWithOpacity(`on-${name}`)]
-    ])));
-};
-
-/**
- * Generate and return themes object with theme name and colors/
- * This is useful for accessing themes from Angular (Typescript).
- *
- * @param themes
- * @returns {unknown[]}
- */
-function generateThemesObject(themes)
-{
-    const normalizedDefaultTheme = normalizeTheme(themes.default);
-    return _.map(_.cloneDeep(themes), (value, key) =>
-    {
-        const theme = normalizeTheme(value);
-        const primary = (theme && theme.primary && theme.primary.DEFAULT) ? theme.primary.DEFAULT : normalizedDefaultTheme.primary.DEFAULT;
-        const accent = (theme && theme.accent && theme.accent.DEFAULT) ? theme.accent.DEFAULT : normalizedDefaultTheme.accent.DEFAULT;
-        const warn = (theme && theme.warn && theme.warn.DEFAULT) ? theme.warn.DEFAULT : normalizedDefaultTheme.warn.DEFAULT;
-
-        return _.fromPairs([
-            [
-                key,
-                {
-                    primary,
-                    accent,
-                    warn
-                }
-            ]
-        ]);
-    });
-}
-
 // -----------------------------------------------------------------------------------------------------
 // @ FUSE TailwindCSS Main Plugin
 // -----------------------------------------------------------------------------------------------------
@@ -98,25 +39,27 @@ const theming = plugin.withOptions((options) => ({
         theme
     }) =>
     {
-        // -----------------------------------------------------------------------------------------------------
+        /**
-        // @ Map variable colors
+         * Iterate through the user's themes and build Tailwind components containing
-        // -----------------------------------------------------------------------------------------------------
+         * CSS Custom Properties using the colors from them. This allows switching
-        const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+         * themes by simply replacing a class name as well as nesting them.
-            themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
+         */
-            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
+        addComponents(
-                    [
+            _.fromPairs(_.map(options.themes, (theme, themeName) => [
-                        e(paletteName),
+                themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
-                        palette
+                _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
-                    ],
+                        [
-                    [
+                            e(paletteName),
-                        `on-${e(paletteName)}`,
+                            palette
-                        _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
+                        ],
-                    ]
+                        [
-                ])
+                            `on-${e(paletteName)}`,
-            ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+                            _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
-        ]));
+                        ]
-
+                    ])
-        addComponents(mapVariableColors);
+                ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+            ]))
+        );
 
         // -----------------------------------------------------------------------------------------------------
         // @ Generate scheme based css custom properties and utility classes
@@ -141,7 +84,7 @@ const theming = plugin.withOptions((options) => ({
                      * If we set '--is-dark' as "true" on dark themes, the above rule
                      * won't work because of the said "fallback value" logic. Therefore,
                      * we set the '--is-dark' to "false" on light themes and not set it
-                     * all on dark themes so that the fallback value can be used on
+                     * at all on dark themes so that the fallback value can be used on
                      * dark themes.
                      *
                      * On light themes, since '--is-dark' exists, the above rule will be
@@ -175,9 +118,17 @@ const theming = plugin.withOptions((options) => ({
     (options) =>
     {
         return {
-            theme   : {
+            theme: {
                 extend: {
-                    colors: generateVariableColors(options.themes.default)
+                    /**
+                     * Add 'Primary', 'Accent' and 'Warn' palettes as colors so all color utilities
+                     * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
+                     * This will also allow using arbitrary values with them such as opacity and such.
+                     */
+                    colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
+                        [name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
+                        [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
+                    ])))
                 },
                 fuse  : {
                     customProps: {
@@ -221,8 +172,7 @@ const theming = plugin.withOptions((options) => ({
                                 'mat-icon'      : colors.slate[400]
                             }
                         }
-                    },
+                    }
-                    themes     : generateThemesObject(options.themes)
                 }
             }
         };

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

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

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

@@ -144,9 +144,9 @@
             <!-- No messages -->
             <ng-container *ngIf="!messages || !messages.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:inbox'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No messages</div>

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

@@ -145,9 +145,9 @@
             <!-- No notifications -->
             <ng-container *ngIf="!notifications || !notifications.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:bell'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>

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

@@ -148,9 +148,9 @@
                 <!-- No shortcuts -->
                 <ng-container *ngIf="!shortcuts || !shortcuts.length">
                     <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                             <mat-icon
-                                class="text-primary-500-700"
+                                class="text-primary-700 dark:text-primary-50"
                                 [svgIcon]="'heroicons_outline:bookmark'"></mat-icon>
                         </div>
                         <div class="mt-5 text-2xl font-semibold tracking-tight">No shortcuts</div>

tailwind.config.js

@@ -35,8 +35,8 @@ const themes = {
             500: colors.red['50']
         }
     },
-    // Rest of the themes will use the 'default' as the base theme
+    // Rest of the themes will use the 'default' as the base
-    // and extend them with their given configuration
+    // theme and extend it with their given configuration
     'brand' : {
         primary: customPalettes.brand
     },
@@ -288,7 +288,6 @@ const config = {
 
         // Other third party and/or custom plugins
         require('@tailwindcss/typography')({modifiers: ['sm', 'lg']}),
-        require('@tailwindcss/aspect-ratio'),
         require('@tailwindcss/line-clamp')
     ]
 };