[NAE-2444] Upgrade Angular to 17

angular.json

@@ -113,10 +113,17 @@
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
+                        "allowedCommonJsDependencies": [
+                            "moment",
+                            "buffer",
+                            "easymde",
+                            "semver",
+                            "rfdc"
+                        ],
                         "outputPath": "dist/nae-example-app",
                         "index": "projects/nae-example-app/src/index.html",
                         "main": "projects/nae-example-app/src/main.ts",
-                        "polyfills": "projects/nae-example-app/src/polyfills.ts",
+                        "polyfills": ["zone.js"],
                         "tsConfig": "projects/nae-example-app/tsconfig.app.json",
                         "assets": [
                             "projects/nae-example-app/src/favicon.ico",
@@ -168,25 +175,25 @@
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
                     "options": {
-                        "browserTarget": "nae-example-app:build"
+                        "buildTarget": "nae-example-app:build"
                     },
                     "configurations": {
                         "production": {
-                            "browserTarget": "nae-example-app:build:production"
+                            "buildTarget": "nae-example-app:build:production"
                         }
                     }
                 },
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n",
                     "options": {
-                        "browserTarget": "nae-example-app:build"
+                        "buildTarget": "nae-example-app:build"
                     }
                 },
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
                         "main": "projects/nae-example-app/src/test.ts",
-                        "polyfills": "projects/nae-example-app/src/polyfills.ts",
+                        "polyfills": ["zone.js"],
                         "tsConfig": "projects/nae-example-app/tsconfig.spec.json",
                         "karmaConfig": "projects/nae-example-app/karma.conf.js",
                         "assets": [
@@ -227,7 +234,6 @@
             }
         }
     },
-    "defaultProject": "nae-example-app",
     "cli": {
         "analytics": false,
         "defaultCollection": "@angular-eslint/schematics"

nae.json

@@ -321,6 +321,34 @@
                     "routing": {
                         "path": "breadcrumbs"
                     }
+                },
+                "double-menu-tabbed-views": {
+                    "component": {
+                        "class": "TabbedViewsExampleComponent",
+                        "from": "./doc/tabbed-case-view/tabbed-views-example.component"
+                    },
+                    "access": "private",
+                    "navigation": {
+                        "title": "Custom Tabbed View",
+                        "icon": "tab"
+                    },
+                    "routing": {
+                        "path": "double-menu-tabbed-views"
+                    },
+                    "children": {
+                        "custom-redirect": {
+                            "component": {
+                                "class": "TabbedViewsExampleComponent",
+                                "from": "./doc/tabbed-case-view/tabbed-views-example.component"
+                            },
+                            "access": "private",
+                            "navigation": false,
+                            "routing": {
+                                "path": "**"
+                            }
+                        }
+                    },
+                    "processUri": "/"
                 }
             }
         },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/components-project",
-    "version": "6.5.0-rc.2",
+    "version": "6.5.0-beta.1",
     "description": "Netgrif Application Engine Frontend project. Project includes angular libraries as base for NAE applications.",
     "homepage": "https://components.netgrif.com",
     "license": "SEE LICENSE IN LICENSE",
@@ -33,7 +33,8 @@
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e",
-        "ncc:build": "ng build netgrif-components-core --configuration production && npm run ncc:build-schematics",
+        "ncc:clean": "node projects/netgrif-components-core/src/scripts/delete-local-build-link.js",
+        "ncc:build": "npm run ncc:clean && ng build netgrif-components-core --configuration production && npm run ncc:build-schematics",
         "ncc:local-build": "npm run ncc:build && npm i ./dist/netgrif-components-core --save-optional --legacy-peer-deps",
         "ncc:build-schematics": "node projects/netgrif-components-core/src/scripts/build-schematics.js",
         "ncc:lint": "ng lint netgrif-components-core",
