Angular 13 upgrade

.gitignore

@@ -1,3 +1,4 @@
+/.angular/cache
 *.log
 node_modules
 bundles

angular.json

@@ -388,18 +388,6 @@
             "protractorConfig": "./e2e/protractor.conf.js",
             "devServerTarget": "lib-e2e-test:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "./e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/lib/**/*",
-              "**/node_modules/**/*"
-            ]
-          }
         }
       }
     },

demo-shell/src/custom-style-dev.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../../lib/core/styles/index';
 @include mat.core($alfresco-typography);
 

demo-shell/src/custom-style.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '~@alfresco/adf-core/theming';
 @include mat.core($alfresco-typography);
 

demo-shell/src/polyfills.ts

@@ -35,9 +35,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */

demo-shell/src/test.ts

@@ -29,7 +29,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+    platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

lib/cli/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/content-services/ng-package.json

@@ -8,22 +8,6 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-content-services",
+    "flatModuleFile": "adf-content-services"
-    "umdModuleIds": {
-      "@alfresco/js-api": "@alfresco/js-api",
-      "@angular/platform-browser/animations": "@angular/platform-browser/animations",
-      "@angular/material": "@angular/material",
-      "@mat-datetimepicker/core": "@mat-datetimepicker/core",
-      "@mat-datetimepicker/moment": "@mat-datetimepicker/moment",
-      "@angular/flex-layout": "@angular/flex-layout",
-      "@alfresco/adf-core": "@alfresco/adf-core",
-      "@angular/animations": "@angular/animations",
-      "@angular/cdk/platform": "@angular/cdk/platform",
-      "@angular/material/core": "@angular/material/core",
-      "moment": "moment",
-      "moment-es6": "moment-es6",
-      "moment/src/moment": "moment/src/moment",
-      "@ngx-translate/core": "@ngx-translate/core"
-    }
   }
 }

lib/content-services/src/lib/search/components/search-control.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
 $mat-menu-overlay-max-width: 280px !default;   // 56 * 5

lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .adf-search-filter-chip {
     &.mat-chip {

lib/content-services/src/lib/search/components/search-form/search-form.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .adf-search-form {
     &.mat-button {

lib/content-services/src/test.ts

@@ -28,7 +28,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+    platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 
 declare const pdfjsLib: any;

lib/content-services/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -21,9 +21,9 @@
                    [attr.data-automation-id]="'card-textitem-value-' + property.key">
             <textarea matInput
                       *ngIf="property.multiline"
-                      [matTextareaAutosize]="true"
+                      [cdkTextareaAutosize]="true"
-                      [matAutosizeMaxRows]="1"
+                      [cdkAutosizeMaxRows]="1"
-                      [matAutosizeMaxRows]="5"
+                      [cdkAutosizeMaxRows]="5"
                       class="adf-property-value"
                       [placeholder]="property.default"
                       [formControl]="textInput"

lib/core/context-menu/context-menu-overlay.service.ts

@@ -102,26 +102,33 @@ export class ContextMenuOverlayService {
         };
 
         const positionStrategy = this.overlay.position()
-            .connectedTo(
+            .flexibleConnectedTo(new ElementRef(fakeElement))
-                new ElementRef(fakeElement),
+            .withPositions([
-                { originX: 'start', originY: 'bottom' },
+                {
-                { overlayX: 'start', overlayY: 'top' })
+                    originX: 'start', originY: 'bottom' ,
-            .withFallbackPosition(
+                    overlayX: 'start', overlayY: 'top'
-                { originX: 'start', originY: 'top' },
+                },
-                { overlayX: 'start', overlayY: 'bottom' })
+                {
-            .withFallbackPosition(
+                    originX: 'start', originY: 'top',
-                { originX: 'end', originY: 'top' },
+                    overlayX: 'start', overlayY: 'bottom'
-                { overlayX: 'start', overlayY: 'top' })
+                },
-            .withFallbackPosition(
+                {
-                { originX: 'start', originY: 'top' },
+                    originX: 'end', originY: 'top',
-                { overlayX: 'end', overlayY: 'top' })
+                    overlayX: 'start', overlayY: 'top'
-            .withFallbackPosition(
+                },
-                { originX: 'end', originY: 'center' },
+                {
-                { overlayX: 'start', overlayY: 'center' })
+                    originX: 'start', originY: 'top',
-            .withFallbackPosition(
+                    overlayX: 'end', overlayY: 'top'
-                { originX: 'start', originY: 'center' },
+                },
-                { overlayX: 'end', overlayY: 'center' }
+                {
-            );
+                    originX: 'end', originY: 'center',
+                    overlayX: 'start', overlayY: 'center'
+                },
+                {
+                    originX: 'start', originY: 'center',
+                    overlayX: 'end', overlayY: 'center'
+                }
+            ]);
 
         const overlayConfig = new OverlayConfig({
             hasBackdrop: config.hasBackdrop,

lib/core/datatable/components/datatable/datatable.component.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable no-descending-specificity */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../../../styles/mixins';
 
 $data-table-header-font-size: var(--theme-caption-font-size) !default;

lib/core/directives/tooltip-card/tooltip-card.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 :host {
     display: block;

lib/core/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -3,7 +3,7 @@
     <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
         <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
         <textarea matInput class="adf-input"
-                  [matTextareaAutosize]="true"
+                  [cdkTextareaAutosize]="true"
                   type="text"
                   rows="3"
                   [id]="field.id"

lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .adf {
     &-sidebar-action-menu {

lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -1,4 +1,4 @@
-@import '~@angular/flex-layout/mq';
+@import '@angular/flex-layout/mq';
 @import '../../../styles/mixins';
 
 .adf-sidenav-layout {

lib/core/ng-package.json

@@ -11,18 +11,6 @@
   ],
   "lib": {
     "entryFile": "./public-api.ts",
-    "flatModuleFile": "adf-core",
+    "flatModuleFile": "adf-core"
-    "umdModuleIds": {
-      "@alfresco/js-api": "@alfresco/js-api",
-      "@alfresco/adf-extensions": "@alfresco/adf-extensions",
-      "minimatch": "minimatch-browser",
-      "@mat-datetimepicker/core": "@mat-datetimepicker/core",
-      "@mat-datetimepicker/moment": "@mat-datetimepicker/moment",
-      "moment": "moment",
-      "moment-es6": "moment-es6",
-      "moment/src/moment": "moment/src/moment",
-      "@ngx-translate/core": "@ngx-translate/core",
-      "cropperjs": "cropperjs"
-    }
   }
 }

lib/core/pagination/pagination.component.scss

@@ -1,4 +1,4 @@
-@import '~@angular/flex-layout/mq';
+@import '@angular/flex-layout/mq';
 
 $adf-pagination-height: 48px !default;
 $adf-pagination-icon-button-size: 32px !default;

lib/core/styles/_index.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable value-keyword-case */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 /* stylelint-disable value-list-max-empty-lines */
 /* stylelint-disable scss/no-global-function-names */
 /* stylelint-disable scss/at-import-partial-extension */

lib/core/styles/_theming.scss

@@ -1,4 +1,4 @@
-@import '~@angular/flex-layout/mq';
+@import '@angular/flex-layout/mq';
 @import './colors';
 @import './mixins';
 @import './typography';

lib/core/styles/_typography.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 $alfresco-typography: mat.define-typography-config(
     $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',

lib/core/styles/prebuilt/adf-blue-orange.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-blue-purple.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-cyan-orange.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-cyan-purple.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-green-orange.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-green-purple.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-indigo-pink.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable value-keyword-case */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-pink-bluegrey.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable value-keyword-case */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/styles/prebuilt/adf-purple-green.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable value-keyword-case */
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../theming';
 @import './all-theme';
 @include mat.core($alfresco-typography);

lib/core/test.ts

@@ -28,7 +28,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+    platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 
 // Then we find all the tests.

lib/core/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/extensions/ng-package.json

@@ -4,9 +4,6 @@
   "deleteDestPath": false,
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-extensions",
+    "flatModuleFile": "adf-extensions"
-    "umdModuleIds": {
-      "@alfresco/js-api": "@alfresco/js-api"
-    }
   }
 }

lib/extensions/src/test.ts

@@ -30,7 +30,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

lib/extensions/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/insights/ng-package.json

@@ -8,14 +8,6 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-insights",
+    "flatModuleFile": "adf-insights"
-    "umdModuleIds": {
-      "@alfresco/adf-core": "@alfresco/adf-core",
-      "ng2-charts": "ng2-charts",
-      "raphael": "raphael",
-      "moment": "moment",
-      "moment-es6": "moment-es6",
-      "@ngx-translate/core": "@ngx-translate/core"
-    }
   }
 }

lib/insights/src/test.ts

@@ -30,7 +30,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+    platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 
 // Then we find all the tests.

lib/insights/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/process-services-cloud/ng-package.json

@@ -8,22 +8,7 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-process-services-cloud",
+    "flatModuleFile": "adf-process-services-cloud"
-    "umdModuleIds": {
-      "@alfresco/js-api": "@alfresco/js-api",
-      "minimatch": "minimatch",
-      "@alfresco/adf-core": "@alfresco/adf-core",
-      "@alfresco/adf-content-services": "@alfresco/adf-content-services",
-      "moment": "moment",
-      "moment-es6": "moment-es6",
-      "@ngx-translate/core": "@ngx-translate/core",
-      "@apollo/client/core": "@apollo/client/core",
-      "@apollo/client/link/ws": "@apollo/client/link/ws",
-      "@apollo/client/link/error": "@apollo/client/link/error",
-      "@apollo/client/utilities": "@apollo/client/utilities",
-      "apollo-angular": "apollo-angular",
-      "apollo-angular/http": "apollo-angular/http"
-    }
   },
   "allowedNonPeerDependencies": [
     "@apollo/client",

lib/process-services-cloud/src/test.ts

@@ -30,7 +30,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

lib/process-services-cloud/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/process-services/ng-package.json

@@ -8,15 +8,6 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-process-services",
+    "flatModuleFile": "adf-process-services"
-    "umdModuleIds": {
-      "@alfresco/js-api": "@alfresco/js-api",
-      "minimatch": "minimatch",
-      "@alfresco/adf-core": "@alfresco/adf-core",
-      "@alfresco/adf-content-services": "@alfresco/adf-content-services",
-      "moment": "moment",
-      "moment-es6": "moment-es6",
-      "@ngx-translate/core": "@ngx-translate/core"
-    }
   }
 }

lib/process-services/src/test.ts

@@ -28,7 +28,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+    platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 
 // Then we find all the tests.

lib/process-services/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

lib/testing/ng-package.json

@@ -3,15 +3,6 @@
   "dest": "../dist/testing",
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-testing",
+    "flatModuleFile": "adf-testing"
-    "umdModuleIds": {
-      "@alfresco/js-api": "@alfresco/js-api",
-      "moment-es6": "moment-es6",
-      "protractor": "protractor",
-      "selenium-webdriver": "selenium-webdriver",
-      "fs": "fs",
-      "path": "path",
-      "protractor/built/util": "protractor/built/util"
-    }
   }
 }

lib/testing/shared/package.json

@@ -2,10 +2,7 @@
   "ngPackage": {
     "lib": {
       "entryFile": "../src/lib/shared/index.ts",
-      "flatModuleFile": "adf-testing-shared",
+      "flatModuleFile": "adf-testing-shared"
-      "umdModuleIds": {
-        "@alfresco/js-api": "@alfresco/js-api"
-      }
     }
   }
 }

