@creative-web-solution/front-library 7.0.7 → 7.1.0

package/Modules/Notifications/Notification.ts

@@ -7,27 +7,19 @@ import { wait }           from '../../Helpers/Wait';
 
 /**
  * This is one notification
- * @class
- * @ignore
- *
- * @param {String|Element} html
- * @param {String} type
- * @param {Object} options
- * @param {Function} close
- * @param {Object} notificationOptions
  */
 export default class Notification {
-    #$notification!:      HTMLElement;
-    #html!:               string;
+    #$notification:       HTMLElement | undefined;
+    #html:                string | undefined;
     #type:                string;
-    #autoCloseTimeout!:   number;
+    #autoCloseTimeout:    number | undefined;
     #closeDelay:          boolean | number;
-    #options:             NotificationsOptionsType;
-    #notificationOptions: NotificationOptionsType;
+    #options:             FLib.Notifications.Options;
+    #notificationOptions: FLib.Notifications.NotificationOptions;
     #close:               ( notification: Notification ) => void;
 
 
-    constructor( htmlOrHTMLElement: string | HTMLElement, type: string, userOptions, close: ( notification: Notification ) => void, notificationOptions?: NotificationOptionsType ) {
+    constructor( htmlOrHTMLElement: string | HTMLElement, type: string, userOptions: FLib.Notifications.Options, close: ( notification: Notification ) => void, notificationOptions?: FLib.Notifications.NotificationOptions ) {
 
         this.#options             = userOptions;
         this.#closeDelay          = false;
@@ -36,10 +28,10 @@ export default class Notification {
         this.#close               = close;
 
         if ( !notificationOptions ) {
-            this.#closeDelay = this.#options.autoCloseDelay!;
+            this.#closeDelay = this.#options.autoCloseDelay;
         }
         else if ( notificationOptions && notificationOptions.closeDelay !== false ) {
-            this.#closeDelay = notificationOptions.closeDelay || this.#options.autoCloseDelay!;
+            this.#closeDelay = notificationOptions.closeDelay || this.#options.autoCloseDelay;
         }
 
         if ( typeof htmlOrHTMLElement === 'string' ) {
@@ -51,23 +43,23 @@ export default class Notification {
     }
 
 
-    private onClick = ( e ) => {
+    #onClick = ( e: Event ): void => {
         clearTimeout( this.#autoCloseTimeout );
 
-        this.#options.onClick && this.#options.onClick.call( this, e );
-        this.#notificationOptions && this.#notificationOptions.onClick && this.#notificationOptions.onClick.call( this, e );
+        this.#options.onClick?.( this );
+        this.#notificationOptions?.onClick?.call( this, e );
 
         this.#close( this );
     }
 
 
-    show( $list ) {
+    show( $list: HTMLElement ): Promise<any> {
         if ( !this.#$notification ) {
-            this.#$notification = strToDOM( this.#options.templates!.notification ) as HTMLElement;
-            this.#$notification.innerHTML = this.#html;
+            this.#$notification = strToDOM( this.#options.templates.notification ) as HTMLElement;
+            ( this.#$notification as HTMLElement ).innerHTML = this.#html || '';
 
-            if ( this.#options.cssClass![ this.#type ] ) {
-                aClass( this.#$notification, this.#options.cssClass![ this.#type ] );
+            if ( this.#options.cssClass[ this.#type ] ) {
+                aClass( this.#$notification, this.#options.cssClass[ this.#type ] );
             }
 
             append( this.#$notification, $list );
@@ -75,7 +67,7 @@ export default class Notification {
 
         one( this.#$notification, {
             "eventsName":   "click",
-            "callback":     this.onClick
+            "callback":     this.#onClick
         } );
 
         if ( this.#closeDelay ) {
@@ -84,18 +76,22 @@ export default class Notification {
             }, this.#closeDelay as number * 1000 );
         }
 
-        return wait( 100 ).then( () => this.#options.animations!.show!( this.#$notification, this.#options ) );
-    };
+        return wait( 100 ).then( () => this.#options.animations.show( this.#$notification, this.#options ) );
+    }
 
 
-    hide() {
+    hide(): Promise<any> {
+        if ( !this.#$notification ) {
+            return Promise.resolve()
+        }
+
         off( this.#$notification, {
             "eventsName":   "click",
-            "callback":     this.onClick
+            "callback":     this.#onClick
         } );
 
-        return this.#options.animations!.hide!( this.#$notification, this.#options ).then( () => {
-            remove( this.#$notification );
+        return this.#options.animations.hide( this.#$notification, this.#options ).then( () => {
+            remove( ( this.#$notification as HTMLElement ) );
         } );
-    };
+    }
 }

package/Modules/Notifications/index.ts

@@ -34,7 +34,7 @@ const DEFAULT_OPTIONS = {
             return Promise.resolve();
         },
         "hide": ( $notification, options ) => {
-            let prom = onTransitionEnd( $notification );
+            const prom = onTransitionEnd( $notification );
 
             wait().then( () => rClass( $notification, options.cssClass.open ) );
 
@@ -46,45 +46,42 @@ const DEFAULT_OPTIONS = {
 
 /**
  * Manages a list of notifications
- * @class
  *
  * @example let notifSys = new Notification();
  * notifSys.add( 'Here is a simple notification' );
- *
- * @param {Object} [userOptions]
  */
 export default class Notifications {
 
-    #options: NotificationsOptionsType;
-    #$list: HTMLElement;
-    #$notifications: HTMLElement;
+    #options:           FLib.Notifications.Options;
+    #$list:             HTMLElement;
+    #$notifications:    HTMLElement;
     #notificationsList: Notification[];
 
 
-    constructor( userOptions: NotificationsOptionsType ) {
+    constructor( userOptions: Partial<FLib.Notifications.Options> ) {
 
         this.#options             = extend( {}, DEFAULT_OPTIONS, userOptions );
         this.#notificationsList   = [];
 
-        this.#$notifications      = document.querySelector( this.#options.selectors!.notifications! )!;
+        this.#$notifications      = document.querySelector( this.#options.selectors.notifications ) as HTMLElement;
 
         if ( !this.#$notifications ) {
-            this.#$notifications = strToDOM( this.#options.templates!.notifications ) as HTMLElement;
-            append( this.#$notifications, this.#options.$wrapper! );
+            this.#$notifications = strToDOM( this.#options.templates.notifications ) as HTMLElement;
+            append( this.#$notifications, this.#options.$wrapper );
         }
 
 
-        this.#$list = this.#$notifications.querySelector( this.#options.selectors!.list! ) as HTMLElement;
+        this.#$list = this.#$notifications.querySelector( this.#options.selectors.list ) as HTMLElement;
 
 
-        this.#$list.querySelectorAll( this.#options.selectors!.notification! ).forEach( $notification => {
-            this.insertNotification( $notification as HTMLElement );
+        this.#$list.querySelectorAll( this.#options.selectors.notification ).forEach( $notification => {
+            this.#insertNotification( $notification as HTMLElement );
         } );
     }
 
 
-    private insertNotification( htmlOrHTMLElement: string | HTMLElement, type: NotificationType = 'info', notificationOptions?: NotificationOptionsType ) {
-        let notification = new Notification( htmlOrHTMLElement, type, this.#options, this.close.bind( this ), notificationOptions );
+    #insertNotification = ( htmlOrHTMLElement: string | HTMLElement, type: FLib.Notifications.Type = 'info', notificationOptions?: FLib.Notifications.NotificationOptions ): void => {
+        const notification = new Notification( htmlOrHTMLElement, type, this.#options, this.#close.bind( this ), notificationOptions );
         notification.show( this.#$list );
 
         if ( !this.#notificationsList.length ) {
@@ -95,7 +92,7 @@ export default class Notifications {
     }
 
 
-    private close( notification: Notification ) {
+    #close = ( notification: Notification ): void => {
         notification.hide().then( () => {
             this.#notificationsList = slice( this.#notificationsList, notification );
 
@@ -109,57 +106,67 @@ export default class Notifications {
     /**
      * Add a new notification.
      */
-    add( html: string, type?: NotificationType, notificationOptions?: NotificationOptionsType ) {
-        this.insertNotification( html, type, notificationOptions );
-    };
+    add( html: string, type?: FLib.Notifications.Type, notificationOptions?: FLib.Notifications.NotificationOptions ): this {
+        this.#insertNotification( html, type, notificationOptions );
+
+        return this;
+    }
 
 
     /**
      * Add a new information notification.
      */
-    addInfo( html: string, notificationOptions?: NotificationOptionsType ) {
-        this.insertNotification( html, 'info', notificationOptions );
-    };
+    addInfo( html: string, notificationOptions?: FLib.Notifications.NotificationOptions ): this {
+        this.#insertNotification( html, 'info', notificationOptions );
+
+        return this;
+    }
 
 
     /**
      * Add a new success notification.
      */
-    addSuccess( html: string, notificationOptions?: NotificationOptionsType ) {
-        this.insertNotification( html, 'success', notificationOptions );
-    };
+    addSuccess( html: string, notificationOptions?: FLib.Notifications.NotificationOptions ): this {
+        this.#insertNotification( html, 'success', notificationOptions );
+
+        return this;
+    }
 
 
     /**
      * Add a new warning notification.
      */
-    addWarning( html: string, notificationOptions?: NotificationOptionsType ) {
-        this.insertNotification( html, 'warning', notificationOptions );
-    };
+    addWarning( html: string, notificationOptions?: FLib.Notifications.NotificationOptions ): this {
+        this.#insertNotification( html, 'warning', notificationOptions );
+
+        return this;
+    }
 
 
     /**
      * Add a new error/danger notification.
      */
-    addDanger( html: string, notificationOptions?: NotificationOptionsType ) {
-        this.insertNotification( html, 'danger', notificationOptions );
-    };
+    addDanger( html: string, notificationOptions?: FLib.Notifications.NotificationOptions ): this {
+        this.#insertNotification( html, 'danger', notificationOptions );
+
+        return this;
+    }
 
 
     /**
      * Close all notifications
      */
-    closeAll() {
+    closeAll(): Promise<any[]> {
         return Promise.all( this.#notificationsList.map( notification => notification.hide() ) );
-    };
+    }
 
 
     /**
      * Close all notifications and remove all containers
      */
-    clean() {
+    clean(): Promise<Element> {
         return this.closeAll()
                 .then( () => remove( this.#$notifications ) );
-    };
+    }
 }