@creative-web-solution/front-library 7.1.54 → 7.1.55

package/Modules/Popin/Popin.ts

@@ -1,14 +1,13 @@
-import { on, off }                          from '../../Events/EventsManager';
-import KeyboardHandler                      from '../../Events/KeyboardHandler';
-import { extend }                           from '../../Helpers/Extend';
-import { strToDOM }                         from '../../DOM/StrToDOM';
-import { append }                           from '../../DOM/Manipulation';
-import { windowSize }                       from '../../DOM/WindowSize';
-import PopinBackground                      from './PopinBackground';
-import PopinAccessibility                   from './PopinAccessibility';
-import { defaultOptions, CLICK_EVENT_NAME } from './Tools';
-import quickTemplate                        from '../QuickTemplate';
-
+import { on, off } from "../../Events/EventsManager";
+import KeyboardHandler from "../../Events/KeyboardHandler";
+import { extend } from "../../Helpers/Extend";
+import { strToDOM } from "../../DOM/StrToDOM";
+import { append } from "../../DOM/Manipulation";
+import { windowSize } from "../../DOM/WindowSize";
+import PopinBackground from "./PopinBackground";
+import PopinAccessibility from "./PopinAccessibility";
+import { defaultOptions, CLICK_EVENT_NAME } from "./Tools";
+import quickTemplate from "../QuickTemplate";
 
 /**
  * Create a simple popin
@@ -22,437 +21,427 @@ import quickTemplate                        from '../QuickTemplate';
  * ```
  */
 export default class Popin {
-
-    #loadingPromise:    Promise<void> | null = null;
-    #loaderOpened       = false;
-    #popinOpened        = false;
-    #$loader:           HTMLElement;
-    #templates:         FLib.Popin.TemplatesOptions;
-    #selectors:         FLib.Popin.SelectorsOptions;
-    #animations:        FLib.Popin.AnimationsOptions;
-    #$popinContent:     HTMLElement;
+    #loadingPromise: Promise<void> | null = null;
+    #loaderOpened = false;
+    #popinOpened = false;
+    #$loader: HTMLElement;
+    #templates: FLib.Popin.TemplatesOptions;
+    #selectors: FLib.Popin.SelectorsOptions;
+    #animations: FLib.Popin.AnimationsOptions;
+    #$popinContent: HTMLElement;
     #$initialFocus;
-    #isInlinePopin:     boolean;
-    #focusControl:      PopinAccessibility;
+    #isInlinePopin: boolean;
+    #focusControl: PopinAccessibility;
     #keyboardControls;
-    #options:           FLib.Popin.Options;
+    #options: FLib.Popin.Options;
     #controllerOptions: FLib.Popin.ControllerOptions | undefined;
-    #backgroundLayer:   PopinBackground | undefined;
+    #backgroundLayer: PopinBackground | undefined;
     #tick;
-    #$popin:            HTMLElement;
-
-
-    constructor ( userOptions: FLib.Popin.OptionsInit = {}, $popin?: HTMLElement, _controllerOptions?: FLib.Popin.ControllerOptions ) {
-
-        if ( !( "AbortController" in window ) ) {
-            throw 'This plugin uses fecth and AbortController. You may need to add a polyfill for this browser.';
+    #$popin: HTMLElement;
+
+    constructor(
+        userOptions: FLib.Popin.OptionsInit = {},
+        $popin?: HTMLElement,
+        _controllerOptions?: FLib.Popin.ControllerOptions,
+    ) {
+        if (!("AbortController" in window)) {
+            throw "This plugin uses fecth and AbortController. You may need to add a polyfill for this browser.";
         }
 
-        this.#isInlinePopin     = !!$popin;
+        this.#isInlinePopin = !!$popin;
         this.#controllerOptions = _controllerOptions;
 
-        if ( _controllerOptions ) {
-            this.#options         = userOptions as FLib.Popin.Options;
-            this.#backgroundLayer = _controllerOptions.background as PopinBackground;
-        }
-        else {
-            this.#options         = extend( defaultOptions, userOptions );
-            this.#backgroundLayer = this.#options.isBackgroundAside ? new PopinBackground( this, this.#options ) : undefined;
+        if (_controllerOptions) {
+            this.#options = userOptions as FLib.Popin.Options;
+            this.#backgroundLayer =
+                _controllerOptions.background as PopinBackground;
+        } else {
+            this.#options = extend(defaultOptions, userOptions);
+            this.#backgroundLayer = this.#options.isBackgroundAside
+                ? new PopinBackground(this, this.#options)
+                : undefined;
         }
 
-
-        this.#templates =  this.#options.templates;
-        this.#selectors =  this.#options.selectors;
+        this.#templates = this.#options.templates;
+        this.#selectors = this.#options.selectors;
         this.#animations = this.#options.animations;
         // Add loader in the popin
-        this.#$loader = strToDOM( this.#templates.popinLoader ) as HTMLElement;
+        this.#$loader = strToDOM(this.#templates.popinLoader) as HTMLElement;
 
-        if ( $popin ) {
+        if ($popin) {
             this.#$popin = $popin;
-        }
-        else {
+        } else {
             const popinHtml = this.#templates.popin;
 
             // Add popin template
-            this.#$popin = strToDOM( popinHtml ) as HTMLElement;
-            append( this.#$popin, document.body );
+            this.#$popin = strToDOM(popinHtml) as HTMLElement;
+            append(this.#$popin, document.body);
 
-            append( this.#$loader, this.#$popin) ;
+            append(this.#$loader, this.#$popin);
         }
 
         // Init the element that will receive the content
-        this.#$popinContent = this.#$popin.querySelector( this.#selectors.popinContent ) || this.#$popin;
+        this.#$popinContent =
+            this.#$popin.querySelector(this.#selectors.popinContent) ||
+            this.#$popin;
 
         // Keyboard TAB focus control
-        this.#focusControl = new PopinAccessibility( this.#$popin );
-
+        this.#focusControl = new PopinAccessibility(this.#$popin);
 
         // ------------------- BINDING
 
+        on(this.#$popin, {
+            eventsName: CLICK_EVENT_NAME,
+            selector: this.#selectors.links,
+            callback: this.#openPopinHandler,
+        });
 
-        on(
-            this.#$popin,
-            {
-                "eventsName": CLICK_EVENT_NAME,
-                "selector":   this.#selectors.links,
-                "callback":   this.#openPopinHandler
-            }
-        );
+        on(this.#$popin, {
+            eventsName: "submit",
+            selector: this.#selectors.forms,
+            callback: this.#openPopinHandler,
+        });
 
-        on( this.#$popin,
-            {
-                "eventsName": "submit",
-                "selector":   this.#selectors.forms,
-                "callback":   this.#openPopinHandler
-            });
-
-        on(
-            this.#$popin,
-            {
-                "eventsName": CLICK_EVENT_NAME,
-                "selector":  this.#selectors.btClosePopin,
-                "callback":  this.#closePopinHandler
-            }
-        );
+        on(this.#$popin, {
+            eventsName: CLICK_EVENT_NAME,
+            selector: this.#selectors.btClosePopin,
+            callback: this.#closePopinHandler,
+        });
 
         if (!this.#options.isBackgroundAside && !this.#options.modal) {
-            on(
-                this.#$popin,
-                {
-                    "eventsName": CLICK_EVENT_NAME,
-                    "callback":  this.#clickBgHandler
-                }
-            );
+            on(this.#$popin, {
+                eventsName: CLICK_EVENT_NAME,
+                callback: this.#clickBgHandler,
+            });
         }
 
-
-        if ( this.#options.enableKeyboard ) {
-            this.#keyboardControls = new KeyboardHandler( this.#$popin, {
-                "preventDefault": false,
-                "onEscape": e => {
-                    this.#closePopinHandler( e );
+        if (this.#options.enableKeyboard) {
+            this.#keyboardControls = new KeyboardHandler(this.#$popin, {
+                preventDefault: false,
+                onEscape: (e) => {
+                    this.#closePopinHandler(e);
                 },
-                "onTabReverse": e => {
-                    this.#focusControl.handleBackwardTab( e );
+                onTabReverse: (e) => {
+                    this.#focusControl.handleBackwardTab(e);
+                },
+                onTab: (e) => {
+                    this.#focusControl.handleForwardTab(e);
                 },
-                "onTab": e => {
-                    this.#focusControl.handleForwardTab( e );
-                }
             });
         }
     }
 
-
     #addAccessibility = (): void => {
         this.#focusControl.refresh();
-        this.#focusControl.toggleTabIndexNavigation( true );
         this.#focusControl.focusFirstElement();
-    }
-
+    };
 
     // ------------------------------ LOADER
 
-
     #openLoader = (): Promise<any> => {
-        if ( this.#loaderOpened ) {
+        if (this.#loaderOpened) {
             return Promise.resolve();
         }
 
-        return this.#animations.openLoader( this.#$loader ).then( () => {
+        return this.#animations.openLoader(this.#$loader).then(() => {
             this.#loaderOpened = true;
-        } );
-    }
-
+        });
+    };
 
     #closeLoader = (): Promise<void> => {
