feat: migration to Angular 19

.gitignore

@@ -4,6 +4,7 @@
 dist
 tmp
 /out-tsc
+storybook-static
 
 # dependencies
 node_modules
@@ -40,4 +41,5 @@ Thumbs.db
 
 .angular
 
-.nx/cache
+.nx/cache
+.nx/workspace-data

.prettierignore

@@ -3,4 +3,5 @@
 /coverage
 .angular
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+
+- **Dependency**: Require Angular 19
+
 ## [18.0.0] - 2024-05-30
 
 ### BREAKING CHANGES

apps/demo/.eslintrc.json

@@ -24,7 +24,8 @@
             "prefix": "app",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

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

@@ -11,9 +11,9 @@ import {
 } from '@perfectmemory/ngx-contextmenu';
 
 @Component({
-  selector: 'app-demo-context-menu',
-  styles: [
-    `
+    selector: 'app-demo-context-menu',
+    styles: [
+        `
       .dashboardContainer {
         width: 100%;
         height: 100%;
@@ -32,8 +32,9 @@ import {
         position: absolute;
       }
     `,
-  ],
-  templateUrl: './app-demo.component.html',
+    ],
+    templateUrl: './app-demo.component.html',
+    standalone: false
 })
 export class AppDemoComponent {
   @Input()

apps/demo/src/app/app.component.ts

@@ -11,9 +11,9 @@ import {
 } from '@perfectmemory/ngx-contextmenu';
 
 @Component({
-  selector: 'demo-context-menu-demo',
-  styles: [
-    `
+    selector: 'demo-context-menu-demo',
+    styles: [
+        `
       .dashboardContainer {
         width: 100%;
         height: 100%;
@@ -32,8 +32,9 @@ import {
         position: absolute;
       }
     `,
-  ],
-  templateUrl: './app.component.html',
+    ],
+    templateUrl: './app.component.html',
+    standalone: false
 })
 export class AppComponent {
   @Input()

apps/demo/src/styles.scss

@@ -1,5 +1,10 @@
+@use 'sass:meta';
 /* You can add global styles to this file, and also import other style files */
 
 @import '@angular/cdk/overlay-prebuilt.css';
-@import '../../../libs/ngx-contextmenu/src/assets/stylesheets/base.scss';
-@import '../../../libs/ngx-contextmenu/src/assets/stylesheets/dark-theme.scss';
+@include meta.load-css(
+  '../../../libs/ngx-contextmenu/src/assets/stylesheets/base.scss'
+);
+@include meta.load-css(
+  '../../../libs/ngx-contextmenu/src/assets/stylesheets/dark-theme.scss'
+);

libs/ngx-contextmenu/.eslintrc.json

@@ -24,7 +24,8 @@
             "prefix": "context-menu",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

libs/ngx-contextmenu/.storybook/main.ts

@@ -21,9 +21,7 @@ const config: StorybookConfig = {
     },
   ],
 
-  docs: {
-    autodocs: false,
-  },
+  docs: {},
 };
 
 export default config;

libs/ngx-contextmenu/package.json

