Merge remote-tracking branch 'origin/demo' into starter

Increased the version number
Updated the changelog
2025-12-22 04:07:06 +00:00 · 2021-05-24 14:33:12 +03:00 · 2021-05-24 14:32:45 +03:00 · 2021-05-24 14:29:35 +03:00 · 2021-05-24 09:22:18 +03:00 · 2021-05-23 07:13:28 +03:00
91 changed files with 1173 additions and 306 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -16,8 +16,7 @@
            ],
            "parserOptions": {
                "project": [
-                    "tsconfig.json",
-                    "e2e/tsconfig.json"
+                    "tsconfig.json"
                ],
                "createDefaultProgram": true
            },
@@ -44,6 +43,7 @@
                    }
                ],
                "@typescript-eslint/dot-notation": "off",
+                "@typescript-eslint/explicit-function-return-type": "error",
                "@typescript-eslint/explicit-member-accessibility": [
                    "off",
                    {
--- a/3
+++ b/3
@@ -2,6 +2,9 @@
 // @ 3rd party credits
 // -----------------------------------------------------------------------------------------------------

+// Flags
+https://github.com/Yummygum/flagpack-core
+
 // Icons
 Material - https://material.io/tools/icons
 Feather - https://feathericons.com/
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
    "name": "@fuse/demo",
-    "version": "13.0.0",
+    "version": "13.0.2",
    "lockfileVersion": 1,
    "requires": true,
    "dependencies": {
@@ -453,7 +453,6 @@
            "version": "7.12.13",
            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
            "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-            "dev": true,
            "requires": {
                "@babel/highlight": "^7.12.13"
            }
@@ -748,8 +747,7 @@
        "@babel/helper-validator-identifier": {
            "version": "7.14.0",
            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
-            "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
-            "dev": true
+            "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
        },
        "@babel/helper-validator-option": {
            "version": "7.12.17",
@@ -784,7 +782,6 @@
            "version": "7.14.0",
            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
            "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
-            "dev": true,
            "requires": {
                "@babel/helper-validator-identifier": "^7.14.0",
                "chalk": "^2.0.0",
@@ -1615,9 +1612,9 @@
            "dev": true
        },
        "@es-joy/jsdoccomment": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.4.4.tgz",
-            "integrity": "sha512-ua4qDt9dQb4qt5OI38eCZcQZYE5Bq3P0GzgvDARdT8Lt0mAUpxKTPy8JGGqEvF77tG1irKDZ3WreeezEa3P43w==",
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.6.0.tgz",
+            "integrity": "sha512-zT1EtysKMITJ7vE4RvOJqitxk/Str6It8hq+fykxkwLuTyzgak+TnVuVSIyovT/qrEz3i46ypCSXgNtIDYwNOg==",
            "dev": true,
            "requires": {
                "comment-parser": "^1.1.5",
@@ -1758,6 +1755,118 @@
                "schema-utils": "^2.7.0"
            }
        },
+        "@ngneat/transloco": {
+            "version": "2.20.1",
+            "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-2.20.1.tgz",
+            "integrity": "sha512-V5NQvjrjAKWgYuQzC1FW+fisqM5gzci+WxkOQYYz7GaSIdo5Be8XvB6GM0QDFHPSGIBzBSg8UBAEzo0zeg7T/g==",
+            "requires": {
+                "@ngneat/transloco-utils": "^1.0.6",
+                "flat": "5.0.2",
+                "lodash.kebabcase": "^4.1.1",
+                "ora": "^3.4.0",
+                "replace-in-file": "^4.1.2",
+                "tslib": "^1.9.0"
+            },
+            "dependencies": {
+                "ansi-regex": {
+                    "version": "4.1.0",
+                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+                    "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+                },
+                "cli-cursor": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+                    "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+                    "requires": {
+                        "restore-cursor": "^2.0.0"
+                    }
+                },
+                "log-symbols": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+                    "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+                    "requires": {
+                        "chalk": "^2.0.1"
+                    }
+                },
+                "mimic-fn": {
+                    "version": "1.2.0",
+                    "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+                    "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+                },
+                "onetime": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+                    "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+                    "requires": {
+                        "mimic-fn": "^1.0.0"
+                    }
+                },
+                "ora": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
+                    "integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==",
+                    "requires": {
+                        "chalk": "^2.4.2",
+                        "cli-cursor": "^2.1.0",
+                        "cli-spinners": "^2.0.0",
+                        "log-symbols": "^2.2.0",
+                        "strip-ansi": "^5.2.0",
+                        "wcwidth": "^1.0.1"
+                    }
+                },
+                "restore-cursor": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+                    "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+                    "requires": {
+                        "onetime": "^2.0.0",
+                        "signal-exit": "^3.0.2"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "5.2.0",
+                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+                    "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+                    "requires": {
+                        "ansi-regex": "^4.1.0"
+                    }
+                },
+                "tslib": {
+                    "version": "1.14.1",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+                    "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+                }
+            }
+        },
+        "@ngneat/transloco-utils": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@ngneat/transloco-utils/-/transloco-utils-1.1.2.tgz",
+            "integrity": "sha512-yljMAoRNr+qr1z+DTUlY98SWm/ldbssCNmI3tE+A1183ppYKcnpdfSJQKrx1rg4rmwNfyKyexlmZ6EubosqZ8A==",
+            "requires": {
+                "cosmiconfig": "6.0.0",
+                "tslib": "^1.9.0"
+            },
+            "dependencies": {
+                "cosmiconfig": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+                    "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+                    "requires": {
+                        "@types/parse-json": "^4.0.0",
+                        "import-fresh": "^3.1.0",
+                        "parse-json": "^5.0.0",
+                        "path-type": "^4.0.0",
+                        "yaml": "^1.7.2"
+                    }
+                },
+                "tslib": {
+                    "version": "1.14.1",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+                    "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+                }
+            }
+        },
        "@ngtools/webpack": {
            "version": "12.0.0",
            "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.0.0.tgz",
@@ -2043,8 +2152,7 @@
        "@types/parse-json": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-            "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-            "dev": true
+            "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
        },
        "@types/q": {
            "version": "0.0.32",
@@ -2084,19 +2192,76 @@
            }
        },
        "@typescript-eslint/eslint-plugin": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.23.0.tgz",