-        if ( !this.#loaderOpened ) {
+        if (!this.#loaderOpened) {
             return Promise.resolve();
         }
 
-        return this.#animations.closeLoader( this.#$loader ).then( () => {
+        return this.#animations.closeLoader(this.#$loader).then(() => {
             this.#loaderOpened = false;
-        } );
-    }
-
+        });
+    };
 
     // ------------------------------ POPIN SHOW/HIDE
 
-
     #showBackgroundLayer = (): Promise<void> => {
-        return this.#backgroundLayer ? this.#backgroundLayer.open() : Promise.resolve();
-    }
-
+        return this.#backgroundLayer
+            ? this.#backgroundLayer.open()
+            : Promise.resolve();
+    };
 
     #hideBackgroundLayer = (): Promise<void> => {
-        return this.#backgroundLayer ? this.#backgroundLayer.close() : Promise.resolve();
-    }
-
+        return this.#backgroundLayer
+            ? this.#backgroundLayer.close()
+            : Promise.resolve();
+    };
 
     #openPopin = (): Promise<void> => {
-        if ( this.#popinOpened ) {
+        if (this.#popinOpened) {
             return Promise.resolve();
         }
 
         this.#$initialFocus = document.activeElement;
         this.#resize();
 
-        if ( this.#options.autoResize ) {
-            on( window, {
-                "eventsName": "resize",
-                "callback":   this.#resizeHandler
-            } );
+        if (this.#options.autoResize) {
+            on(window, {
+                eventsName: "resize",
+                callback: this.#resizeHandler,
+            });
         }
 
         return this.#showBackgroundLayer()
-            .then( () => {
-                return this.#animations.initOpenPopin( this.#$popin );
-            } )
-            .then( () => {
-                if ( this.#options.onOpen ) {
-                    return this.#options.onOpen.call( this, this.#$popin );
+            .then(() => {
+                return this.#animations.initOpenPopin(this.#$popin);
+            })
+            .then(() => {
+                if (this.#options.onOpen) {
+                    return this.#options.onOpen.call(this, this.#$popin);
                 }
-            } )
-            .then( () => {
-                if ( this.#isInlinePopin ) {
+            })
+            .then(() => {
+                if (this.#isInlinePopin) {
                     this.#addAccessibility();
                 }
-                return this.#animations.openPopin( this.#$popin );
-            } )
-            .then( () => {
+                return this.#animations.openPopin(this.#$popin);
+            })
+            .then(() => {
                 this.#popinOpened = true;
-            } );
-    }
-
+            });
+    };
 
     #closePopin = (): Promise<void> => {
-        if ( !this.#popinOpened ) {
+        if (!this.#popinOpened) {
             return Promise.resolve();
         }
 
-        off( window, {
-            "eventsName": "resize",
-            "callback":   this.#resizeHandler
-        } );
+        off(window, {
+            eventsName: "resize",
+            callback: this.#resizeHandler,
+        });
 
         return this.#animations
-            .closePopin( this.#$popin )
-            .then( this.#hideBackgroundLayer.bind( this ) )
-            .then( () => {
-                if ( this.#options.onClose ) {
-                    return this.#options.onClose.call( this, this.#$popin );
+            .closePopin(this.#$popin)
+            .then(this.#hideBackgroundLayer.bind(this))
+            .then(() => {
+                if (this.#options.onClose) {
+                    return this.#options.onClose.call(this, this.#$popin);
                 }
-            } )
-            .then( () => {
+            })
+            .then(() => {
                 this.#popinOpened = false;
 
-                if ( !this.#isInlinePopin ) {
+                if (!this.#isInlinePopin) {
                     this.#clearPopin();
                 }
                 this.#$initialFocus.focus();
             });
-    }
-
+    };
 
     // ------------------------------ POPIN CONTENT
 
-
     #resizeRAF = (): void => {
-        window.requestAnimationFrame( this.#resize.bind( this ) );
-    }
-
+        window.requestAnimationFrame(this.#resize.bind(this));
+    };
 
-    #setPopin = ( resp: string ): Promise<void> => {
+    #setPopin = (resp: string): Promise<void> => {
         this.#$popinContent.innerHTML = resp;
 
-        return this.#options.onLoad( this.#$popin ).then( this.#resizeRAF.bind( this ) );
-    }
-
+        return this.#options
+            .onLoad(this.#$popin)
+            .then(this.#resizeRAF.bind(this));
+    };
 
     #clearPopin = (): void => {
-        this.#$popinContent.innerHTML = '';
+        this.#$popinContent.innerHTML = "";
         this.#resizeRAF();
-        this.#focusControl.toggleTabIndexNavigation( false );
-    }
+        this.#focusControl.clean();
+    };
 
-
-    #setPopinError = ( message: string ): void => {
-        this.#$popinContent.innerHTML = quickTemplate( this.#templates.errorMessage, { "message": message } );
+    #setPopinError = (message: string): void => {
+        this.#$popinContent.innerHTML = quickTemplate(
+            this.#templates.errorMessage,
+            { message: message },
+        );
         this.#resizeRAF();
-    }
-
+    };
 
     // ------------------------------ POPIN LOADING
 
+    #_load = (
+        url: string,
+        type: FLib.Popin.ResponseType,
+        userRequestOptions?: RequestInit,
+    ): Promise<void> => {
+        let requestOptions: RequestInit;
 
-    #_load = ( url: string, type: FLib.Popin.ResponseType, userRequestOptions?: RequestInit ): Promise<void> => {
-        let requestOptions: RequestInit ;
-
-        this.#loadingPromise = new Promise( ( resolve, reject ) => {
+        this.#loadingPromise = new Promise((resolve, reject) => {
             const myHeaders = new Headers();
-            myHeaders.append( 'X-Requested-With', 'XMLHttpRequest' );
+            myHeaders.append("X-Requested-With", "XMLHttpRequest");
             requestOptions = {
-                "headers": myHeaders
+                headers: myHeaders,
             };
 
-            if ( userRequestOptions ) {
-                requestOptions = extend( {}, requestOptions, userRequestOptions );
+            if (userRequestOptions) {
+                requestOptions = extend({}, requestOptions, userRequestOptions);
             }
 
             this.#openPopin()
-                .then( () => this.#openLoader() )
-                .then( () => {
-                    fetch(
-                        url,
-                        requestOptions
-                    )
-                        .then( response => {
-                            if ( !this.#options.autoHandleAjaxError || response.status >= 200 && response.status < 300 ) {
+                .then(() => this.#openLoader())
+                .then(() => {
+                    fetch(url, requestOptions)
+                        .then((response) => {
+                            if (
+                                !this.#options.autoHandleAjaxError ||
+                                (response.status >= 200 &&
+                                    response.status < 300)
+                            ) {
                                 return response;
-                            }
-                            else {
-                                const error: Error & { response? } = new Error( response.statusText );
+                            } else {
+                                const error: Error & { response? } = new Error(
+                                    response.statusText,
+                                );
                                 error.response = response;
                                 throw error;
                             }
                         })
-                        .then( response => {
+                        .then((response) => {
                             let prom;
 
-                            if ( type === 'arrayBuffer' ) {
+                            if (type === "arrayBuffer") {
                                 prom = response.arrayBuffer();
-                            }
-                            else if ( type === 'blob' ) {
+                            } else if (type === "blob") {
                                 prom = response.blob();
-                            }
-                            else if ( type === 'json' ) {
+                            } else if (type === "json") {
                                 prom = response.json();
-                            }
-                            else if ( type === 'formData' ) {
+                            } else if (type === "formData") {
                                 prom = response.formData();
-                            }
-                            else {
+                            } else {
                                 prom = response.text();
                             }
 
-                            return prom.then( ct => {
-                                return [ ct, response ];
-                            } );
-                        } )
+                            return prom.then((ct) => {
+                                return [ct, response];
+                            });
+                        })
                         .then(
-                            data => {
-                                const [ body, response ] = data;
-                                const isHttpError = response.status < 200 || response.status >= 300;
-                                const normResponse = this.#options.normalize( body, response, isHttpError, this.#$popin );
-
-                                if ( normResponse.success ) {
-                                    this.#setPopin( normResponse.data ).then( () => {
-                                        this.#addAccessibility();
-                                        resolve();
-                                    } );
-                                }
-                                else {
-                                    this.#setPopinError( this.#options.errorMessage );
+                            (data) => {
+                                const [body, response] = data;
+                                const isHttpError =
+                                    response.status < 200 ||
+                                    response.status >= 300;
+                                const normResponse = this.#options.normalize(
+                                    body,
+                                    response,
+                                    isHttpError,
+                                    this.#$popin,
+                                );
+
+                                if (normResponse.success) {
+                                    this.#setPopin(normResponse.data).then(
+                                        () => {
+                                            this.#addAccessibility();
+                                            resolve();
+                                        },
+                                    );
+                                } else {
+                                    this.#setPopinError(
+                                        this.#options.errorMessage,
+                                    );
                                     this.#addAccessibility();
                                     reject();
                                 }
                             },
-                            err => {
-                                this.#setPopinError( this.#options.errorMessage );
+                            (err) => {
+                                this.#setPopinError(this.#options.errorMessage);
                                 this.#addAccessibility();
-                                reject( err );
-                            }
+                                reject(err);
+                            },
                         )
-                        .finally( () => {
+                        .finally(() => {
                             this.#loadingPromise = null;
                             this.#closeLoader();
-                        } );
+                        });
                 })
-                .catch( err => reject( err ) );
-
-        } );
+                .catch((err) => reject(err));
+        });
 
         return this.#loadingPromise;
-    }
+    };
 
-
-    #_loadLink = ( $link: HTMLAnchorElement ): Promise<void> => {
+    #_loadLink = ($link: HTMLAnchorElement): Promise<void> => {
         return this.#_load(
             $link.href,
-            this.#options.setLinkResponseType( $link.href, $link, this.#$popin ),
+            this.#options.setLinkResponseType($link.href, $link, this.#$popin),
         );
-    }
-
+    };
 
-    #_loadForm = ( $form: HTMLFormElement ): Promise<void> => {
+    #_loadForm = ($form: HTMLFormElement): Promise<void> => {
         let validationResult;
 
-        if ( this.#options.checkValidity ) {
-            validationResult = this.#options.checkValidity( $form, this.#$popin );
-            if ( validationResult === false ) {
+        if (this.#options.checkValidity) {
+            validationResult = this.#options.checkValidity($form, this.#$popin);
+            if (validationResult === false) {
                 return Promise.reject();
             }
         }
 
-        const validationProm = ( !validationResult || validationResult === true ) ? Promise.resolve() : validationResult;
-
-
-        return validationProm
-                    .then( () => {
-                        return this.#_load(
-                            $form.action,
-                            this.#options.setFormResponseType( $form, this.#$popin ),
-                            {
-                                "body": new FormData( $form ),
-                                "method": $form.method || 'POST'
-                            } );
-                    } );
-    }
+        const validationProm =
+            !validationResult || validationResult === true
+                ? Promise.resolve()
+                : validationResult;
 
+        return validationProm.then(() => {
+            return this.#_load(
+                $form.action,
+                this.#options.setFormResponseType($form, this.#$popin),
+                {
+                    body: new FormData($form),
+                    method: $form.method || "POST",
+                },
+            );
+        });
+    };
 
