Merge branch 'master' into skeleton

# Conflicts: # src/app/app.module.ts # src/app/app.theme.scss # src/app/fake-db/calendar.ts # src/app/layout/components/chat-panel/chat-panel.component.ts # src/app/main/apps/apps.module.ts # src/app/main/apps/calendar/calendar.component.html # src/app/main/apps/calendar/calendar.component.ts # src/app/main/apps/chat/chat-view/chat-view.component.ts # src/app/main/apps/contacts/contact-list/contact-list.component.html # src/app/main/apps/contacts/contact-list/contact-list.component.ts # src/app/main/apps/file-manager/file-list/file-list.component.html # src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html # src/app/main/apps/mail/mail-list/mail-list.component.html # src/app/main/apps/scrumboard/board/add-list/add-list.component.ts # src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts # src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts # src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts # src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts # src/app/main/apps/scrumboard/board/list/list.component.ts # src/app/main/apps/todo/todo-details/todo-details.component.ts # src/app/main/apps/todo/todo-list/todo-list.component.html # src/app/main/documentation/changelog/changelog.component.html # src/app/main/documentation/documentation.module.ts # src/app/main/pages/coming-soon/coming-soon.component.html # src/app/main/ui/icons/icons.component.html # src/app/main/ui/ui.module.ts # src/app/navigation/navigation.ts # src/app/store/reducers/index.ts
2025-01-09 12:05:08 +00:00 · 2020-02-07 08:51:26 +03:00 · 2020-02-07 08:51:26 +03:00 · a2abf298b3
commit a2abf298b3
parent 88949b4ab6 f56c989563
16 changed files with 6237 additions and 2810 deletions
--- a/angular.json
+++ b/angular.json
@ -17,6 +17,7 @@
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
+            "aot": true,
                        "outputPath": "dist/fuse",
                        "index": "src/index.html",
                        "main": "src/main.ts",
@ -54,14 +55,30 @@
                                    "type": "initial",
                                    "maximumWarning": "4mb",
                                    "maximumError": "6mb"
-                                }
+                                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
                            ]
                        },
                        "ec": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
                            "sourceMap": true,
                            "extractCss": true
                        },
                        "hmr": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "fuse",
