From 91e5555e84094857a5025eabbb428d9090a23873 Mon Sep 17 00:00:00 2001
From: fbandrei <afara@servoy.com>
Date: Thu, 26 Aug 2021 15:12:00 +0200
Subject: [PATCH] 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)

The new hideEaseTime property is only used if it's defined, otherwise a
fallback to easeTime is done so that there is no breaking change.
---
 src/app/home/home.component.html  | 46 ++++++++++++++++++++++++++++++-
 src/app/home/home.component.ts    |  1 +
 src/lib/toastr/toast.component.ts | 14 +++++++---
 src/lib/toastr/toastr-config.ts   | 18 ++++++++++++
 4 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index aa0b2ac7..0cdcc24b 100644
--- 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
index e870cea1..95b0188b 100644
--- 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
index fdd113ed..7a9f978a 100644
--- 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 ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime,
+      easing: this.toastPackage.config.easing,
+      hideEasing: this.toastPackage.config.hideEasing ? this.toastPackage.config.hideEasing : this.toastPackage.config.easing
     }
   };
 
@@ -181,9 +186,10 @@ export class Toast implements OnDestroy {
     }
     clearTimeout(this.timeout);
     this.state = { ...this.state, value: 'removed' };
+    const hideEaseTime = this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime;
     this.outsideTimeout(
       () => this.toastrService.remove(this.toastPackage.toastId),
-      +this.toastPackage.config.easeTime
+      + hideEaseTime
     );
   }
   @HostListener('click')
diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts
index 46333d94..df6c6070 100644
--- 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: 0
+   */
+  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: 0,
   tapToDismiss: true,
   onActivateTick: false,
   progressAnimation: 'decreasing',