From 3395e7f0bc41d395ac6456bdd9b0dc77eae87461 Mon Sep 17 00:00:00 2001 From: sercan Date: Sat, 15 May 2021 13:44:13 +0300 Subject: [PATCH 01/14] (docs) Updated docs --- .../components/drawer/drawer.component.html | 2 +- .../components/navigation/navigation.component.html | 2 +- .../libraries/mock-api/mock-api.component.html | 6 +++--- .../customization/splash-screen/splash-screen.html | 2 +- .../customization/theme-layouts/theme-layouts.html | 2 +- .../docs/guides/customization/theming/theming.html | 2 +- .../component-structure/component-structure.html | 2 +- .../guides/development/deployment/deployment.html | 12 +++++++----- .../directory-structure/directory-structure.html | 8 +------- .../getting-started/installation/installation.html | 4 ++-- .../docs/guides/getting-started/serving/serving.html | 7 ++++--- .../common/overview/overview.component.html | 4 ++-- .../docs/other-components/other-components.module.ts | 2 ++ 13 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html b/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html index 79033040..7590fc49 100644 --- a/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html +++ b/src/app/modules/admin/docs/core-features/components/drawer/drawer.component.html @@ -44,7 +44,7 @@ mat-drawer.

Since fuse-drawer works with absolute positioning by default, the parent of the drawer must have position: relative and overflow-x: hidden properties otherwise the drawer won't be able to work correctly. diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html index 23abf861..7dc0cfbf 100644 --- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html +++ b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html @@ -55,7 +55,7 @@