-    #openPopinHandler = ( e: Event, $target: HTMLElement ): void => {
+    #openPopinHandler = (e: Event, $target: HTMLElement): void => {
         e.preventDefault();
 
-        if ( this.#loadingPromise ) {
+        if (this.#loadingPromise) {
             return;
         }
 
-        if ( $target.nodeName === 'FORM' ) {
-            this.#_loadForm( $target as HTMLFormElement );
+        if ($target.nodeName === "FORM") {
+            this.#_loadForm($target as HTMLFormElement);
             return;
         }
 
-        const url = $target.getAttribute( 'href' );
+        const url = $target.getAttribute("href");
 
-        if ( url && url.indexOf( '#' ) === 0 ) {
+        if (url && url.indexOf("#") === 0) {
             return;
         }
 
-        this.#_loadLink( $target as HTMLAnchorElement );
-    }
-
+        this.#_loadLink($target as HTMLAnchorElement);
+    };
 
-    #closePopinHandler = ( e: Event ): void => {
+    #closePopinHandler = (e: Event): void => {
         e.preventDefault();
 
-        if ( this.#controllerOptions ) {
+        if (this.#controllerOptions) {
             this.#controllerOptions.controller.close();
             return;
         }
 
         this.#closePopin();
-    }
+    };
 
