[ADF-5410] code fixes and updates prior to Angular 12 upgrade (#7177)

* package fixes

* upgrade stylelint config

* upgrade configuration and stats

* code fixes based on Angular upgrade

* rework scss-bundle usage

* use node 14 with travis (lts)

* fix production builds

* fix node sass version

lib/cli/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "declaration": true,
     "module": "commonjs",
+    "declarationMap": true,
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,

lib/cli/tsconfig.lib.prod.json

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

lib/config/bundle-content-services-scss.js

@@ -1,6 +0,0 @@
-var Bundler = require('scss-bundle').Bundler;
-var writeFileSync = require('fs').writeFileSync;
-
-new Bundler().Bundle('./lib/content-services/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/content-services/_theming.scss', result.bundledContent);
-});

lib/config/bundle-core-scss.js

@@ -1,6 +0,0 @@
-var Bundler = require('scss-bundle').Bundler;
-var writeFileSync = require('fs').writeFileSync;
-
-new Bundler().Bundle('./lib/core/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/core/_theming.scss', result.bundledContent);
-});

lib/config/bundle-insights-scss.js

@@ -1,6 +0,0 @@
-var Bundler = require('scss-bundle').Bundler;
-var writeFileSync = require('fs').writeFileSync;
-
-new Bundler().Bundle('./lib/insights/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/insights/_theming.scss', result.bundledContent);
-});

lib/config/bundle-process-services-cloud-scss.js

@@ -1,6 +0,0 @@
-var Bundler = require('scss-bundle').Bundler;
-var writeFileSync = require('fs').writeFileSync;
-
-new Bundler().Bundle('./lib/process-services-cloud/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/process-services-cloud/_theming.scss', result.bundledContent);
-});

lib/config/bundle-process-services-scss.js

@@ -1,6 +0,0 @@
-var Bundler = require('scss-bundle').Bundler;
-var writeFileSync = require('fs').writeFileSync;
-
-new Bundler().Bundle('./lib/process-services/src/lib/styles/_index.scss', '**/*.scss').then(result => {
-    writeFileSync('./lib/dist/process-services/_theming.scss', result.bundledContent);
-});

lib/content-services/scss-bundle.config.json

@@ -0,0 +1,10 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./lib/content-services/src/lib/styles/_index.scss",
+    "rootDir": ".",
+    "project": "../../",
+    "outFile": "./lib/dist/content-services/_theming.scss",
+    "ignoreImports": ["~@angular/.*"],
+    "logLevel": "info"
+  }
+}

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

