Added a couple of new options:

1. HTML for the close button 2. Options for selecting the type of ease (one for showing and one for hiding) 3. Options to configure the ease time (in and out) Amend and force push for renaming hideEasingTime to hideEaseTime There is a small breaking change indeed: animate('{{ hideEasingTime }}ms {{ hideEasing }}') but now there is flexibility for choosing different ease times for showing and hiding the toaster.
scttcper · Aug 27, 2021 · cd3fc87 · cd3fc87
1 parent f2c4c42
commit cd3fc87
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 5 deletions.
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -31,7 +31,19 @@
                   placeholder="Toast message"
                 ></textarea>
               </div>
-
+              <div class="form-group mb-3">
+                <label for="toastMessage">
+                  <strong>Close Button HTML</strong>
+                </label>
+                <textarea
+                  [(ngModel)]="options.closeHtml"
+                  rows="2"
+                  class="form-control"
+                  name="closeHtml"
+                  id="closeHtml"
+                  placeholder="HTML for the close button"
+                ></textarea>
+              </div>
               <div class="form-group mb-3">
                 <div class="form-check">
                   <input
@@ -281,6 +293,38 @@
                   id="toastExtendedTimeout"
                 />
               </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEaseTime">
+                  <strong>Hide Ease Time</strong>
+                </label>
+                <input
+                  type="text"
+                  [(ngModel)]="toastr.toastrConfig.hideEaseTime"
+                  (ngModelChange)="fixNumber('hideEaseTime')"
+                  class="form-control"
+                  id="toastHideEaseTime"
+                />
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastShowEaseType">Ease Type</label>
+                <select class="form-control"
+                    name="easeType" 
+                    id="toastShowEaseType" 
+                    [(ngModel)]="toastr.toastrConfig.easing">
+                   <option [ngValue]="null" disabled>Select Ease Type</option>
+                   <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                 </select>
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEaseType">Hide Ease Type</label>
+                <select class="form-control"
+                    name="hideEaseType" 
+                    id="toastHideEaseType" 
+                    [(ngModel)]="toastr.toastrConfig.hideEasing">
+                  <option [ngValue]="null" disabled>Select Hide Ease Type</option>
+                  <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                </select>
+              </div>
             </div>
             <div class="col-md-3">
               <div class="row">

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -58,6 +58,7 @@ export class HomeComponent {
   inlinePositionIndex = 0;
   @ViewChildren(ToastContainerDirective) inlineContainers!: QueryList<ToastContainerDirective>;
 
+  easeTypes = [ "ease", "ease-in", "ease-out", "ease-in-out", "linear", "step-start", "step-end" ];
 
   constructor(public toastr: ToastrService, private renderer: Renderer2) {
     this.options = this.toastr.toastrConfig;

diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts
@@ -19,7 +19,10 @@ import { ToastrService } from './toastr.service';
 @Component({
   selector: '[toast-component]',
   template: `
-  <button *ngIf="options.closeButton" (click)="remove()" class="toast-close-button" aria-label="Close">
+  <button *ngIf="options.closeButton && options.closeHtml" (click)="remove()" 
+    class="toast-close-button" aria-label="Close" aria-hidden="true" [innerHTML]="options.closeHtml">
+  </button>
+  <button *ngIf="options.closeButton && !options.closeHtml" (click)="remove()" class="toast-close-button" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
   <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
@@ -47,7 +50,7 @@ import { ToastrService } from './toastr.service';
       ),
       transition(
         'active => removed',
-        animate('{{ easeTime }}ms {{ easing }}')
+        animate('{{ hideEaseTime }}ms {{ hideEasing }}')
       )
     ])
   ],
@@ -69,7 +72,9 @@ export class Toast implements OnDestroy {
     value: 'inactive',
     params: {
       easeTime: this.toastPackage.config.easeTime,
-      easing: 'ease-in'
+      hideEaseTime: this.toastPackage.config.hideEaseTime,
+      easing: this.toastPackage.config.easing,
+      hideEasing: this.toastPackage.config.hideEasing
     }
   };
 
@@ -183,7 +188,7 @@ export class Toast implements OnDestroy {
     this.state = { ...this.state, value: 'removed' };
     this.outsideTimeout(
       () => this.toastrService.remove(this.toastPackage.toastId),
-      +this.toastPackage.config.easeTime
+      +this.toastPackage.config.hideEaseTime
     );
   }
   @HostListener('click')

diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts
@@ -48,6 +48,11 @@ export interface IndividualConfig {
    * default: false
    */
   enableHtml: boolean;
+  /**
+   * html for the close button (possibly unsafe)
+   * default: undefined
+   */
+  closeHtml: string | undefined;
   /**
    * css class on toast component
    * default: ngx-toastr
@@ -73,11 +78,21 @@ export interface IndividualConfig {
    * default: ease-in
    */
   easing: string;
+  /**
+   * animation hide easing on toast
+   * default: ease-out
+   */
+  hideEasing: string;
   /**
    * animation ease time on toast
    * default: 300
    */
   easeTime: string | number;
+    /**
+   * animation hide ease time on toast
+   * default: 300
+   */
+  hideEaseTime: string | number;
   /**
    * clicking on toast dismisses it
    * default: true
@@ -220,13 +235,16 @@ export const DefaultNoComponentGlobalConfig: GlobalConfig = {
   timeOut: 5000,
   extendedTimeOut: 1000,
   enableHtml: false,
+  closeHtml: undefined,
   progressBar: false,
   toastClass: 'ngx-toastr',
   positionClass: 'toast-top-right',
   titleClass: 'toast-title',
   messageClass: 'toast-message',
   easing: 'ease-in',
+  hideEasing: 'ease-out',
   easeTime: 300,
+  hideEaseTime: 300,
   tapToDismiss: true,
   onActivateTick: false,
   progressAnimation: 'decreasing',