-    #clickBgHandler = ( e: Event ): void => {
+    #clickBgHandler = (e: Event): void => {
         const $target = e.target as HTMLElement;
 
         if (!$target?.closest(this.#options.selectors.popinBody)) {
             this.#closePopinHandler(e);
         }
-    }
-
+    };
 
     #resize = (): void => {
-        if ( !this.#options.autoResize ) {
+        if (!this.#options.autoResize) {
             return;
         }
 
@@ -460,62 +449,58 @@ export default class Popin {
 
         const maxHeight = viewportSize.height - this.#options.marginHeight * 2;
 
-        this.#$popinContent.style.maxHeight = `${ maxHeight }px`;
+        this.#$popinContent.style.maxHeight = `${maxHeight}px`;
 
         this.#tick = false;
-    }
-
+    };
 
     #resizeHandler = (): void => {
-        if ( this.#tick ) {
+        if (this.#tick) {
             return;
         }
 
         this.#tick = true;
 
-        window.requestAnimationFrame( this.#resize.bind( this ) );
-    }
-
+        window.requestAnimationFrame(this.#resize.bind(this));
+    };
 
     /**
      * Load a page from a link and display the result it in the popin
      */
-    loadLink( $link: HTMLAnchorElement ): Promise<void> {
-        if ( this.#loadingPromise ) {
+    loadLink($link: HTMLAnchorElement): Promise<void> {
+        if (this.#loadingPromise) {
             return this.#loadingPromise;
         }
 
-        return this.#_loadLink( $link );
+        return this.#_loadLink($link);
     }
 
-
     /**
      * Send a form and display the result it in the popin
      */
-    loadForm( $form: HTMLFormElement ): Promise<void>  {
-        if ( this.#loadingPromise ) {
+    loadForm($form: HTMLFormElement): Promise<void> {
+        if (this.#loadingPromise) {
             return this.#loadingPromise;
         }
 
-        return this.#_loadForm( $form );
+        return this.#_loadForm($form);
     }
 
-
     /**
      * Load a file and display it in the popin
      *
      * @param data - All parameters available for window.fetch
      */
-    load( url: string, data?: RequestInit, type: FLib.Popin.ResponseType = 'text' ): Promise<void> {
-        if ( this.#loadingPromise ) {
+    load(
+        url: string,
+        data?: RequestInit,
+        type: FLib.Popin.ResponseType = "text",
+    ): Promise<void> {
+        if (this.#loadingPromise) {
             return this.#loadingPromise;
         }
 
-        return this.#_load(
-            url,
-            type,
-            data
-        );
+        return this.#_load(url, type, data);
     }
 
     /**
@@ -523,14 +508,13 @@ export default class Popin {
      *
      * @param openFirst - Open the popin THEN insert the html
      */
-    set( html: string, openFirst?: boolean ): Promise<void> {
-        if ( openFirst ) {
-            return this.#openPopin().then( () => this.#setPopin( html ) );
+    set(html: string, openFirst?: boolean): Promise<void> {
+        if (openFirst) {
+            return this.#openPopin().then(() => this.#setPopin(html));
         }
-        return this.#setPopin( html ).then( () => this.#openPopin() );
+        return this.#setPopin(html).then(() => this.#openPopin());
     }
 
-
     /**
      * Remove the content of the popin
      */
@@ -538,7 +522,6 @@ export default class Popin {
         return this.#clearPopin();
     }
 
-
     /**
      * Close the popin
      */
@@ -546,7 +529,6 @@ export default class Popin {
         return this.#closePopin();
     }
 
-
     /**
      * Open the popin
      */
@@ -554,51 +536,40 @@ export default class Popin {
         return this.#openPopin();
     }
 
-
     /**
      * Open the popin loading
      */
     openLoading(): Promise<void> {
-        return this.#openLoader()
+        return this.#openLoader();
     }
 
     /**
      * Close the popin loading
      */
     closeLoading(): Promise<void> {
-        return this.#closeLoader()
+        return this.#closeLoader();
     }
 
-
     /**
      * Remove all events, css class or inline styles
      */
     destroy(): void {
-        off(
-            this.#$popin,
-            {
-                "eventsName": `${ CLICK_EVENT_NAME } submit`,
-                "callback": this.#openPopinHandler
-            }
-        );
-
-        off(
-            window,
-            {
-                "eventsName": "resize",
-                "callback": this.#resizeHandler
-            }
-        );
-
-        off(
-            this.#$popin,
-            {
-                "eventsName": CLICK_EVENT_NAME,
-                "callback": this.#closePopinHandler
-            }
-        );
-
-        if ( this.#keyboardControls ) {
+        off(this.#$popin, {
+            eventsName: `${CLICK_EVENT_NAME} submit`,
+            callback: this.#openPopinHandler,
+        });
+
+        off(window, {
+            eventsName: "resize",
+            callback: this.#resizeHandler,
+        });
+
+        off(this.#$popin, {
+            eventsName: CLICK_EVENT_NAME,
+            callback: this.#closePopinHandler,
+        });
+
+        if (this.#keyboardControls) {
             this.#keyboardControls.off();
         }
     }