-            "integrity": "sha512-tGK1y3KIvdsQEEgq6xNn1DjiFJtl+wn8JJQiETtCbdQxw1vzjXyAaIkEmO2l6Nq24iy3uZBMFQjZ6ECf1QdgGw==",
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.24.0.tgz",
+            "integrity": "sha512-qbCgkPM7DWTsYQGjx9RTuQGswi+bEt0isqDBeo+CKV0953zqI0Tp7CZ7Fi9ipgFA6mcQqF4NOVNwS/f2r6xShw==",
            "dev": true,
            "requires": {
-                "@typescript-eslint/experimental-utils": "4.23.0",
-                "@typescript-eslint/scope-manager": "4.23.0",
+                "@typescript-eslint/experimental-utils": "4.24.0",
+                "@typescript-eslint/scope-manager": "4.24.0",
                "debug": "^4.1.1",
                "functional-red-black-tree": "^1.0.1",
                "lodash": "^4.17.15",
                "regexpp": "^3.0.0",
                "semver": "^7.3.2",
                "tsutils": "^3.17.1"
+            },
+            "dependencies": {
+                "@typescript-eslint/experimental-utils": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.24.0.tgz",
+                    "integrity": "sha512-IwTT2VNDKH1h8RZseMH4CcYBz6lTvRoOLDuuqNZZoThvfHEhOiZPQCow+5El3PtyxJ1iDr6UXZwYtE3yZQjhcw==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.3",
+                        "@typescript-eslint/scope-manager": "4.24.0",
+                        "@typescript-eslint/types": "4.24.0",
+                        "@typescript-eslint/typescript-estree": "4.24.0",
+                        "eslint-scope": "^5.0.0",
+                        "eslint-utils": "^2.0.0"
+                    }
+                },
+                "@typescript-eslint/scope-manager": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.24.0.tgz",
+                    "integrity": "sha512-9+WYJGDnuC9VtYLqBhcSuM7du75fyCS/ypC8c5g7Sdw7pGL4NDTbeH38eJPfzIydCHZDoOgjloxSAA3+4l/zsA==",
+                    "dev": true,
+                    "requires": {
+                        "@typescript-eslint/types": "4.24.0",
+                        "@typescript-eslint/visitor-keys": "4.24.0"
+                    }
+                },
+                "@typescript-eslint/types": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.24.0.tgz",
+                    "integrity": "sha512-tkZUBgDQKdvfs8L47LaqxojKDE+mIUmOzdz7r+u+U54l3GDkTpEbQ1Jp3cNqqAU9vMUCBA1fitsIhm7yN0vx9Q==",
+                    "dev": true
+                },
+                "@typescript-eslint/typescript-estree": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.24.0.tgz",
+                    "integrity": "sha512-kBDitL/by/HK7g8CYLT7aKpAwlR8doshfWz8d71j97n5kUa5caHWvY0RvEUEanL/EqBJoANev8Xc/mQ6LLwXGA==",
+                    "dev": true,
+                    "requires": {
+                        "@typescript-eslint/types": "4.24.0",
+                        "@typescript-eslint/visitor-keys": "4.24.0",
+                        "debug": "^4.1.1",
+                        "globby": "^11.0.1",
+                        "is-glob": "^4.0.1",
+                        "semver": "^7.3.2",
+                        "tsutils": "^3.17.1"
+                    }
+                },
+                "@typescript-eslint/visitor-keys": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.24.0.tgz",
+                    "integrity": "sha512-4ox1sjmGHIxjEDBnMCtWFFhErXtKA1Ec0sBpuz0fqf3P+g3JFGyTxxbF06byw0FRsPnnbq44cKivH7Ks1/0s6g==",
+                    "dev": true,
+                    "requires": {
+                        "@typescript-eslint/types": "4.24.0",
+                        "eslint-visitor-keys": "^2.0.0"
+                    }
+                }
            }
        },
        "@typescript-eslint/experimental-utils": {
@@ -2114,15 +2279,58 @@
            }
        },
        "@typescript-eslint/parser": {
-            "version": "4.23.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.23.0.tgz",
-            "integrity": "sha512-wsvjksHBMOqySy/Pi2Q6UuIuHYbgAMwLczRl4YanEPKW5KVxI9ZzDYh3B5DtcZPQTGRWFJrfcbJ6L01Leybwug==",
+            "version": "4.24.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.24.0.tgz",
+            "integrity": "sha512-dj1ZIh/4QKeECLb2f/QjRwMmDArcwc2WorWPRlB8UNTZlY1KpTVsbX7e3ZZdphfRw29aTFUSNuGB8w9X5sS97w==",
            "dev": true,
            "requires": {
-                "@typescript-eslint/scope-manager": "4.23.0",
-                "@typescript-eslint/types": "4.23.0",
-                "@typescript-eslint/typescript-estree": "4.23.0",
+                "@typescript-eslint/scope-manager": "4.24.0",
+                "@typescript-eslint/types": "4.24.0",
+                "@typescript-eslint/typescript-estree": "4.24.0",
                "debug": "^4.1.1"
+            },
+            "dependencies": {
+                "@typescript-eslint/scope-manager": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.24.0.tgz",
+                    "integrity": "sha512-9+WYJGDnuC9VtYLqBhcSuM7du75fyCS/ypC8c5g7Sdw7pGL4NDTbeH38eJPfzIydCHZDoOgjloxSAA3+4l/zsA==",
+                    "dev": true,
+                    "requires": {
+                        "@typescript-eslint/types": "4.24.0",
+                        "@typescript-eslint/visitor-keys": "4.24.0"
+                    }
+                },
+                "@typescript-eslint/types": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.24.0.tgz",
+                    "integrity": "sha512-tkZUBgDQKdvfs8L47LaqxojKDE+mIUmOzdz7r+u+U54l3GDkTpEbQ1Jp3cNqqAU9vMUCBA1fitsIhm7yN0vx9Q==",
+                    "dev": true
+                },
+                "@typescript-eslint/typescript-estree": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.24.0.tgz",
+                    "integrity": "sha512-kBDitL/by/HK7g8CYLT7aKpAwlR8doshfWz8d71j97n5kUa5caHWvY0RvEUEanL/EqBJoANev8Xc/mQ6LLwXGA==",
+                    "dev": true,
+                    "requires": {
+                        "@typescript-eslint/types": "4.24.0",
+                        "@typescript-eslint/visitor-keys": "4.24.0",
+                        "debug": "^4.1.1",
+                        "globby": "^11.0.1",
+                        "is-glob": "^4.0.1",
+                        "semver": "^7.3.2",
+                        "tsutils": "^3.17.1"
+                    }
+                },
+                "@typescript-eslint/visitor-keys": {
+                    "version": "4.24.0",
+                    "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.24.0.tgz",
+                    "integrity": "sha512-4ox1sjmGHIxjEDBnMCtWFFhErXtKA1Ec0sBpuz0fqf3P+g3JFGyTxxbF06byw0FRsPnnbq44cKivH7Ks1/0s6g==",
+                    "dev": true,
+                    "requires": {
+                        "@typescript-eslint/types": "4.24.0",
+                        "eslint-visitor-keys": "^2.0.0"
+                    }
+                }
            }
        },
        "@typescript-eslint/scope-manager": {
@@ -2498,14 +2706,12 @@
        "ansi-regex": {
            "version": "5.0.0",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-            "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-            "dev": true
+            "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
        },
        "ansi-styles": {
            "version": "3.2.1",
            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-            "dev": true,
            "requires": {
                "color-convert": "^1.9.0"
            }
@@ -2521,9 +2727,9 @@
            }
        },
        "apexcharts": {
-            "version": "3.26.2",
-            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.2.tgz",
-            "integrity": "sha512-CD7bad4ygwc9rs9vOQDDagUcoJ1mcc9BwNSiQB14l6jiZBCQKrXxnG4I1ZjJ2MIel/Y5GmsJFs8HTcZBqpe/Ew==",
+            "version": "3.26.3",
+            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.3.tgz",
+            "integrity": "sha512-zbP7RBBV2CGffoVMIuTCUG64YbEUzV8IIT7iNVLMtY/OAVXTjPksDxSqKIniTvgJoscKe6sx4P56qDpBSU19VA==",
            "requires": {
                "svg.draggable.js": "^2.2.2",
                "svg.easing.js": "^2.0.0",
@@ -2848,8 +3054,7 @@
        "balanced-match": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-            "dev": true
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
        },
        "base": {
            "version": "0.11.2",
@@ -3046,7 +3251,6 @@
            "version": "1.1.11",
            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
            "requires": {
                "balanced-match": "^1.0.0",
                "concat-map": "0.0.1"
@@ -3201,8 +3405,7 @@
        "callsites": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-            "dev": true
+            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
        },
        "camelcase": {
            "version": "6.2.0",
@@ -3250,7 +3453,6 @@
            "version": "2.4.2",
            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-            "dev": true,
            "requires": {
                "ansi-styles": "^3.2.1",
                "escape-string-regexp": "^1.0.5",
@@ -3286,9 +3488,9 @@
            "dev": true
        },
        "chroma-js": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.1.tgz",
-            "integrity": "sha512-gYc5/Dooshun2OikK7oY/hYnoEiZ0dxqRpXosEdYRYm505vU5mRsHFqIW062C9nMtr32DVErP6mlxuepo2kNkw==",
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.2.tgz",
+            "integrity": "sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==",
            "dev": true,
            "requires": {
                "cross-env": "^6.0.3"
@@ -3347,8 +3549,7 @@
        "cli-spinners": {
            "version": "2.6.0",
            "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
-            "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
-            "dev": true
+            "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q=="
        },
        "cli-width": {
            "version": "3.0.0",
@@ -3464,7 +3665,6 @@
            "version": "1.9.3",
            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dev": true,
            "requires": {
                "color-name": "1.1.3"
            }
@@ -3472,8 +3672,7 @@
        "color-name": {
            "version": "1.1.3",
            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-            "dev": true
+            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
        },
        "color-string": {
            "version": "1.5.5",
@@ -3573,8 +3772,7 @@
        "concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-            "dev": true
+            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
        },
        "connect": {
            "version": "3.7.0",
@@ -4357,8 +4555,7 @@
        "decamelize": {
            "version": "1.2.0",
            "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-            "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-            "dev": true
+            "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
        },
        "decode-uri-component": {
            "version": "0.2.0",
@@ -4399,7 +4596,6 @@
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
            "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
-            "dev": true,
            "requires": {
                "clone": "^1.0.2"
            },
@@ -4407,8 +4603,7 @@
                "clone": {
                    "version": "1.0.4",
                    "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-                    "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
-                    "dev": true
+                    "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
                }
            }
        },
@@ -4732,8 +4927,7 @@
        "emoji-regex": {
            "version": "8.0.0",
            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-            "dev": true
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
        },
        "emoji-toolkit": {
            "version": "6.5.1",
@@ -4877,7 +5071,6 @@
            "version": "1.3.2",
            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
            "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-            "dev": true,
            "requires": {
                "is-arrayish": "^0.2.1"
            }
@@ -4953,8 +5146,7 @@
        "escape-string-regexp": {
            "version": "1.0.5",
            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-            "dev": true
+            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
        },
        "eslint": {
            "version": "7.26.0",
@@ -5248,9 +5440,9 @@
            }
        },
        "eslint-plugin-import": {
-            "version": "2.23.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.0.tgz",
-            "integrity": "sha512-W5v1f7Cbam6BwbSSKtN6+yoUAms07ozbqAEhLOtf5erEqRv7w67PeZuAuBThaUkzdq2GfBx/5GBvxF+NWJshrQ==",
+            "version": "2.23.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.2.tgz",
+            "integrity": "sha512-LmNoRptHBxOP+nb0PIKz1y6OSzCJlB+0g0IGS3XV4KaKk2q4szqQ6s6F1utVf5ZRkxk/QOTjdxe7v4VjS99Bsg==",
            "dev": true,
            "requires": {
                "array-includes": "^3.1.3",
@@ -5347,12 +5539,12 @@
            }
        },
        "eslint-plugin-jsdoc": {
-            "version": "34.2.2",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-34.2.2.tgz",
-            "integrity": "sha512-9JCeUUZ2MefGd/Pl3blx9/EDjCd7/Z2+fcVBuJdNdvSLApRqZ8CwjGjLHf5s4uVikqF968A0CfnID0WK9B/H/w==",
+            "version": "34.8.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-34.8.2.tgz",
+            "integrity": "sha512-UOU9A40Cl806JMtla2vF+RM6sNqfLPbhLv9FZqhcC7+LmChD3DVaWqM7ADxpF0kMyZNWe1QKUnqGnXaA3NTn+w==",
            "dev": true,
            "requires": {
-                "@es-joy/jsdoccomment": "^0.4.4",
+                "@es-joy/jsdoccomment": "^0.6.0",
                "comment-parser": "1.1.5",
                "debug": "^4.3.1",
                "esquery": "^1.4.0",
@@ -5880,12 +6072,16 @@
            "version": "4.1.0",
            "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
            "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-            "dev": true,
            "requires": {
                "locate-path": "^5.0.0",
                "path-exists": "^4.0.0"
            }
        },
+        "flat": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+            "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="
+        },
        "flat-cache": {
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -5993,8 +6189,7 @@
        "fs.realpath": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-            "dev": true
+            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
        },
        "fsevents": {
            "version": "2.3.2",
@@ -6076,8 +6271,7 @@
        "get-caller-file": {
            "version": "2.0.5",
            "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-            "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-            "dev": true
+            "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
        },
        "get-intrinsic": {
            "version": "1.1.1",
@@ -6117,7 +6311,6 @@
            "version": "7.1.7",
            "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
            "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-            "dev": true,
            "requires": {
                "fs.realpath": "^1.0.0",
                "inflight": "^1.0.4",
@@ -6289,8 +6482,7 @@
        "has-flag": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-            "dev": true
+            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
        },
        "has-symbols": {
            "version": "1.0.2",
@@ -6712,7 +6904,6 @@
            "version": "3.3.0",
            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
            "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-            "dev": true,
            "requires": {
                "parent-module": "^1.0.0",
                "resolve-from": "^4.0.0"
@@ -6801,7 +6992,6 @@
            "version": "1.0.6",
            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
            "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-            "dev": true,
            "requires": {
                "once": "^1.3.0",
                "wrappy": "1"
@@ -6810,8 +7000,7 @@
        "inherits": {
            "version": "2.0.4",
            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-            "dev": true
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
        },
        "ini": {
            "version": "2.0.0",
@@ -6956,8 +7145,7 @@
        "is-arrayish": {
            "version": "0.2.1",
            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-            "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-            "dev": true
+            "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
        },
        "is-bigint": {
            "version": "1.0.2",
@@ -7097,8 +7285,7 @@
        "is-fullwidth-code-point": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-            "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-            "dev": true
+            "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
        },
        "is-glob": {
            "version": "4.0.1",
@@ -7431,8 +7618,7 @@
        "js-tokens": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-            "dev": true
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
        },
        "js-yaml": {
            "version": "3.14.1",
@@ -7471,8 +7657,7 @@
        "json-parse-even-better-errors": {
            "version": "2.3.1",
            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-            "dev": true
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
        },
        "json-schema": {
            "version": "0.2.3",
@@ -7876,8 +8061,7 @@
        "lines-and-columns": {
            "version": "1.1.6",
            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-            "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-            "dev": true
+            "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
        },
        "load-json-file": {
            "version": "4.0.0",
@@ -7930,7 +8114,6 @@
            "version": "5.0.0",
            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
            "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-            "dev": true,
            "requires": {
                "p-locate": "^4.1.0"
            }
@@ -7970,6 +8153,11 @@
            "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
            "dev": true
        },
+        "lodash.kebabcase": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+            "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
+        },
        "lodash.memoize": {
            "version": "4.1.2",
            "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8183,9 +8371,9 @@
            }
        },
        "marked": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
-            "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA=="
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.4.tgz",
+            "integrity": "sha512-MIL0xKRDQM3DE7dJr/wa6JV0EmK9yZ3cwuTc2bu66FNm/tmEMm9cJCgJZpt9R+K1T+pB2iBNV55wvnwSd345zg=="
        },
        "mdn-data": {
            "version": "2.0.14",
@@ -8392,7 +8580,6 @@
            "version": "3.0.4",
            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
            "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-            "dev": true,
            "requires": {
                "brace-expansion": "^1.1.7"
            }
@@ -8621,9 +8808,9 @@
            "dev": true
        },
        "ng-apexcharts": {
-            "version": "1.5.9",
-            "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.5.9.tgz",
-            "integrity": "sha512-ZRsU9meBvXNPG1vhEolCJGRrhfR7Nnj37E6H5CHfWpUEAw9/89U5TK+yDD+myPhT0ubQbRb6fZJoG74dEebXYA==",
+            "version": "1.5.10",
+            "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.5.10.tgz",
+            "integrity": "sha512-NcAQZnzG4Knf9QG8PP20B9lx+rLm1ynoKIP3tMDsv272VAMaN0Yn01B50WR7yI3ouWufuH4qOPB8lqjjyqbJJg==",
            "requires": {
                "tslib": "^1.10.0"
            },
@@ -8636,16 +8823,16 @@
            }
        },
        "ngx-markdown": {
-            "version": "11.1.3",
-            "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-11.1.3.tgz",
-            "integrity": "sha512-z32q8l76ubrcP62L03mdvrizwueLBHV10LkT8MEDnFcjmY+8J1PytxFJ9EBTJpvc+CaPolgAoi7felN2XJZTSg==",
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/ngx-markdown/-/ngx-markdown-12.0.0.tgz",
+            "integrity": "sha512-U8EeHNGVxdjn9QDsPZy6h05I39QRiBV7a5n95NDBP1nACRos31sPzVa3+NMLs0Z6HzFpnHuIR4759uveRn7KBg==",
            "requires": {
                "@types/marked": "^2.0.0",
-                "emoji-toolkit": "^6.0.1",
+                "emoji-toolkit": "^6.5.0",
                "katex": "^0.13.0",
                "marked": "^2.0.0",
                "prismjs": "^1.23.0",
-                "tslib": "^2.0.0"
+                "tslib": "^2.1.0"
            }
        },
        "ngx-quill": {
@@ -9017,7 +9204,6 @@
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
            "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-            "dev": true,
            "requires": {
                "wrappy": "1"
            }
@@ -9172,7 +9358,6 @@
            "version": "2.3.0",
            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
            "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-            "dev": true,
            "requires": {
                "p-try": "^2.0.0"
            }
@@ -9181,7 +9366,6 @@
            "version": "4.1.0",
            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
            "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-            "dev": true,
            "requires": {
                "p-limit": "^2.2.0"
            }
@@ -9207,8 +9391,7 @@
        "p-try": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-            "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-            "dev": true
+            "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
        },
        "pacote": {
            "version": "11.3.2",
@@ -9252,7 +9435,6 @@
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dev": true,
            "requires": {
                "callsites": "^3.0.0"
            }
@@ -9290,7 +9472,6 @@
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-            "dev": true,
            "requires": {
                "@babel/code-frame": "^7.0.0",
                "error-ex": "^1.3.1",
@@ -9383,14 +9564,12 @@
        "path-exists": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-            "dev": true
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
        },
        "path-is-absolute": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-            "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-            "dev": true
+            "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
        },
        "path-is-inside": {
            "version": "1.0.2",
@@ -9439,8 +9618,7 @@
        "path-type": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-            "dev": true
+            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
        },
        "perfect-scrollbar": {
            "version": "1.5.1",
@@ -9587,22 +9765,14 @@
            "dev": true
        },
        "postcss": {
-            "version": "8.2.15",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
-            "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
+            "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
            "dev": true,
            "requires": {
                "colorette": "^1.2.2",
                "nanoid": "^3.1.23",
-                "source-map": "^0.6.1"
-            },
-            "dependencies": {
-                "source-map": {
-                    "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-                    "dev": true
-                }
+                "source-map-js": "^0.6.2"
            }
        },
        "postcss-attribute-case-insensitive": {
@@ -12076,6 +12246,91 @@
            "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
            "dev": true
        },
+        "replace-in-file": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-4.3.1.tgz",
+            "integrity": "sha512-FqVvfmpqGTD2JRGI1JjJ86b24P17x/WWwGdxExeyJxnh/2rVQz2+jXfD1507UnnhEQw092X0u0DPCBf1WC4ooQ==",
+            "requires": {
+                "chalk": "^2.4.2",
+                "glob": "^7.1.6",
+                "yargs": "^15.0.2"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "camelcase": {
+                    "version": "5.3.1",
+                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+                    "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+                },
+                "cliui": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+                    "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+                    "requires": {
+                        "string-width": "^4.2.0",
+                        "strip-ansi": "^6.0.0",
+                        "wrap-ansi": "^6.2.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+                },
+                "wrap-ansi": {
+                    "version": "6.2.0",
+                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+                    "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+                    "requires": {
+                        "ansi-styles": "^4.0.0",
+                        "string-width": "^4.1.0",
+                        "strip-ansi": "^6.0.0"
+                    }
+                },
+                "yargs": {
+                    "version": "15.4.1",
+                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+                    "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+                    "requires": {
+                        "cliui": "^6.0.0",
+                        "decamelize": "^1.2.0",
+                        "find-up": "^4.1.0",
+                        "get-caller-file": "^2.0.1",
+                        "require-directory": "^2.1.1",
+                        "require-main-filename": "^2.0.0",
+                        "set-blocking": "^2.0.0",
+                        "string-width": "^4.2.0",
+                        "which-module": "^2.0.0",
+                        "y18n": "^4.0.0",
+                        "yargs-parser": "^18.1.2"
+                    }
+                },
+                "yargs-parser": {
+                    "version": "18.1.3",
+                    "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+                    "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+                    "requires": {
+                        "camelcase": "^5.0.0",
+                        "decamelize": "^1.2.0"
+                    }
+                }
+            }
+        },
        "request": {
            "version": "2.88.2",
            "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -12115,8 +12370,7 @@
        "require-directory": {
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-            "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-            "dev": true
+            "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
        },
        "require-from-string": {
            "version": "2.0.2",
@@ -12127,8 +12381,7 @@
        "require-main-filename": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-            "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-            "dev": true
+            "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
        },
        "requires-port": {
            "version": "1.0.0",
@@ -12166,8 +12419,7 @@
        "resolve-from": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "dev": true
+            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
        },
        "resolve-url": {
            "version": "0.2.1",
@@ -12621,8 +12873,7 @@
        "set-blocking": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-            "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-            "dev": true
+            "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
        },
        "set-immediate-shim": {
            "version": "1.0.1",
@@ -12686,8 +12937,7 @@
        "signal-exit": {
            "version": "3.0.3",
            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-            "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
-            "dev": true
+            "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
        },
        "simple-swizzle": {
            "version": "0.2.2",
@@ -13094,9 +13344,9 @@
            }
        },
        "spdx-license-ids": {
-            "version": "3.0.7",
-            "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
-            "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.8.tgz",
+            "integrity": "sha512-NDgA96EnaLSvtbM7trJj+t1LUR3pirkDCcz9nOUlPb5DMBGsH7oES6C3hs3j7R9oHEa1EMvReS/BUAIT5Tcr0g==",
            "dev": true
        },
        "spdy": {
@@ -13223,7 +13473,6 @@
            "version": "4.2.2",
            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
            "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
-            "dev": true,
            "requires": {
                "emoji-regex": "^8.0.0",
                "is-fullwidth-code-point": "^3.0.0",
@@ -13271,7 +13520,6 @@
            "version": "6.0.0",
            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
            "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-            "dev": true,
            "requires": {
                "ansi-regex": "^5.0.0"
            }
@@ -13399,7 +13647,6 @@
            "version": "5.5.0",
            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-            "dev": true,
            "requires": {
                "has-flag": "^3.0.0"
            }
@@ -14265,7 +14512,6 @@
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
            "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
-            "dev": true,
            "requires": {
                "defaults": "^1.0.3"
            }
@@ -14894,8 +15140,7 @@
        "which-module": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-            "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-            "dev": true
+            "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
        },
        "wide-align": {
            "version": "1.1.3",
@@ -15005,8 +15250,7 @@
        "wrappy": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-            "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-            "dev": true
+            "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
        },
        "ws": {
            "version": "6.2.1",
@@ -15042,8 +15286,7 @@
        "y18n": {
            "version": "4.0.3",
            "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-            "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-            "dev": true
+            "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
        },
        "yallist": {
            "version": "4.0.0",
@@ -15054,8 +15297,7 @@
        "yaml": {
            "version": "1.10.2",
            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-            "dev": true
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
        },
        "yargs": {
            "version": "13.3.2",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@fuse/demo",
-    "version": "13.0.0",
+    "version": "13.0.2",
    "license": "https://themeforest.net/licenses/standard",
    "private": true,
    "scripts": {
@@ -31,13 +31,14 @@
        "@fullcalendar/moment": "4.4.2",
        "@fullcalendar/rrule": "4.4.2",
        "@fullcalendar/timegrid": "4.4.2",
-        "apexcharts": "3.26.2",
+        "@ngneat/transloco": "2.20.1",
+        "apexcharts": "3.26.3",
        "crypto-js": "3.3.0",
        "highlight.js": "10.7.2",
        "lodash-es": "4.17.21",
        "moment": "2.29.1",
-        "ng-apexcharts": "1.5.9",
-        "ngx-markdown": "11.1.3",
+        "ng-apexcharts": "1.5.10",
+        "ngx-markdown": "12.0.0",
        "ngx-quill": "14.0.0",
        "perfect-scrollbar": "1.5.1",
        "quill": "1.3.7",
@@ -67,13 +68,13 @@
        "@types/lodash": "4.14.169",
        "@types/lodash-es": "4.17.4",
        "@types/node": "12.20.13",
-        "@typescript-eslint/eslint-plugin": "4.23.0",
-        "@typescript-eslint/parser": "4.23.0",
+        "@typescript-eslint/eslint-plugin": "4.24.0",
+        "@typescript-eslint/parser": "4.24.0",
        "autoprefixer": "10.2.5",
-        "chroma-js": "2.1.1",
+        "chroma-js": "2.1.2",
        "eslint": "7.26.0",
-        "eslint-plugin-import": "2.23.0",
-        "eslint-plugin-jsdoc": "34.2.2",
+        "eslint-plugin-import": "2.23.2",
+        "eslint-plugin-jsdoc": "34.8.2",
        "eslint-plugin-prefer-arrow": "1.2.3",
        "jasmine-core": "3.7.1",
        "jasmine-spec-reporter": "5.0.2",
@@ -83,7 +84,7 @@
        "karma-jasmine": "4.0.1",
        "karma-jasmine-html-reporter": "1.6.0",
        "lodash": "4.17.21",
-        "postcss": "8.2.15",
+        "postcss": "8.3.0",
        "protractor": "7.0.0",
        "tailwindcss": "2.1.2",
        "typescript": "4.2.4"
--- a/src/@fuse/animations/index.ts
+++ b/src/@fuse/animations/index.ts
@@ -1 +1 @@
-export * from './public-api';
+export * from '@fuse/animations/public-api';
--- a/src/@fuse/animations/public-api.ts
+++ b/src/@fuse/animations/public-api.ts
@@ -1,8 +1,8 @@
-import { expandCollapse } from './expand-collapse';
-import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from './fade';
-import { shake } from './shake';
-import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from './slide';
-import { zoomIn, zoomOut } from './zoom';
+import { expandCollapse } from '@fuse/animations/expand-collapse';
+import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
+import { shake } from '@fuse/animations/shake';
+import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
+import { zoomIn, zoomOut } from '@fuse/animations/zoom';

 export const fuseAnimations = [
    expandCollapse,
--- a/src/@fuse/components/date-range/date-range.component.ts
+++ b/src/@fuse/components/date-range/date-range.component.ts
@@ -61,9 +61,9 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
        private _viewContainerRef: ViewContainerRef
    )
    {
-        this._onChange = () => {
+        this._onChange = (): void => {
        };
-        this._onTouched = () => {
+        this._onTouched = (): void => {
        };
        this.dateFormat = 'DD/MM/YYYY';
        this.timeFormat = '12';
@@ -361,7 +361,7 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
        this._unsubscribeAll.complete();

        // @ TODO: Workaround until "angular/issues/20007" resolved
-        this.writeValue = () => {
+        this.writeValue = (): void => {
        };
    }

--- a/src/@fuse/components/masonry/index.ts
+++ b/src/@fuse/components/masonry/index.ts
@@ -1 +1 @@
-export * from '@fuse/components/card/public-api';
+export * from '@fuse/components/masonry/public-api';
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@@ -11,7 +11,7 @@
        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
        [routerLink]="[item.link]"
        [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        [routerLinkActiveOptions]="isActiveMatchOptions">
        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
    </div>

@@ -39,7 +39,7 @@
        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
        [routerLink]="[item.link]"
        [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
        (click)="item.function(item)">
        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
    </div>
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
@@ -1,9 +1,11 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';

@Component({
    selector       : 'fuse-horizontal-navigation-basic-item',
@@ -16,6 +18,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
    @Input() item: FuseNavigationItem;
    @Input() name: string;

+    isActiveMatchOptions: IsActiveMatchOptions;
    private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
    private _unsubscribeAll: Subject<any> = new Subject<any>();

@@ -24,9 +27,15 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseUtilsService: FuseUtilsService
    )
    {
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
    }

    // -----------------------------------------------------------------------------------------------------
@@ -38,9 +47,20 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     */
    ngOnInit(): void
    {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._fuseUtilsService.exactMatchOptions
+                : this._fuseUtilsService.subsetMatchOptions;
+
        // Get the parent navigation component
        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);

+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
        // Subscribe to onRefreshed on the navigation component
        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
            takeUntil(this._unsubscribeAll)
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -46,7 +46,7 @@ export class FuseNavigationService
     *
     * @param name
     */
-    getComponent(name: string): any
+    getComponent<T>(name: string): T
    {
        return this._componentRegistry.get(name);
    }
--- a/src/@fuse/components/navigation/navigation.types.ts
+++ b/src/@fuse/components/navigation/navigation.types.ts
@@ -1,3 +1,5 @@
+import { IsActiveMatchOptions } from '@angular/router';
+
 export interface FuseNavigationItem
 {
    id?: string;
@@ -16,6 +18,7 @@ export interface FuseNavigationItem
    link?: string;
    externalLink?: boolean;
    exactMatch?: boolean;
+    isActiveMatchOptions?: IsActiveMatchOptions;
    function?: (item: FuseNavigationItem) => void;
    classes?: {
        title?: string;
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@@ -11,7 +11,7 @@
        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
        [routerLink]="[item.link]"
        [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        [routerLinkActiveOptions]="isActiveMatchOptions">
        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
    </a>

@@ -39,7 +39,7 @@
        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
        [routerLink]="[item.link]"
        [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
        (click)="item.function(item)">
        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
    </a>
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@@ -17,6 +18,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
    @Input() item: FuseNavigationItem;
    @Input() name: string;

+    isActiveMatchOptions: IsActiveMatchOptions;
    private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
    private _unsubscribeAll: Subject<any> = new Subject<any>();

@@ -29,6 +31,11 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
        private _fuseUtilsService: FuseUtilsService
    )
    {
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
    }

    // -----------------------------------------------------------------------------------------------------
@@ -40,9 +47,20 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     */
    ngOnInit(): void
    {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._fuseUtilsService.exactMatchOptions
+                : this._fuseUtilsService.subsetMatchOptions;
+
        // Get the parent navigation component
        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);

+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
            takeUntil(this._unsubscribeAll)
--- a/src/@fuse/components/navigation/vertical/vertical.component.ts
+++ b/src/@fuse/components/navigation/vertical/vertical.component.ts
@@ -73,10 +73,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
        private _fuseUtilsService: FuseUtilsService
    )
    {
-        this._handleAsideOverlayClick = () => {
+        this._handleAsideOverlayClick = (): void => {
            this.closeAside();
        };
-        this._handleOverlayClick = () => {
+        this._handleOverlayClick = (): void => {
            this.close();
        };
    }
--- a/src/@fuse/directives/scrollbar/scrollbar.directive.ts
+++ b/src/@fuse/directives/scrollbar/scrollbar.directive.ts
@@ -389,7 +389,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy

            const cosParameter = (oldValue - value) / 2;

-            const step = (newTimestamp: number) => {
+            const step = (newTimestamp: number): void => {
                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));

--- a/src/@fuse/lib/mock-api/mock-api.interceptor.ts
+++ b/src/@fuse/lib/mock-api/mock-api.interceptor.ts
@@ -51,7 +51,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
            delay(handler.delay ?? this._defaultDelay ?? 0),
            switchMap((response) => {

-                // If there is no response mock-api,
+                // If there is no response data,
                // throw an error response
                if ( !response )
                {
@@ -64,7 +64,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                    return throwError(response);
                }

-                // Parse the response mock-api
+                // Parse the response data
                const data = {
                    status: response[0],
                    body  : response[1]
--- a/src/@fuse/lib/mock-api/mock-api.module.ts
+++ b/src/@fuse/lib/mock-api/mock-api.module.ts
@@ -29,7 +29,7 @@ export class FuseMockApiModule
                {
                    provide   : APP_INITIALIZER,
                    deps      : [...mockApiServices],
-                    useFactory: () => () => null,
+                    useFactory: () => (): any => null,
                    multi     : true
                },
                {
--- a/src/@fuse/services/tailwind/index.ts
+++ b/src/@fuse/services/tailwind/index.ts
@@ -1 +1 @@
-export * from '@fuse/services/media-watcher/public-api';
+export * from '@fuse/services/tailwind/public-api';
--- a/src/@fuse/services/tailwind/public-api.ts
+++ b/src/@fuse/services/tailwind/public-api.ts
@@ -1,2 +1,2 @@
-export * from '@fuse/services/media-watcher/media-watcher.module';
-export * from '@fuse/services/media-watcher/media-watcher.service';
+export * from '@fuse/services/tailwind/tailwind.module';
+export * from '@fuse/services/tailwind/tailwind.service';
--- a/src/@fuse/services/utils/index.ts
+++ b/src/@fuse/services/utils/index.ts
@@ -1 +1 @@
-export * from '@fuse/services/config/public-api';
+export * from '@fuse/services/utils/public-api';
--- a/src/@fuse/services/utils/utils.service.ts
+++ b/src/@fuse/services/utils/utils.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';

@Injectable({
    providedIn: 'root'
@@ -12,6 +13,36 @@ export class FuseUtilsService
    {
    }

+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
+     */
+    get exactMatchOptions(): IsActiveMatchOptions
+    {
+        return {
+            paths       : 'exact',
+            fragment    : 'ignored',
+            matrixParams: 'ignored',
+            queryParams : 'exact'
+        };
+    }
+
+    /**
+     * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
+     */
+    get subsetMatchOptions(): IsActiveMatchOptions
+    {
+        return {
+            paths       : 'subset',
+            fragment    : 'ignored',
+            matrixParams: 'ignored',
+            queryParams : 'subset'
+        };
+    }
+
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
@@ -178,11 +178,7 @@

    /* Add hover and focus style on all buttons */
    .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 #{'!important'};
-
-        .dark & {
-            background-color: rgba(0, 0, 0, 0.05) !important;
-        }
+        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
    }

    /* On palette colored buttons, use a darker color */
@@ -253,11 +249,7 @@

    /* Add hover and focus styles */
    .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 #{'!important'};
-
-        .dark & {
-            background-color: rgba(0, 0, 0, 0.05) !important;
-        }
+        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
    }

    /* On primary colored buttons, use the primary color as focus overlay */
@@ -330,19 +322,11 @@

    /* Border color */
    &:not(.mat-button-disabled) {
-        @apply border-gray-300 #{'!important'};
-
-        .dark & {
-            @apply border-gray-500 #{'!important'};
-        }
+        @apply border-gray-300 dark:border-gray-500 #{'!important'};
    }

    &.mat-button-disabled {
-        @apply border-gray-200 #{'!important'};
-
-        .dark & {
-            @apply border-gray-600 #{'!important'};
-        }
+        @apply border-gray-200 dark:border-gray-600 #{'!important'};
    }
 }

@@ -542,13 +526,7 @@
            border-radius: 6px;
            padding: 0 16px;
            border-width: 1px;
-            background-color: white;
-            @apply border-gray-300 shadow-sm #{'!important'};
-
-            .dark & {
-                background-color: rgba(0, 0, 0, 0.05) !important;
-                @apply border-gray-500 #{'!important'};
-            }
+            @apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'};

            .mat-form-field-prefix {

@@ -633,12 +611,28 @@
                    @apply icon-size-6;
                }

-                /* Make mat-select usable as */
-                /* prefix and suffix */
+                /* Make mat-select usable as prefix and suffix */
                .mat-select {
                    display: flex;
                    align-items: center;

+                    &:focus {
+
+                        .mat-select-trigger {
+
+                            .mat-select-value {
+                                @apply text-primary #{'!important'};
+                            }
+
+                            .mat-select-arrow-wrapper {
+
+                                .mat-select-arrow {
+                                    border-top-color: var(--fuse-primary) !important;
+                                }
+                            }
+                        }
+                    }
+
                    .mat-select-trigger {
                        display: flex;
                        align-items: center;
@@ -663,6 +657,7 @@

                            .mat-select-arrow {
                                min-height: 0;
+                                @apply text-gray-500 dark:text-gray-400 #{'!important'};
                            }
                        }
                    }
@@ -1032,11 +1027,7 @@

                .mat-form-field-prefix,
                .mat-form-field-suffix {
-                    @apply border-gray-300 bg-default #{'!important'};
-
-                    .dark & {
-                        @apply border-gray-500 #{'!important'};
-                    }
+                    @apply bg-default border-gray-300 dark:border-gray-500 #{'!important'};
                }
            }
        }
--- a/src/@fuse/validators/index.ts
+++ b/src/@fuse/validators/index.ts
@@ -1 +1 @@
-export * from './public-api';
+export * from '@fuse/validators/public-api';
--- a/src/@fuse/validators/public-api.ts
+++ b/src/@fuse/validators/public-api.ts
@@ -1 +1 @@
-export * from './validators';
+export * from '@fuse/validators/validators';
--- a/src/@fuse/version/fuse-version.ts
+++ b/src/@fuse/version/fuse-version.ts
@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';

-export const FUSE_VERSION = new Version('13.0.0').full;
+export const FUSE_VERSION = new Version('13.0.2').full;
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,18 +27,18 @@ const routerConfig: ExtraOptions = {
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes, routerConfig),

-        // Fuse & Fuse Mock API
+        // Fuse, FuseConfig & FuseMockAPI
        FuseModule,
        FuseConfigModule.forRoot(appConfig),
        FuseMockApiModule.forRoot(mockApiServices),

-        // Core
+        // Core module of your application
        CoreModule,

-        // Layout
+        // Layout module of your application
        LayoutModule,

-        // 3rd party modules
+        // 3rd party modules that require global configuration via forRoot
        MarkdownModule.forRoot({})
    ],
    bootstrap   : [
--- a/src/app/core/auth/auth.module.ts
+++ b/src/app/core/auth/auth.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { AuthService } from 'app/core/auth/auth.service';
+import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
+
+@NgModule({
+    imports  : [
+        HttpClientModule
+    ],
+    providers: [
+        AuthService,
+        {
+            provide : HTTP_INTERCEPTORS,
+            useClass: AuthInterceptor,
+            multi   : true
+        }
+    ]
+})
+export class AuthModule
+{
+}
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -1,21 +1,13 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material/icon';
-import { AuthService } from 'app/core/auth/auth.service';
-import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
+import { AuthModule } from 'app/core/auth/auth.module';
+import { IconsModule } from 'app/core/icons/icons.module';
+import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';

@NgModule({
-    imports  : [
-        HttpClientModule
-    ],
-    providers: [
-        AuthService,
-        {
-            provide : HTTP_INTERCEPTORS,
-            useClass: AuthInterceptor,
-            multi   : true
-        }
+    imports: [
+        AuthModule,
+        IconsModule,
+        TranslocoCoreModule
    ]
 })
 export class CoreModule
@@ -24,8 +16,6 @@ export class CoreModule
     * Constructor
     */
    constructor(
-        private _domSanitizer: DomSanitizer,
-        private _matIconRegistry: MatIconRegistry,
        @Optional() @SkipSelf() parentModule?: CoreModule
    )
    {
@@ -34,14 +24,5 @@ export class CoreModule
        {
            throw new Error('CoreModule has already been loaded. Import this module in the AppModule only.');
        }
-
-        // Register icon sets
-        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
    }
 }
--- a/src/app/core/icons/icons.module.ts
+++ b/src/app/core/icons/icons.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+
+@NgModule()
+export class IconsModule
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        private _domSanitizer: DomSanitizer,
+        private _matIconRegistry: MatIconRegistry
+    )
+    {
+        // Register icon sets
+        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
+    }
+}
--- a/src/app/core/transloco/transloco.http-loader.ts
+++ b/src/app/core/transloco/transloco.http-loader.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Translation, TranslocoLoader } from '@ngneat/transloco';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TranslocoHttpLoader implements TranslocoLoader
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get translation
+     *
+     * @param lang
+     */
+    getTranslation(lang: string): Observable<Translation>
+    {
+        return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
+    }
+}
--- a/src/app/core/transloco/transloco.module.ts
+++ b/src/app/core/transloco/transloco.module.ts
@@ -0,0 +1,50 @@
+import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { environment } from 'environments/environment';
+import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
+
+@NgModule({
+    exports  : [
+        TranslocoModule
+    ],
+    providers: [
+        {
+            // Provide the default Transloco configuration
+            provide : TRANSLOCO_CONFIG,
+            useValue: translocoConfig({
+                availableLangs      : [
+                    {
+                        id   : 'en',
+                        label: 'English'
+                    },
+                    {
+                        id   : 'tr',
+                        label: 'Turkish'
+                    }
+                ],
+                defaultLang         : 'en',
+                reRenderOnLangChange: true,
+                prodMode            : environment.production
+            })
+        },
+        {
+            // Provide the default Transloco loader
+            provide : TRANSLOCO_LOADER,
+            useClass: TranslocoHttpLoader
+        },
+        {
+            // Preload the default language before the app starts to prevent empty/jumping content
+            provide   : APP_INITIALIZER,
+            deps      : [TranslocoService],
+            useFactory: (translocoService: TranslocoService): any => (): Promise<Translation> => {
+                const defaultLang = translocoService.getDefaultLang();
+                translocoService.setActiveLang(defaultLang);
+                return translocoService.load(defaultLang).toPromise();
+            },
+            multi     : true
+        }
+    ]
+})
+export class TranslocoCoreModule
+{
+}
--- a/src/app/layout/common/language/language.component.html
+++ b/src/app/layout/common/language/language.component.html
@@ -0,0 +1,35 @@
+<!-- Button -->
+<button
+    mat-icon-button
+    [matMenuTriggerFor]="languages">
+    <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: activeLang}"></ng-container>
+</button>
+
+<!-- Language menu -->
+<mat-menu
+    [xPosition]="'before'"
+    #languages="matMenu">
+    <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
+        <button
+            mat-menu-item
+            (click)="setActiveLang(lang.id)">
+            <span class="flex items-center">
+                <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: lang.id}"></ng-container>
+                <span class="ml-3">{{lang.label}}</span>
+            </span>
+        </button>
+    </ng-container>
+</mat-menu>
+
+<!-- Flag image template -->
+<ng-template
+    let-lang
+    #flagImage>
+    <span class="relative w-6 shadow rounded-sm overflow-hidden">
+        <span class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"></span>
+        <img
+            class="w-full"
+            [src]="'assets/images/flags/' + flagCodes[lang].toUpperCase() + '.svg'"
+            [alt]="'Flag image for ' + lang">
+    </span>
+</ng-template>
--- a/src/app/layout/common/language/language.component.ts
+++ b/src/app/layout/common/language/language.component.ts
@@ -0,0 +1,153 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+
+@Component({
+    selector       : 'language',
+    templateUrl    : './language.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'language'
+})
+export class LanguageComponent implements OnInit, OnDestroy
+{
+    availableLangs: AvailableLangs;
+    activeLang: string;
+    flagCodes: any;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService,
+        private _translocoService: TranslocoService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the available languages from transloco
+        this.availableLangs = this._translocoService.getAvailableLangs();
+
+        // Subscribe to language changes
+        this._translocoService.langChanges$.subscribe((activeLang) => {
+
+            // Get the active lang
+            this.activeLang = activeLang;
+
+            // Update the navigation
+            this._updateNavigation(activeLang);
+        });
+
+        // Set the country iso codes for languages for flags
+        this.flagCodes = {
+            'en': 'us',
+            'tr': 'tr'
+        };
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Set the active lang
+     *
+     * @param lang
+     */
+    setActiveLang(lang: string): void
+    {
+        // Set the active lang
+        this._translocoService.setActiveLang(lang);
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Update the navigation
+     *
+     * @param lang
+     * @private
+     */
+    private _updateNavigation(lang: string): void
+    {
+        // For the demonstration purposes, we will only update the Dashboard names
+        // from the navigation but you can do a full swap and change the entire
+        // navigation data.
+        //
+        // You can import the data from a file or request it from your backend,
+        // it's up to you.
+
+        // Get the component -> navigation data -> item
+        const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation');
+
+        // Return if the navigation component does not exist
+        if ( !navComponent )
+        {
+            return null;
+        }
+
+        // Get the flat navigation data
+        const navigation = navComponent.navigation;
+
+        // Get the Project dashboard item and update its title
+        const projectDashboardItem = this._fuseNavigationService.getItem('dashboards.project', navigation);
+        if ( projectDashboardItem )
+        {
+            this._translocoService.selectTranslate('Project').pipe(take(1))
+                .subscribe((translation) => {
+
+                    // Set the title
+                    projectDashboardItem.title = translation;
+
+                    // Refresh the navigation component
+                    navComponent.refresh();
+                });
+        }
+
+        // Get the Analytics dashboard item and update its title
+        const analyticsDashboardItem = this._fuseNavigationService.getItem('dashboards.analytics', navigation);
+        if ( analyticsDashboardItem )
+        {
+            this._translocoService.selectTranslate('Analytics').pipe(take(1))
+                .subscribe((translation) => {
+
+                    // Set the title
+                    analyticsDashboardItem.title = translation;
+
+                    // Refresh the navigation component
+                    navComponent.refresh();
+                });
+        }
+    }
+}
--- a/src/app/layout/common/language/language.module.ts
+++ b/src/app/layout/common/language/language.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { LanguageComponent } from 'app/layout/common/language/language.component';
+import { SharedModule } from 'app/shared/shared.module';
+
+@NgModule({
+    declarations: [
+        LanguageComponent
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        SharedModule
+    ],
+    exports     : [
+        LanguageComponent
+    ]
+})
+export class LanguageModule
+{
+}
--- a/src/app/layout/common/messages/messages.component.html
+++ b/src/app/layout/common/messages/messages.component.html
@@ -46,7 +46,7 @@
        <!-- Content -->
        <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
            <!-- Messages -->
-            <ng-container *ngFor="let message of messages">
+            <ng-container *ngFor="let message of messages; trackBy: trackByFn">
                <div
                    class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                    [ngClass]="{'unread': !message.read}">
--- a/src/app/layout/common/messages/messages.component.ts
+++ b/src/app/layout/common/messages/messages.component.ts
@@ -155,6 +155,17 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy
        this._messagesService.delete(message.id).subscribe();
    }

+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
    // -----------------------------------------------------------------------------------------------------
    // @ Private methods
    // -----------------------------------------------------------------------------------------------------
--- a/src/app/layout/common/notifications/notifications.component.html
+++ b/src/app/layout/common/notifications/notifications.component.html
@@ -46,7 +46,7 @@
        <!-- Content -->
        <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
            <!-- Notifications -->
-            <ng-container *ngFor="let notification of notifications">
+            <ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
                <div
                    class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                    [ngClass]="{'unread': !notification.read}">
--- a/src/app/layout/common/notifications/notifications.component.ts
+++ b/src/app/layout/common/notifications/notifications.component.ts
@@ -155,6 +155,17 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
        this._notificationsService.delete(notification.id).subscribe();
    }

+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
    // -----------------------------------------------------------------------------------------------------
    // @ Private methods
    // -----------------------------------------------------------------------------------------------------
--- a/src/app/layout/common/search/search.component.html
+++ b/src/app/layout/common/search/search.component.html
@@ -31,7 +31,7 @@
                *ngIf="results && !results.length">
                No results found!
            </mat-option>
-            <ng-container *ngFor="let result of results">
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                <mat-option
                    class="group relative h-14 px-6 py-0 sm:px-8 text-md"
                    [routerLink]="result.link">
@@ -73,7 +73,7 @@
                *ngIf="results && !results.length">
                No results found!
            </mat-option>
-            <ng-container *ngFor="let result of results">
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                <mat-option
                    class="group relative h-14 px-5 py-0 text-md"
                    [routerLink]="result.link">
--- a/src/app/layout/common/search/search.component.ts
+++ b/src/app/layout/common/search/search.component.ts
@@ -200,4 +200,15 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
        // Close the search
        this.opened = false;
    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
 }
--- a/src/app/layout/common/search/search.module.ts
+++ b/src/app/layout/common/search/search.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { Overlay } from '@angular/cdk/overlay';
+import { BlockScrollStrategy, Overlay } from '@angular/cdk/overlay';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -28,7 +28,7 @@ import { SearchComponent } from 'app/layout/common/search/search.component';
    providers   : [
        {
            provide   : MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-            useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.block(),
+            useFactory: (overlay: Overlay) => (): BlockScrollStrategy => overlay.scrollStrategies.block(),
            deps      : [Overlay]
        }
    ]
--- a/src/app/layout/common/shortcuts/shortcuts.component.html
+++ b/src/app/layout/common/shortcuts/shortcuts.component.html
@@ -94,7 +94,7 @@
                <!-- Shortcuts -->
                <div class="grid grid-cols-2 grid-flow-row">
                    <!-- Shortcut -->
-                    <ng-container *ngFor="let shortcut of shortcuts">
+                    <ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn">
                        <div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5">
                            <ng-container *ngIf="mode === 'modify'">
                                <div
--- a/src/app/layout/common/shortcuts/shortcuts.component.ts
+++ b/src/app/layout/common/shortcuts/shortcuts.component.ts
@@ -176,7 +176,7 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
     */
    save(): void
    {
-        // Get the mock-api from the form
+        // Get the data from the form
        const shortcut = this.shortcutForm.value;

        // If there is an id, update it...
@@ -199,7 +199,7 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
     */
    delete(): void
    {
-        // Get the mock-api from the form
+        // Get the data from the form
        const shortcut = this.shortcutForm.value;

        // Delete
@@ -209,6 +209,17 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
        this.mode = 'modify';
    }

+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
    // -----------------------------------------------------------------------------------------------------
    // @ Private methods
    // -----------------------------------------------------------------------------------------------------
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
@@ -217,7 +217,7 @@ export class LayoutComponent implements OnInit, OnDestroy
        const paths = route.pathFromRoot;
        paths.forEach((path) => {

-            // Check if there is a 'layout' mock-api
+            // Check if there is a 'layout' data
            if ( path.routeConfig && path.routeConfig.data && path.routeConfig.data.layout )
            {
                // Set the layout
--- a/src/app/layout/layouts/horizontal/centered/centered.component.html
+++ b/src/app/layout/layouts/horizontal/centered/centered.component.html
@@ -63,6 +63,7 @@
            </ng-container>
            <!-- Components -->
            <div class="flex items-center pl-2 ml-auto space-x-2">
+                <language></language>
                <fuse-fullscreen></fuse-fullscreen>
                <search [appearance]="'bar'"></search>
                <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/horizontal/centered/centered.component.ts
+++ b/src/app/layout/layouts/horizontal/centered/centered.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/horizontal/centered/centered.module.ts
+++ b/src/app/layout/layouts/horizontal/centered/centered.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
+++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
@@ -46,6 +46,7 @@
                </ng-container>
                <!-- Components -->
                <div class="flex items-center pl-2 ml-auto space-x-2">
+                    <language></language>
                    <fuse-fullscreen></fuse-fullscreen>
                    <search [appearance]="'bar'"></search>
                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
+++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
+++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/horizontal/material/material.component.html
+++ b/src/app/layout/layouts/horizontal/material/material.component.html
@@ -52,6 +52,7 @@
                </ng-container>
                <!-- Components -->
                <div class="flex items-center pl-2 ml-auto space-x-2">
+                    <language></language>
                    <fuse-fullscreen></fuse-fullscreen>
                    <search [appearance]="'bar'"></search>
                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/horizontal/material/material.component.ts
+++ b/src/app/layout/layouts/horizontal/material/material.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/horizontal/material/material.module.ts
+++ b/src/app/layout/layouts/horizontal/material/material.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/horizontal/modern/modern.component.html
+++ b/src/app/layout/layouts/horizontal/modern/modern.component.html
@@ -55,6 +55,7 @@
        </ng-container>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/horizontal/modern/modern.component.ts
+++ b/src/app/layout/layouts/horizontal/modern/modern.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/horizontal/modern/modern.module.ts
+++ b/src/app/layout/layouts/horizontal/modern/modern.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/vertical/classic/classic.component.html
+++ b/src/app/layout/layouts/vertical/classic/classic.component.html
@@ -36,6 +36,7 @@
        </button>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/vertical/classic/classic.component.ts
+++ b/src/app/layout/layouts/vertical/classic/classic.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/vertical/classic/classic.module.ts
+++ b/src/app/layout/layouts/vertical/classic/classic.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/vertical/classy/classy.component.html
+++ b/src/app/layout/layouts/vertical/classy/classy.component.html
@@ -66,6 +66,7 @@
        </button>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/vertical/classy/classy.component.ts
+++ b/src/app/layout/layouts/vertical/classy/classy.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/vertical/classy/classy.module.ts
+++ b/src/app/layout/layouts/vertical/classy/classy.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/vertical/compact/compact.component.html
+++ b/src/app/layout/layouts/vertical/compact/compact.component.html
@@ -31,6 +31,7 @@
        </button>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/vertical/compact/compact.component.ts
+++ b/src/app/layout/layouts/vertical/compact/compact.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/vertical/compact/compact.module.ts
+++ b/src/app/layout/layouts/vertical/compact/compact.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/vertical/dense/dense.component.html
+++ b/src/app/layout/layouts/vertical/dense/dense.component.html
@@ -40,6 +40,7 @@
        </div>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/vertical/dense/dense.component.ts
+++ b/src/app/layout/layouts/vertical/dense/dense.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -51,7 +51,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -88,7 +88,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/vertical/dense/dense.module.ts
+++ b/src/app/layout/layouts/vertical/dense/dense.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html
+++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html
@@ -45,6 +45,7 @@
        </button>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
+++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
+++ b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/layout/layouts/vertical/thin/thin.component.html
+++ b/src/app/layout/layouts/vertical/thin/thin.component.html
@@ -32,6 +32,7 @@
        </button>
        <!-- Components -->
        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
            <fuse-fullscreen></fuse-fullscreen>
            <search [appearance]="'bar'"></search>
            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
--- a/src/app/layout/layouts/vertical/thin/thin.component.ts
+++ b/src/app/layout/layouts/vertical/thin/thin.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';

@Component({
@@ -50,7 +50,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
        this._activatedRoute.data.subscribe((data: Data) => {
            this.data = data.initialData;
        });
@@ -87,7 +87,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
    toggleNavigation(name: string): void
    {
        // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);

        if ( navigation )
        {
--- a/src/app/layout/layouts/vertical/thin/thin.module.ts
+++ b/src/app/layout/layouts/vertical/thin/thin.module.ts
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
        MatMenuModule,
        FuseFullscreenModule,
        FuseNavigationModule,
+        LanguageModule,
        MessagesModule,
        NotificationsModule,
        SearchModule,
--- a/src/app/mock-api/apps/contacts/api.ts
+++ b/src/app/mock-api/apps/contacts/api.ts
@@ -295,12 +295,12 @@ export class ContactsMockApi
                const reader = new FileReader();

                // Resolve the promise on success
-                reader.onload = () => {
+                reader.onload = (): void => {
                    resolve(reader.result);
                };

                // Reject the promise on error
-                reader.onerror = (e) => {
+                reader.onerror = (e): void => {
                    reject(e);
                };

--- a/src/app/mock-api/apps/ecommerce/inventory/api.ts
+++ b/src/app/mock-api/apps/ecommerce/inventory/api.ts
@@ -50,7 +50,7 @@ export class ECommerceInventoryMockApi
        // @ Products - GET
        // -----------------------------------------------------------------------------------------------------
        this._fuseMockApiService
-            .onGet('api/apps/ecommerce/inventory/products', 625)
+            .onGet('api/apps/ecommerce/inventory/products', 300)
            .reply(({request}) => {

                // Get available queries
--- a/src/app/mock-api/common/messages/data.ts
+++ b/src/app/mock-api/common/messages/data.ts
@@ -1,8 +1,7 @@
 /* eslint-disable */
 import * as moment from 'moment';
-import { Message } from 'app/layout/common/messages/messages.types';

-export const messages: Message[] = [
+export const messages = [
    {
        id         : '832276cc-c5e9-4fcc-8e23-d38e2e267bc9',
        image      : 'assets/images/avatars/male-01.jpg',
--- a/src/app/mock-api/common/notifications/data.ts
+++ b/src/app/mock-api/common/notifications/data.ts
@@ -1,8 +1,7 @@
 /* eslint-disable */
 import * as moment from 'moment';
-import { Notification } from 'app/layout/common/notifications/notifications.types';

-export const notifications: Notification[] = [
+export const notifications = [
    {
        id         : '493190c9-5b61-4912-afe5-78c21f1044d7',
        icon       : 'heroicons_outline:star',
--- a/src/app/mock-api/common/shortcuts/data.ts
+++ b/src/app/mock-api/common/shortcuts/data.ts
@@ -1,7 +1,5 @@
 /* eslint-disable */
-import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
-
-export const shortcuts: Shortcut[] = [
+export const shortcuts = [
    {
        id         : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
        label      : 'Changelog',
--- a/src/app/mock-api/common/user/data.ts
+++ b/src/app/mock-api/common/user/data.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-export const user: any = {
+export const user = {
    id    : 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df',
    name  : 'Brian Hughes',
    email : 'hughes.brian@company.com',
--- a/src/app/mock-api/index.ts
+++ b/src/app/mock-api/index.ts
@@ -1,4 +1,5 @@
 import { AcademyMockApi } from 'app/mock-api/apps/academy/api';
+import { ActivitiesMockApi } from 'app/mock-api/pages/activities/api';
 import { AnalyticsMockApi } from 'app/mock-api/dashboards/analytics/api';
 import { AuthMockApi } from 'app/mock-api/common/auth/api';
 import { CalendarMockApi } from 'app/mock-api/apps/calendar/api';
@@ -21,6 +22,7 @@ import { UserMockApi } from 'app/mock-api/common/user/api';

 export const mockApiServices = [
    AcademyMockApi,
+    ActivitiesMockApi,
    AnalyticsMockApi,
    AuthMockApi,
    CalendarMockApi,
--- a/src/app/mock-api/pages/activities/api.ts
+++ b/src/app/mock-api/pages/activities/api.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { cloneDeep } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api';
+import { activities as activitiesData } from 'app/mock-api/pages/activities/data';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ActivitiesMockApi
+{
+    private _activities: any = activitiesData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Activities - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/pages/activities')
+            .reply(() => [200, cloneDeep(this._activities)]);
+    }
+}
--- a/src/app/mock-api/pages/activities/data.ts
+++ b/src/app/mock-api/pages/activities/data.ts
@@ -0,0 +1,88 @@
+/* eslint-disable */
+import * as moment from 'moment';
+
+export const activities = [
+    {
+        id          : '493190c9-5b61-4912-afe5-78c21f1044d7',
+        icon        : 'heroicons_solid:star',
+        description : 'Your submission has been accepted',
+        date        : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        extraContent: `<div class="font-bold">Congratulations for your acceptance!</div><br>
+                        <div>Hi Brian,<br>Your submission has been accepted and you are ready to move into the next phase. Once you are ready, reach out to me and we will ...</div>`
+    },
+    {
+        id           : '6e3e97e5-effc-4fb7-b730-52a151f0b641',
+        image        : 'assets/images/avatars/male-04.jpg',
+        description  : '<strong>Leo Gill</strong> added you to <strong>Top Secret Project</strong> group and assigned you as a <strong>Project Manager</strong>',
+        date         : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        linkedContent: 'Top Secret Project',
+        link         : '/dashboards/project',
+        useRouter    : true
+    },
+    {
+        id           : 'b91ccb58-b06c-413b-b389-87010e03a120',
+        icon         : 'heroicons_solid:mail',
+        description  : 'You have 15 unread mails across 3 mailboxes',
+        date         : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        linkedContent: 'Mailbox',
+        link         : '/apps/mailbox',
+        useRouter    : true
+    },
+    {
+        id           : '541416c9-84a7-408a-8d74-27a43c38d797',
+        icon         : 'heroicons_solid:refresh',
+        description  : 'Your <strong>Docker container</strong> is ready to publish',
+        date         : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        linkedContent: 'Download the container',
+        link         : '.',
+        useRouter    : true
+    },
+    {
+        id          : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
+        image       : 'assets/images/avatars/male-06.jpg',
+        description : '<strong>Roger Murray</strong> accepted your friend request',
+        date        : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        extraContent: `You have <span class="font-semibold">8</span> mutual friends.`
+    },
+    {
+        id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
+        image      : 'assets/images/avatars/female-04.jpg',
+        description: '<strong>Sophie Stone</strong> sent you a direct message',
+        date       : moment().subtract(9, 'hours').toISOString() // 9 hours ago
+    },
+    {
+        id           : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
+        icon         : 'heroicons_solid:mail',
+        description  : 'You have 3 new mails',
+        date         : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        extraContent : `<ol class="list-decimal list-inside space-y-2">
+                            <li class="font-medium">Please review and sign the attached agreement</li>
+                            <li class="font-medium">Delivery address confirmation</li>
+                            <li class="font-medium">Previous clients and their invoices</li>
+                        </ol>`,
+        linkedContent: 'Mailbox',
+        link         : '/apps/mailbox',
+        useRouter    : true
+    },
+    {
+        id           : 'fd0f01b4-f3de-4333-add5-cd86850279f8',
+        image        : 'assets/images/avatars/female-02.jpg',
+        description  : '<strong>Tina Harris</strong> started a chat with you',
+        date         : moment().subtract(1, 'day').toISOString(), // 1 day ago,
+        linkedContent: 'Go to Chat (Tina Harris)',
+        link         : '/apps/chat/5636c0ba-fa47-42ca-9160-27340583041e',
+        useRouter    : true
+    },
+    {
+        id         : '8f8e1bf9-4661-4939-9e43-390957b60f42',
+        icon       : 'heroicons_solid:star',
+        description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
+        date       : moment().subtract(3, 'days').toISOString() // 3 days ago
+    },
+    {
+        id         : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
+        icon       : 'heroicons_solid:refresh',
+        description: 'Your Vagrant container is ready to download',
+        date       : moment().subtract(4, 'day').toISOString() // 4 days ago
+    }
+];
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -0,0 +1,5 @@
+{
+    "welcome-back": "Welcome back",
+    "Project": "Project",
+    "Analytics": "Analytics"
+}
--- a/src/assets/i18n/tr.json
+++ b/src/assets/i18n/tr.json
@@ -0,0 +1,5 @@
+{
+    "welcome-back": "Hoşgeldin",
+    "Project": "Proje",
+    "Analytics": "Analitik"
+}
--- a/src/assets/images/flags/TR.svg
+++ b/src/assets/images/flags/TR.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="15">
+<rect width="20" height="15" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V15H20V0H0Z" fill="#E31D1C"/>
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V15H20V0H0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0159 10.0709C8.67757 9.7412 7.62937 8.621 7.64153 6.97891C7.65292 5.44178 8.58358 4.1425 10.0548 3.79077C11.526 3.43904 12.8213 4.18567 12.8213 4.18567C12.4147 3.22579 11.0021 2.55145 9.84394 2.55339C7.68818 2.557 5.39013 4.30527 5.37032 6.97891C5.34978 9.75078 7.83119 11.3294 10.0136 11.3257C11.7631 11.3228 12.593 10.1258 12.7649 9.61663C12.7649 9.61663 11.3542 10.4006 10.0159 10.0709ZM13.0646 6.45407L11.7312 6.94386L13.2357 7.47461L13.21 9.06047L14.2014 7.87072L15.8389 7.98971L14.5412 6.87424L15.3932 5.68436L14.006 6.15122L13.0145 5.04898L13.0646 6.45407Z" fill="#F7FCFF"/>
+</g>
+</g>
+</svg>
--- a/src/assets/images/flags/US.svg
+++ b/src/assets/images/flags/US.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="15">
+<rect width="20" height="15" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20V15H0V0Z" fill="#E31D1C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.25V2.5H20V1.25H0ZM0 3.75V5H20V3.75H0ZM0 7.5V6.25H20V7.5H0ZM0 8.75V10H20V8.75H0ZM0 12.5V11.25H20V12.5H0ZM0 15V13.75H20V15H0Z" fill="#F7FCFF"/>
+<rect width="11.25" height="8.75" fill="#2E42A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3 2.71718L1.9624 2.25577L2.47623 2.62569H2.1853L2.77364 3.14606L2.57492 3.87569H2.26369L1.96148 3.20557L1.70375 3.87569H0.935303L1.52364 4.39606L1.3 5.21719L1.9624 4.75577L2.47623 5.12569H2.1853L2.77364 5.64606L2.57492 6.37569H2.26369L1.96148 5.70557L1.70375 6.37569H0.935303L1.52364 6.89606L1.3 7.71719L1.9624 7.25577L2.60332 7.71719L2.40406 6.89606L2.91877 6.37569H2.68136L3.2124 6.00577L3.72623 6.37569H3.4353L4.02364 6.89606L3.8 7.71719L4.4624 7.25577L5.10332 7.71719L4.90406 6.89606L5.41877 6.37569H5.18136L5.7124 6.00577L6.22623 6.37569H5.9353L6.52364 6.89606L6.3 7.71719L6.9624 7.25577L7.60332 7.71719L7.40406 6.89606L7.91877 6.37569H7.68136L8.2124 6.00577L8.72623 6.37569H8.4353L9.02364 6.89606L8.8 7.71719L9.4624 7.25577L10.1033 7.71719L9.90406 6.89606L10.4188 6.37569H9.76369L9.46148 5.70557L9.20375 6.37569H8.83112L8.65406 5.64606L9.16877 5.12569H8.93136L9.4624 4.75577L10.1033 5.21719L9.90406 4.39606L10.4188 3.87569H9.76369L9.46148 3.20557L9.20375 3.87569H8.83112L8.65406 3.14606L9.16877 2.62569H8.93136L9.4624 2.25577L10.1033 2.71718L9.90406 1.89606L10.4188 1.37569H9.76369L9.46148 0.705566L9.20375 1.37569H8.4353L9.02364 1.89606L8.82492 2.62569H8.51369L8.21148 1.95557L7.95375 2.62569H7.58112L7.40406 1.89606L7.91877 1.37569H7.26369L6.96148 0.705566L6.70375 1.37569H5.9353L6.52364 1.89606L6.32492 2.62569H6.01369L5.71148 1.95557L5.45375 2.62569H5.08112L4.90406 1.89606L5.41877 1.37569H4.76369L4.46148 0.705566L4.20375 1.37569H3.4353L4.02364 1.89606L3.82492 2.62569H3.51369L3.21148 1.95557L2.95375 2.62569H2.58112L2.40406 1.89606L2.91877 1.37569H2.26369L1.96148 0.705566L1.70375 1.37569H0.935303L1.52364 1.89606L1.3 2.71718ZM8.82492 5.12569L9.02364 4.39606L8.4353 3.87569H8.72623L8.2124 3.50577L7.68136 3.87569H7.91877L7.40406 4.39606L7.58112 5.12569H7.95375L8.21148 4.45557L8.51369 5.12569H8.82492ZM7.47623 5.12569L6.9624 4.75577L6.43136 5.12569H6.66877L6.15406 5.64606L6.33112 6.37569H6.70375L6.96148 5.70557L7.26369 6.37569H7.57492L7.77364 5.64606L7.1853 5.12569H7.47623ZM5.27364 5.64606L5.07492 6.37569H4.76369L4.46148 5.70557L4.20375 6.37569H3.83112L3.65406 5.64606L4.16877 5.12569H3.93136L4.4624 4.75577L4.97623 5.12569H4.6853L5.27364 5.64606ZM5.45375 5.12569H5.08112L4.90406 4.39606L5.41877 3.87569H5.18136L5.7124 3.50577L6.22623 3.87569H5.9353L6.52364 4.39606L6.32492 5.12569H6.01369L5.71148 4.45557L5.45375 5.12569ZM3.82492 5.12569L4.02364 4.39606L3.4353 3.87569H3.72623L3.2124 3.50577L2.68136 3.87569H2.91877L2.40406 4.39606L2.58112 5.12569H2.95375L3.21148 4.45557L3.51369 5.12569H3.82492ZM7.77364 3.14606L7.57492 3.87569H7.26369L6.96148 3.20557L6.70375 3.87569H6.33112L6.15406 3.14606L6.66877 2.62569H6.43136L6.9624 2.25577L7.47623 2.62569H7.1853L7.77364 3.14606ZM4.97623 2.62569L4.4624 2.25577L3.93136 2.62569H4.16877L3.65406 3.14606L3.83112 3.87569H4.20375L4.46148 3.20557L4.76369 3.87569H5.07492L5.27364 3.14606L4.6853 2.62569H4.97623Z" fill="#F7FCFF"/>
+</g>
+</svg>
--- a/src/assets/images/flags/where-to-find-other-flags.txt
+++ b/src/assets/images/flags/where-to-find-other-flags.txt
@@ -0,0 +1,5 @@
+### Main repository of the flags ###
+https://github.com/Yummygum/flagpack-core
+
+### We used the medium (m) detailed SVGs which are located here ###
+https://github.com/Yummygum/flagpack-core/tree/main/svg/m
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,11 +74,7 @@ const config = {
    darkMode    : 'class',
    important   : true,
    purge       : {
-        // Until AngularCLI team provides a better way to distinguish between
-        // development and production, we will decide whether to purge or not
-        // by looking at the process arguments. If there is a "build" argument
-        // with the "ng" command then we will enable the purge.
-        enabled: process && process.argv && process.argv.find(arg => arg.includes('ng')) && process.argv.indexOf('build') !== -1,
+        enabled: process.env.TAILWIND_MODE === 'build',
        content: ['./src/**/*.{html,scss,ts}'],
        options: {
            safelist: {
--- a/transloco.config.js
+++ b/transloco.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    rootTranslationsPath: 'src/assets/i18n/'
+};
Author	SHA1	Message	Date
sercan	2d2db97416	Merge remote-tracking branch 'origin/demo' into starter	2021-05-24 14:33:12 +03:00
sercan	466bf50de4	Increased the version number Updated the changelog	2021-05-24 14:32:45 +03:00
sercan	5daa2260e6	Merge remote-tracking branch 'origin/demo' into starter	2021-05-24 14:29:35 +03:00
sercan	95bc7dc4db	(apps/ecommerce/inventory) Performance improvements, decreased the mockApi delay	2021-05-24 09:22:18 +03:00
sercan	af984fcba1	Merge remote-tracking branch 'origin/demo' into starter	2021-05-23 07:13:28 +03:00
sercan	cfca19dc68	(mockApi) Removed typings from data files	2021-05-23 07:11:58 +03:00
sercan	a0c20f8d59	(pages/settings) Fixed: Settings container component width is not filling the container	2021-05-22 21:14:42 +03:00
sercan	97d3662417	Merge remote-tracking branch 'origin/demo' into starter	2021-05-21 12:17:06 +03:00
sercan	df9f2256cd	Increased the version number Updated the changelog	2021-05-21 12:02:05 +03:00
sercan	6bcd04b799	(eslint) Fixed linting issues	2021-05-21 11:48:42 +03:00
sercan	3c0e326113	(dependencies) Updated various packages to their latest versions	2021-05-21 11:40:50 +03:00
sercan	c7158377f7	Revert "(dependencies) Updated Angular & Angular Material to v12.0.1" This reverts commit `105575d4`	2021-05-20 22:46:40 +03:00
sercan	105575d40e	(dependencies) Updated Angular & Angular Material to v12.0.1	2021-05-20 22:23:25 +03:00
sercan	f470313d72	(pages/activities) Couple data tweaks	2021-05-20 16:51:40 +03:00
sercan	60e9c65505	(pages/activities) Couple data and style tweaks	2021-05-20 16:48:38 +03:00
sercan	3b727fe859	(pages/activities) Added Activities page (timeline)	2021-05-20 15:30:14 +03:00
sercan	4694bb401d	(layout/common) Added trackBy functions to ngFor loops in common components	2021-05-19 22:43:16 +03:00
sercan	ee86dc6245	(tailwind) Use TAILWIND_MODE environment variable to activate purge on build	2021-05-19 14:45:30 +03:00
sercan	3d09241c64	(fuse/animations) Fixed: Barrel exports (FuseMasonry) Fixed: Barrel exports (FuseUtilsService) Fixed: Barrel exports (FuseValidators) Fixed: Barrel exports	2021-05-19 14:37:38 +03:00
sercan	e499c06884	(apps/mailbox) Small tweak on resolver's comment	2021-05-19 13:38:10 +03:00
sercan	eca618c95b	(FuseNavigation) Fixed: If [routerLinkActiveOptions] is "undefined" initially, router throws an error and stops working	2021-05-19 13:37:37 +03:00
sercan	8524df013a	(fuse/tailwind) Fixed: Barrel exports are wrong for FuseTailwindService	2021-05-19 10:57:40 +03:00
sercan	d897a244c8	Merge remote-tracking branch 'origin/demo' into starter	2021-05-18 16:25:53 +03:00
sercan	e4df408abe	(FuseNavigation) Added support for new "isActiveMatchOptions" for Basic navigation items; https://github.com/angular/angular/pull/40303 (docs) Updated FuseNavigation documentation	2021-05-18 16:09:31 +03:00
sercan	fd859a8663	(comments) Fixed: The word 'data' replaced with 'mock-api' by mistake in the past causing a lot of comments to make no sense	2021-05-18 15:18:44 +03:00
sercan	59960af7a5	(MultiLang) Added multi language support using @ngneat/transloco (docs) Added docs about multi language	2021-05-18 15:11:57 +03:00
sercan	74c4dc2ad8	(app.module.ts) Small tweaks on comments	2021-05-18 14:34:46 +03:00
sercan	f76f38b812	(FuseVerticalNavigation) Added missing return types	2021-05-18 14:12:38 +03:00
sercan	5c40e99518	(FuseNavigation) Use the generic return type for "getComponent" (docs) Updated FuseNavigation docs	2021-05-18 13:10:39 +03:00
sercan	c1ca701e92	(FuseNavigation) Added a generic return type for "getComponent" method on FuseNavigationService	2021-05-18 13:08:02 +03:00
sercan	e00dda98bc	(core) Separated the "auth" and "icon registry" to their own modules to keep the CoreModule simple	2021-05-18 11:44:42 +03:00
sercan	9edc62f703	(eslint) Activate explicit return types on functions and methods	2021-05-18 11:42:36 +03:00
sercan	f9c8e16778	(fuse/mock-api) Added a return type to the factory function	2021-05-17 15:21:08 +03:00
sercan	4a30e3482c	(eslint) Removed e2e tsconfig path as there is no default e2e solution included into Angular since v12.0.0	2021-05-16 16:22:40 +03:00
sercan	837f444cc9	(overrides/angular-material) Use @apply whenever it's possible	2021-05-16 15:55:17 +03:00
sercan	d0876eb80c	(overrides) Change the text and arrow color of mat-select on focus when it's used as a prefix or suffix in mat-form-field	2021-05-16 15:54:55 +03:00
sercan	3395e7f0bc	(docs) Updated docs	2021-05-15 13:44:13 +03:00