@@ -23,7 +23,6 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token';
 @Component({
   selector: 'adf-search-form',
   templateUrl: './search-form.component.html',
-  styleUrls: ['./search-form.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class SearchFormComponent {

lib/content-services/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../dist/content-services/",
+    "declarationMap": true,
     "baseUrl": "src",
     "paths": {
       "@alfresco/adf-extensions": ["../../dist/extensions"],

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

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, tick, fakeAsync, async, discardPeriodicTasks } from '@angular/core/testing';
+import { ComponentFixture, TestBed, tick, fakeAsync, discardPeriodicTasks } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
@@ -600,7 +600,7 @@ describe('CardViewTextItemComponent', () => {
             expect(component.property.value).toBe(component.editedValue);
         });
 
-        it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', async(async (done) => {
+        it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', fakeAsync(async (done) => {
             const functionTestClick = () => done();
 
             component.property = new CardViewTextItemModel({

lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts

@@ -29,7 +29,6 @@ import { DynamicTableModel } from './dynamic-table.widget.model';
 @Component({
     selector: 'dynamic-table-widget',
     templateUrl: './dynamic-table.widget.html',
-    styleUrls: ['./dynamic-table.widget.scss'],
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',

lib/core/ng-package.json

@@ -16,7 +16,8 @@
       "moment": "moment",
       "moment-es6": "moment-es6",
       "moment/src/moment": "moment/src/moment",
-      "@ngx-translate/core": "@ngx-translate/core"
+      "@ngx-translate/core": "@ngx-translate/core",
+      "cropperjs": "cropperjs"
     }
   }
 }

lib/core/pipes/public-api.ts

@@ -29,3 +29,5 @@ export * from './time-ago.pipe';
 export * from './user-initial.pipe';
 export * from './localized-role.pipe';
 export * from './pipe.module';
+export * from './moment-date.pipe';
+export * from './moment-datetime.pipe';

lib/core/scss-bundle.config.json

@@ -0,0 +1,10 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./lib/core/styles/_index.scss",
+    "rootDir": ".",
+    "project": "../../",
+    "outFile": "./lib/dist/core/_theming.scss",
+    "ignoreImports": ["~@angular/.*"],
+    "logLevel": "info"
+  }
+}

lib/core/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../dist/core/",
+    "declarationMap": true,
     "baseUrl": "./",
     "paths": {
       "@alfresco/adf-extensions": ["../dist/extensions"],

lib/core/tsconfig.lib.prod.json

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

lib/core/utils/file-utils.ts

@@ -35,7 +35,7 @@ export class FileUtils {
                     } else {
                         iterations.push(Promise.all(entries.map((entry) => {
                             if (entry.isFile) {
-                                return new Promise((resolveFile) => {
+                                return new Promise<void>((resolveFile) => {
                                     entry.file(function (file: File) {
                                         files.push({
                                             entry: entry,

lib/core/viewer/components/pdf-viewer-password-dialog.ts

@@ -23,8 +23,7 @@ declare const pdfjsLib: any;
 
 @Component({
     selector: 'adf-pdf-viewer-password-dialog',
-    templateUrl: './pdf-viewer-password-dialog.html',
-    styleUrls: [ './pdf-viewer-password-dialog.scss' ]
+    templateUrl: './pdf-viewer-password-dialog.html'
 })
 export class PdfPasswordDialogComponent implements OnInit {
     passwordFormControl: FormControl;

lib/extensions/src/lib/services/app-extension.service.ts

@@ -55,7 +55,7 @@ export class AppExtensionService {
      * The result is filtered by the **disabled** state.
      * @param key Preset key.
      */
-    getDocumentListPreset(key: string) {
+    getDocumentListPreset(key: string): DocumentListPresetRef[] {
         return this.extensionService
           .getElements<DocumentListPresetRef>(
             `features.documentList.${key}`

lib/extensions/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../dist/extensions/",
+    "declarationMap": true,
     "baseUrl": "src"
   },
   "angularCompilerOptions": {

lib/extensions/tsconfig.lib.prod.json

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

lib/insights/scss-bundle.config.json

@@ -0,0 +1,10 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./lib/insights/src/lib/styles/_index.scss",
+    "rootDir": ".",
+    "project": "../../",
+    "outFile": "./lib/dist/insights/_theming.scss",
+    "ignoreImports": ["~@angular/.*"],
+    "logLevel": "info"
+  }
+}

lib/insights/src/lib/material.module.ts

@@ -21,7 +21,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import { MatNativeDateModule, MatOptionModule, MatRippleModule, MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material/core';
+import { MatNativeDateModule, MatOptionModule, MatRippleModule } from '@angular/material/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -53,7 +54,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
         MatChipsModule, MatMenuModule
     ],
     providers: [
-        { provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'never' }}
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
     ]
 })
 export class MaterialModule {}

lib/insights/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../dist/insights/",
+    "declarationMap": true,
     "baseUrl": "src",
     "paths": {
       "@alfresco/adf-extensions": ["../../dist/extensions"],

lib/insights/tsconfig.lib.prod.json

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

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

@@ -11,7 +11,13 @@
       "@alfresco/adf-content-services": "@alfresco/adf-content-services",
       "moment": "moment",
       "moment-es6": "moment-es6",
-      "@ngx-translate/core": "@ngx-translate/core"
+      "@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"
     }
   },
   "whitelistedNonPeerDependencies": [

lib/process-services-cloud/scss-bundle.config.json

@@ -0,0 +1,10 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./lib/process-services-cloud/src/lib/styles/_index.scss",
+    "rootDir": ".",
+    "project": "../../",
+    "outFile": "./lib/dist/process-services-cloud/_theming.scss",
+    "ignoreImports": ["~@angular/.*"],
+    "logLevel": "info"
+  }
+}

lib/process-services-cloud/src/lib/material.module.ts

@@ -21,7 +21,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MatOptionModule, MatRippleModule } from '@angular/material/core';
+import { MatNativeDateModule, MatOptionModule, MatRippleModule } from '@angular/material/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -40,7 +41,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
     providers: [
-        {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'never' }}
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
     ],
     imports: [
         MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,

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

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../dist/process-services-cloud/",
+    "declarationMap": true,
     "baseUrl": "src",
     "resolveJsonModule": true,
     "paths": {

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

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

lib/process-services/scss-bundle.config.json

@@ -0,0 +1,10 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./lib/process-services/src/lib/styles/_index.scss",
+    "rootDir": ".",
+    "project": "../../",
+    "outFile": "./lib/dist/process-services/_theming.scss",
+    "ignoreImports": ["~@angular/.*"],
+    "logLevel": "info"
+  }
+}

lib/process-services/src/lib/material.module.ts

@@ -21,7 +21,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MatOptionModule, MatRippleModule } from '@angular/material/core';
+import { MatNativeDateModule, MatOptionModule, MatRippleModule } from '@angular/material/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -39,7 +40,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
     providers: [
-        {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'never' }}
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
     ],
     imports: [
         MatAutocompleteModule, MatButtonModule, MatCardModule, MatDialogModule,

lib/process-services/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../dist/process-services/",
+    "declarationMap": true,
     "baseUrl": "src",
     "paths": {
       "@alfresco/adf-extensions": ["../../dist/extensions"],

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

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}

lib/testing/ng-package.json

@@ -10,7 +10,8 @@
       "protractor": "protractor",
       "selenium-webdriver": "selenium-webdriver",
       "fs": "fs",
-      "path": "path"
+      "path": "path",
+      "protractor/built/util": "protractor/built/util"
     }
   }
 }

lib/testing/shared/package.json

@@ -2,7 +2,10 @@
   "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.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "outDir": "../dist/testing/",
     "baseUrl": "src",
+    "declarationMap": true,
     "allowJs": true,
     "paths": {}
   },

lib/testing/tsconfig.lib.prod.json

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
-}
+}