feat: update to angular v16 (#118)

* feat: update to angular 15

* fix: some fixes for the angular 15 upgrade

* feat: update to angular v16

* fix: update angular-builder related deps to version 16

---------

Co-authored-by: llorenspujol <llorenspujol1@gmail.com>

Author: sheikalthaf

package-lock.json

@@ -22,31 +22,31 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^15.2.10",
-        "@angular/cdk": "^15.2.9",
-        "@angular/common": "^15.2.10",
-        "@angular/compiler": "^15.2.10",
-        "@angular/core": "^15.2.10",
-        "@angular/forms": "^15.2.10",
-        "@angular/material": "^15.2.9",
-        "@angular/platform-browser": "^15.2.10",
-        "@angular/platform-browser-dynamic": "^15.2.10",
-        "@angular/router": "^15.2.10",
+        "@angular/animations": "^16.2.12",
+        "@angular/cdk": "^16.2.14",
+        "@angular/common": "^16.2.12",
+        "@angular/compiler": "^16.2.12",
+        "@angular/core": "^16.2.12",
+        "@angular/forms": "^16.2.12",
+        "@angular/material": "^16.2.14",
+        "@angular/platform-browser": "^16.2.12",
+        "@angular/platform-browser-dynamic": "^16.2.12",
+        "@angular/router": "^16.2.12",
         "@swimlane/ngx-charts": "~20.1.0",
         "ngx-color-picker": "^13.0.0",
         "rxjs": "~6.6.0",
         "tslib": "^2.3.1",
-        "zone.js": "~0.11.4"
+        "zone.js": "~0.13.3"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^15.2.11",
-        "@angular-eslint/builder": "~15.2.1",
-        "@angular-eslint/eslint-plugin": "~15.2.1",
-        "@angular-eslint/eslint-plugin-template": "~15.2.1",
-        "@angular-eslint/schematics": "~15.2.1",
-        "@angular-eslint/template-parser": "~15.2.1",
-        "@angular/cli": "^15.2.11",
-        "@angular/compiler-cli": "^15.2.10",
+        "@angular-devkit/build-angular": "^16.2.14",
+        "@angular-eslint/builder": "~16.3.1",
+        "@angular-eslint/eslint-plugin": "~16.3.1",
+        "@angular-eslint/eslint-plugin-template": "~16.3.1",
+        "@angular-eslint/schematics": "~16.3.1",
+        "@angular-eslint/template-parser": "~16.3.1",
+        "@angular/cli": "^16.2.14",
+        "@angular/compiler-cli": "^16.2.12",
         "@commitlint/cli": "~11.0.0",
         "@commitlint/config-angular": "~11.0.0",
         "@commitlint/config-conventional": "~11.0.0",
@@ -67,7 +67,7 @@
         "karma-coverage": "~2.0.3",
         "karma-jasmine": "~4.0.0",
         "karma-jasmine-html-reporter": "^1.5.0",
-        "ng-packagr": "^15.2.2",
+        "ng-packagr": "^16.2.3",
         "protractor": "~7.0.0",
         "standard-version": "~9.1.0",
         "ts-node": "~8.3.0",

package.json

@@ -20,8 +20,8 @@
         "angular-layout"
     ],
     "peerDependencies": {
-        "@angular/common": ">=15.0.0",
-        "@angular/core": ">=15.0.0"
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0"
     },
     "dependencies": {
         "tslib": "^2.3.1"

projects/angular-grid-layout/package.json

@@ -9,6 +9,7 @@ export const KTD_GRID_DRAG_HANDLE = new InjectionToken<KtdGridDragHandle>('KtdGr
 
 /** Handle that can be used to drag a KtdGridItem instance. */
 @Directive({
+    standalone: true,
     selector: '[ktdGridDragHandle]',
     // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {

projects/angular-grid-layout/src/lib/directives/drag-handle.ts

@@ -9,6 +9,7 @@ export const KTD_GRID_ITEM_PLACEHOLDER = new InjectionToken<KtdGridItemPlacehold
 
 /** Directive that can be used to create a custom placeholder for a KtdGridItem instance. */
 @Directive({
+    standalone: true,
     selector: 'ng-template[ktdGridItemPlaceholder]',
     // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {

projects/angular-grid-layout/src/lib/directives/placeholder.ts

@@ -10,6 +10,7 @@ export const KTD_GRID_RESIZE_HANDLE = new InjectionToken<KtdGridResizeHandle>('K
 
 /** Handle that can be used to drag a KtdGridItem instance. */
 @Directive({
+    standalone: true,
     selector: '[ktdGridResizeHandle]',
     // eslint-disable-next-line @angular-eslint/no-host-metadata-property
     host: {

projects/angular-grid-layout/src/lib/directives/resize-handle.ts

@@ -15,6 +15,7 @@ import { coerceNumberProperty, NumberInput } from '../coercion/number-property';
 import { KTD_GRID_ITEM_PLACEHOLDER, KtdGridItemPlaceholder } from '../directives/placeholder';
 
 @Component({
+    standalone: true,
     selector: 'ktd-grid-item',
     templateUrl: './grid-item.component.html',
     styleUrls: ['./grid-item.component.scss'],

projects/angular-grid-layout/src/lib/grid-item/grid-item.component.ts

@@ -113,6 +113,7 @@ const defaultBackgroundConfig: Required<Omit<KtdGridBackgroundCfg, 'show'>> = {
 };
 
 @Component({
+    standalone: true,
     selector: 'ktd-grid',
     templateUrl: './grid.component.html',
     styleUrls: ['./grid.component.scss'],

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { KtdGridComponent } from './grid.component';
 import { KtdGridItemComponent } from './grid-item/grid-item.component';
 import { KtdGridDragHandle } from './directives/drag-handle';
@@ -8,7 +7,7 @@ import { KtdGridService } from './grid.service';
 import { KtdGridItemPlaceholder } from '../public-api';
 
 @NgModule({
-    declarations: [
+    imports: [
         KtdGridComponent,
         KtdGridItemComponent,
         KtdGridDragHandle,
@@ -24,9 +23,9 @@ import { KtdGridItemPlaceholder } from '../public-api';
     ],
     providers: [
         KtdGridService
-    ],
-    imports: [
-        CommonModule
     ]
 })
+/**
+ * @deprecated Use `KtdGridComponent` instead.
+ */
 export class KtdGridModule {}