Activate isolatedModules

projects/natural-editor/src/lib/class-dialog/class-dialog.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angular/material/dialog';
 import {FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ifValid} from '@ecodev/natural';
@@ -25,6 +25,8 @@ export type ClassDialogData = {
     imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class ClassDialogComponent {
+    private dialogRef = inject<MatDialogRef<ClassDialogComponent, ClassDialogData>>(MatDialogRef);
+
     public readonly classControl = new FormControl('', {
         validators: Validators.pattern(/(^\s*(-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*)+)/),
         nonNullable: true,
@@ -33,10 +35,9 @@ export class ClassDialogComponent {
         class: this.classControl,
     });
 
-    public constructor(
-        @Inject(MAT_DIALOG_DATA) data: ClassDialogData,
-        private dialogRef: MatDialogRef<ClassDialogComponent, ClassDialogData>,
-    ) {
+    public constructor() {
+        const data = inject<ClassDialogData>(MAT_DIALOG_DATA);
+
         this.form.setValue(data);
     }
 

projects/natural-editor/src/lib/color-dialog/color-dialog.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angular/material/dialog';
 import {FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ifValid} from '@ecodev/natural';
@@ -36,6 +36,8 @@ export type ColorDialogData = {
     ],
 })
 export class ColorDialogComponent {
+    private dialogRef = inject<MatDialogRef<ColorDialogComponent, ColorDialogData>>(MatDialogRef);
+
     public readonly colors: string[][] = [
         [
             '#000000',
@@ -187,10 +189,9 @@ export class ColorDialogComponent {
         color: this.colorControl,
     });
 
-    public constructor(
-        @Inject(MAT_DIALOG_DATA) data: ColorDialogData,
-        private dialogRef: MatDialogRef<ColorDialogComponent, ColorDialogData>,
-    ) {
+    public constructor() {
+        const data = inject<ColorDialogData>(MAT_DIALOG_DATA);
+
         this.form.setValue(data);
     }
 

projects/natural-editor/src/lib/custom-css/custom-css.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, HostBinding, Inject, Input, OnDestroy} from '@angular/core';
+import {Directive, HostBinding, Input, OnDestroy, inject} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 /**
@@ -44,6 +44,8 @@ let componentCount = 0;
     standalone: true,
 })
 export class NaturalCustomCssDirective implements OnDestroy {
+    private readonly document = inject<Document>(DOCUMENT);
+
     private style: HTMLStyleElement | null = null;
 
     @HostBinding('attr.data-natural-id') private readonly id = 'n' + ++uniqueId;
@@ -60,8 +62,6 @@ export class NaturalCustomCssDirective implements OnDestroy {
         }
     }
 
-    public constructor(@Inject(DOCUMENT) private readonly document: Document) {}
-
     public ngOnDestroy(): void {
         this.style?.remove();
 

projects/natural-editor/src/lib/editor/editor.component.spec.ts

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {NaturalEditorComponent} from './editor.component';
-import {Component, Inject, InjectionToken} from '@angular/core';
+import {Component, InjectionToken, inject} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {FormsModule} from '@angular/forms';
 import {ImageUploader} from '../utils/image';
@@ -15,9 +15,9 @@ const IMAGE_UPLOADER = new InjectionToken<ImageUploader | null>('Image uploader
     imports: [FormsModule, NaturalEditorComponent],
 })
 class TestHostComponent {
-    public myValue = '';
+    public readonly imageUploader = inject<ImageUploader | null>(IMAGE_UPLOADER);
 
-    public constructor(@Inject(IMAGE_UPLOADER) public readonly imageUploader: ImageUploader | null) {}
+    public myValue = '';
 }
 
 /**

projects/natural-editor/src/lib/editor/editor.component.ts

@@ -1,16 +1,4 @@
-import {
-    Component,
-    ElementRef,
-    EventEmitter,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Output,
-    Self,
-    ViewChild,
-} from '@angular/core';
+import {Component, ElementRef, EventEmitter, inject, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
 import {ControlValueAccessor, NgControl} from '@angular/forms';
 import {EditorView} from 'prosemirror-view';
 import {EditorState, Plugin, Transaction} from 'prosemirror-state';
@@ -63,6 +51,11 @@ import {MatButtonModule} from '@angular/material/button';
     ],
 })
 export class NaturalEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {
+    private readonly ngControl = inject(NgControl, {optional: true, self: true});
+    private readonly document = inject<Document>(DOCUMENT);
+    private readonly dialog = inject(MatDialog);
+    private readonly imagePlugin = inject(ImagePlugin);
+
     private view: EditorView | null = null;
 
     @ViewChild('editor', {read: ElementRef, static: true}) private editor!: ElementRef<HTMLElement>;
@@ -99,12 +92,7 @@ export class NaturalEditorComponent implements OnInit, OnDestroy, ControlValueAc
 
     public disabled = false;
 
-    public constructor(
-        @Optional() @Self() public readonly ngControl: NgControl,
-        @Inject(DOCUMENT) private readonly document: Document,
-        private readonly dialog: MatDialog,
-        private readonly imagePlugin: ImagePlugin,
-    ) {
+    public constructor() {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }

projects/natural-editor/src/lib/id-dialog/id-dialog.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angular/material/dialog';
 import {FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ifValid} from '@ecodev/natural';
@@ -25,6 +25,8 @@ export type IdDialogData = {
     imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class IdDialogComponent {
+    private dialogRef = inject<MatDialogRef<IdDialogComponent, IdDialogData>>(MatDialogRef);
+
     public readonly idControl = new FormControl('', {
         validators: Validators.pattern(/(^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)+)/),
         nonNullable: true,
@@ -33,10 +35,9 @@ export class IdDialogComponent {
         id: this.idControl,
     });
 
-    public constructor(
-        @Inject(MAT_DIALOG_DATA) data: IdDialogData,
-        private dialogRef: MatDialogRef<IdDialogComponent, IdDialogData>,
-    ) {
+    public constructor() {
+        const data = inject<IdDialogData>(MAT_DIALOG_DATA);
+
         this.form.setValue(data);
     }
 

projects/natural-editor/src/lib/link-dialog/link-dialog.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angular/material/dialog';
 import {FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ifValid} from '@ecodev/natural';
@@ -18,17 +18,18 @@ export type LinkDialogData = {
     imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class LinkDialogComponent {
+    private dialogRef = inject<MatDialogRef<LinkDialogComponent, LinkDialogData>>(MatDialogRef);
+
     public readonly hrefControl = new FormControl('', {validators: Validators.required, nonNullable: true});
     public readonly titleControl = new FormControl('', {nonNullable: true});
     public readonly form = new FormGroup({
         href: this.hrefControl,
         title: this.titleControl,
     });
 
-    public constructor(
-        @Inject(MAT_DIALOG_DATA) data: LinkDialogData,
-        private dialogRef: MatDialogRef<LinkDialogComponent, LinkDialogData>,
-    ) {
+    public constructor() {
+        const data = inject<LinkDialogData>(MAT_DIALOG_DATA);
+
         this.form.setValue({title: '', ...data});
     }
 

projects/natural-editor/src/lib/utils/image.ts

@@ -2,7 +2,7 @@ import {Decoration, DecorationSet, EditorView} from 'prosemirror-view';
 import {EditorState, Plugin} from 'prosemirror-state';
 import {Observable} from 'rxjs';
 import {Schema} from 'prosemirror-model';
-import {Inject, Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 export type ImageUploader = (file: File) => Observable<string>;
@@ -11,7 +11,9 @@ export type ImageUploader = (file: File) => Observable<string>;
 export class ImagePlugin {
     public readonly plugin: Plugin<DecorationSet>;
 
-    public constructor(@Inject(DOCUMENT) document: Document) {
+    public constructor() {
+        const document = inject<Document>(DOCUMENT);
+
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const self = this;
         this.plugin = new Plugin<DecorationSet>({

projects/natural-editor/src/public-api.ts

@@ -6,4 +6,4 @@
 
 export {NaturalCustomCssDirective} from './lib/custom-css/custom-css.directive';
 export {NaturalEditorComponent} from './lib/editor/editor.component';
-export {ImageUploader} from './lib/utils/image';
+export type {ImageUploader} from './lib/utils/image';

projects/natural/src/lib/classes/abstract-detail.spec.ts

@@ -2,7 +2,7 @@ import {TestBed} from '@angular/core/testing';
 import {MockApolloProvider} from '../testing/mock-apollo.provider';
 import {Item, ItemInput, ItemService} from '../testing/item.service';
 import {Literal, NaturalAbstractDetail, NaturalAlertService} from '@ecodev/natural';
-import {Component, Injectable} from '@angular/core';
+import {Component, inject, Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, provideRouter, Route, Router} from '@angular/router';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {BehaviorSubject, of, Subject} from 'rxjs';
@@ -13,7 +13,9 @@ import {provideNoopAnimations} from '@angular/platform-browser/animations';
     template: ` <div i18n>Test simple component</div>`,
 })
 class TestSimpleComponent extends NaturalAbstractDetail<ItemService> {
-    public constructor(service: ItemService) {
+    public constructor() {
+        const service = inject(ItemService);
+
         super('item', service);
     }
 }

projects/natural/src/lib/classes/abstract-list.spec.ts

@@ -8,7 +8,7 @@ import {
     naturalProviders,
 } from '@ecodev/natural';
 import {ItemService} from '../testing/item.service';
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {ActivatedRoute, Data} from '@angular/router';
 import {MockApolloProvider} from '../testing/mock-apollo.provider';
 
@@ -47,7 +47,9 @@ class TestListComponent extends NaturalAbstractList<ItemService> {
         },
     ];
 
-    public constructor(service: ItemService) {
+    public constructor() {
+        const service = inject(ItemService);
+
         super(service);
     }
 

projects/natural/src/lib/modules/alert/alert.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {MatSnackBar, MatSnackBarRef, SimpleSnackBar} from '@angular/material/snack-bar';
 import {Observable} from 'rxjs';
@@ -8,10 +8,8 @@ import {NaturalConfirmComponent, NaturalConfirmData} from './confirm.component';
     providedIn: 'root',
 })
 export class NaturalAlertService {
-    public constructor(
-        private readonly dialog: MatDialog,
-        private readonly snackBar: MatSnackBar,
-    ) {}
+    private readonly dialog = inject(MatDialog);
+    private readonly snackBar = inject(MatSnackBar);
 
     /**
      * Show an informative message in a snack bar

projects/natural/src/lib/modules/alert/confirm.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
 
@@ -16,5 +16,5 @@ export type NaturalConfirmData = {
     imports: [MatDialogModule, MatButtonModule],
 })
 export class NaturalConfirmComponent {
-    public constructor(@Inject(MAT_DIALOG_DATA) public data: NaturalConfirmData) {}
+    public readonly data = inject<NaturalConfirmData>(MAT_DIALOG_DATA);
 }

projects/natural/src/lib/modules/avatar/component/avatar.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {Component, HostBinding, Input, OnChanges, SimpleChanges, inject} from '@angular/core';
 import {Source} from '../sources/source';
 import {AvatarService} from '../service/avatar.service';
 import {CommonModule} from '@angular/common';
@@ -58,6 +58,8 @@ type Style = Partial<CSSStyleDeclaration>;
     imports: [CommonModule],
 })
 export class NaturalAvatarComponent implements OnChanges {
+    private readonly avatarService = inject(AvatarService);
+
     @Input() public image?: string | null;
     @Input() public initials?: string | null;
     @Input() public gravatar?: string | null;
@@ -85,8 +87,6 @@ export class NaturalAvatarComponent implements OnChanges {
     private currentIndex = -1;
     private sources: Source[] = [];
 
-    public constructor(private readonly avatarService: AvatarService) {}
-
     /**
      * Detect inputs change
      */

projects/natural/src/lib/modules/columns-picker/columns-picker.component.ts

@@ -31,6 +31,8 @@ import {CommonModule} from '@angular/common';
 })
 export class NaturalColumnsPickerComponent implements OnChanges {
     private readonly destroyRef = inject(DestroyRef);
+    private readonly breakpointObserver = inject(BreakpointObserver);
+
     private _selections?: string[];
     private _availableColumns: Required<AvailableColumn>[] = [];
 
@@ -85,8 +87,6 @@ export class NaturalColumnsPickerComponent implements OnChanges {
 
     public readonly isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map(result => result.matches));
 
-    public constructor(private readonly breakpointObserver: BreakpointObserver) {}
-
     private initColumns(): void {
         this._availableColumns?.forEach(col => {
             col.checked = this._selections?.length ? this._selections.includes(col.id) : col.checked;

projects/natural/src/lib/modules/columns-picker/public-api.ts

@@ -2,5 +2,5 @@
  * Public API Surface of natural
  */
 
-export {AvailableColumn, Button, SubButton} from './types';
+export type {AvailableColumn, Button, SubButton} from './types';
 export * from './columns-picker.component';

projects/natural/src/lib/modules/common/directives/background-density.directive.ts

@@ -1,11 +1,13 @@
-import {Directive, ElementRef, Input} from '@angular/core';
+import {Directive, ElementRef, Input, inject} from '@angular/core';
 import {densities} from './src-density.directive';
 
 @Directive({
     selector: '[naturalBackgroundDensity]',
     standalone: true,
 })
 export class NaturalBackgroundDensityDirective {
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     /**
      * Automatically apply background image selection based on screen density.
      *
@@ -53,6 +55,4 @@ export class NaturalBackgroundDensityDirective {
             this.elementRef.nativeElement.style.backgroundImage = responsive;
         }
     }
-
-    public constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
 }