feat: convert to standalone

ResizableModule is now deprecated, please migrate to the standalone `ResizableDirective` / `ResizeHandleDirective` directives instead

Author: mattlewis92

.eslintrc.json

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

README.md

@@ -34,10 +34,11 @@ Then use it in your app like so:
 
 ```typescript
 import { Component } from '@angular/core';
-import { ResizeEvent } from 'angular-resizable-element';
+import { ResizeEvent, ResizableDirective, ResizeHandleDirective } from 'angular-resizable-element';
 
 @Component({
   selector: 'demo-app',
+  imports: [ResizableDirective, ResizeHandleDirective],
   styles: [
     `
       .rectangle {
@@ -105,17 +106,6 @@ export class MyComponent {
     console.log('Element was resized', event);
   }
 }
-
-// now use within your apps module
-import { NgModule } from '@angular/core';
-import { ResizableModule } from 'angular-resizable-element';
-
-@NgModule({
-  declarations: [MyComponent],
-  imports: [ResizableModule],
-  bootstrap: [MyComponent],
-})
-class MyModule {}
 ```
 
 You may also find it useful to view the [demo source](https://github.com/mattlewis92/angular-resizable-element/blob/main/projects/demo/app/demo.component.ts).
@@ -129,7 +119,7 @@ https://mattlewis92.github.io/angular-resizable-element/docs/
 
 ### Prepare your environment
 
-- Install [Node.js (>=14.19.0 or >=16.9.0)](http://nodejs.org/)
+- Install [Node.js (>=24.5.0)](http://nodejs.org/)
 - Install pnpm: `corepack enable`
 - Install local dev dependencies: `pnpm install` while current directory is this repo
 

projects/angular-resizable-element/src/lib/resizable.directive.ts

@@ -205,7 +205,6 @@ export const MOUSE_MOVE_THROTTLE_MS: number = 50;
 @Directive({
   selector: '[mwlResizable]',
   exportAs: 'mwlResizable',
-  standalone: false,
 })
 export class ResizableDirective implements OnInit, OnDestroy {
   /**

projects/angular-resizable-element/src/lib/resizable.module.ts

@@ -2,8 +2,11 @@ import { NgModule } from '@angular/core';
 import { ResizableDirective } from './resizable.directive';
 import { ResizeHandleDirective } from './resize-handle.directive';
 
+/**
+ * @deprecated import standalone `ResizableDirective` / `ResizeHandleDirective` directives instead
+ */
 @NgModule({
-  declarations: [ResizableDirective, ResizeHandleDirective],
+  imports: [ResizableDirective, ResizeHandleDirective],
   exports: [ResizableDirective, ResizeHandleDirective],
 })
 export class ResizableModule {}

projects/angular-resizable-element/src/lib/resize-handle.directive.ts

@@ -30,10 +30,7 @@ import { IS_TOUCH_DEVICE } from './util/is-touch-device';
  * <div mwlResizeHandle [resizableContainer]="resizableElement" [resizeEdges]="{bottom: true, right: true}"></div>
  * ```
  */
-@Directive({
-  selector: '[mwlResizeHandle]',
-  standalone: false,
-})
+@Directive({ selector: '[mwlResizeHandle]' })
 export class ResizeHandleDirective implements OnInit, OnDestroy {
   private renderer = inject(Renderer2);
   private element = inject(ElementRef);

projects/angular-resizable-element/src/test.ts

@@ -4,19 +4,19 @@ import 'zone.js';
 import 'zone.js/testing';
 import 'zone.js/plugins/mocha-patch';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
 
 import { use } from 'chai';
 import sinonChai from 'sinon-chai';
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing';
 
 use(sinonChai);
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  BrowserTestingModule,
+  platformBrowserTesting(),
   { teardown: { destroyAfterEach: true } },
 );

projects/angular-resizable-element/src/test/resizable.spec.ts

@@ -1,10 +1,14 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import { ResizableDirective } from '../lib/resizable.directive';
-import { Edges } from '../lib/interfaces/edges.interface';
-import { ResizableModule, ResizeEvent } from '../public-api';
+import {
+  ResizableDirective,
+  Edges,
+  ResizeEvent,
+  ResizeHandleDirective,
+} from 'angular-resizable-element';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { expect } from 'chai';
 import * as sinon from 'sinon';
+import { NgStyle } from '@angular/common';
 
 @Component({
   styles: [
@@ -95,7 +99,7 @@ import * as sinon from 'sinon';
       }
     </div>
   `,
-  standalone: false,
+  imports: [NgStyle, ResizableDirective, ResizeHandleDirective],
 })
 class TestComponent {
   @ViewChild(ResizableDirective) resizable: ResizableDirective;
@@ -112,7 +116,7 @@ class TestComponent {
     right: true,
   };
   enableGhostResize: boolean = true;
-  resizeSnapGrid: object = {};
+  resizeSnapGrid: Edges = {};
   resizeCursors: object = {};
   ghostElementPositioning: 'fixed' | 'absolute' = 'fixed';
   showResizeHandle = false;
@@ -133,8 +137,7 @@ describe('resizable directive', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ResizableModule],
-      declarations: [TestComponent],
+      imports: [TestComponent],
     });
   });
 
@@ -1431,8 +1434,6 @@ describe('resizable directive', () => {
 
   it('should set the resize cursor on the body when resizing', () => {
     const fixture: ComponentFixture<TestComponent> = createComponent();
-    const elm: HTMLElement =
-      fixture.componentInstance.resizable['elm'].nativeElement;
     const handle = fixture.nativeElement.querySelector('.resize-handle-left');
     triggerDomEvent('mousedown', handle, {
       clientX: 100,

projects/demo/app/demo.component.ts

@@ -1,8 +1,14 @@
 import { Component } from '@angular/core';
-import { ResizeEvent } from 'angular-resizable-element';
+import {
+  ResizeEvent,
+  ResizableDirective,
+  ResizeHandleDirective,
+} from 'angular-resizable-element';
+import { NgStyle } from '@angular/common';
 
 @Component({
   selector: 'mwl-demo',
+  imports: [NgStyle, ResizableDirective, ResizeHandleDirective],
   styles: [
     `
       .rectangle {
@@ -88,7 +94,6 @@ import { ResizeEvent } from 'angular-resizable-element';
       </div>
     </div>
   `,
-  standalone: false,
 })
 export class DemoComponent {
   public style: object = {};

projects/demo/app/demo.module.ts

@@ -1,13 +1,12 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { DemoModule } from './app/demo.module';
 import { environment } from './environments/environment';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { DemoComponent } from './app/demo.component';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(DemoModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(DemoComponent).catch((err) => console.error(err));