next: update to angular v19

.gitignore

@@ -39,4 +39,5 @@ testem.log
 Thumbs.db
 
 .nx/cache
+.nx/workspace-data
 .angular

.prettierignore

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

README.md

@@ -32,7 +32,6 @@ import { toast, NgxSonnerToaster } from 'ngx-sonner';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [NgxSonnerToaster],
   template: `
     <ngx-sonner-toaster />
@@ -206,7 +205,6 @@ You can use `toast.custom()` to render an unstyled toast with a custom component
 ```ts
 @Component({
   selector: 'app-custom',
-  standalone: true,
   template: `
     <div>
       This is a custom component <button (click)="toastClick()">close</button>

apps/docs/.eslintrc.json

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

apps/docs/src/app/app.component.ts

@@ -10,20 +10,19 @@ import { TypeComponent } from './components/types.component';
 import { UsageComponent } from './components/usage.component';
 
 @Component({
-  selector: 'docs-root',
-  standalone: true,
-  imports: [
-    NgxSonnerToaster,
-    HeroComponent,
-    InstallationComponent,
-    UsageComponent,
-    TypeComponent,
-    PositionComponent,
-    ExpandComponent,
-    OtherComponent,
-    FooterComponent,
-  ],
-  template: `
+    selector: 'docs-root',
+    imports: [
+        NgxSonnerToaster,
+        HeroComponent,
+        InstallationComponent,
+        UsageComponent,
+        TypeComponent,
+        PositionComponent,
+        ExpandComponent,
+        OtherComponent,
+        FooterComponent,
+    ],
+    template: `
     <ngx-sonner-toaster
       [expand]="expand()"
       [position]="position()"
@@ -43,7 +42,7 @@ import { UsageComponent } from './components/usage.component';
     </main>
     <docs-footer />
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   expand = signal(false);

apps/docs/src/app/components/code-block.component.ts

@@ -19,7 +19,6 @@ hljs.registerLanguage('xml', xml);
 
 @Component({
   selector: 'docs-code-block',
-  standalone: true,
   template: `
     <div class="outerWrapper">
       <button class="copyButton" (click)="onCopy()" aria-label="Copy code">

apps/docs/src/app/components/code-snippets.ts

@@ -2,7 +2,6 @@ export const usageSnippet = `import { toast, NgxSonnerToaster } from 'ngx-sonner
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [NgxSonnerToaster],
   template: \`
     <ngx-sonner-toaster />

apps/docs/src/app/components/custom.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'docs-custom',
-  standalone: true,
   template: `
     <div>A custom toast with default styling</div>
   `,

apps/docs/src/app/components/expand.component.ts

@@ -8,10 +8,9 @@ import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
 
 @Component({
-  selector: 'docs-expand',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-expand',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Expand</h2>
       <p>
@@ -36,7 +35,7 @@ import { CodeBlockComponent } from './code-block.component';
       <docs-code-block [code]="expandSnippet()" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExpandComponent {
   expand = model.required<boolean>();

apps/docs/src/app/components/footer.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'docs-footer',
-  standalone: true,
   template: `
     <footer class="wrapper">
       <div class="container">

apps/docs/src/app/components/hero.component.ts

@@ -3,7 +3,6 @@ import { toast } from 'ngx-sonner';
 
 @Component({
   selector: 'docs-hero',
-  standalone: true,
   template: `
     <div class="wrapper">
       <div class="toastWrapper">
@@ -21,7 +20,7 @@ import { toast } from 'ngx-sonner';
           data-primary
           (click)="
             toast('Sonner', {
-              description: 'An opinionated toast component for Angular.'
+              description: 'An opinionated toast component for Angular.',
             })
           "
           class="button">

apps/docs/src/app/components/installation.component.ts

@@ -8,7 +8,6 @@ import {
 
 @Component({
   selector: 'docs-installation',
-  standalone: true,
   template: `
     <div>
       <h2>Installation</h2>

apps/docs/src/app/components/other.component.ts

@@ -11,10 +11,9 @@ import { TestWithInputsComponent } from './test-with-inputs.component';
 import { TestComponent } from './test.component';
 
 @Component({
-  selector: 'docs-other',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-other',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Other</h2>
       <div class="buttons">
@@ -34,7 +33,7 @@ import { TestComponent } from './test.component';
       <docs-code-block [code]="codeSnipped()" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OtherComponent {
   closeButton = model.required<boolean>();

apps/docs/src/app/components/position.component.ts

@@ -19,10 +19,9 @@ const positions = [
 type Position = (typeof positions)[number];
 
 @Component({
-  selector: 'docs-position',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-position',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Position</h2>
       <p>Swipe direction changes depending on the position.</p>
@@ -39,7 +38,7 @@ type Position = (typeof positions)[number];
       <docs-code-block [code]="positionSnippet()" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PositionComponent {
   protected positions = positions;

apps/docs/src/app/components/test-with-inputs.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'docs-test-with-inputs',
-  standalone: true,
   template: `
     <div [innerHTML]="message()"></div>
   `,

apps/docs/src/app/components/test.component.ts

@@ -7,7 +7,6 @@ import {
 
 @Component({
   selector: 'docs-test',
-  standalone: true,
   template: `
     <div class="headless">
       <p class="headlessTitle">Event Created</p>

apps/docs/src/app/components/types.component.ts

@@ -4,10 +4,9 @@ import { CodeBlockComponent } from './code-block.component';
 import { CustomComponent } from './custom.component';
 
 @Component({
-  selector: 'docs-types',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-types',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Types</h2>
       <p>
@@ -28,7 +27,7 @@ import { CustomComponent } from './custom.component';
       <docs-code-block [code]="activeType().snippet" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TypeComponent {
   allTypes = [

apps/docs/src/app/components/usage.component.ts

@@ -3,17 +3,16 @@ import { CodeBlockComponent } from './code-block.component';
 import { usageSnippet } from './code-snippets';
 
 @Component({
-  selector: 'docs-usage',
-  standalone: true,
-  imports: [CodeBlockComponent],
-  template: `
+    selector: 'docs-usage',
+    imports: [CodeBlockComponent],
+    template: `
     <div>
       <h2>Usage</h2>
       <p>Render the toaster in the root of your app.</p>
       <docs-code-block [code]="usageSnippet" />
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UsageComponent {
   protected readonly usageSnippet = usageSnippet;

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

libs/ngx-sonner/.eslintrc.json

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

libs/ngx-sonner/README.md

@@ -8,6 +8,7 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 | ngx-sonner | @angular |
 |------------|----------|
+| 3.0.0      | ≥19.0.0  |
 | 2.0.0      | ≥18.0.0  |
 | 1.0.0      | ≥17.3.0  |
 
@@ -32,7 +33,6 @@ import { toast, NgxSonnerToaster } from 'ngx-sonner';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [NgxSonnerToaster],
   template: `
     <ngx-sonner-toaster />
@@ -206,7 +206,6 @@ You can use `toast.custom()` to render an unstyled toast with a custom component
 ```ts
 @Component({
   selector: 'app-custom',
-  standalone: true,
   template: `
     <div>
       This is a custom component <button (click)="toastClick()">close</button>

libs/ngx-sonner/package.json

@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=18.0.0",
-    "@angular/core": ">=18.0.0"
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

libs/ngx-sonner/src/lib/icon.component.ts

@@ -3,7 +3,6 @@ import { ToastTypes } from './types';
 
 @Component({
   selector: 'ngx-sonner-icon',
-  standalone: true,
   template: `
     @switch (type()) {
       @case ('success') {

libs/ngx-sonner/src/lib/loader.component.ts

@@ -7,7 +7,6 @@ import {
 
 @Component({
   selector: 'ngx-sonner-loader',
-  standalone: true,
   template: `
     <div class="sonner-loading-wrapper" [attr.data-visible]="isVisible()">
       <div class="sonner-spinner">

libs/ngx-sonner/src/lib/pipes/as-component.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform, Type } from '@angular/core';
 
-@Pipe({ name: 'asComponent', standalone: true })
+@Pipe({ name: 'asComponent' })
 export class AsComponentPipe implements PipeTransform {
   transform(value: unknown): Type<unknown> {
     return value as Type<unknown>;

libs/ngx-sonner/src/lib/pipes/is-string.pipe.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'isString', standalone: true })
+@Pipe({ name: 'isString' })
 export class IsStringPipe implements PipeTransform {
   transform(value: unknown): boolean {
     return typeof value === 'string';

libs/ngx-sonner/src/lib/pipes/toast-filter.pipe.ts

@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { Position, ToastT } from '../types';
 
-@Pipe({ name: 'toastFilter', standalone: true })
+@Pipe({ name: 'toastFilter' })
 export class ToastFilterPipe implements PipeTransform {
   transform(toasts: ToastT[], index: number, position: Position): ToastT[] {
     return toasts.filter(