fuse-navigation designed to work with data and it must be supplied in certain format. If you want to create a navigation from an HTML structure, this component is not for you. diff --git a/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html b/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html index de949a3e..85805a8b 100644 --- a/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html +++ b/src/app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component.html @@ -57,7 +57,7 @@
  • If you need to present your idea to your client or to your boss without spending many hours and resources
    • MockAPI is NOT a database or a backend replacement! It works on memory. As soon as you reload your app, all the changes you have made using Mock API endpoints will go away and replaced with defaults. @@ -200,7 +200,7 @@ mechanic, you will be able to mock API endpoints in no time.

    Please keep in mind that the following step-by-step guide assumes you are doing everything from scratch for the MockAPI like creating directories, adding files, exporting via barrels etc. Majority of these already setup in both Demo and Starter apps for you so it's a bit easier to start working with the @@ -213,7 +213,7 @@ For this guide, we will assume you are going to use the default directory.

    It's important to keep all mock related files in the same directory because we will create a barrel file that exports all the mock classes and provide that to the FuseMockApiModule so it can register and use them. diff --git a/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html b/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html index ce19dc39..ef9b9e06 100644 --- a/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html +++ b/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html @@ -70,7 +70,7 @@ page.

    Please note, you cannot run Angular components in here. Basically, by the time you can run Angular components, you won't be needing the splash screen because everything would already be loaded! diff --git a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html index e5c2fecb..61f9f2a8 100644 --- a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html +++ b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html @@ -48,7 +48,7 @@ made configuration service to store, write and read application wide configurations.

    More detailed information about FuseConfigService can be found in the Core features > Services > diff --git a/src/app/modules/admin/docs/guides/customization/theming/theming.html b/src/app/modules/admin/docs/guides/customization/theming/theming.html index 0193acea..0af026e6 100644 --- a/src/app/modules/admin/docs/guides/customization/theming/theming.html +++ b/src/app/modules/admin/docs/guides/customization/theming/theming.html @@ -141,7 +141,7 @@

    diff --git a/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html b/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html index b11b5857..4b96d15b 100644 --- a/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html +++ b/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html @@ -39,7 +39,7 @@

    Fuse uses route based component loading strategy. There are componentless and empty-path routes specifically structured to load components without hard diff --git a/src/app/modules/admin/docs/guides/development/deployment/deployment.html b/src/app/modules/admin/docs/guides/development/deployment/deployment.html index 93cd0c45..4d1af7d0 100644 --- a/src/app/modules/admin/docs/guides/development/deployment/deployment.html +++ b/src/app/modules/admin/docs/guides/development/deployment/deployment.html @@ -48,24 +48,26 @@

    Alternate command

    - Alias for ng build --prod. + Alias for ng build.

    -

    + If you are getting error messages that includes keywords like HEAP, JS stack tree, out of memory while trying to run ng build --prod or npm run build:prod commands, you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again. -

    +
    diff --git a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html index 3b976cbf..32281f41 100644 --- a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html +++ b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html @@ -39,7 +39,7 @@
    Fuse's directory structure might look overwhelming and intimidating at first, but following this page and giving a bit time to understand it before jumping right into code will help immensely. @@ -198,12 +198,6 @@ Core features > Libraries > MockAPI section of this documentation.

    - - Starter - version of Fuse doesn't include any mock-api services except for the Navigation. -

    app/layout/

    diff --git a/src/app/modules/admin/docs/guides/getting-started/installation/installation.html b/src/app/modules/admin/docs/guides/getting-started/installation/installation.html index 01f12353..fec2c653 100644 --- a/src/app/modules/admin/docs/guides/getting-started/installation/installation.html +++ b/src/app/modules/admin/docs/guides/getting-started/installation/installation.html @@ -77,7 +77,7 @@ After choosing the version you want to install, unzip the .zip file of that version into your workspace directory.

    @@ -107,7 +107,7 @@ This command will take some time and install all the required libraries into the node_modules directory in order for you to start developing.

    diff --git a/src/app/modules/admin/docs/guides/getting-started/serving/serving.html b/src/app/modules/admin/docs/guides/getting-started/serving/serving.html index 94479a6f..bf753db9 100644 --- a/src/app/modules/admin/docs/guides/getting-started/serving/serving.html +++ b/src/app/modules/admin/docs/guides/getting-started/serving/serving.html @@ -38,7 +38,6 @@

    -

    After the installation process finishes, run the following command while still in your workspace directory:

    @@ -64,11 +63,13 @@ Alias for ng serve --open.

    -

    + If you are getting error messages that includes keywords like HEAP, JS stack tree, out of memory while trying to run ng serve --open or npm start commands, you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again. -

    +
    diff --git a/src/app/modules/admin/docs/other-components/common/overview/overview.component.html b/src/app/modules/admin/docs/other-components/common/overview/overview.component.html index 045af4c2..8c6488e1 100644 --- a/src/app/modules/admin/docs/other-components/common/overview/overview.component.html +++ b/src/app/modules/admin/docs/other-components/common/overview/overview.component.html @@ -43,14 +43,14 @@ therefore they are located in the src/app/layout/common/ directory. You can modify them without touching the @fuse directory.

    These components are not very complex and they only provide some basic features. If you wish them to do more, you have to customize them, and that's exactly why they are not located in the @fuse directory like other components. We may add more features and more custom components in the future if they will be beneficial for everyone. Components that are too specific to a project won't be included as custom components into Fuse! diff --git a/src/app/modules/admin/docs/other-components/other-components.module.ts b/src/app/modules/admin/docs/other-components/other-components.module.ts index 35444dab..b6d4cca1 100644 --- a/src/app/modules/admin/docs/other-components/other-components.module.ts +++ b/src/app/modules/admin/docs/other-components/other-components.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatSidenavModule } from '@angular/material/sidenav'; import { FuseHighlightModule } from '@fuse/components/highlight'; @@ -36,6 +37,7 @@ import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/o ], imports : [ RouterModule.forChild(otherComponentsRoutes), + MatButtonModule, MatIconModule, MatSidenavModule, FuseHighlightModule, From d0876eb80cab43ddc00b835ef37b66100ab03e51 Mon Sep 17 00:00:00 2001 From: sercan Date: Sun, 16 May 2021 15:54:55 +0300 Subject: [PATCH 02/14] (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 --- .../styles/overrides/angular-material.scss | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/@fuse/styles/overrides/angular-material.scss b/src/@fuse/styles/overrides/angular-material.scss index 9c210a05..73b8ea23 100644 --- a/src/@fuse/styles/overrides/angular-material.scss +++ b/src/@fuse/styles/overrides/angular-material.scss @@ -633,12 +633,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 +679,7 @@ .mat-select-arrow { min-height: 0; + @apply text-gray-500 dark:text-gray-400 #{'!important'}; } } } From 837f444cc9da8b5367621014d0b24c9fa067d953 Mon Sep 17 00:00:00 2001 From: sercan Date: Sun, 16 May 2021 15:55:17 +0300 Subject: [PATCH 03/14] (overrides/angular-material) Use @apply whenever it's possible --- .../styles/overrides/angular-material.scss | 38 +++---------------- 1 file changed, 6 insertions(+), 32 deletions(-) diff --git a/src/@fuse/styles/overrides/angular-material.scss b/src/@fuse/styles/overrides/angular-material.scss index 73b8ea23..dbac6f4a 100644 --- 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 { @@ -1049,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'}; } } } From 4a30e3482c382766d620856dede0c0ec09653074 Mon Sep 17 00:00:00 2001 From: sercan Date: Sun, 16 May 2021 16:22:40 +0300 Subject: [PATCH 04/14] (eslint) Removed e2e tsconfig path as there is no default e2e solution included into Angular since v12.0.0 --- .eslintrc.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 50ad1585..8fe4fe01 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,8 +16,7 @@ ], "parserOptions": { "project": [ - "tsconfig.json", - "e2e/tsconfig.json" + "tsconfig.json" ], "createDefaultProgram": true }, From f9c8e16778e7ccf3b204100771883b90881f9531 Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 17 May 2021 15:21:08 +0300 Subject: [PATCH 05/14] (fuse/mock-api) Added a return type to the factory function --- src/@fuse/lib/mock-api/mock-api.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@fuse/lib/mock-api/mock-api.module.ts b/src/@fuse/lib/mock-api/mock-api.module.ts index bbb91251..1450a66a 100644 --- 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 }, { From 9edc62f703de86e1dc96d1ef1310c8c50d7b6ee1 Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 11:42:36 +0300 Subject: [PATCH 06/14] (eslint) Activate explicit return types on functions and methods --- .eslintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.json b/.eslintrc.json index 8fe4fe01..a2718c12 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -43,6 +43,7 @@ } ], "@typescript-eslint/dot-notation": "off", + "@typescript-eslint/explicit-function-return-type": "error", "@typescript-eslint/explicit-member-accessibility": [ "off", { From e00dda98bc8bc19d716cc007283497685b8badd7 Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 11:44:42 +0300 Subject: [PATCH 07/14] (core) Separated the "auth" and "icon registry" to their own modules to keep the CoreModule simple --- src/app/core/auth/auth.module.ts | 21 ++++++++++++++++++++ src/app/core/core.module.ts | 31 +++++------------------------- src/app/core/icons/icons.module.ts | 25 ++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 26 deletions(-) create mode 100644 src/app/core/auth/auth.module.ts create mode 100644 src/app/core/icons/icons.module.ts diff --git a/src/app/core/auth/auth.module.ts b/src/app/core/auth/auth.module.ts new file mode 100644 index 00000000..0ff1f2ad --- /dev/null +++ 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 +{ +} diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index ae64ba89..618a973d 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,21 +1,11 @@ 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'; @NgModule({ - imports : [ - HttpClientModule - ], - providers: [ - AuthService, - { - provide : HTTP_INTERCEPTORS, - useClass: AuthInterceptor, - multi : true - } + imports: [ + AuthModule, + IconsModule ] }) export class CoreModule @@ -24,8 +14,6 @@ export class CoreModule * Constructor */ constructor( - private _domSanitizer: DomSanitizer, - private _matIconRegistry: MatIconRegistry, @Optional() @SkipSelf() parentModule?: CoreModule ) { @@ -34,14 +22,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')); } } diff --git a/src/app/core/icons/icons.module.ts b/src/app/core/icons/icons.module.ts new file mode 100644 index 00000000..c52c162b --- /dev/null +++ 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')); + } +} From c1ca701e92d4f0bfff65e978a5cd2207d9f7970b Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 13:08:02 +0300 Subject: [PATCH 08/14] (FuseNavigation) Added a generic return type for "getComponent" method on FuseNavigationService --- src/@fuse/components/navigation/navigation.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@fuse/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts index 31a2738c..3c5bea80 100644 --- 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(name: string): T { return this._componentRegistry.get(name); } From 5c40e99518ea1356d86c6468e1be126f017c367b Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 13:10:39 +0300 Subject: [PATCH 09/14] (FuseNavigation) Use the generic return type for "getComponent" (docs) Updated FuseNavigation docs --- .../horizontal/centered/centered.component.ts | 4 +-- .../enterprise/enterprise.component.ts | 4 +-- .../horizontal/material/material.component.ts | 4 +-- .../horizontal/modern/modern.component.ts | 4 +-- .../vertical/classic/classic.component.ts | 4 +-- .../vertical/classy/classy.component.ts | 4 +-- .../vertical/compact/compact.component.ts | 4 +-- .../layouts/vertical/dense/dense.component.ts | 4 +-- .../futuristic/futuristic.component.ts | 4 +-- .../layouts/vertical/thin/thin.component.ts | 4 +-- .../apps/mailbox/sidebar/sidebar.component.ts | 4 +-- .../admin/apps/tasks/list/list.component.ts | 4 +-- .../navigation/navigation.component.html | 10 +++---- .../navigation/navigation.component.ts | 26 +++++++++---------- 14 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.ts b/src/app/layout/layouts/horizontal/centered/centered.component.ts index 637e2eab..513ffa98 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts index 2edbaf7b..73b7ca19 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/horizontal/material/material.component.ts b/src/app/layout/layouts/horizontal/material/material.component.ts index 6dd9cac9..4bb450a5 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.ts b/src/app/layout/layouts/horizontal/modern/modern.component.ts index 8b98f101..496c1837 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/vertical/classic/classic.component.ts b/src/app/layout/layouts/vertical/classic/classic.component.ts index e424a4a7..629cbb56 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/vertical/classy/classy.component.ts b/src/app/layout/layouts/vertical/classy/classy.component.ts index 200513c3..2c1d5c55 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/vertical/compact/compact.component.ts b/src/app/layout/layouts/vertical/compact/compact.component.ts index 4b58fcff..884e7eca 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/vertical/dense/dense.component.ts b/src/app/layout/layouts/vertical/dense/dense.component.ts index b7107147..624db14d 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts index 6756e5e3..b4bdca90 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/layout/layouts/vertical/thin/thin.component.ts b/src/app/layout/layouts/vertical/thin/thin.component.ts index 2b134f3d..b56bdf62 100644 --- 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({ @@ -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(name); if ( navigation ) { diff --git a/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts b/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts index 3b4c2cd8..0f145622 100644 --- a/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts +++ b/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts @@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navigation'; +import { FuseNavigationItem, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service'; import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component'; import { labelColorDefs } from 'app/modules/admin/apps/mailbox/mailbox.constants'; @@ -279,7 +279,7 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy const inboxFolder = this.folders.find(folder => folder.slug === 'inbox'); // Get the component -> navigation mock-api -> item - const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation'); + const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation'); // If the main navigation component exists... if ( mainNavigationComponent ) diff --git a/src/app/modules/admin/apps/tasks/list/list.component.ts b/src/app/modules/admin/apps/tasks/list/list.component.ts index 0c022200..e454e62d 100644 --- a/src/app/modules/admin/apps/tasks/list/list.component.ts +++ b/src/app/modules/admin/apps/tasks/list/list.component.ts @@ -6,7 +6,7 @@ import { MatDrawer } from '@angular/material/sidenav'; import { fromEvent, Subject } from 'rxjs'; import { filter, 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 { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types'; import { TasksService } from 'app/modules/admin/apps/tasks/tasks.service'; @@ -83,7 +83,7 @@ export class TasksListComponent implements OnInit, OnDestroy setTimeout(() => { // Get the component -> navigation data -> item - const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation'); + const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation'); // If the main navigation component exists... if ( mainNavigationComponent ) diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html index 7dc0cfbf..38ccdca5 100644 --- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html +++ b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html @@ -687,7 +687,7 @@ getNavItem(itemId, navigationName): FuseNavigationItem | null { // Get the component -> navigation data -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -772,7 +772,7 @@ updateBadgeTitle(itemId, navigationName, title): void { // Get the component -> navigation data -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -850,7 +850,7 @@ toggleDisabled(itemId, navigationName): void { // Get the component -> navigation data -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -940,7 +940,7 @@ swapNavigationData(navigationName): void { // Get the component -> navigation data -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -949,7 +949,7 @@ } // A navigation data to replace with - const newNavigation = [ + const newNavigation: FuseNavigationItem[] = [ { id : 'supported-components', title : 'Supported components', diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts index 4ca49d9f..ababfd73 100644 --- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts +++ b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navigation'; +import { FuseNavigationItem, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component'; @Component({ @@ -32,8 +32,8 @@ export class NavigationComponent */ getNavItem(itemId, navigationName): FuseNavigationItem | null { - // Get the component -> navigation mock-api -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + // Get the component -> navigation data -> item + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -57,8 +57,8 @@ export class NavigationComponent */ updateBadgeTitle(itemId, navigationName, title): void { - // Get the component -> navigation mock-api -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + // Get the component -> navigation data -> item + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -81,8 +81,8 @@ export class NavigationComponent */ toggleDisabled(itemId, navigationName): void { - // Get the component -> navigation mock-api -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + // Get the component -> navigation data -> item + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -98,14 +98,14 @@ export class NavigationComponent } /** - * Swap navigation mock-api + * Swap navigation data * * @param navigationName */ swapNavigationData(navigationName): void { - // Get the component -> navigation mock-api -> item - const navComponent = this._fuseNavigationService.getComponent(navigationName); + // Get the component -> navigation data -> item + const navComponent = this._fuseNavigationService.getComponent(navigationName); // Return if the navigation component does not exist if ( !navComponent ) @@ -113,8 +113,8 @@ export class NavigationComponent return null; } - // A navigation mock-api to replace with - const newNavigation = [ + // A navigation data to replace with + const newNavigation: FuseNavigationItem[] = [ { id : 'supported-components', title : 'Supported components', @@ -168,7 +168,7 @@ export class NavigationComponent } ]; - // Replace the navigation mock-api + // Replace the navigation data navComponent.navigation = newNavigation; navComponent.refresh(); } From f76f38b8120f461c5d234d81a14aba98a27cc2aa Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 14:12:38 +0300 Subject: [PATCH 10/14] (FuseVerticalNavigation) Added missing return types --- .../components/navigation/vertical/vertical.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@fuse/components/navigation/vertical/vertical.component.ts b/src/@fuse/components/navigation/vertical/vertical.component.ts index 39d25ecc..b5eb8da9 100644 --- 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(); }; } From 74c4dc2ad8534930edd3bc810323555942ccc23a Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 14:34:46 +0300 Subject: [PATCH 11/14] (app.module.ts) Small tweaks on comments --- src/app/app.module.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0def001a..3e0f676e 100644 --- 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 : [ From 59960af7a5b4d62e747eaf46c6f89f628654567a Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 15:11:57 +0300 Subject: [PATCH 12/14] (MultiLang) Added multi language support using @ngneat/transloco (docs) Added docs about multi language --- CREDITS | 3 + package-lock.json | 334 +++++++++++++----- package.json | 1 + src/app/core/core.module.ts | 4 +- .../core/transloco/transloco.http-loader.ts | 32 ++ src/app/core/transloco/transloco.module.ts | 50 +++ .../common/language/language.component.html | 35 ++ .../common/language/language.component.ts | 142 ++++++++ .../layout/common/language/language.module.ts | 24 ++ .../centered/centered.component.html | 1 + .../horizontal/centered/centered.module.ts | 2 + .../enterprise/enterprise.component.html | 1 + .../enterprise/enterprise.module.ts | 2 + .../material/material.component.html | 1 + .../horizontal/material/material.module.ts | 2 + .../horizontal/modern/modern.component.html | 1 + .../horizontal/modern/modern.module.ts | 2 + .../vertical/classic/classic.component.html | 1 + .../vertical/classic/classic.module.ts | 2 + .../vertical/classy/classy.component.html | 1 + .../layouts/vertical/classy/classy.module.ts | 2 + .../vertical/compact/compact.component.html | 1 + .../vertical/compact/compact.module.ts | 2 + .../vertical/dense/dense.component.html | 1 + .../layouts/vertical/dense/dense.module.ts | 2 + .../futuristic/futuristic.component.html | 1 + .../vertical/futuristic/futuristic.module.ts | 2 + .../layouts/vertical/thin/thin.component.html | 1 + .../layouts/vertical/thin/thin.module.ts | 2 + .../dashboards/project/project.component.html | 4 +- .../dashboards/project/project.module.ts | 2 + .../docs/guides/authentication/jwt/jwt.html | 17 - .../component-theming/component-theming.html | 27 -- .../multi-language/multi-language.html | 76 ++++ .../multi-language/multi-language.ts | 30 ++ .../page-layouts/page-layouts.html | 27 -- .../splash-screen/splash-screen.html | 27 -- .../tailwindcss/tailwindcss.html | 27 -- .../theme-layouts/theme-layouts.html | 27 -- .../guides/customization/theming/theming.html | 27 -- .../component-structure.html | 27 -- .../development/deployment/deployment.html | 27 -- .../directory-structure.html | 27 -- .../development/starter-kit/starter-kit.html | 27 -- .../guides/development/updating/updating.html | 27 -- .../installation/installation.html | 27 -- .../introduction/introduction.html | 16 - .../prerequisites/prerequisites.html | 27 -- .../getting-started/serving/serving.html | 27 -- .../admin/docs/guides/guides.component.ts | 6 + .../admin/docs/guides/guides.module.ts | 2 + .../admin/docs/guides/guides.routing.ts | 5 + src/assets/i18n/en.json | 5 + src/assets/i18n/tr.json | 5 + src/assets/images/flags/TR.svg | 14 + src/assets/images/flags/US.svg | 11 + .../flags/where-to-find-other-flags.txt | 5 + transloco.config.js | 3 + 58 files changed, 729 insertions(+), 505 deletions(-) create mode 100644 src/app/core/transloco/transloco.http-loader.ts create mode 100644 src/app/core/transloco/transloco.module.ts create mode 100644 src/app/layout/common/language/language.component.html create mode 100644 src/app/layout/common/language/language.component.ts create mode 100644 src/app/layout/common/language/language.module.ts create mode 100644 src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html create mode 100644 src/app/modules/admin/docs/guides/customization/multi-language/multi-language.ts create mode 100644 src/assets/i18n/en.json create mode 100644 src/assets/i18n/tr.json create mode 100644 src/assets/images/flags/TR.svg create mode 100644 src/assets/images/flags/US.svg create mode 100644 src/assets/images/flags/where-to-find-other-flags.txt create mode 100644 transloco.config.js diff --git a/CREDITS b/CREDITS index f14feeb0..6fef4f16 100644 --- a/CREDITS +++ b/CREDITS @@ -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/ diff --git a/package-lock.json b/package-lock.json index 54506413..01fec92f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@fuse/demo", - "version": "12.3.0", + "version": "13.0.0", "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", @@ -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", @@ -2498,14 +2606,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" } @@ -2848,8 +2954,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 +3151,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 +3305,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 +3353,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", @@ -3347,8 +3449,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 +3565,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 +3572,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 +3672,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 +4455,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 +4496,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 +4503,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 +4827,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 +4971,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 +5046,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", @@ -5880,12 +5972,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 +6089,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 +6171,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 +6211,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 +6382,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 +6804,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 +6892,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 +6900,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 +7045,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 +7185,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 +7518,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 +7557,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 +7961,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 +8014,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 +8053,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", @@ -8392,7 +8480,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" } @@ -9017,7 +9104,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 +9258,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 +9266,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 +9291,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 +9335,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 +9372,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 +9464,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 +9518,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", @@ -12076,6 +12154,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 +12278,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 +12289,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 +12327,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 +12781,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 +12845,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", @@ -13223,7 +13381,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 +13428,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 +13555,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 +14420,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 +15048,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 +15158,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 +15194,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 +15205,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", diff --git a/package.json b/package.json index 7f696819..f14b725f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@fullcalendar/moment": "4.4.2", "@fullcalendar/rrule": "4.4.2", "@fullcalendar/timegrid": "4.4.2", + "@ngneat/transloco": "2.20.1", "apexcharts": "3.26.2", "crypto-js": "3.3.0", "highlight.js": "10.7.2", diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 618a973d..83fcb1ad 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,11 +1,13 @@ import { NgModule, Optional, SkipSelf } from '@angular/core'; 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: [ AuthModule, - IconsModule + IconsModule, + TranslocoCoreModule ] }) export class CoreModule diff --git a/src/app/core/transloco/transloco.http-loader.ts b/src/app/core/transloco/transloco.http-loader.ts new file mode 100644 index 00000000..378bb165 --- /dev/null +++ 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 + { + return this._httpClient.get(`/assets/i18n/${lang}.json`); + } +} diff --git a/src/app/core/transloco/transloco.module.ts b/src/app/core/transloco/transloco.module.ts new file mode 100644 index 00000000..067244ce --- /dev/null +++ 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 => { + const defaultLang = translocoService.getDefaultLang(); + translocoService.setActiveLang(defaultLang); + return translocoService.load(defaultLang).toPromise(); + }, + multi : true + } + ] +}) +export class TranslocoCoreModule +{ +} diff --git a/src/app/layout/common/language/language.component.html b/src/app/layout/common/language/language.component.html new file mode 100644 index 00000000..cbb1a54a --- /dev/null +++ b/src/app/layout/common/language/language.component.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + diff --git a/src/app/layout/common/language/language.component.ts b/src/app/layout/common/language/language.component.ts new file mode 100644 index 00000000..3edbe2a0 --- /dev/null +++ b/src/app/layout/common/language/language.component.ts @@ -0,0 +1,142 @@ +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); + } + + // ----------------------------------------------------------------------------------------------------- + // @ 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('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(); + }); + } + } +} diff --git a/src/app/layout/common/language/language.module.ts b/src/app/layout/common/language/language.module.ts new file mode 100644 index 00000000..7c0e3fbe --- /dev/null +++ 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 +{ +} diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.html b/src/app/layout/layouts/horizontal/centered/centered.component.html index 87f3b332..cb5344bc 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.component.html +++ b/src/app/layout/layouts/horizontal/centered/centered.component.html @@ -63,6 +63,7 @@
    + diff --git a/src/app/layout/layouts/horizontal/centered/centered.module.ts b/src/app/layout/layouts/horizontal/centered/centered.module.ts index 450eda48..4a93eefb 100644 --- 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, diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html index fac87df3..cd2dafc0 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html @@ -46,6 +46,7 @@
    + diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts index 4fe29e6c..b930680c 100644 --- 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, diff --git a/src/app/layout/layouts/horizontal/material/material.component.html b/src/app/layout/layouts/horizontal/material/material.component.html index 6e385702..95842048 100644 --- a/src/app/layout/layouts/horizontal/material/material.component.html +++ b/src/app/layout/layouts/horizontal/material/material.component.html @@ -52,6 +52,7 @@
    + diff --git a/src/app/layout/layouts/horizontal/material/material.module.ts b/src/app/layout/layouts/horizontal/material/material.module.ts index 1a2de438..778cd49e 100644 --- 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, diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html index 502e0179..65a7690d 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.component.html +++ b/src/app/layout/layouts/horizontal/modern/modern.component.html @@ -55,6 +55,7 @@
    + diff --git a/src/app/layout/layouts/horizontal/modern/modern.module.ts b/src/app/layout/layouts/horizontal/modern/modern.module.ts index 9e8a88a6..413ba425 100644 --- 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, diff --git a/src/app/layout/layouts/vertical/classic/classic.component.html b/src/app/layout/layouts/vertical/classic/classic.component.html index 5eaf76da..ce44ef57 100644 --- a/src/app/layout/layouts/vertical/classic/classic.component.html +++ b/src/app/layout/layouts/vertical/classic/classic.component.html @@ -36,6 +36,7 @@
    + diff --git a/src/app/layout/layouts/vertical/classic/classic.module.ts b/src/app/layout/layouts/vertical/classic/classic.module.ts index 764838e0..b982527a 100644 --- 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, diff --git a/src/app/layout/layouts/vertical/classy/classy.component.html b/src/app/layout/layouts/vertical/classy/classy.component.html index d64cee03..608c966e 100644 --- a/src/app/layout/layouts/vertical/classy/classy.component.html +++ b/src/app/layout/layouts/vertical/classy/classy.component.html @@ -66,6 +66,7 @@
    + diff --git a/src/app/layout/layouts/vertical/classy/classy.module.ts b/src/app/layout/layouts/vertical/classy/classy.module.ts index bde2c852..482738ec 100644 --- 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, diff --git a/src/app/layout/layouts/vertical/compact/compact.component.html b/src/app/layout/layouts/vertical/compact/compact.component.html index a47272a0..e7edd79a 100644 --- a/src/app/layout/layouts/vertical/compact/compact.component.html +++ b/src/app/layout/layouts/vertical/compact/compact.component.html @@ -31,6 +31,7 @@
    + diff --git a/src/app/layout/layouts/vertical/compact/compact.module.ts b/src/app/layout/layouts/vertical/compact/compact.module.ts index 873a4d15..54d5560f 100644 --- 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, diff --git a/src/app/layout/layouts/vertical/dense/dense.component.html b/src/app/layout/layouts/vertical/dense/dense.component.html index 10e3bcd6..1e51760f 100644 --- a/src/app/layout/layouts/vertical/dense/dense.component.html +++ b/src/app/layout/layouts/vertical/dense/dense.component.html @@ -40,6 +40,7 @@
    + diff --git a/src/app/layout/layouts/vertical/dense/dense.module.ts b/src/app/layout/layouts/vertical/dense/dense.module.ts index 2d3e9f03..da0ed28f 100644 --- 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, diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html index 59608b1a..02f02c50 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html @@ -45,6 +45,7 @@
    + diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts index c1f0d61f..c6af7139 100644 --- 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, diff --git a/src/app/layout/layouts/vertical/thin/thin.component.html b/src/app/layout/layouts/vertical/thin/thin.component.html index 5ebc6e43..b870e693 100644 --- a/src/app/layout/layouts/vertical/thin/thin.component.html +++ b/src/app/layout/layouts/vertical/thin/thin.component.html @@ -32,6 +32,7 @@
    + diff --git a/src/app/layout/layouts/vertical/thin/thin.module.ts b/src/app/layout/layouts/vertical/thin/thin.module.ts index a9231930..347aabf8 100644 --- 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, diff --git a/src/app/modules/admin/dashboards/project/project.component.html b/src/app/modules/admin/dashboards/project/project.component.html index e60d866a..c9c5a428 100644 --- a/src/app/modules/admin/dashboards/project/project.component.html +++ b/src/app/modules/admin/dashboards/project/project.component.html @@ -12,7 +12,9 @@ src="assets/images/avatars/brian-hughes.jpg">
    -
    Welcome back, Brian!
    + +
    {{t('welcome-back')}}, Brian!
    +
    - - -
    - - - - -
    -
    Previous
    -
    Splash Screen
    -
    -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/customization/component-theming/component-theming.html b/src/app/modules/admin/docs/guides/customization/component-theming/component-theming.html index d25a23d2..04d07a82 100644 --- a/src/app/modules/admin/docs/guides/customization/component-theming/component-theming.html +++ b/src/app/modules/admin/docs/guides/customization/component-theming/component-theming.html @@ -156,33 +156,6 @@ - -
    - - - - -
    -
    Previous
    -
    Theming
    -
    -     - - - -
    -
    Next
    -
    Splash Screen
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html b/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html new file mode 100644 index 00000000..596782ba --- /dev/null +++ b/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html @@ -0,0 +1,76 @@ +
    + + +
    +
    + +
    + +
    + + Guides +
    +
    + + Customization +
    +
    + +
    +

    + Multi Language +

    +
    +
    + +
    + +
    + +

    + Fuse uses Transloco library for the multi language support. +

    + +

    Official documentation

    +

    + You can access the official documentation of Transloco over here: https://ngneat.github.io/transloco/docs/installation +

    +

    + Other than the initial setup, Fuse doesn't introduce anything to Transloco or change any of its functionality. You can follow the official + documentation to get started. +

    + +

    Translating the navigation

    +

    + Since FuseNavigation supports runtime data swapping, you can replace the navigation data either partially or completely when the language changes. + The LanguageComponent is a suitable place to do this and it's located at src/app/layout/common/language. +

    + +

    Removing Transloco

    +

    + If you don't need multi language support in your project, you may remove the Transloco support. Here's a step by step guide to remove + the Transloco from Fuse: +

    +
      +
    1. Navigate to src/app/core/core.module.ts file and remove imports of TranslocoCoreModule
      2. +
    2. Remove the src/app/core/transloco directory
      3. +
    3. Do a project wide search for <language></language> and remove all instances
      4. +
    4. Do a project wide search for LanguageModule and remove all imports
      5. +
    5. Remove the src/app/layout/common/language directory
      6. +
    6. Finally navigate to the package.json file, remove the "@ngneat/transloco" from dependencies list and run npm install command
      7. +
    + +
    + +
    diff --git a/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.ts b/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.ts new file mode 100644 index 00000000..19d87f6d --- /dev/null +++ b/src/app/modules/admin/docs/guides/customization/multi-language/multi-language.ts @@ -0,0 +1,30 @@ +import { Component } from '@angular/core'; +import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'; + +@Component({ + selector : 'multi-language', + templateUrl: './multi-language.html', + styles : [''] +}) +export class MultiLanguageCustomizationComponent +{ + /** + * Constructor + */ + constructor(private _guidesComponent: GuidesComponent) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the drawer + */ + toggleDrawer(): void + { + // Toggle the drawer + this._guidesComponent.matDrawer.toggle(); + } +} diff --git a/src/app/modules/admin/docs/guides/customization/page-layouts/page-layouts.html b/src/app/modules/admin/docs/guides/customization/page-layouts/page-layouts.html index 21c2e9de..7f04ce9b 100644 --- a/src/app/modules/admin/docs/guides/customization/page-layouts/page-layouts.html +++ b/src/app/modules/admin/docs/guides/customization/page-layouts/page-layouts.html @@ -50,33 +50,6 @@ All page layouts can be found within the Demo app, you can try them over there and choose one that fits your needs.

    - -
    - - - - -
    -
    Previous
    -
    Theme Layouts
    -
    -     - - - -
    -
    Next
    -
    TailwindCSS
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html b/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html index ef9b9e06..fad8bd18 100644 --- a/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html +++ b/src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.html @@ -109,33 +109,6 @@ - -
    - - - - -
    -
    Previous
    -
    Component Theming
    -
    -     - - - -
    -
    Next
    -
    JWT
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.html b/src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.html index bd878816..7095fc65 100644 --- a/src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.html +++ b/src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.html @@ -85,33 +85,6 @@

    - -
    - - - - -
    -
    Previous
    -
    Page Layouts
    -
    -     - - - -
    -
    Next
    -
    Theming
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html index 61f9f2a8..ce39fb63 100644 --- a/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html +++ b/src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html @@ -106,33 +106,6 @@ removing the LayoutComponent and using the individual layouts by themselves is not possible.

    - -
    - - - - -
    -
    Previous
    -
    Updating
    -
    -     - - - -
    -
    Next
    -
    Page Layouts
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/customization/theming/theming.html b/src/app/modules/admin/docs/guides/customization/theming/theming.html index 0af026e6..0f9eacd9 100644 --- a/src/app/modules/admin/docs/guides/customization/theming/theming.html +++ b/src/app/modules/admin/docs/guides/customization/theming/theming.html @@ -352,33 +352,6 @@ schemes depending on the user's operating system's setting.

    - -
    - - - - -
    -
    Previous
    -
    TailwindCSS
    -
    -     - - - -
    -
    Next
    -
    Component Theming
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html b/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html index 4b96d15b..2fced131 100644 --- a/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html +++ b/src/app/modules/admin/docs/guides/development/component-structure/component-structure.html @@ -148,33 +148,6 @@ layouts include common components like Navigation, Header and Footer.

    - -
    - - - - -
    -
    Previous
    -
    Directory Structure
    -
    -     - - - -
    -
    Next
    -
    Starter Kit
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/development/deployment/deployment.html b/src/app/modules/admin/docs/guides/development/deployment/deployment.html index 4d1af7d0..c35dd57b 100644 --- a/src/app/modules/admin/docs/guides/development/deployment/deployment.html +++ b/src/app/modules/admin/docs/guides/development/deployment/deployment.html @@ -69,33 +69,6 @@ you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again. - -
    - - - - -
    -
    Previous
    -
    Starter Kit
    -
    -     - - - -
    -
    Next
    -
    Updating
    -
    - -     - -
    -
    diff --git a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html index 32281f41..beec2abb 100644 --- a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html +++ b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html @@ -304,33 +304,6 @@ - -
    - - - - -
    -
    Previous
    -
    Serving
    -
    -     - - - -
    -
    Next
    -
    Component Structure
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/development/starter-kit/starter-kit.html b/src/app/modules/admin/docs/guides/development/starter-kit/starter-kit.html index 75c13b63..e02fe0d8 100644 --- a/src/app/modules/admin/docs/guides/development/starter-kit/starter-kit.html +++ b/src/app/modules/admin/docs/guides/development/starter-kit/starter-kit.html @@ -48,33 +48,6 @@ lot more than usual.

    - -
    - - - - -
    -
    Previous
    -
    Component Structure
    -
    -     - - - -
    -
    Next
    -
    Deployment
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/development/updating/updating.html b/src/app/modules/admin/docs/guides/development/updating/updating.html index 63f986ea..f5ae60be 100644 --- a/src/app/modules/admin/docs/guides/development/updating/updating.html +++ b/src/app/modules/admin/docs/guides/development/updating/updating.html @@ -63,33 +63,6 @@ setup or merge (and resolve conflicts) through Github. Every release is tagged and available under the Releases tab of Fuse's Github repo.

    - -
    - - - - -
    -
    Previous
    -
    Deployment
    -
    -     - - - -
    -
    Next
    -
    Theme Layouts
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/getting-started/installation/installation.html b/src/app/modules/admin/docs/guides/getting-started/installation/installation.html index fec2c653..80f81e2b 100644 --- a/src/app/modules/admin/docs/guides/getting-started/installation/installation.html +++ b/src/app/modules/admin/docs/guides/getting-started/installation/installation.html @@ -121,33 +121,6 @@     - -
    - - - - -
    -
    Previous
    -
    Prerequisites
    -
    -     - - - -
    -
    Next
    -
    Serving
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/getting-started/introduction/introduction.html b/src/app/modules/admin/docs/guides/getting-started/introduction/introduction.html index fa567e52..9acb9605 100644 --- a/src/app/modules/admin/docs/guides/getting-started/introduction/introduction.html +++ b/src/app/modules/admin/docs/guides/getting-started/introduction/introduction.html @@ -84,22 +84,6 @@ - -
    - - - -
    -
    Next
    -
    Prerequisites
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/getting-started/prerequisites/prerequisites.html b/src/app/modules/admin/docs/guides/getting-started/prerequisites/prerequisites.html index 4af602f8..e73b0033 100644 --- a/src/app/modules/admin/docs/guides/getting-started/prerequisites/prerequisites.html +++ b/src/app/modules/admin/docs/guides/getting-started/prerequisites/prerequisites.html @@ -79,33 +79,6 @@ npm install -g @angular/cli - -
    - - - - -
    -
    Previous
    -
    Introduction
    -
    -     - - - -
    -
    Next
    -
    Installation
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/getting-started/serving/serving.html b/src/app/modules/admin/docs/guides/getting-started/serving/serving.html index bf753db9..f6117856 100644 --- a/src/app/modules/admin/docs/guides/getting-started/serving/serving.html +++ b/src/app/modules/admin/docs/guides/getting-started/serving/serving.html @@ -71,33 +71,6 @@ you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.     - -
    - - - - -
    -
    Previous
    -
    Installation
    -
    -     - - - -
    -
    Next
    -
    Directory Structure
    -
    - -     - -
    - diff --git a/src/app/modules/admin/docs/guides/guides.component.ts b/src/app/modules/admin/docs/guides/guides.component.ts index f55bd65d..6a22c7c2 100644 --- a/src/app/modules/admin/docs/guides/guides.component.ts +++ b/src/app/modules/admin/docs/guides/guides.component.ts @@ -137,6 +137,12 @@ export class GuidesComponent implements OnInit, OnDestroy title: 'Splash screen', type : 'basic', link : '/docs/guides/customization/splash-screen' + }, + { + id : 'customization.multi-language', + title: 'Multi language', + type : 'basic', + link : '/docs/guides/customization/multi-language' } ] }, diff --git a/src/app/modules/admin/docs/guides/guides.module.ts b/src/app/modules/admin/docs/guides/guides.module.ts index c4d9c2dc..ac3a4acb 100644 --- a/src/app/modules/admin/docs/guides/guides.module.ts +++ b/src/app/modules/admin/docs/guides/guides.module.ts @@ -25,6 +25,7 @@ import { TailwindCSSComponent } from 'app/modules/admin/docs/guides/customizatio import { ThemingComponent } from 'app/modules/admin/docs/guides/customization/theming/theming'; import { ComponentThemingComponent } from 'app/modules/admin/docs/guides/customization/component-theming/component-theming'; import { SplashScreenCustomizationComponent } from 'app/modules/admin/docs/guides/customization/splash-screen/splash-screen'; +import { MultiLanguageCustomizationComponent } from 'app/modules/admin/docs/guides/customization/multi-language/multi-language'; import { JwtComponent } from 'app/modules/admin/docs/guides/authentication/jwt/jwt'; import { guidesRoutes } from 'app/modules/admin/docs/guides/guides.routing'; @@ -46,6 +47,7 @@ import { guidesRoutes } from 'app/modules/admin/docs/guides/guides.routing'; ThemingComponent, ComponentThemingComponent, SplashScreenCustomizationComponent, + MultiLanguageCustomizationComponent, JwtComponent ], imports : [ diff --git a/src/app/modules/admin/docs/guides/guides.routing.ts b/src/app/modules/admin/docs/guides/guides.routing.ts index a9fc313b..21507e13 100644 --- a/src/app/modules/admin/docs/guides/guides.routing.ts +++ b/src/app/modules/admin/docs/guides/guides.routing.ts @@ -15,6 +15,7 @@ import { TailwindCSSComponent } from 'app/modules/admin/docs/guides/customizatio import { ThemingComponent } from 'app/modules/admin/docs/guides/customization/theming/theming'; import { ComponentThemingComponent } from 'app/modules/admin/docs/guides/customization/component-theming/component-theming'; import { SplashScreenCustomizationComponent } from 'app/modules/admin/docs/guides/customization/splash-screen/splash-screen'; +import { MultiLanguageCustomizationComponent } from 'app/modules/admin/docs/guides/customization/multi-language/multi-language'; import { JwtComponent } from 'app/modules/admin/docs/guides/authentication/jwt/jwt'; export const guidesRoutes: Route[] = [ @@ -114,6 +115,10 @@ export const guidesRoutes: Route[] = [ { path : 'splash-screen', component: SplashScreenCustomizationComponent + }, + { + path : 'multi-language', + component: MultiLanguageCustomizationComponent } ] }, diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json new file mode 100644 index 00000000..66a901c5 --- /dev/null +++ b/src/assets/i18n/en.json @@ -0,0 +1,5 @@ +{ + "welcome-back": "Welcome back", + "Project": "Project", + "Analytics": "Analytics" +} diff --git a/src/assets/i18n/tr.json b/src/assets/i18n/tr.json new file mode 100644 index 00000000..8fbd69ad --- /dev/null +++ b/src/assets/i18n/tr.json @@ -0,0 +1,5 @@ +{ + "welcome-back": "Hoşgeldin", + "Project": "Proje", + "Analytics": "Analitik" +} diff --git a/src/assets/images/flags/TR.svg b/src/assets/images/flags/TR.svg new file mode 100644 index 00000000..f0925490 --- /dev/null +++ b/src/assets/images/flags/TR.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/flags/US.svg b/src/assets/images/flags/US.svg new file mode 100644 index 00000000..847c732f --- /dev/null +++ b/src/assets/images/flags/US.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/flags/where-to-find-other-flags.txt b/src/assets/images/flags/where-to-find-other-flags.txt new file mode 100644 index 00000000..dcee53a6 --- /dev/null +++ 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 diff --git a/transloco.config.js b/transloco.config.js new file mode 100644 index 00000000..29cd39a1 --- /dev/null +++ b/transloco.config.js @@ -0,0 +1,3 @@ +module.exports = { + rootTranslationsPath: 'src/assets/i18n/' +}; From fd859a8663f98a41687c30a4b4e1e85fbf6a9ced Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 15:18:44 +0300 Subject: [PATCH 13/14] (comments) Fixed: The word 'data' replaced with 'mock-api' by mistake in the past causing a lot of comments to make no sense --- src/@fuse/lib/mock-api/mock-api.interceptor.ts | 4 ++-- .../common/shortcuts/shortcuts.component.ts | 4 ++-- src/app/layout/layout.component.ts | 2 +- .../horizontal/centered/centered.component.ts | 2 +- .../enterprise/enterprise.component.ts | 2 +- .../horizontal/material/material.component.ts | 2 +- .../horizontal/modern/modern.component.ts | 2 +- .../vertical/classic/classic.component.ts | 2 +- .../layouts/vertical/classy/classy.component.ts | 2 +- .../vertical/compact/compact.component.ts | 2 +- .../layouts/vertical/dense/dense.component.ts | 2 +- .../vertical/futuristic/futuristic.component.ts | 2 +- .../layouts/vertical/thin/thin.component.ts | 2 +- .../admin/apps/calendar/calendar.component.ts | 2 +- .../admin/apps/calendar/calendar.service.ts | 4 ++-- .../inventory/list/inventory.component.ts | 4 ++-- .../apps/mailbox/sidebar/sidebar.component.ts | 16 ++++++++-------- .../directory-structure/directory-structure.ts | 4 ++-- 18 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/@fuse/lib/mock-api/mock-api.interceptor.ts b/src/@fuse/lib/mock-api/mock-api.interceptor.ts index 4673e0d1..ab9dd680 100644 --- 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] diff --git a/src/app/layout/common/shortcuts/shortcuts.component.ts b/src/app/layout/common/shortcuts/shortcuts.component.ts index f28f01f9..92d2e8be 100644 --- 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 diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts index b7726faf..1858e61c 100644 --- 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 diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.ts b/src/app/layout/layouts/horizontal/centered/centered.component.ts index 513ffa98..94b0f5dc 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.component.ts +++ b/src/app/layout/layouts/horizontal/centered/centered.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts index 73b7ca19..6d5705a7 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/horizontal/material/material.component.ts b/src/app/layout/layouts/horizontal/material/material.component.ts index 4bb450a5..71478603 100644 --- a/src/app/layout/layouts/horizontal/material/material.component.ts +++ b/src/app/layout/layouts/horizontal/material/material.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.ts b/src/app/layout/layouts/horizontal/modern/modern.component.ts index 496c1837..d103b7b8 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.component.ts +++ b/src/app/layout/layouts/horizontal/modern/modern.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/vertical/classic/classic.component.ts b/src/app/layout/layouts/vertical/classic/classic.component.ts index 629cbb56..39687b25 100644 --- a/src/app/layout/layouts/vertical/classic/classic.component.ts +++ b/src/app/layout/layouts/vertical/classic/classic.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/vertical/classy/classy.component.ts b/src/app/layout/layouts/vertical/classy/classy.component.ts index 2c1d5c55..231922ad 100644 --- a/src/app/layout/layouts/vertical/classy/classy.component.ts +++ b/src/app/layout/layouts/vertical/classy/classy.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/vertical/compact/compact.component.ts b/src/app/layout/layouts/vertical/compact/compact.component.ts index 884e7eca..4616d2f3 100644 --- a/src/app/layout/layouts/vertical/compact/compact.component.ts +++ b/src/app/layout/layouts/vertical/compact/compact.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/vertical/dense/dense.component.ts b/src/app/layout/layouts/vertical/dense/dense.component.ts index 624db14d..bd0617bb 100644 --- a/src/app/layout/layouts/vertical/dense/dense.component.ts +++ b/src/app/layout/layouts/vertical/dense/dense.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts index b4bdca90..a9de60a0 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts @@ -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; }); diff --git a/src/app/layout/layouts/vertical/thin/thin.component.ts b/src/app/layout/layouts/vertical/thin/thin.component.ts index b56bdf62..a1173d67 100644 --- a/src/app/layout/layouts/vertical/thin/thin.component.ts +++ b/src/app/layout/layouts/vertical/thin/thin.component.ts @@ -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; }); diff --git a/src/app/modules/admin/apps/calendar/calendar.component.ts b/src/app/modules/admin/apps/calendar/calendar.component.ts index e95fb418..0b9bac3f 100644 --- a/src/app/modules/admin/apps/calendar/calendar.component.ts +++ b/src/app/modules/admin/apps/calendar/calendar.component.ts @@ -271,7 +271,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy this.viewTitle = this._fullCalendarApi.view.title; // Get the view's current start and end dates, add/subtract - // 60 days to create a ~150 days period to fetch the mock-api for + // 60 days to create a ~150 days period to fetch the data for const viewStart = moment(this._fullCalendarApi.view.currentStart).subtract(60, 'days'); const viewEnd = moment(this._fullCalendarApi.view.currentEnd).add(60, 'days'); diff --git a/src/app/modules/admin/apps/calendar/calendar.service.ts b/src/app/modules/admin/apps/calendar/calendar.service.ts index 8150e0b1..5aa778a3 100644 --- a/src/app/modules/admin/apps/calendar/calendar.service.ts +++ b/src/app/modules/admin/apps/calendar/calendar.service.ts @@ -265,7 +265,7 @@ export class CalendarService // Return if remaining days is bigger than the number // of days to prefetch. This means we were already been - // there and fetched the events mock-api so no need for doing + // there and fetched the events data so no need for doing // it again. if ( remainingDays >= this._numberOfDaysToPrefetch ) { @@ -292,7 +292,7 @@ export class CalendarService // Return if remaining days is bigger than the number // of days to prefetch. This means we were already been - // there and fetched the events mock-api so no need for doing + // there and fetched the events data so no need for doing // it again. if ( remainingDays >= this._numberOfDaysToPrefetch ) { diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts index 9b3109bc..1c4398a3 100644 --- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts +++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts @@ -484,7 +484,7 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy } /** - * Update the selected product using the form mock-api + * Update the selected product using the form data */ updateSelectedProduct(): void { @@ -503,7 +503,7 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy } /** - * Delete the selected product using the form mock-api + * Delete the selected product using the form data */ deleteSelectedProduct(): void { diff --git a/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts b/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts index 0f145622..38fc64c8 100644 --- a/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts +++ b/src/app/modules/admin/apps/mailbox/sidebar/sidebar.component.ts @@ -122,7 +122,7 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy */ private _generateFoldersMenuLinks(): void { - // Reset the folders menu mock-api + // Reset the folders menu data this._foldersMenuData = []; // Iterate through the folders @@ -146,11 +146,11 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy }; } - // Push the menu item to the folders menu mock-api + // Push the menu item to the folders menu data this._foldersMenuData.push(menuItem); }); - // Update the menu mock-api + // Update the menu data this._updateMenuData(); } @@ -177,7 +177,7 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy }); }); - // Update the menu mock-api + // Update the menu data this._updateMenuData(); } @@ -207,7 +207,7 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy }); }); - // Update the menu mock-api + // Update the menu data this._updateMenuData(); } @@ -226,12 +226,12 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy link : '/apps/mailbox/settings' }); - // Update the menu mock-api + // Update the menu data this._updateMenuData(); } /** - * Update the menu mock-api + * Update the menu data * * @private */ @@ -278,7 +278,7 @@ export class MailboxSidebarComponent implements OnInit, OnDestroy // Get the inbox folder const inboxFolder = this.folders.find(folder => folder.slug === 'inbox'); - // Get the component -> navigation mock-api -> item + // Get the component -> navigation data -> item const mainNavigationComponent = this._fuseNavigationService.getComponent('mainNavigation'); // If the main navigation component exists... diff --git a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts index 998548c0..c9cb0b0f 100644 --- a/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts +++ b/src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts @@ -239,7 +239,7 @@ export class DirectoryStructureComponent implements OnInit */ createTree(data): { dataSource: any; treeControl: any } { - // Create tree control and mock-api source + // Create tree control and data source const treeControl = new FlatTreeControl(node => node.level, node => node.expandable); const dataSource = new MatTreeFlatDataSource( treeControl, @@ -252,7 +252,7 @@ export class DirectoryStructureComponent implements OnInit node => node.level, node => node.expandable, node => node.children) ); - // Set the mock-api + // Set the data dataSource.data = data; return { From e4df408abe4d36ef9444e136ae2c06dcb7b86eca Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 18 May 2021 16:09:31 +0300 Subject: [PATCH 14/14] (FuseNavigation) Added support for new "isActiveMatchOptions" for Basic navigation items; https://github.com/angular/angular/pull/40303 (docs) Updated FuseNavigation documentation --- .../components/basic/basic.component.html | 4 +-- .../components/basic/basic.component.ts | 11 ++++++- .../components/navigation/navigation.types.ts | 3 ++ .../components/basic/basic.component.html | 4 +-- .../components/basic/basic.component.ts | 7 +++++ src/@fuse/services/utils/utils.service.ts | 31 +++++++++++++++++++ .../navigation/navigation.component.html | 17 +++++++++- 7 files changed, 71 insertions(+), 6 deletions(-) diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html index 14f8acd9..1d136ccf 100644 --- 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]="item.isActiveMatchOptions"> @@ -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]="item.isActiveMatchOptions" (click)="item.function(item)"> diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts index 8d4e2883..e32f5819 100644 --- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts +++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts @@ -4,6 +4,7 @@ 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', @@ -24,7 +25,8 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes */ constructor( private _changeDetectorRef: ChangeDetectorRef, - private _fuseNavigationService: FuseNavigationService + private _fuseNavigationService: FuseNavigationService, + private _fuseUtilsService: FuseUtilsService ) { } @@ -38,6 +40,13 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes */ ngOnInit(): void { + // If the item doesn't have "isActiveMatchOptions", + // set it using the equivalent form of "item.exactMatch" + if ( !this.item.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); diff --git a/src/@fuse/components/navigation/navigation.types.ts b/src/@fuse/components/navigation/navigation.types.ts index 2d729842..32b37ae4 100644 --- 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; diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html index 364215c1..7b255875 100644 --- 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]="item.isActiveMatchOptions"> @@ -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]="item.isActiveMatchOptions" (click)="item.function(item)"> diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts index 8fad0032..556e8d5e 100644 --- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts +++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts @@ -40,6 +40,13 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr */ ngOnInit(): void { + // If the item doesn't have "isActiveMatchOptions", + // set it using the equivalent form of "item.exactMatch" + if ( !this.item.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); diff --git a/src/@fuse/services/utils/utils.service.ts b/src/@fuse/services/utils/utils.service.ts index 643aa03f..0c307ee6 100644 --- 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 // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html index 38ccdca5..257c7b9b 100644 --- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html +++ b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html @@ -97,6 +97,7 @@ link?: string; externalLink?: boolean; exactMatch?: boolean; + isActiveMatchOptions?: IsActiveMatchOptions; function?: (item: FuseNavigationItem) => void; classes?: { title?: string; @@ -203,7 +204,21 @@
    exactMatch
    - Sets the exactMatch parameter on the router link active options. + Sets the exact parameter on the [routerLinkActiveOptions]. + + + + +
    isActiveMatchOptions
    + + + Sets the isActiveMatchOptions object on the [routerLinkActiveOptions]. If provided, exactMatch option will be + ignored. + https://angular.io/api/router/IsActiveMatchOptions +