ngx-toastr 18.0.0 → 19.1.0

package/fesm2022/ngx-toastr.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, Injectable, ComponentFactoryResolver, ApplicationRef, SecurityContext, Injector, Inject, Component, HostBinding, HostListener, makeEnvironmentProviders, NgModule } from '@angular/core';
-import { style, state, animate, transition, trigger } from '@angular/animations';
+import { Directive, InjectionToken, inject, Injectable, ComponentFactoryResolver, ApplicationRef, SecurityContext, Injector, Inject, signal, Component, ChangeDetectionStrategy, HostBinding, HostListener, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { DOCUMENT, NgIf } from '@angular/common';
 import { Subject } from 'rxjs';
 import * as i2 from '@angular/platform-browser';
@@ -13,10 +13,10 @@ class ToastContainerDirective {
     getContainerElement() {
         return this.el.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: ToastContainerDirective, isStandalone: true, selector: "[toastContainer]", exportAs: ["toastContainer"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: ToastContainerDirective, isStandalone: true, selector: "[toastContainer]", exportAs: ["toastContainer"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[toastContainer]',
@@ -333,10 +333,10 @@ class OverlayContainer {
         this._document.body.appendChild(container);
         this._containerElement = container;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: OverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: OverlayContainer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: OverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: OverlayContainer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: OverlayContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: OverlayContainer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -426,10 +426,10 @@ class Overlay {
     _createOverlayRef(pane) {
         return new OverlayRef(this._createPortalHost(pane));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: Overlay, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Overlay, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: Overlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Overlay, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -622,10 +622,10 @@ class ToastrService {
         this.toasts.push(ins);
         return ins;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrService, deps: [{ token: TOAST_CONFIG }, { token: Overlay }, { token: i0.Injector }, { token: i2.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrService, deps: [{ token: TOAST_CONFIG }, { token: Overlay }, { token: i0.Injector }, { token: i2.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -643,14 +643,17 @@ class Toast {
     duplicatesCount;
     originalTimeout;
     /** width of progress bar */
-    width = -1;
+    width = signal(-1);
     /** a combination of toast type and options.toastClass */
     toastClasses = '';
-    /** controls animation */
     state;
+    /** controls animation */
+    get _state() {
+        return this.state();
+    }
     /** hides component when waiting to be displayed */
     get displayStyle() {
-        if (this.state.value === 'inactive') {
+        if (this.state().value === 'inactive') {
             return 'none';
         }
         return;
@@ -683,13 +686,13 @@ class Toast {
         this.sub3 = toastPackage.toastRef.countDuplicate().subscribe(count => {
             this.duplicatesCount = count;
         });
-        this.state = {
+        this.state = signal({
             value: 'inactive',
             params: {
                 easeTime: this.toastPackage.config.easeTime,
                 easing: 'ease-in',
             },
-        };
+        });
     }
     ngOnDestroy() {
         this.sub.unsubscribe();
@@ -703,7 +706,7 @@ class Toast {
      * activates toast and sets timeout
      */
     activateToast() {
-        this.state = { ...this.state, value: 'active' };
+        this.state.update(state => ({ ...state, value: 'active' }));
         if (!(this.options.disableTimeOut === true || this.options.disableTimeOut === 'timeOut') &&
             this.options.timeOut) {
             this.outsideTimeout(() => this.remove(), this.options.timeOut);
@@ -717,30 +720,30 @@ class Toast {
      * updates progress bar width
      */
     updateProgress() {
-        if (this.width === 0 || this.width === 100 || !this.options.timeOut) {
+        if (this.width() === 0 || this.width() === 100 || !this.options.timeOut) {
             return;
         }
         const now = new Date().getTime();
         const remaining = this.hideTime - now;
-        this.width = (remaining / this.options.timeOut) * 100;
+        this.width.set((remaining / this.options.timeOut) * 100);
         if (this.options.progressAnimation === 'increasing') {
-            this.width = 100 - this.width;
+            this.width.update(width => 100 - width);
         }
-        if (this.width <= 0) {
-            this.width = 0;
+        if (this.width() <= 0) {
+            this.width.set(0);
         }
-        if (this.width >= 100) {
-            this.width = 100;
+        if (this.width() >= 100) {
+            this.width.set(100);
         }
     }
     resetTimeout() {
         clearTimeout(this.timeout);
         clearInterval(this.intervalId);
-        this.state = { ...this.state, value: 'active' };
+        this.state.update(state => ({ ...state, value: 'active' }));
         this.outsideTimeout(() => this.remove(), this.originalTimeout);
         this.options.timeOut = this.originalTimeout;
         this.hideTime = new Date().getTime() + (this.options.timeOut || 0);
-        this.width = -1;
+        this.width.set(-1);
         if (this.options.progressBar) {
             this.outsideInterval(() => this.updateProgress(), 10);
         }
@@ -749,15 +752,15 @@ class Toast {
      * tells toastrService to remove this toast after animation time
      */
     remove() {
-        if (this.state.value === 'removed') {
+        if (this.state().value === 'removed') {
             return;
         }
         clearTimeout(this.timeout);
-        this.state = { ...this.state, value: 'removed' };
+        this.state.update(state => ({ ...state, value: 'removed' }));
         this.outsideTimeout(() => this.toastrService.remove(this.toastPackage.toastId), +this.toastPackage.config.easeTime);
     }
     tapToast() {
-        if (this.state.value === 'removed') {
+        if (this.state().value === 'removed') {
             return;
         }
         this.toastPackage.triggerTap();
@@ -766,7 +769,7 @@ class Toast {
         }
     }
     stickAround() {
-        if (this.state.value === 'removed') {
+        if (this.state().value === 'removed') {
             return;
         }
         if (this.options.disableTimeOut !== 'extendedTimeOut') {
@@ -775,19 +778,19 @@ class Toast {
             this.hideTime = 0;
             // disable progressBar
             clearInterval(this.intervalId);
-            this.width = 0;
+            this.width.set(0);
         }
     }
     delayedHideToast() {
         if ((this.options.disableTimeOut === true || this.options.disableTimeOut === 'extendedTimeOut') ||
             this.options.extendedTimeOut === 0 ||
-            this.state.value === 'removed') {
+            this.state().value === 'removed') {
             return;
         }
         this.outsideTimeout(() => this.remove(), this.options.extendedTimeOut);
         this.options.timeOut = this.options.extendedTimeOut;
         this.hideTime = new Date().getTime() + (this.options.timeOut || 0);
-        this.width = -1;
+        this.width.set(-1);
         if (this.options.progressBar) {
             this.outsideInterval(() => this.updateProgress(), 10);
         }
@@ -816,8 +819,8 @@ class Toast {
             func();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: Toast, deps: [{ token: ToastrService }, { token: ToastPackage }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: Toast, isStandalone: true, selector: "[toast-component]", host: { listeners: { "click": "tapToast()", "mouseenter": "stickAround()", "mouseleave": "delayedHideToast()" }, properties: { "class": "this.toastClasses", "@flyInOut": "this.state", "style.display": "this.displayStyle" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Toast, deps: [{ token: ToastrService }, { token: ToastPackage }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: Toast, isStandalone: true, selector: "[toast-component]", host: { listeners: { "click": "tapToast()", "mouseenter": "stickAround()", "mouseleave": "delayedHideToast()" }, properties: { "class": "this.toastClasses", "@flyInOut": "this._state", "style.display": "this.displayStyle" } }, ngImport: i0, template: `
   <button *ngIf="options.closeButton" (click)="remove()" type="button" class="toast-close-button" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
@@ -832,7 +835,7 @@ class Toast {
     {{ message }}
   </div>
   <div *ngIf="options.progressBar">
-    <div class="toast-progress" [style.width]="width + '%'"></div>
+    <div class="toast-progress" [style.width]="width() + '%'"></div>
   </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             trigger('flyInOut', [
@@ -842,9 +845,9 @@ class Toast {
                 transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
                 transition('active => removed', animate('{{ easeTime }}ms {{ easing }}')),
             ]),
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: Toast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: Toast, decorators: [{
             type: Component,
             args: [{
                     selector: '[toast-component]',
@@ -863,7 +866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
     {{ message }}
   </div>
   <div *ngIf="options.progressBar">
-    <div class="toast-progress" [style.width]="width + '%'"></div>
+    <div class="toast-progress" [style.width]="width() + '%'"></div>
   </div>
   `,
                     animations: [
@@ -878,11 +881,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                     preserveWhitespaces: false,
                     standalone: true,
                     imports: [NgIf],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: ToastrService }, { type: ToastPackage }, { type: i0.NgZone }], propDecorators: { toastClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], state: [{
+            }], _state: [{
                 type: HostBinding,
                 args: ['@flyInOut']
             }], displayStyle: [{
@@ -943,11 +947,11 @@ class ToastrModule {
             providers: [provideToastr(config)],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: ToastrModule, imports: [Toast], exports: [Toast] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: ToastrModule, imports: [Toast], exports: [Toast] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Toast],
@@ -969,11 +973,11 @@ class ToastrComponentlessModule {
             ],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrComponentlessModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: ToastrComponentlessModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrComponentlessModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrComponentlessModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: ToastrComponentlessModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrComponentlessModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastrComponentlessModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastrComponentlessModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -988,18 +992,18 @@ class ToastNoAnimation {
     duplicatesCount;
     originalTimeout;
     /** width of progress bar */
-    width = -1;
+    width = signal(-1);
     /** a combination of toast type and options.toastClass */
     toastClasses = '';
     /** hides component when waiting to be displayed */
     get displayStyle() {
-        if (this.state === 'inactive') {
+        if (this.state() === 'inactive') {
             return 'none';
         }
         return null;
     }
     /** controls animation */
-    state = 'inactive';
+    state = signal('inactive');
     timeout;
     intervalId;
     hideTime;
@@ -1041,7 +1045,7 @@ class ToastNoAnimation {
      * activates toast and sets timeout
      */
     activateToast() {
-        this.state = 'active';
+        this.state.set('active');
         if (!(this.options.disableTimeOut === true || this.options.disableTimeOut === 'timeOut') && this.options.timeOut) {
             this.timeout = setTimeout(() => {
                 this.remove();
@@ -1059,30 +1063,30 @@ class ToastNoAnimation {
      * updates progress bar width
      */
     updateProgress() {
-        if (this.width === 0 || this.width === 100 || !this.options.timeOut) {
+        if (this.width() === 0 || this.width() === 100 || !this.options.timeOut) {
             return;
         }
         const now = new Date().getTime();
         const remaining = this.hideTime - now;
-        this.width = (remaining / this.options.timeOut) * 100;
+        this.width.set((remaining / this.options.timeOut) * 100);
         if (this.options.progressAnimation === 'increasing') {
-            this.width = 100 - this.width;
+            this.width.update(width => 100 - width);
         }
-        if (this.width <= 0) {
-            this.width = 0;
+        if (this.width() <= 0) {
+            this.width.set(0);
         }
-        if (this.width >= 100) {
-            this.width = 100;
+        if (this.width() >= 100) {
+            this.width.set(100);
         }
     }
     resetTimeout() {
         clearTimeout(this.timeout);
         clearInterval(this.intervalId);
-        this.state = 'active';
+        this.state.set('active');
         this.options.timeOut = this.originalTimeout;
         this.timeout = setTimeout(() => this.remove(), this.originalTimeout);
         this.hideTime = new Date().getTime() + (this.originalTimeout || 0);
-        this.width = -1;
+        this.width.set(-1);
         if (this.options.progressBar) {
             this.intervalId = setInterval(() => this.updateProgress(), 10);
         }
@@ -1091,15 +1095,15 @@ class ToastNoAnimation {
      * tells toastrService to remove this toast after animation time
      */
     remove() {
-        if (this.state === 'removed') {
+        if (this.state() === 'removed') {
             return;
         }
         clearTimeout(this.timeout);
-        this.state = 'removed';
+        this.state.set('removed');
         this.timeout = setTimeout(() => this.toastrService.remove(this.toastPackage.toastId));
     }
     tapToast() {
-        if (this.state === 'removed') {
+        if (this.state() === 'removed') {
             return;
         }
         this.toastPackage.triggerTap();
@@ -1108,7 +1112,7 @@ class ToastNoAnimation {
         }
     }
     stickAround() {
-        if (this.state === 'removed') {
+        if (this.state() === 'removed') {
             return;
         }
         clearTimeout(this.timeout);
@@ -1116,24 +1120,24 @@ class ToastNoAnimation {
         this.hideTime = 0;
         // disable progressBar
         clearInterval(this.intervalId);
-        this.width = 0;
+        this.width.set(0);
     }
     delayedHideToast() {
         if ((this.options.disableTimeOut === true || this.options.disableTimeOut === 'extendedTimeOut') ||
             this.options.extendedTimeOut === 0 ||
-            this.state === 'removed') {
+            this.state() === 'removed') {
             return;
         }
         this.timeout = setTimeout(() => this.remove(), this.options.extendedTimeOut);
         this.options.timeOut = this.options.extendedTimeOut;
         this.hideTime = new Date().getTime() + (this.options.timeOut || 0);
-        this.width = -1;
+        this.width.set(-1);
         if (this.options.progressBar) {
             this.intervalId = setInterval(() => this.updateProgress(), 10);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastNoAnimation, deps: [{ token: ToastrService }, { token: ToastPackage }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: ToastNoAnimation, isStandalone: true, selector: "[toast-component]", host: { listeners: { "click": "tapToast()", "mouseenter": "stickAround()", "mouseleave": "delayedHideToast()" }, properties: { "class": "this.toastClasses", "style.display": "this.displayStyle" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastNoAnimation, deps: [{ token: ToastrService }, { token: ToastPackage }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: ToastNoAnimation, isStandalone: true, selector: "[toast-component]", host: { listeners: { "click": "tapToast()", "mouseenter": "stickAround()", "mouseleave": "delayedHideToast()" }, properties: { "class": "this.toastClasses", "style.display": "this.displayStyle" } }, ngImport: i0, template: `
   <button *ngIf="options.closeButton" (click)="remove()" type="button" class="toast-close-button" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
@@ -1148,11 +1152,11 @@ class ToastNoAnimation {
     {{ message }}
   </div>
   <div *ngIf="options.progressBar">
-    <div class="toast-progress" [style.width]="width + '%'"></div>
+    <div class="toast-progress" [style.width]="width() + '%'"></div>
   </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastNoAnimation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastNoAnimation, decorators: [{
             type: Component,
             args: [{
                     selector: '[toast-component]',
@@ -1171,11 +1175,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
     {{ message }}
   </div>
   <div *ngIf="options.progressBar">
-    <div class="toast-progress" [style.width]="width + '%'"></div>
+    <div class="toast-progress" [style.width]="width() + '%'"></div>
   </div>
   `,
                     standalone: true,
-                    imports: [NgIf]
+                    imports: [NgIf],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: ToastrService }, { type: ToastPackage }, { type: i0.ApplicationRef }], propDecorators: { toastClasses: [{
                 type: HostBinding,
@@ -1212,11 +1217,11 @@ class ToastNoAnimationModule {
             ],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastNoAnimationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: ToastNoAnimationModule, imports: [ToastNoAnimation], exports: [ToastNoAnimation] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastNoAnimationModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastNoAnimationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: ToastNoAnimationModule, imports: [ToastNoAnimation], exports: [ToastNoAnimation] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastNoAnimationModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ToastNoAnimationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: ToastNoAnimationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ToastNoAnimation],