-    "version": "8.1.2",
+    "version": "9.0.0",
    "license": "https://themeforest.net/licenses/terms/regular",
    "scripts": {
        "ng": "ng",
@ -18,71 +18,71 @@
    },
    "private": true,
    "dependencies": {
-        "@agm/core": "1.0.0-beta.7",
-        "@angular/animations": "8.1.2",
-        "@angular/cdk": "8.1.1",
-        "@angular/common": "8.1.2",
-        "@angular/compiler": "8.1.2",
-        "@angular/core": "8.1.2",
-        "@angular/flex-layout": "8.0.0-beta.26",
-        "@angular/forms": "8.1.2",
-        "@angular/material": "8.1.1",
-        "@angular/material-moment-adapter": "8.1.1",
-        "@angular/platform-browser": "8.1.2",
-        "@angular/platform-browser-dynamic": "8.1.2",
-        "@angular/router": "8.1.2",
-        "@ngrx/effects": "8.1.0",
-        "@ngrx/router-store": "8.1.0",
-        "@ngrx/store": "8.1.0",
-        "@ngrx/store-devtools": "8.1.0",
-        "@ngx-translate/core": "11.0.1",
+        "@agm/core": "1.1.0",
+        "@angular/animations": "9.0.0",
+        "@angular/cdk": "9.0.0",
+        "@angular/common": "9.0.0",
+        "@angular/compiler": "9.0.0",
+        "@angular/core": "9.0.0",
+        "@angular/flex-layout": "9.0.0-beta.29",
+        "@angular/forms": "9.0.0",
+        "@angular/material": "9.0.0",
+        "@angular/material-moment-adapter": "9.0.0",
+        "@angular/platform-browser": "9.0.0",
+        "@angular/platform-browser-dynamic": "9.0.0",
+        "@angular/router": "9.0.0",
+        "@ngrx/effects": "8.6.0",
+        "@ngrx/router-store": "8.6.0",
+        "@ngrx/store": "8.6.0",
+        "@ngrx/store-devtools": "8.6.0",
+        "@ngx-translate/core": "12.0.0",
        "@swimlane/dragula": "3.8.0",
-        "@swimlane/ngx-charts": "12.0.1",
-        "@swimlane/ngx-datatable": "15.0.2",
-        "@swimlane/ngx-dnd": "8.0.0",
+        "@swimlane/ngx-charts": "13.0.2",
+        "@swimlane/ngx-datatable": "16.0.3",
+        "@swimlane/ngx-dnd": "8.1.0",
        "@types/prismjs": "1.16.0",
-        "angular-calendar": "0.27.13",
-        "angular-in-memory-web-api": "0.8.0",
-        "chart.js": "2.8.0",
+        "angular-calendar": "0.28.2",
+        "angular-in-memory-web-api": "0.9.0",
+        "chart.js": "2.9.3",
        "classlist.js": "1.1.20150312",
-        "d3": "5.9.7",
-        "date-fns": "1.30.1",
+        "d3": "5.15.0",
+        "date-fns": "2.9.0",
        "hammerjs": "2.0.8",
        "lodash": "4.17.15",
        "moment": "2.24.0",
        "ng2-charts": "2.3.0",
        "ngrx-store-freeze": "0.2.4",
-        "ngx-color-picker": "8.1.0",
-        "ngx-cookie-service": "2.2.0",
+        "ngx-color-picker": "8.2.0",
+        "ngx-cookie-service": "2.3.0",
        "perfect-scrollbar": "1.4.0",
-        "prismjs": "1.16.0",
-        "rxjs": "6.5.2",
+        "prismjs": "1.19.0",
+        "rxjs": "6.5.4",
+        "tslib": "1.10.0",
        "web-animations-js": "2.3.2",
-        "zone.js": "0.9.1"
+        "zone.js": "0.10.2"
    },
    "devDependencies": {
-        "@angular/cli": "8.1.2",
-        "@angular/compiler-cli": "8.1.2",
-        "@angular/language-service": "8.1.2",
-        "@angular-devkit/build-angular": "0.801.2",
+        "@angular/cli": "9.0.1",
+        "@angular/compiler-cli": "9.0.0",
+        "@angular/language-service": "9.0.0",
+        "@angular-devkit/build-angular": "0.900.1",
        "@angularclass/hmr": "2.1.3",
-        "@types/jasmine": "3.3.14",
-        "@types/jasminewd2": "2.0.6",
-        "@types/lodash": "4.14.136",
-        "@types/node": "8.9.5",
-        "codelyzer": "5.1.0",
-        "jasmine-core": "3.4.0",
+        "@types/jasmine": "3.5.2",
+        "@types/jasminewd2": "2.0.8",
+        "@types/lodash": "4.14.149",
+        "@types/node": "12.12.6",
+        "codelyzer": "5.2.1",
+        "jasmine-core": "3.5.0",
        "jasmine-spec-reporter": "4.2.1",
-        "karma": "4.1.0",
-        "karma-chrome-launcher": "2.2.0",
-        "karma-coverage-istanbul-reporter": "2.0.5",
+        "karma": "4.3.0",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-coverage-istanbul-reporter": "2.1.1",
        "karma-jasmine": "2.0.1",
-        "karma-jasmine-html-reporter": "1.4.2",
-        "protractor": "5.4.2",
-        "ts-node": "7.0.1",
-        "tslib": "1.10.0",
-        "tslint": "5.15.0",
-        "typescript": "3.4.5",
-        "webpack-bundle-analyzer": "3.3.2"
+        "karma-jasmine-html-reporter": "1.5.1",
+        "protractor": "5.4.3",
+        "ts-node": "8.3.0",
+        "tslint": "5.18.0",
+        "typescript": "3.7.5",
+        "webpack-bundle-analyzer": "3.6.0"
    }
 }
--- a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
@ -42,10 +42,10 @@

    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
        </span>
        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
    </ng-template>
@ -66,4 +66,4 @@

    </div>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/navigation/horizontal/item/item.component.html
+++ b/src/@fuse/components/navigation/horizontal/item/item.component.html
@ -38,11 +38,11 @@

    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
        </span>
    </ng-template>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
