main <= feature/release v19

.github/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2023 hackingharold
+Copyright (c) 2024 hackingharold
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.github/workflows/on-release.yml

@@ -14,10 +14,11 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           always-auth: true
           token: ${{ secrets.NPM_TOKEN }}
+
       - uses: oven-sh/setup-bun@v1
       - run: bun install --frozen-lockfile
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 hackingharold
+Copyright (c) 2024 hackingharold
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -14,42 +14,42 @@
     "lint:material": "ng lint material"
   },
   "dependencies": {
-    "@angular/animations": "^18.2.8",
-    "@angular/cdk": "~18.2.9",
-    "@angular/common": "^18.2.8",
-    "@angular/compiler": "^18.2.8",
-    "@angular/core": "^18.2.8",
-    "@angular/forms": "^18.2.8",
-    "@angular/material": "~18.2.9",
-    "@angular/platform-browser": "^18.2.8",
-    "@angular/platform-browser-dynamic": "^18.2.8",
-    "@angular/router": "^18.2.8",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "~19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "~19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "rxjs": "~7.8.1",
-    "tslib": "^2.8.0",
+    "tslib": "^2.8.1",
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.9",
-    "@angular-eslint/builder": "^18.4.0",
-    "@angular-eslint/eslint-plugin": "18.4.0",
-    "@angular-eslint/eslint-plugin-template": "18.4.0",
-    "@angular-eslint/schematics": "^18.4.0",
-    "@angular-eslint/template-parser": "18.4.0",
-    "@angular/cli": "^18.2.9",
-    "@angular/compiler-cli": "^18.2.8",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular-eslint/builder": "^18.4.1",
+    "@angular-eslint/eslint-plugin": "18.4.1",
+    "@angular-eslint/eslint-plugin-template": "18.4.1",
+    "@angular-eslint/schematics": "^18.4.1",
+    "@angular-eslint/template-parser": "18.4.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "^22.7.6",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
+    "@types/node": "^22.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "ajv": "^8.17.1",
-    "eslint": "^9.12.0",
+    "eslint": "^9.15.0",
     "jasmine-core": "~5.4.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^18.2.1",
-    "typescript": "5.5.4"
+    "ng-packagr": "^19.0.0",
+    "typescript": "5.6.3"
   }
 }

projects/app/src/app/app.component.ts

