feat: update to angular 15

Author: Oliver Strik

package-lock.json

@@ -15,16 +15,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.8",
-    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^14.2.8",
-    "@angular/compiler": "^14.2.8",
-    "@angular/core": "^14.2.8",
-    "@angular/forms": "^14.2.8",
-    "@angular/material": "^14.2.6",
-    "@angular/platform-browser": "^14.2.8",
-    "@angular/platform-browser-dynamic": "^14.2.8",
-    "@angular/router": "^14.2.8",
+    "@angular/animations": "^15.2.9",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.9",
+    "@angular/compiler": "^15.2.9",
+    "@angular/core": "^15.2.9",
+    "@angular/forms": "^15.2.9",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.9",
+    "@angular/platform-browser-dynamic": "^15.2.9",
+    "@angular/router": "^15.2.9",
+    "@dustfoundation/ngx-sortablejs": "^15.0.0",
     "@ng-select/ng-select": "^9.0.2",
     "date-fns": "^2.29.3",
     "lodash-es": "^4.17.21",
@@ -36,13 +37,13 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.7",
-    "@angular/cli": "^14.2.7",
-    "@angular/compiler-cli": "^14.2.8",
+    "@angular-devkit/build-angular": "^15.2.8",
+    "@angular/cli": "^15.2.8",
+    "@angular/compiler-cli": "^15.2.9",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
     "@types/lodash-es": "^4.17.6",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~5.0.0",
@@ -51,10 +52,10 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^14.2.2",
+    "ng-packagr": "^15.2.2",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.9.5"
   }
 }

package.json

@@ -7,21 +7,10 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

projects/demo/.browserslistrc

@@ -1,17 +1,17 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.6.2",
+  "version": "16.6.2",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": ">=10",
-    "@angular/core": ">=10",
+    "@angular/common": ">=16",
+    "@angular/core": ">=16",
     "@ng-select/ng-select": ">=9",
     "ngx-mat-datefns-date-adapter": ">=10",
     "date-fns": ">=2.29",
     "lodash-es": ">=4.17",
-    "ngx-sortablejs": ">=11.1",
+    "@dustfoundation/ngx-sortablejs": ">=15.0.0",
     "sortablejs": ">=1.15"
   },
   "dependencies": {

projects/demo/src/test.ts

@@ -1,16 +1,31 @@
-import {Component, ContentChild, Input, OnInit, TemplateRef} from '@angular/core';
-import {NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Options} from 'sortablejs';
-import {isValueSet} from '../../util/values';
-import {ValueAccessorBase} from '../value-accessor-base/value-accessor-base.component';
+import {
+	Component,
+	ContentChild,
+	Input,
+	OnInit,
+	TemplateRef,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Options } from 'sortablejs';
+import { isValueSet } from '../../util/values';
+import { ValueAccessorBase } from '../value-accessor-base/value-accessor-base.component';
 
 @Component({
 	selector: 'klp-form-sortable-items',
 	templateUrl: './sortable-items.component.html',
 	styleUrls: ['./sortable-items.component.scss'],
-	providers: [{provide: NG_VALUE_ACCESSOR, useExisting: SortableItemsComponent, multi: true}],
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: SortableItemsComponent,
+			multi: true,
+		},
+	],
 })
-export class SortableItemsComponent extends ValueAccessorBase<Array<any>> implements OnInit {
+export class SortableItemsComponent
+	extends ValueAccessorBase<Array<any>>
+	implements OnInit
+{
 	@ContentChild(TemplateRef) template;
 	@Input() sortableItemSize: 'sm' | 'lg' = 'lg';
 	@Input() useCustomScroll = false;
@@ -21,9 +36,13 @@ export class SortableItemsComponent extends ValueAccessorBase<Array<any>> implem
 	ngOnInit(): void {
 		super.ngOnInit();
 		if (this.useCustomScroll) {
-			this.sortablejsOptions = {onUpdate: this.itemsOrderChanged, onMove: this.onItemDrag, onEnd: this.onEnd};
+			this.sortablejsOptions = {
+				onUpdate: this.itemsOrderChanged,
+				onMove: this.onItemDrag,
+				onEnd: this.onEnd,
+			};
 		} else {
-			this.sortablejsOptions = {onUpdate: this.itemsOrderChanged};
+			this.sortablejsOptions = { onUpdate: this.itemsOrderChanged };
 		}
 	}
 

projects/klippa/ngx-enhancy-forms/package.json

@@ -2,10 +2,10 @@
 
 import { NgModule } from '@angular/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatNativeDateModule } from '@angular/material/core';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 
 @NgModule({
 	imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule],

projects/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.ts

@@ -18,7 +18,7 @@ import {FormElementComponent} from './form/form-element/form-element.component';
 import {FormErrorComponent} from './form/form-error/form-error.component';
 import {FormSubmitButtonComponent} from './form/form-submit-button/form-submit-button.component';
 import {FormComponent, SubFormDirective} from './form/form.component';
-import {SortablejsModule} from 'ngx-sortablejs';
+import { SortablejsModule } from '@dustfoundation/ngx-sortablejs';
 import {NgSelectModule} from '@ng-select/ng-select';
 import {DatePickerComponent} from './elements/date-picker/date-picker.component';
 import {DateTimePickerComponent} from './elements/date-time-picker/date-time-picker.component';
@@ -29,7 +29,6 @@ import {SortableGroupedItemsComponent} from './elements/sortable-grouped-items/s
 import {HourMinuteInputComponent} from './elements/hour-minute-input/hour-minute-input.component';
 import {RadioComponent} from './elements/radio/radio.component';
 
-
 @NgModule({
 	imports: [
 		CommonModule,
@@ -64,7 +63,7 @@ import {RadioComponent} from './elements/radio/radio.component';
 		FormComponent,
 		SubFormDirective,
 		HourMinuteInputComponent,
-		RadioComponent
+		RadioComponent,
 	],
 	exports: [
 		ValueAccessorBase,
@@ -92,8 +91,7 @@ import {RadioComponent} from './elements/radio/radio.component';
 		FormComponent,
 		SubFormDirective,
 		HourMinuteInputComponent,
-		RadioComponent
-	]
+		RadioComponent,
+	],
 })
-export class NgxEnhancyFormsModule {
-}
+export class NgxEnhancyFormsModule {}

projects/klippa/ngx-enhancy-forms/src/lib/material.module.ts

@@ -1,4 +1,4 @@
-import { isArray } from 'lodash';
+import { isArray } from 'lodash-es';
 import { isValueSet } from './values';
 
 export function removeDuplicatesFromArraysWithComparator(comparator: (e1: any, e2: any) => boolean, ...arrays: any[]): any {

projects/klippa/ngx-enhancy-forms/src/lib/ngx-enhancy-forms.module.ts

@@ -8,21 +8,10 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

projects/klippa/ngx-enhancy-forms/src/lib/util/arrays.ts

@@ -3,7 +3,6 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../out-tsc/lib",
-    "target": "es2020",
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,

projects/klippa/ngx-enhancy-forms/src/test.ts

@@ -9,7 +9,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2019",
@@ -20,6 +20,7 @@
       "@klippa/ngx-enhancy-forms": [
         "projects/klippa/ngx-enhancy-forms/src/public-api.ts"
       ]
-    }
+    },
+    "useDefineForClassFields": false
   }
 }