@@ -24,9 +24,9 @@
     "url": "git+ssh://[email protected]:PerfectMemory/ngx-contextmenu.git"
   },
   "peerDependencies": {
-    "@angular/cdk": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0"
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

libs/ngx-contextmenu/src/assets/stylesheets/base.scss

@@ -1,4 +1,4 @@
-@import './button-reset.scss';
+@use 'button-reset.scss';
 
 :root {
   // Styling of the element where a context menu can appear

libs/ngx-contextmenu/src/assets/stylesheets/dark-theme.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
+@use 'base.scss';
 
 .dark-theme {
   // Styling of the element where a context menu can appear

libs/ngx-contextmenu/src/lib/components/context-menu-content/context-menu-content.component.ts

@@ -30,14 +30,15 @@ export const TESTING_WRAPPER = {
 };
 
 @Component({
-  selector: 'context-menu-content',
-  templateUrl: './context-menu-content.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    tabindex: '0',
-    role: 'dialog',
-    class: 'ngx-contextmenu',
-  },
+    selector: 'context-menu-content',
+    templateUrl: './context-menu-content.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        tabindex: '0',
+        role: 'dialog',
+        class: 'ngx-contextmenu',
+    },
+    standalone: false
 })
 export class ContextMenuContentComponent<T>
   implements OnDestroy, AfterViewInit

libs/ngx-contextmenu/src/lib/components/context-menu/context-menu.component.ts

@@ -32,9 +32,10 @@ import {
 } from './context-menu.component.interface';
 
 @Component({
-  encapsulation: ViewEncapsulation.None,
-  selector: 'context-menu',
-  template: '',
+    encapsulation: ViewEncapsulation.None,
+    selector: 'context-menu',
+    template: '',
+    standalone: false
 })
 export class ContextMenuComponent<T> implements OnInit, OnDestroy {
   /**

libs/ngx-contextmenu/src/lib/directives/context-menu-content-item/context-menu-content-item.directive.spec.ts

@@ -7,6 +7,7 @@ import { ContextMenuContentItemDirective } from './context-menu-content-item.dir
 
 @Component({
   template: '<div [contextMenuContentItem]="contextMenuItem"></div>',
+  standalone: false,
 })
 class TestHostComponent {
   @Input()

libs/ngx-contextmenu/src/lib/directives/context-menu-content-item/context-menu-content-item.directive.ts

@@ -4,11 +4,12 @@ import { evaluateIfFunction } from '../../helper/evaluate';
 import { ContextMenuItemDirective } from '../context-menu-item/context-menu-item.directive';
 
 @Directive({
-  selector: '[contextMenuContentItem]',
-  exportAs: 'contextMenuContentItem',
-  host: {
-    class: 'ngx-context-menu-item',
-  },
+    selector: '[contextMenuContentItem]',
+    exportAs: 'contextMenuContentItem',
+    host: {
+        class: 'ngx-context-menu-item',
+    },
+    standalone: false
 })
 export class ContextMenuContentItemDirective<T> implements FocusableOption {
   @Input()

libs/ngx-contextmenu/src/lib/directives/context-menu-item/context-menu-item.directive.spec.ts

@@ -5,6 +5,7 @@ import { ContextMenuItemDirective } from './context-menu-item.directive';
 
 @Component({
   template: '<div contextMenuItem></div>',
+  standalone: false,
 })
 class TestHostComponent {}
 

libs/ngx-contextmenu/src/lib/directives/context-menu-item/context-menu-item.directive.ts

@@ -10,7 +10,8 @@ import type { ContextMenuComponent } from '../../components/context-menu/context
 import { evaluateIfFunction } from '../../helper/evaluate';
 
 @Directive({
-  selector: '[contextMenuItem]',
+    selector: '[contextMenuItem]',
+    standalone: false
 })
 export class ContextMenuItemDirective<T> {
   /**

libs/ngx-contextmenu/src/lib/directives/context-menu/context-menu.directive.spec.ts

@@ -9,6 +9,7 @@ import { ContextMenuDirective } from './context-menu.directive';
 
 @Component({
   template: '<div contextMenu></div>',
+  standalone: false,
 })
 class TestHostComponent {}
 

libs/ngx-contextmenu/src/lib/directives/context-menu/context-menu.directive.ts

@@ -9,12 +9,13 @@ import type { ContextMenuComponent } from '../../components/context-menu/context
 import { ContextMenuOverlaysService } from '../../services/context-menu-overlays/context-menu-overlays.service';
 
 @Directive({
-  selector: '[contextMenu]',
-  exportAs: 'ngxContextMenu',
-  host: {
-    role: 'button',
-    'attr.aria-haspopup': 'menu',
-  },
+    selector: '[contextMenu]',
+    exportAs: 'ngxContextMenu',
+    host: {
+        role: 'button',
+        'attr.aria-haspopup': 'menu',
+    },
+    standalone: false
 })
 export class ContextMenuDirective<T> {
   /**

libs/ngx-contextmenu/src/stories/Setup.mdx

@@ -20,6 +20,7 @@ yarn add @perfectmemory/ngx-contextmenu @angular/cdk
 
 | Angular   | @perfectmemory/ngx-contextmenu | Main purpose                                                                  |
 | --------- | ------------------------------ | ----------------------------------------------------------------------------- |
+| `^19.0.0` | `^19.0.0`                      | Align version with Angular 19                                                 |
 | `^18.0.0` | `^18.0.0`                      | Align version with Angular 18                                                 |
 | `^17.0.0` | `^17.0.0`                      | Align version with Angular 17                                                 |
 | `^16.0.0` | `^16.0.0`                      | Align version with Angular 16                                                 |

libs/ngx-contextmenu/src/stories/ngx-contextmenu/ngx-contextmenu.component.ts

@@ -10,9 +10,10 @@ import { ContextMenuDirective } from '../../lib/directives/context-menu/context-
 import { ContextMenuService } from '../../lib/services/context-menu/context-menu.service';
 
 @Component({
-  selector: 'storybook-context-menu',
-  templateUrl: 'ngx-contextmenu.component.html',
-  styleUrls: ['./ngx-contextmenu.component.scss'],
+    selector: 'storybook-context-menu',
+    templateUrl: 'ngx-contextmenu.component.html',
+    styleUrls: ['./ngx-contextmenu.component.scss'],
+    standalone: false
 })
 export default class StorybookContextMenuComponent {
   @Input()

libs/ngx-contextmenu/src/test-setup.ts

@@ -1,8 +1,6 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-};
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});