@@ -1,8 +1,27 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatChipRow } from '@angular/material/chips';
+import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { FileInputDirective } from '@ngx-dropzone/cdk';
+import { MatDropzone } from '@ngx-dropzone/material';
 
 @Component({
   selector: 'app-root',
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatError,
+    MatInput,
+    MatChipRow,
+    MatIcon,
+    MatDropzone,
+    FileInputDirective,
+  ],
   template: `<div class="app-container">
     <mat-form-field appearance="outline">
       <mat-label>Drop only .png files!</mat-label>

projects/app/src/main.ts

@@ -1,7 +1,7 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideAnimations()],
+}).catch((e) => console.error(e));

projects/cdk/package.json

@@ -23,9 +23,9 @@
     "cdk"
   ],
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
     "rxjs": "^7.4.0"
   }
 }

projects/cdk/src/lib/dropzone/dropzone.component.spec.ts

@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { FileInputDirective, FileInputValidators, FileInputValue } from '../file-input';
-import { DropzoneCdkModule } from './../cdk.module';
 import { DropzoneComponent } from './dropzone.component';
 
 interface Selectors<T> {
@@ -17,8 +16,7 @@ interface Selectors<T> {
 describe('DropzoneComponent', () => {
   function configureDropzoneTestingModule<T>(testComponent: Type<T>): Selectors<T> {
     const fixture = TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, DropzoneCdkModule],
-      declarations: [testComponent],
+      imports: [testComponent],
     }).createComponent(testComponent);
 
     const element = fixture.debugElement.query(By.directive(DropzoneComponent));
@@ -148,6 +146,7 @@ describe('DropzoneComponent', () => {
 
 @Component({
   selector: 'basic-dropzone',
+  imports: [DropzoneComponent, FileInputDirective],
   template: `
     <ngx-dropzone>
       <input type="file" fileInput />
@@ -158,6 +157,7 @@ class DropzoneBasic {}
 
 @Component({
   selector: 'form-control-dropzone',
+  imports: [ReactiveFormsModule, DropzoneComponent, FileInputDirective],
   template: `
     <ngx-dropzone>
       <input type="file" fileInput [formControl]="fileCtrl" multiple />

projects/cdk/src/lib/dropzone/dropzone.component.ts

@@ -20,6 +20,8 @@ import { DropzoneService } from './dropzone.service';
 @Component({
   selector: 'ngx-dropzone',
   exportAs: 'dropzone',
+  imports: [FileInputDirective],
+  providers: [DropzoneService],
   template: `<ng-content></ng-content>`,
   host: {
     tabindex: '0',

projects/cdk/src/lib/dropzone/dropzone.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { nonNullable } from '../coercion';
-import { File } from './../file-input';
+import { type File } from './../file-input';
 
 @Injectable({
   providedIn: 'root',

projects/cdk/src/lib/file-input/accept.service.spec.ts

@@ -4,6 +4,11 @@ import { AcceptService } from './accept.service';
 describe('AcceptService', () => {
   let service: AcceptService;
 
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AcceptService);
+  });
+
   /** Returns a simple fake file with given extension and optional type. */
   const getFile = (ext: string, type?: string) => new File(['...'], `${Date.now()}.${ext}`, { type });
 
@@ -14,11 +19,6 @@ describe('AcceptService', () => {
     getFile('pdf', 'application/octet-stream'),
   ];
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(AcceptService);
-  });
-
   it('should filter based on file extension', () => {
     const files = getFileList();
     const accepted = service.accepts(files, '.doc, txt , .pdf,random/MIME');

projects/cdk/src/lib/file-input/file-input.directive.spec.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement, Type } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { getArrayValueError, getNonArrayValueError } from './file-input-errors';
 import { FileInputValue } from './file-input-value';
@@ -24,8 +24,7 @@ const getFileList = (files: File[]): FileList => {
 describe('FileInputDirective', () => {
   function configureFileInputTestingModule<T>(testComponent: Type<T>): Selectors<T> {
     const fixture = TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule],
-      declarations: [FileInputDirective, testComponent],
+      imports: [testComponent],
     }).createComponent(testComponent);
 
     const inputElement = fixture.debugElement.query(By.directive(FileInputDirective));
@@ -299,34 +298,40 @@ describe('FileInputDirective', () => {
 });
 
 @Component({
+  imports: [FileInputDirective],
   template: `<input fileInput type="file" />`,
 })
 class FileInputBasic {}
 
 @Component({
+  imports: [FileInputDirective],
   template: `<input fileInput type="file" multiple />`,
 })
 class FileInputMultiple {}
 
 @Component({
+  imports: [FileInputDirective],
   // This combination is not valid! "Append" should only be used together with "multiple".
   template: `<input fileInput type="file" mode="append" />`,
 })
 class FileInputAppend {}
 
 @Component({
+  imports: [FileInputDirective],
   template: `<input fileInput type="file" multiple mode="append" />`,
 })
 class FileInputMultipleAppend {}
 
 @Component({
+  imports: [ReactiveFormsModule, FileInputDirective],
   template: `<input fileInput type="file" [formControl]="fileCtrl" />`,
 })
 class FileInputWithFormControl {
   fileCtrl = new FormControl<FileInputValue>(null, [Validators.required]);
 }
 
 @Component({
+  imports: [ReactiveFormsModule, FileInputDirective],
   template: `<input fileInput type="file" disabled />`,
 })
 class FileInputDisabled {}

projects/cdk/src/public-api.ts

@@ -2,7 +2,6 @@
  * Public API Surface of cdk
  */
 
-export * from './lib/cdk.module';
 export * from './lib/coercion';
 export * from './lib/dropzone';
 export * from './lib/file-input';

projects/material/package.json

@@ -23,10 +23,10 @@
     "material"
   ],
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@ngx-dropzone/cdk": "^18.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@ngx-dropzone/cdk": "^19.0.0",
     "rxjs": "^7.4.0"
   }
 }

projects/material/src/lib/mat-dropzone/mat-dropzone.component.spec.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, DebugElement, Type } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -6,8 +7,7 @@ import { MatError, MatFormFieldModule, MatLabel } from '@angular/material/form-f
 import { MatIconModule } from '@angular/material/icon';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DropzoneCdkModule, FileInputDirective, FileInputValidators, FileInputValue } from '@ngx-dropzone/cdk';
-import { DropzoneMaterialModule } from '../material.module';
+import { FileInputDirective, FileInputValidators, FileInputValue } from '@ngx-dropzone/cdk';
 import { MatDropzone } from './mat-dropzone.component';
 
 interface Selectors<T> {
@@ -25,16 +25,7 @@ interface Selectors<T> {
 describe('MatDropzone', () => {
   function configureDropzoneTestingModule<T>(testComponent: Type<T>): Selectors<T> {
     const fixture = TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        ReactiveFormsModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatChipsModule,
-        DropzoneCdkModule,
-        DropzoneMaterialModule,
-      ],
-      declarations: [testComponent],
+      imports: [CommonModule, BrowserAnimationsModule, testComponent],
     }).createComponent(testComponent);
 
     const element = fixture.debugElement.query(By.directive(MatDropzone));
@@ -127,6 +118,7 @@ describe('MatDropzone', () => {
 
 @Component({
   selector: 'basic-dropzone',
+  imports: [MatFormFieldModule, MatDropzone, FileInputDirective],
   template: `
     <mat-form-field>
       <mat-label>Drop it basic!</mat-label>
@@ -140,6 +132,7 @@ class DropzoneBasic {}
 
 @Component({
   selector: 'form-control-dropzone',
+  imports: [ReactiveFormsModule, MatFormFieldModule, MatIconModule, MatChipsModule, MatDropzone, FileInputDirective],
   template: `
     <mat-form-field>
       <ngx-mat-dropzone>