feat: update to v16

package.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-devkit/build-angular": "^16.2.14",
         "@angular-eslint/builder": "~13.4.0",
         "@angular-eslint/eslint-plugin": "~13.4.0",
         "@angular-eslint/eslint-plugin-template": "~13.4.0",
         "@angular-eslint/schematics": "~13.4.0",
         "@angular-eslint/template-parser": "~13.4.0",
-        "@angular/cli": "^15.2.11",
-        "@angular/compiler-cli": "^15.2.10",
+        "@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",

projects/angular-grid-layout/package.json

@@ -10,7 +10,7 @@
         "url": "git+https://github.com/katoid/angular-grid-layout.git"
     },
     "license": "MIT",
-    "version": "15.0.0",
+    "version": "16.0.0",
     "keywords": [
         "angular",
         "grid",
@@ -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/src/lib/directives/drag-handle.ts

@@ -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/placeholder.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/resize-handle.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/grid-item/grid-item.component.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.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.module.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 {}

projects/demo-app/src/app/app-routing.routes.ts

@@ -0,0 +1,35 @@
+import { Routes } from '@angular/router';
+
+export const APP_ROUTES: Routes = [
+    {
+        path: 'playground',
+        loadChildren: () => import('./playground/playground.routes').then(m => m.PLAYGROUND_ROUTES),
+    },
+    {
+        path: '',
+        redirectTo: 'playground',
+        pathMatch: 'full'
+    },
+    {
+        path: 'custom-handles',
+        loadChildren: () => import('./custom-handles/custom-handles.routes').then(m => m.CUSTOM_ROUTES),
+    },
+    {
+        path: 'real-life-example',
+        loadChildren: () => import('./real-life-example/real-life-example.routes').then(m => m.REAL_LIFE_ROUTES),
+    },
+    {
+        path: 'scroll-test',
+        loadChildren: () => import('./scroll-test/scroll-test.routes').then(m => m.SCROLL_TEST_ROUTES),
+    },
+    {
+        path: 'row-height-fit',
+        loadComponent: () => import('./row-height-fit/row-height-fit.component').then(m => m.KtdRowHeightFitComponent),
+        data: {title: 'Angular Grid Layout - Row Height Fit'}
+    },
+    {
+        path: '**',
+        redirectTo: 'playground'
+    },
+];
+

projects/demo-app/src/app/app.component.scss

@@ -14,20 +14,9 @@
         border-bottom: 1px solid var(--ktd-border-color);
 
         h1 {
-            margin-bottom: 0;
+            margin: 0;
+            font-size: 24px;
+            font-weight: 400;
         }
-
-        mat-icon.github-icon {
-            line-height: 32px;
-            width: 32px;
-            height: 32px;
-
-            &:hover {
-                opacity: 0.7;
-            }
-        }
-
     }
-
-
 }

projects/demo-app/src/app/app.component.ts

@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
-import { MatIconRegistry } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
+import { ActivatedRouteSnapshot, RouterOutlet } from '@angular/router';
 import { ActivatedRoute, Router, RoutesRecognized } from '@angular/router';
 
 const defaultTitle = 'Angular Grid Layout';
 
 @Component({
+    standalone: true,
     selector: 'ktd-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    imports: [RouterOutlet, MatIconModule, MatButtonModule]
 })
 export class KtdAppComponent {
     title: string = defaultTitle;
@@ -21,8 +25,18 @@ export class KtdAppComponent {
 
         this.router.events.subscribe((data) => {
             if (data instanceof RoutesRecognized) {
-                this.title = data.state.root.firstChild?.data.title || defaultTitle;
+                const firstChild = data.state.root;
+                this.title = this.getTitle(firstChild) || defaultTitle;
             }
         });
     }
+
+    getTitle(firstChild: ActivatedRouteSnapshot | null) {
+        while (firstChild) {
+            if (firstChild.data?.title) {
+                return firstChild.data.title;
+            }
+            return this.getTitle(firstChild?.firstChild);
+        }
+    }
 }

projects/demo-app/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { provideRouter } from '@angular/router';
+import { APP_ROUTES } from './app-routing.routes';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
+        provideRouter(APP_ROUTES),
+        provideHttpClient(),
+        importProvidersFrom(
+            BrowserAnimationsModule
+        )
+    ]
+};

projects/demo-app/src/app/custom-handles/custom-handles.component.ts

@@ -1,13 +1,17 @@
 import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import { KtdGridComponent, KtdGridLayout, ktdTrackById } from '@katoid/angular-grid-layout';
-import { DOCUMENT } from '@angular/common';
+import { KtdGridComponent, KtdGridLayout, ktdTrackById, KtdGridItemComponent, KtdGridDragHandle, KtdGridResizeHandle } from '@katoid/angular-grid-layout';
+import { DOCUMENT, NgFor } from '@angular/common';
+import { KtdFooterComponent } from '../components/footer/footer.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
+    standalone: true,
     selector: 'ktd-custom-handles',
     templateUrl: './custom-handles.component.html',
-    styleUrls: ['./custom-handles.component.scss']
+    styleUrls: ['./custom-handles.component.scss'],
+    imports: [KtdGridComponent, NgFor, KtdGridItemComponent, KtdGridDragHandle, MatIconModule, KtdGridResizeHandle, KtdFooterComponent]
 })
 export class KtdCustomHandlesComponent implements OnInit, OnDestroy {
     @ViewChild(KtdGridComponent, {static: true}) grid: KtdGridComponent;