Merge branch 'master' of https://github.com/tutkli/ngx-sonner

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.4.0](https://github.com/tutkli/ngx-sonner/compare/v0.3.4...v0.4.0) (2024-04-01)
+
+
+### Features
+
+* use new signal queries ([#4](https://github.com/tutkli/ngx-sonner/issues/4)) ([bde803e](https://github.com/tutkli/ngx-sonner/commit/bde803efb543fbbbc4a812d6ebc19d4c595cd04a))
+
+
+### Bug Fixes
+
+* blurry toasts ([#6](https://github.com/tutkli/ngx-sonner/issues/6)) ([5ba650c](https://github.com/tutkli/ngx-sonner/commit/5ba650c58ecf1fa1f839c85fe0ebe5e825a72f65))
+* preserve heights order when adding new toasts ([#8](https://github.com/tutkli/ngx-sonner/issues/8)) ([c7775a2](https://github.com/tutkli/ngx-sonner/commit/c7775a20f165bc39575afd599004e6cb3787859a))
+
+
+### Chores
+
+* remove nx cloud ([fe4a4d1](https://github.com/tutkli/ngx-sonner/commit/fe4a4d19c9b9d97f4af096e5bb909f04b0b0a777))
+* sync package-lock.json ([ead7f75](https://github.com/tutkli/ngx-sonner/commit/ead7f7597326b1f2ea166fab1fa4efe1821831f8))
+* sync package-lock.json ([bcf2f46](https://github.com/tutkli/ngx-sonner/commit/bcf2f468815d1974e621d4fd9e8918a39a8a0334))
+* update nx ([ddc83fa](https://github.com/tutkli/ngx-sonner/commit/ddc83fa76da51f9d85dd4c2aa7eeb1cf8c1f029f))
+
 ## [0.3.4](https://github.com/tutkli/ngx-sonner/compare/v0.3.3...v0.3.4) (2024-03-07)
 
 

README.md

@@ -6,7 +6,7 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 ## Angular compatibility
 
-Make sure you are using Angular v17.2.0 or greater
+Make sure you are using Angular v17.3.0 or greater
 
 ## Quick start
 

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

@@ -36,15 +36,9 @@ import { UsageComponent } from './components/usage.component';
         <docs-installation />
         <docs-usage />
         <docs-types />
-        <docs-position
-          [position]="position()"
-          (positionChange)="position.set($event)" />
-        <docs-expand [expand]="expand()" (expandChange)="expand.set($event)" />
-        <docs-other
-          [richColors]="richColors()"
-          (richColorsChange)="richColors.set($event)"
-          [closeButton]="closeButton()"
-          (closeButtonChange)="closeButton.set($event)" />
+        <docs-position [(position)]="position" />
+        <docs-expand [(expand)]="expand" />
+        <docs-other [(richColors)]="richColors" [(closeButton)]="closeButton" />
       </div>
     </main>
     <docs-footer />

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

@@ -8,7 +8,7 @@ import {
   inject,
   input,
   signal,
-  ViewChild,
+  viewChild,
 } from '@angular/core';
 import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -138,7 +138,7 @@ export class CodeBlockComponent {
   code = input.required<string>();
   _class = input<string>('', { alias: 'class' });
 
-  @ViewChild('codeElement') codeElement!: ElementRef<HTMLElement>;
+  codeElement = viewChild.required<ElementRef<HTMLElement>>('codeElement');
 
   copying = signal(false);
   cannotDetectLanguage = computed(
@@ -168,9 +168,7 @@ export class CodeBlockComponent {
 
   constructor() {
     effect(() => {
-      if (this.codeElement?.nativeElement) {
-        this.codeElement.nativeElement.innerHTML = this.highlightedCode();
-      }
+      this.codeElement().nativeElement.innerHTML = this.highlightedCode();
     });
   }
 

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

@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
@@ -41,8 +39,7 @@ import { CodeBlockComponent } from './code-block.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpandComponent {
-  expand = input.required<boolean>();
-  @Output() expandChange = new EventEmitter<boolean>();
+  expand = model.required<boolean>();
 
   expandSnippet = computed(
     () => `<ngx-sonner-toaster [expand]="${this.expand()}" />`
@@ -52,13 +49,13 @@ export class ExpandComponent {
     toast('Event has been created', {
       description: 'Monday, January 3rd at 6:00pm',
     });
-    this.expandChange.emit(true);
+    this.expand.set(true);
   }
 
   collapseToasts() {
     toast('Event has been created', {
       description: 'Monday, January 3rd at 6:00pm',
     });
-    this.expandChange.emit(false);
+    this.expand.set(false);
   }
 }

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

@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
   signal,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
@@ -39,43 +37,40 @@ import { TestComponent } from './test.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OtherComponent {
-  closeButton = input.required<boolean>();
-  @Output() closeButtonChange = new EventEmitter<boolean>();
-
-  richColors = input.required<boolean>();
-  @Output() richColorsChange = new EventEmitter<boolean>();
+  closeButton = model.required<boolean>();
+  richColors = model.required<boolean>();
 
   allTypes = [
     {
       name: 'Rich Colors Success',
       snippet: "toast.success('Event has been created')",
       action: () => {
         toast.success('Event has been created');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Error',
       snippet: "toast.error('Event has not been created')",
       action: () => {
         toast.error('Event has not been created');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Info',
       snippet: "toast.info('Info')",
       action: () => {
         toast.info('Be at the area 10 minutes before the event time');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
       name: 'Rich Colors Warning',
       snippet: "toast.warning('Warning')",
       action: () => {
         toast.warning('Event start time cannot be earlier than 8am');
-        this.richColorsChange.emit(true);
+        this.richColors.set(true);
       },
     },
     {
@@ -87,7 +82,7 @@ export class OtherComponent {
         toast('Event has been created', {
           description: 'Monday, January 3rd at 6:00pm',
         });
-        this.closeButtonChange.emit(!this.closeButton());
+        this.closeButton.set(!this.closeButton());
       },
     },
     {

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

@@ -2,13 +2,22 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  EventEmitter,
-  input,
-  Output,
+  model,
 } from '@angular/core';
 import { toast } from 'ngx-sonner';
 import { CodeBlockComponent } from './code-block.component';
 
+const positions = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+] as const;
+
+type Position = (typeof positions)[number];
+
 @Component({
   selector: 'docs-position',
   standalone: true,
@@ -33,36 +42,26 @@ import { CodeBlockComponent } from './code-block.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PositionComponent {
-  positions = [
-    'top-left',
-    'top-center',
-    'top-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right',
-  ] as const;
-
-  position = input.required<(typeof this.positions)[number]>();
+  protected positions = positions;
 
-  @Output() positionChange = new EventEmitter<
-    (typeof this.positions)[number]
-  >();
+  position = model.required<Position>();
 
   positionSnippet = computed(
     () => `<ngx-sonner-toaster position="${this.position()}" />`
   );
 
-  showToast(position: (typeof this.positions)[number]) {
+  showToast(position: Position) {
     const toastsAmount = document.querySelectorAll(
       '[data-sonner-toast]'
     ).length;
-    this.positionChange.emit(position);
 
     // No need to show a toast when there is already one
-    if (toastsAmount > 0 && position !== this.position()) return;
+    if (toastsAmount === 0 || position === this.position()) {
+      toast('Event has been created', {
+        description: 'Monday, January 3rd at 6:00pm',
+      });
+    }
 
-    toast('Event has been created', {
-      description: 'Monday, January 3rd at 6:00pm',
-    });
+    this.position.set(position);
   }
 }

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

@@ -1,9 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   input,
-  Output,
+  output,
 } from '@angular/core';
 
 @Component({
@@ -75,5 +74,5 @@ import {
 })
 export class TestComponent {
   eventName = input.required<string>();
-  @Output() closeToast = new EventEmitter<void>();
+  closeToast = output<void>();
 }

libs/ngx-sonner/README.md

@@ -6,7 +6,7 @@ Based on [emilkowalski](https://github.com/emilkowalski)'s React [implementation
 
 ## Angular compatibility
 
-Make sure you are using Angular v17.2.0 or greater
+Make sure you are using Angular v17.3.0 or greater
 
 ## Quick start
 

libs/ngx-sonner/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-sonner",
   "description": "An opinionated toast component for Angular.",
-  "version": "0.3.0",
+  "version": "0.0.0",
   "bugs": {
     "url": "https://github.com/tutkli/ngx-sonner/issues"
   },
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=17.1.0",
-    "@angular/core": ">=17.1.0"
+    "@angular/common": ">=17.3.0",
+    "@angular/core": ">=17.3.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

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

@@ -1,8 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { Position, ToastT } from '../types';
 
-@Pipe({ name: 'toastPosition', standalone: true })
-export class ToastPositionPipe implements PipeTransform {
+@Pipe({ name: 'toastFilter', standalone: true })
+export class ToastFilterPipe implements PipeTransform {
   transform(toasts: ToastT[], index: number, position: Position): ToastT[] {
     return toasts.filter(
       toast => (!toast.position && index === 0) || toast.position === position

libs/ngx-sonner/src/lib/state.ts

@@ -169,9 +169,13 @@ function createToastState() {
   }
 
   function addHeight(height: HeightT) {
-    heights.update(prev => [height, ...prev]);
+    heights.update(prev => [height, ...prev].sort(sortHeights));
   }
 
+  const sortHeights = (a: HeightT, b: HeightT) =>
+    toasts().findIndex(t => t.id === a.toastId) -
+    toasts().findIndex(t => t.id === b.toastId);
+
   function reset() {
     toasts.set([]);
     heights.set([]);