Angular 16

package.json

@@ -15,47 +15,47 @@
  },
  "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",
- "@ng-select/ng-select": "^9.0.2",
+ "@angular/animations": "^16.0.1",
+ "@angular/cdk": "^16.0.1",
+ "@angular/common": "^16.0.1",
+ "@angular/compiler": "^16.0.1",
+ "@angular/core": "^16.0.1",
+ "@angular/forms": "^16.0.1",
+ "@angular/material": "^16.0.1",
+ "@angular/platform-browser": "^16.0.1",
+ "@angular/platform-browser-dynamic": "^16.0.1",
+ "@angular/router": "^16.0.1",
+ "@dustfoundation/ngx-sortablejs": "^15.0.0",
+ "@ng-select/ng-select": "^10.0.4",
  "date-fns": "^2.29.3",
  "lodash-es": "^4.17.21",
  "ngx-mat-datefns-date-adapter": "^11.2.2",
- "ngx-sortablejs": "^11.1.0",
  "rxjs": "~6.6.0",
  "sortablejs": "^1.15.0",
  "tslib": "^2.0.0",
- "zone.js": "~0.11.4"
+ "zone.js": "~0.13.0"
  },
  "devDependencies": {
- "@angular-devkit/build-angular": "^14.2.7",
- "@angular/cli": "^14.2.7",
- "@angular/compiler-cli": "^14.2.8",
+ "@angular-devkit/build-angular": "^16.0.1",
+ "@angular/cli": "^16.0.1",
+ "@angular/compiler-cli": "^16.0.1",
+ "@babel/runtime": "^7.24.5",
  "@types/jasmine": "~3.6.0",
  "@types/jasminewd2": "~2.0.3",
  "@types/lodash-es": "^4.17.6",
  "@types/node": "^12.11.1",
- "@babel/runtime": "^7.24.5",
- "codelyzer": "^6.0.2",
+ "codelyzer": "^6.0.2",
  "jasmine-core": "~3.10.1",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~6.4.1",
  "karma-chrome-launcher": "~3.1.0",
  "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": "^16.0.1",
  "protractor": "~7.0.0",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
- "typescript": "~4.6.4"
+ "typescript": "~4.9.5"
  }
 }

projects/demo/src/test.ts

@@ -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/klippa/ngx-enhancy-forms/package.json

@@ -1,17 +1,17 @@
 {
  "name": "@klippa/ngx-enhancy-forms",
- "version": "14.22.14",
+ "version": "16.22.15",
  "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/klippa/ngx-enhancy-forms/src/lib/elements/sortable-items/sortable-items.component.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/src/lib/material.module.ts

@@ -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/ngx-enhancy-forms.module.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';
@@ -33,7 +33,6 @@ import {WarningIconComponent} from "./warning-icon/warning-icon.component";
 import {ElementIsTruncatedCbComponent} from "./elementIsTruncatedCb.component";
 import {OnRenderDirective} from "./onRender.component";
 
-
 @NgModule({
  imports: [
  CommonModule,
@@ -106,5 +105,4 @@ import {OnRenderDirective} from "./onRender.component";
  ElementIsTruncatedCbComponent,
  ]
 })
-export class NgxEnhancyFormsModule {
-}
+export class NgxEnhancyFormsModule {}

projects/klippa/ngx-enhancy-forms/src/test.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/tsconfig.lib.json

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

tsconfig.json

@@ -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
  }
 }