lib/testing/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

package.json

@@ -69,18 +69,18 @@
   ],
   "dependencies": {
     "@alfresco/js-api": "4.8.0",
-    "@angular/animations": "^12.2.16",
+    "@angular/animations": "^13.2.4",
-    "@angular/cdk": "12.2.13",
+    "@angular/cdk": "13.2.4",
-    "@angular/common": "^12.2.16",
+    "@angular/common": "^13.2.4",
-    "@angular/compiler": "^12.2.16",
+    "@angular/compiler": "^13.2.4",
-    "@angular/core": "^12.2.16",
+    "@angular/core": "^13.2.4",
-    "@angular/flex-layout": "^12.0.0-beta.35",
+    "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "^12.2.16",
+    "@angular/forms": "^13.2.4",
-    "@angular/material": "^12.2.13",
+    "@angular/material": "^13.2.4",
-    "@angular/material-moment-adapter": "^12.2.13",
+    "@angular/material-moment-adapter": "^13.2.4",
-    "@angular/platform-browser": "^12.2.16",
+    "@angular/platform-browser": "^13.2.4",
-    "@angular/platform-browser-dynamic": "^12.2.16",
+    "@angular/platform-browser-dynamic": "^13.2.4",
-    "@angular/router": "^12.2.16",
+    "@angular/router": "^13.2.4",
     "@apollo/client": "^3.5.6",
     "@mat-datetimepicker/core": "^5.1.1",
     "@mat-datetimepicker/moment": "^5.1.1",
@@ -88,7 +88,6 @@
     "adf-tslint-rules": "0.0.7",
     "apollo-angular": "^2.6.0",
     "chart.js": "2.9.4",
-    "classlist.js": "1.1.20150312",
     "cropperjs": "1.5.12",
     "custom-event-polyfill": "^1.0.7",
     "dotenv-expand": "^5.1.0",
@@ -105,7 +104,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.16",
+    "@angular-devkit/build-angular": "^13.2.5",
     "@angular-devkit/core": "^13.2.5",
     "@angular-devkit/schematics": "^13.2.5",
     "@angular-eslint/builder": "1.2.0",
@@ -113,8 +112,8 @@
     "@angular-eslint/eslint-plugin-template": "1.2.0",
     "@angular-eslint/schematics": "1.2.0",
     "@angular-eslint/template-parser": "1.2.0",
-    "@angular/cli": "^12.2.16",
+    "@angular/cli": "^13.2.5",
-    "@angular/compiler-cli": "^12.2.16",
+    "@angular/compiler-cli": "^13.2.4",
     "@nrwl/schematics": "8.12.11",
     "@nrwl/storybook": "^13.8.3",
     "@nrwl/workspace": "^13.8.3",
@@ -166,7 +165,7 @@
     "lite-server": "^2.6.1",
     "mini-css-extract-plugin": "^1.6.0",
     "nconf": "^0.11.1",
-    "ng-packagr": "^12.2.7",
+    "ng-packagr": "^13.2.1",
     "postcss": "^8.4.5",
     "postcss-sass": "^0.5.0",
     "protractor": "^7.0.0",
@@ -182,7 +181,7 @@
     "ts-node": "^10.4.0",
     "tsconfig-paths": "^3.12.0",
     "tslint": "6.1.3",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "webdriver-manager": "12.1.8"
   },
   "license": "Apache-2.0",