@ -45,10 +45,10 @@

    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
        </span>
        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
    </ng-template>
--- a/src/@fuse/components/navigation/vertical/group/group.component.html
+++ b/src/@fuse/components/navigation/vertical/group/group.component.html
@ -1,7 +1,7 @@
 <ng-container *ngIf="!item.hidden">

    <div class="group-title" [ngClass]="item.classes">
-        <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
+        <span class="hint-text" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
    </div>

    <div class="group-items">
@ -13,4 +13,4 @@
        </ng-container>
    </div>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/navigation/vertical/item/item.component.html
+++ b/src/@fuse/components/navigation/vertical/item/item.component.html
@ -38,11 +38,11 @@

    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
        </span>
    </ng-template>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
    @Input()
    navigation: any;

-    @ViewChild('searchInput', {static: false})
+    @ViewChild('searchInput')
    searchInputField;

-    @ViewChild('shortcuts', {static: false})
+    @ViewChild('shortcuts')
    shortcutsEl: ElementRef;

    // Private
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@ -13,7 +13,7 @@ export class FuseModule
        }
    }

-    static forRoot(config): ModuleWithProviders
+    static forRoot(config): ModuleWithProviders<FuseModule>
    {
        return {
            ngModule : FuseModule,
--- a/src/@fuse/scss/core.scss
+++ b/src/@fuse/scss/core.scss
@ -2,7 +2,7 @@
 // to the core Fuse and Angular Material mixins

 // ngx-datatable
-@import '~@swimlane/ngx-datatable/release/themes/material';
+@import '~@swimlane/ngx-datatable/themes/material';

 // Perfect scrollbar
@import '~perfect-scrollbar/css/perfect-scrollbar';
--- a/src/app/main/ui/angular-material/angular-material.component.html
+++ b/src/app/main/ui/angular-material/angular-material.component.html
@ -0,0 +1,46 @@
+<div id="angular-material" class="page-layout simple tabbed" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
+
+        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
+            <div fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-18">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">User Interface</span>
+            </div>
+            <div class="h1 mt-16">Angular Material</div>
+        </div>
+
+        <a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/components/categories"
+           target="_blank">
+            <mat-icon class="mr-8">link</mat-icon>
+            <span>Reference</span>
+        </a>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <div class="mat-title">Introduction</div>
+        <p>
+            Fuse uses Angular Material as its primary user interface library. It offers form controls, buttons, tabs, sidebars,
+            icons, modals, tooltips, data tables and many more well tested and widely used components.
+        </p>
+
+        <p>
+            Fuse is 100% compatible with all Angular Material components.
+        </p>
+
+        <div class="mat-title mt-32">Official docs</div>
+        <p>
+            Official Angular Material documentation: <a href="https://material.angular.io/components/categories" target="_blank">https://material.angular.io/components/categories</a>
+        </p>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>
--- a/src/app/main/ui/angular-material/angular-material.component.scss
+++ b/src/app/main/ui/angular-material/angular-material.component.scss
@ -0,0 +1,7 @@
+:host {
+
+    .content {
+        max-width: 1200px;
+    }
+
+}
--- a/src/app/main/ui/angular-material/angular-material.component.ts
+++ b/src/app/main/ui/angular-material/angular-material.component.ts
@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'angular-material',
+    templateUrl: './angular-material.component.html',
+    styleUrls  : ['./angular-material.component.scss']
+})
+export class AngularMaterialComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
--- a/src/app/main/ui/angular-material/angular-material.module.ts
+++ b/src/app/main/ui/angular-material/angular-material.module.ts
@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+import { AngularMaterialComponent } from 'app/main/ui/angular-material/angular-material.component';
+
+const routes: Routes = [
+    {
+        path     : 'angular-material',
+        component: AngularMaterialComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        AngularMaterialComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule
+    ]
+})
+export class UIAngularMaterialModule
+{
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -6,11 +6,11 @@
            "node"
        ]
    },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
    "include": [
-        "src/**/*.ts"
-    ],
-    "exclude": [
-        "src/test.ts",
-        "src/**/*.spec.ts"
+        "src/**/*.d.ts"
    ]
 }