@@ -67,29 +68,29 @@
         "example:build": "ng build --configuration production"
     },
     "dependencies": {
-        "@angular-material-components/datetime-picker": "~7.0.1",
-        "@angular-material-components/moment-adapter": "~7.0.0",
-        "@angular/animations": "~13.3.1",
-        "@angular/cdk": "~13.3.1",
-        "@angular/common": "~13.3.1",
-        "@angular/compiler": "~13.3.1",
-        "@angular/core": "~13.3.1",
-        "@angular/flex-layout": "~13.0.0-beta.38",
-        "@angular/forms": "~13.3.1",
-        "@angular/material": "~13.3.1",
-        "@angular/material-moment-adapter": "~13.3.1",
-        "@angular/platform-browser": "~13.3.1",
-        "@angular/platform-browser-dynamic": "~13.3.1",
-        "@angular/router": "~13.3.1",
-        "@covalent/markdown": "~4.1.0",
-        "@ngx-translate/core": "~13.0.0",
-        "@ngx-translate/http-loader": "~6.0.0",
-        "@schematics/angular": "~13.3.0",
+        "@angular-material-components/datetime-picker": "~16.0.1",
+        "@angular-material-components/moment-adapter": "~16.0.1",
+        "@angular/animations": "~17.3.11",
+        "@angular/cdk": "~17.3.10",
+        "@angular/common": "~17.3.11",
+        "@angular/compiler": "~17.3.11",
+        "@angular/core": "~17.3.11",
+        "@angular/forms": "~17.3.11",
+        "@angular/material": "~17.3.10",
+        "@angular/material-moment-adapter": "~17.3.10",
+        "@angular/platform-browser": "~17.3.11",
+        "@angular/platform-browser-dynamic": "~17.3.11",
+        "@angular/router": "~17.3.11",
+        "@covalent/markdown": "~8.0.0",
+        "@ngbracket/ngx-layout": "^17.0.1",
+        "@ngx-translate/core": "~15.0.0",
+        "@ngx-translate/http-loader": "~8.0.0",
+        "@schematics/angular": "~17.3.8",
         "@swimlane/ngx-charts": "~20.1.0",
         "@types/mousetrap": "~1.6.9",
-        "angular-resizable-element": "~3.3.0",
-        "angular-resize-event": "~3.1.1",
-        "angular2-hotkeys": "~2.4.0",
+        "angular-resizable-element": "~7.0.0",
+        "angular-resize-event": "~3.2.0",
+        "angular2-hotkeys": "~16.0.0",
         "easymde": "~2.16.1",
         "hammerjs": "~2.0.8",
         "json-schema-to-typescript": "~8.1.0",
@@ -101,56 +102,56 @@
         "ngx-quill": "~16.2.0",
         "palette-creator": "~0.5.4",
         "quill": "~1.3.7",
-        "rxjs": "~6.6.7",
+        "rxjs": "~7.8.1",
         "showdown": "^2.0.3",
         "tslib": "^2.0.0",
-        "zone.js": "~0.11.4"
+        "zone.js": "~0.14.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~13.3.1",
-        "@angular-devkit/schematics-cli": "~13.3.10",
-        "@angular-eslint/builder": "~13.1.0",
-        "@angular-eslint/eslint-plugin": "~13.1.0",
-        "@angular-eslint/eslint-plugin-template": "~13.1.0",
-        "@angular-eslint/schematics": "~13.1.0",
-        "@angular-eslint/template-parser": "~13.1.0",
-        "@angular/cli": "~13.3.1",
-        "@angular/compiler-cli": "~13.3.1",
-        "@angular/language-service": "~13.3.1",
-        "@compodoc/compodoc": "1.1.13",
-        "@types/jasmine": "~3.6.0",
-        "@types/jasminewd2": "~2.0.3",
+        "@angular-devkit/build-angular": "~17.3.8",
+        "@angular-devkit/schematics-cli": "~17.3.8",
+        "@angular-eslint/builder": "~17.1.0",
+        "@angular-eslint/eslint-plugin": "~17.1.0",
+        "@angular-eslint/eslint-plugin-template": "~17.1.0",
+        "@angular-eslint/schematics": "~17.1.0",
+        "@angular-eslint/template-parser": "~17.1.0",
+        "@angular/cli": "~17.3.8",
+        "@angular/compiler-cli": "~17.3.11",
+        "@angular/language-service": "~17.3.11",
+        "@compodoc/compodoc": "1.1.23",
+        "@types/jasmine": "~3.10.0",
+        "@types/jasminewd2": "~2.0.10",
         "@types/moment": "~2.13.0",
         "@types/node": "~12.12.29",
-        "@typescript-eslint/eslint-plugin": "~5.17.0",
-        "@typescript-eslint/parser": "~5.17.0",
+        "@typescript-eslint/eslint-plugin": "~6.21.0",
+        "@typescript-eslint/parser": "~6.21.0",
         "commander": "~4.1.1",
         "cspell": "~5.18.4",
         "eslint": "~8.12.0",
-        "jasmine-core": "~3.10.1",
-        "jasmine-spec-reporter": "~5.0.0",
-        "json-server": "~0.15.1",
-        "karma": "~6.3.17",
-        "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~2.1.0",
-        "karma-firefox-launcher": "~1.3.0",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "~1.7.0",
+        "jasmine-core": "~5.1.0",
+        "jasmine-spec-reporter": "~7.0.0",
+        "json-server": "~0.17.4",
+        "karma": "~6.4.2",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage-istanbul-reporter": "~3.0.0",
+        "karma-firefox-launcher": "~2.1.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
         "karma-junit-reporter": "~2.0.1",
         "karma-mocha-reporter": "~2.2.5",
         "karma-nyan-reporter": "~0.2.5",
         "karma-sonarqube-unit-reporter": "^0.0.23",
+        "karma-webpack": "^5.0.1",
         "ncp": "~2.0.0",
-        "ng-packagr": "~13.3.0",
-        "protractor": "~7.0.0",
-        "puppeteer": "~2.1.1",
+        "ng-packagr": "~17.3.0",
+        "puppeteer": "~22.0.0",
         "requirejs": "^2.3.6",
         "schematics-utilities": "~2.0.1",
         "sonarqube-scanner": "~2.5.0",
         "ts-node": "~10.2.1",
         "typedoc": "~0.22.11",
-        "typescript": "~4.6.3",
-        "typescript-json-schema": "~0.42.0",
+        "typescript": "~5.2.0",
+        "typescript-json-schema": "~0.60.0",
         "unique-names-generator": "~4.2.0"
     },
     "optionalDependencies": {

projects/nae-example-app/browserslist

@@ -5,8 +5,10 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+last 2 Android major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.

projects/nae-example-app/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import {RouterModule, Routes} from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+    imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
 export class AppRoutingModule {

projects/nae-example-app/src/app/app.module.ts

@@ -22,7 +22,7 @@ import {
     FrontActionModule, NAE_ASYNC_RENDERING_CONFIGURATION
 } from '@netgrif/components-core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {FlexLayoutModule, FlexModule} from '@angular/flex-layout';
+import {FlexLayoutModule, FlexModule} from '@ngbracket/ngx-layout';
 import {DocumentationComponent} from './doc/documentation/documentation.component';
 import {NaeExampleAppConfigurationService} from './nae-example-app-configuration.service';
 import {AuthenticationComponent} from './doc/authentication/authentication.component';

projects/nae-example-app/src/app/doc/active-group/active-group.component.ts

@@ -15,8 +15,8 @@ export class ActiveGroupComponent implements OnDestroy {
 
     activeGroups: Array<string>;
 
-    fcGroup: FormControl;
-    fcGroups: FormControl;
+    fcGroup: FormControl<string>;
+    fcGroups: FormControl<string[]>;
 
     private _subGroups: Subscription;
     private _subGroupFc: Subscription;

projects/nae-example-app/src/app/doc/documentation/documentation.component.scss

@@ -2,7 +2,7 @@ code {
     background-color: rgba(0, 0, 0, .06);
     padding: 5px;
     font-size: 90%;
-    font-family: 'Roboto', sans-serif;
+    font-family: Roboto, sans-serif;
     font-weight: 400;
     margin-bottom: 20px;
     width: max-content;

projects/nae-example-app/src/app/doc/double-drawer-example/double-drawer-example.component.html

@@ -1,3 +1,3 @@
-<nc-navigation-double-drawer #sidenav image="assets/img/netgrif_full_white.svg" imageRouterLink="/tabbed-views">
+<nc-navigation-double-drawer #sidenav image="assets/img/netgrif_full_grey.svg" imageRouterLink="/tabbed-views">
     <router-outlet></router-outlet>
 </nc-navigation-double-drawer>

projects/nae-example-app/src/app/doc/forms/email-form/password-form.component.ts

@@ -20,12 +20,12 @@ interface EndpointOption {
     templateUrl: './password-form.component.html',
     styleUrls: ['./password-form.component.scss']
 })
-export class PasswordFormComponent implements OnInit, OnDestroy {
+export class PasswordFormComponent implements OnDestroy {
 
     readonly TITLE = 'Email submission form';
     readonly DESCRIPTION = 'Ukážka email submission form...';
 
-    public endpointFormControl: FormControl;
+    public endpointFormControl: FormControl<string>;
 
     public loading: LoadingEmitter;
 
@@ -35,13 +35,10 @@ export class PasswordFormComponent implements OnInit, OnDestroy {
     ];
 
     constructor(protected _signUpService: SignUpService, protected _snackBarService: SnackBarService, protected _log: LoggerService) {
-        this.endpointFormControl = new FormControl(this.endpointOptions[0].value);
+        this.endpointFormControl = new FormControl<string>(this.endpointOptions[0].value);
         this.loading = new LoadingEmitter();
     }
 
-    ngOnInit(): void {
-    }
-
     ngOnDestroy(): void {
         this.loading.complete();
     }

projects/nae-example-app/src/app/doc/navigation-example/navigation-example.component.scss

@@ -8,7 +8,7 @@
     outline: none !important;
 }
 
-.mat-drawer-side {
+.mat-mdc-drawer-side {
     border-right: 0;
 }
 

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts

@@ -78,7 +78,11 @@ export class TabbedCaseViewComponent extends AbstractTabbedCaseViewComponent imp
                 @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedCaseViewData) {
         super(caseViewService, loggerService, injectedTabData, overflowService, undefined, undefined, {
             enableCaseTitle: true,
-            isCaseTitleRequired: true
+            isCaseTitleRequired: true,
+            newCaseButtonConfig: {
+                createCaseButtonTitle: 'My custom create case button',
+                createCaseButtonIcon: 'home'
+            }
         });
     }
 

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.scss

@@ -7,7 +7,7 @@
 
 .search-panel {
     margin-top: 16px;
-    padding: 8px 16px;
+    margin-bottom: 2px;
 }
 
 .content-margin {

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-views-example.component.ts

@@ -25,6 +25,8 @@ export class TabbedViewsExampleComponent implements OnInit {
 
     constructor() {
         const stream = new ReplaySubject<number>(1);
+        const streamTest = new ReplaySubject<number>(1);
+        streamTest.next(255)
         this.tabs = [
             {
                 label: {
@@ -43,7 +45,8 @@ export class TabbedViewsExampleComponent implements OnInit {
             {
                 label: {
                     text: 'process cache disabled',
-                    icon: 'storage'
+                    icon: 'storage',
+                    count: streamTest
                 },
                 canBeClosed: false,
                 tabContentComponent: TabbedCaseViewComponent,