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

package/Modules/Slider/SliderControls.ts

@@ -13,6 +13,7 @@ import { Slide }                    from './Slide';
  * @see extra/modules/slider.md
  *
  * @example
+ * ```ts
  * let controls = new SliderControls(
  *  slider,
  *  {
@@ -26,6 +27,7 @@ import { Slide }                    from './Slide';
  *      "gestureOptions": Object
  *  }
  * );
+ * ```
 */
 export default class SliderControls {
 
@@ -33,22 +35,22 @@ export default class SliderControls {
     #autoslideTimeoutId;
     #keyboardPreviousButton;
     #keyboardNextButton;
-    #$bullets:                      NodeList | null = null;
+    #$bullets:                      NodeListOf<HTMLElement> | null = null;
     #paginationKeyboardControls;
     #inSlideKeyboardControls;
-    #isAutoslideEnabled:            boolean = false;
-    #options:                       SliderControlsOptionsType;
+    #isAutoslideEnabled             = false;
+    #options:                       FLib.Slider.ControlsOptions;
 
 
     /**
      * Controlled slider
      */
-    get slider() {
+    get slider(): Slider {
         return this.#slider;
     }
 
 
-    constructor( slider, options: SliderControlsOptionsType ) {
+    constructor( slider: Slider, options: FLib.Slider.ControlsOptions ) {
         this.#slider  = slider;
         this.#options = options;
 
@@ -64,14 +66,14 @@ export default class SliderControls {
         on( slider, {
             "eventsName": "before",
             "callback": data => {
-                this.updateBullets( data.targetSlide, data.currentSlide );
+                this.#updateBullets( data.targetSlide, data.currentSlide );
             }
         } );
 
         on( slider, {
             "eventsName": "start",
             "callback": data => {
-                this.updateBullets( data.currentSlide );
+                this.#updateBullets( data.currentSlide );
             }
         } );
 
@@ -81,12 +83,12 @@ export default class SliderControls {
 
         if ( this.#$bullets ) {
             this.#$bullets.forEach( ( $bullet, index ) => {
-                let matchSlide = slider.getSlide( index );
+                const matchSlide = slider.getSlide( index );
 
-                ($bullet as HTMLElement).setAttribute( 'role', 'tab' );
-                ($bullet as HTMLElement).setAttribute( 'aria-selected', 'false' );
-                ($bullet as HTMLElement).setAttribute( 'tabindex', '-1' );
-                ($bullet as HTMLElement).setAttribute( 'aria-controls', matchSlide.id );
+                $bullet.setAttribute( 'role', 'tab' );
+                $bullet.setAttribute( 'aria-selected', 'false' );
+                $bullet.setAttribute( 'tabindex', '-1' );
+                $bullet.setAttribute( 'aria-controls', matchSlide.id );
             } );
         }
 
@@ -94,20 +96,20 @@ export default class SliderControls {
 
         if ( options.$btPrev ) {
             gesture( options.$btPrev, '__sliderBtPrev', {
-                "tap": this.onPrev.bind( this ),
+                "tap": this.#onPrev.bind( this ),
             } );
         }
 
         if ( options.$btNext ) {
             gesture( options.$btNext, '__sliderBtNext', {
-                "tap": this.onNext.bind( this ),
+                "tap": this.#onNext.bind( this ),
             } );
         }
 
-        if ( this.#$bullets ) {
-            gesture( options.$pagination!, '__sliderBtPagination', {
+        if ( this.#$bullets && options.$pagination ) {
+            gesture( options.$pagination, '__sliderBtPagination', {
                 "selector": options.paginationItemsSelector,
-                "tap": this.onPager.bind( this ),
+                "tap": this.#onPager.bind( this ),
             } );
         }
 
@@ -134,9 +136,7 @@ export default class SliderControls {
                         {
                             "swipeLeft": ( e: Event, $target: HTMLElement, type: string ) => {
                                 this.next();
-                                if ( options.gestureOptions!.swipeLeft ) {
-                                    options.gestureOptions!.swipeLeft.call( this, e, $target, type  );
-                                }
+                                options.gestureOptions?.swipeLeft?.call( this, e, $target, type  );
                             }
                         }
                     );
@@ -148,9 +148,7 @@ export default class SliderControls {
                         {
                             "swipeRight": ( e: Event, $target: HTMLElement, type: string ) => {
                                 this.previous();
-                                if ( options.gestureOptions!.swipeRight ) {
-                                    options.gestureOptions!.swipeRight.call( this, e, $target, type );
-                                }
+                                options.gestureOptions?.swipeRight?.call( this, e, $target, type );
                             }
                         }
                     );
@@ -168,14 +166,14 @@ export default class SliderControls {
                 {
                     "onUp": e => {
                         if ( e.ctrlKey ) {
-                            this.updateBulletsFocus();
+                            this.#updateBulletsFocus();
                         }
                     },
                     "onPageUp": e => {
                         if (e.ctrlKey) {
                             one(slider, {
                                 "eventsName": "before",
-                                "callback": this.updateBulletsFocus
+                                "callback": this.#updateBulletsFocus
                             });
                             slider.previous();
                         }
@@ -184,7 +182,7 @@ export default class SliderControls {
                         if (e.ctrlKey) {
                             one(slider, {
                                 "eventsName": "before",
-                                "callback": this.updateBulletsFocus
+                                "callback": this.#updateBulletsFocus
                             });
                             slider.next();
                         }
@@ -202,14 +200,14 @@ export default class SliderControls {
                         "onPrevious": () => {
                             one( slider, {
                                 "eventsName": "before",
-                                "callback": this.updateBulletsFocus
+                                "callback": this.#updateBulletsFocus
                             } );
                             slider.previous();
                         },
                         "onNext": () => {
                             one( slider, {
                                 "eventsName": "before",
-                                "callback": this.updateBulletsFocus
+                                "callback": this.#updateBulletsFocus
                             } );
                             slider.next();
                         },
@@ -223,7 +221,7 @@ export default class SliderControls {
                 this.#keyboardNextButton = new KeyboardHandler(
                     options.$btNext,
                     {
-                        "onSelect": this.onNext.bind( this ),
+                        "onSelect": this.#onNext.bind( this ),
                     }
                 );
             }
@@ -232,7 +230,7 @@ export default class SliderControls {
                 this.#keyboardPreviousButton = new KeyboardHandler(
                     options.$btPrev,
                     {
-                        "onSelect": this.onPrev.bind( this ),
+                        "onSelect": this.#onPrev.bind( this ),
                     }
                 );
             }
@@ -250,9 +248,9 @@ export default class SliderControls {
      * @param _$button - Internal use
      */
     next( _$button?: HTMLElement ): Promise<void> {
-        this._stopAutoslide();
+        this.#_stopAutoslide();
         return this.#slider.next( _$button );
-    };
+    }
 
 
     /**
@@ -261,21 +259,20 @@ export default class SliderControls {
      * @param _$button - Internal use
      */
     previous( _$button?: HTMLElement ): Promise<void> {
-        this._stopAutoslide();
+        this.#_stopAutoslide();
         return this.#slider.previous( _$button );
-    };
+    }
 
 
     /**
      * Go to the asked slide or page
      *
-     * @param index
      * @param $button - Internal use
      */
     goTo( index: number, _$button?: HTMLElement ): Promise<void> {
-        this._stopAutoslide();
+        this.#_stopAutoslide();
         return this.#slider.goTo( index, _$button );
-    };
+    }
 
 
     /**
@@ -283,13 +280,13 @@ export default class SliderControls {
      */
     isEnabled(): boolean {
         return this.#slider.isEnabled();
-    };
+    }
 
 
     /**
      * Destroy the slider and its controls
      */
-    destroy() {
+    destroy(): void {
         clearTimeout( this.#autoslideTimeoutId );
         this.#slider.destroy();
 
@@ -317,84 +314,88 @@ export default class SliderControls {
             this.#inSlideKeyboardControls.off();
         }
 
-        if ( this.#$bullets ) {
-            gestureOff( this.#options.$pagination!, '__sliderBtPagination' );
+        if ( this.#$bullets && this.#options.$pagination ) {
+            gestureOff( this.#options.$pagination, '__sliderBtPagination' );
         }
 
         if ( this.#options.swipe ) {
             gestureOff( this.#slider.$slider, '__sliderSwipe' );
         }
-    };
+    }
 
 
     /**
      * Start the autoslide
      */
-    startAutoslide() {
+    startAutoslide(): this {
         if ( this.#options.autoslide ) {
             this.#isAutoslideEnabled = true;
-            this.autoslideLoop();
+            this.#autoslideLoop();
         }
-    };
+
+        return this;
+    }
 
 
     /**
      * Stop the autoslide
      */
-    stopAutoslide() {
-        this._stopAutoslide();
-    };
+    stopAutoslide(): this {
+        this.#_stopAutoslide();
+
+        return this;
+    }
 
 
-    public onPrev( e, $target: HTMLElement ) {
+    #onPrev = ( e: Event, $target: HTMLElement ): void => {
         e.preventDefault();
 
         this.previous( $target );
     }
 
 
-    private onNext( e, $target: HTMLElement ) {
+    #onNext = ( e: Event, $target: HTMLElement ): void => {
         e.preventDefault();
 
         this.next( $target );
     }
 
 
-    private onPager( e, $target: HTMLElement ) {
+    #onPager = ( e: Event, $target: HTMLElement ): void => {
         e.preventDefault();
 
         this.goTo( index( $target ), $target );
     }
 
 
-    private _stopAutoslide() {
+    #_stopAutoslide = (): void => {
         clearTimeout( this.#autoslideTimeoutId );
         this.#isAutoslideEnabled = false;
     }
 
 
-    private makeAutoslide() {
+    #makeAutoslide = (): void => {
         this.#slider.next().then( () => {
             if ( this.#isAutoslideEnabled ) {
-                this.autoslideLoop();
+                this.#autoslideLoop();
             }
         } );
     }
 
 
-    private autoslideLoop() {
+    #autoslideLoop = (): void => {
         const currentSlide = this.#slider.getCurrentSlide();
 
         clearTimeout( this.#autoslideTimeoutId );
 
         this.#autoslideTimeoutId = setTimeout(
-            this.makeAutoslide,
-            ( currentSlide.delay as number || this.#options.autoslide! as number ) * 1000
+            this.#makeAutoslide,
+            ( currentSlide.delay as number || this.#options.autoslide as number ) * 1000
         );
     }
 
 
-    private updateBullets( targetSlide: Slide, currentSlide?: Slide ) {
+    #updateBullets = ( targetSlide: Slide, currentSlide?: Slide ): void => {
         if ( !this.#$bullets ) {
             return;
         }
@@ -413,7 +414,7 @@ export default class SliderControls {
     }
 
 
-    private updateBulletsFocus( data? ) {
+    #updateBulletsFocus = ( data?: { currentSlide: FLib.Slider.SlideProperties, targetSlide: FLib.Slider.SlideProperties } ): void => {
         const currentSlide = data ? data.targetSlide : this.#slider.getCurrentSlide();
 
         if ( this.#$bullets && this.#$bullets[ currentSlide.index ] ) {

package/Modules/Tabs/Tab.ts

@@ -6,23 +6,23 @@ import { on, off }        from '../../Events/EventsManager';
  */
 export default class Tab {
 
-    #options:             TabOptionsType;
+    #options:             FLib.Tabs.TabOptions;
     #$TAB:                HTMLElement;
     #$TAB_PANNEL:         HTMLElement;
     #isOpen:              boolean;
     #originalOpenedState: boolean;
 
 
-    get isOpened() {
+    get isOpened(): boolean {
         return this.#isOpen;
     }
 
-    get index() {
+    get index(): number {
         return this.#options.index;
     }
 
 
-    constructor( $TAB: HTMLElement, options: TabOptionsType ) {
+    constructor( $TAB: HTMLElement, options: FLib.Tabs.TabOptions ) {
         this.#options = options;
         this.#$TAB    = $TAB;
 
@@ -46,12 +46,12 @@ export default class Tab {
         } );
 
         if ( this.#isOpen ) {
-            this.openTab( true );
+            this.#openTab( true );
         }
     }
 
 
-    private changeTabState( isOpenAtStart?: boolean ) {
+    #changeTabState = ( isOpenAtStart?: boolean ): void => {
         this.#$TAB.setAttribute( 'aria-selected', this.#isOpen ? 'true' : 'false' );
         this.#$TAB.setAttribute( 'tabindex', this.#isOpen ? '0' : '-1' );
 
@@ -62,7 +62,7 @@ export default class Tab {
     }
 
 
-    private openTab( isOpenAtStart?: boolean ) {
+    #openTab = ( isOpenAtStart?: boolean ): void => {
         this.#options.animations
                     .open( this.#$TAB, this.#$TAB_PANNEL )
                     .then( () => {
@@ -79,11 +79,11 @@ export default class Tab {
             this.#options.onOpenTab( this );
         }
         this.#isOpen = true;
-        this.changeTabState( isOpenAtStart );
+        this.#changeTabState( isOpenAtStart );
     }
 
 
-    private closeTab( autoClose?: boolean ) {
+    #closeTab = ( autoClose?: boolean ): void => {
         this.#options.animations
                     .close( this.#$TAB, this.#$TAB_PANNEL )
                     .then( () => {
@@ -92,39 +92,41 @@ export default class Tab {
                         }
                     } );
         this.#isOpen = false;
-        this.changeTabState();
+        this.#changeTabState();
     }
 
 
-    #toggleTab = ( e ) => {
+    #toggleTab = ( e: Event ): void => {
         e.preventDefault();
 
         if( this.#isOpen ) {
-            this.closeTab();
+            this.#closeTab();
         }
         else {
-            this.openTab();
+            this.#openTab();
         }
     }
 
 
-    close( autoClose?: boolean ) {
-        if( !this.#isOpen ) {
-            return;
+    close( autoClose?: boolean ): this {
+        if( this.#isOpen ) {
+            this.#closeTab( autoClose );
         }
-        this.closeTab( autoClose );
+
+        return this;
     }
 
 
-    open( autoOpen?: boolean ) {
-        if( this.#isOpen ) {
-            return;
+    open( autoOpen?: boolean ): this {
+        if( !this.#isOpen ) {
+            this.#openTab( autoOpen );
         }
-        this.openTab( autoOpen );
+
+        return this;
     }
 
 
-    destroy() {
+    destroy(): this {
         this.#options.animations.destroy( this.#$TAB, this.#$TAB_PANNEL );
 
         off( this.#$TAB, {
@@ -133,5 +135,7 @@ export default class Tab {
         } );
 
         this.#$TAB.setAttribute( 'aria-selected', this.#originalOpenedState ? 'true' : 'false' );
-    };
+
+        return this;
+    }
 }

package/Modules/Tabs/index.ts

@@ -33,6 +33,7 @@ const DEFAULT_OPTIONS = {
  * Tabs
  *
  * @example
+ * ```ts
  * new Tabs( document.querySelector( '.tabs' ), {
  *      "tabSelector":     ".tab",
  *      "animations": {
@@ -62,9 +63,11 @@ const DEFAULT_OPTIONS = {
  *          console.log( 'close: ', $tab, $panel );
  *      }
  *  } );
+ * ```
  *
  * HTML:
  *
+ * ```html
  * <div class="tabs">
  *   <ul role="tablist">
  *     <li role="tab" id="tab-1" tabindex="-1" aria-selected="false" aria-controls="panel-1">Tab 1</li>
@@ -85,42 +88,43 @@ const DEFAULT_OPTIONS = {
  *     [Content 4]
  *   </div>
  * </div>
+ * ```
  *
  * Set aria-selected to "true" and tabindex="0" on the tab you want open at start.
  * If the tabs are displayed vertically, add aria-orientation="vertical" on the role="tablist" element
  */
 export default class Tabs {
 
-    #options:        TabsOptionsType;
+    #options:        FLib.Tabs.Options;
     #$TABS_LIST:     HTMLElement;
     #$TABS:          NodeList;
     #tablist:        Tab[];
     #status:         string;
     #VERTICAL_MODE:  boolean;
-        #lastOpenedTab!: Tab;
-    #keyboard!:      KeyboardHandler;
+    #lastOpenedTab:  Tab | undefined;
+    #keyboard:       KeyboardHandler | undefined;
     #$tabsWrapper:   HTMLElement;
 
     #STATUS_ON  = 'STATUS_ON';
     #STATUS_OFF = 'STATUS_OFF';
 
-    constructor( $tabsWrapper, userOptions: TabsOptionsType ) {
+    constructor( $tabsWrapper: HTMLElement, userOptions: Partial<FLib.Tabs.Options> ) {
         this.#$tabsWrapper  = $tabsWrapper;
 
         this.#options       = extend( DEFAULT_OPTIONS, userOptions );
 
-        this.#$TABS_LIST    = $tabsWrapper.querySelector( '[role="tablist"]' );
+        this.#$TABS_LIST    = $tabsWrapper.querySelector( '[role="tablist"]' ) as HTMLElement;
         this.#$TABS         = this.#$TABS_LIST.querySelectorAll( this.#options.tabSelector );
         this.#tablist       = [];
         this.#status        = this.#STATUS_OFF;
 
         this.#VERTICAL_MODE = this.#$TABS_LIST.getAttribute( 'aria-orientation' ) === 'vertical';
 
-        this.on();
+        this.#on();
     }
 
 
-    #onOpenTab = ( tab: Tab ) => {
+    #onOpenTab = ( tab: Tab ): void => {
         if ( this.#lastOpenedTab ) {
             this.#lastOpenedTab.close( true );
         }
@@ -129,21 +133,23 @@ export default class Tabs {
     }
 
 
-    private onNext() {
-        const indexToOpen = this.#lastOpenedTab.index + 1 >= this.#tablist.length ? 0 : this.#lastOpenedTab.index + 1;
+    #onNext = (): void => {
+        const lastIndex   = this.#lastOpenedTab ? this.#lastOpenedTab.index : 0;
+        const indexToOpen = lastIndex + 1 >= this.#tablist.length ? 0 : lastIndex + 1;
 
         this.#tablist[ indexToOpen ].open();
     }
 
 
-    private onPrevious() {
-        const indexToOpen = this.#lastOpenedTab.index - 1 < 0 ? this.#tablist.length - 1 : this.#lastOpenedTab.index - 1;
+    #onPrevious = (): void => {
+        const lastIndex   = this.#lastOpenedTab ? this.#lastOpenedTab.index : 0;
+        const indexToOpen = lastIndex - 1 < 0 ? this.#tablist.length - 1 : lastIndex - 1;
 
         this.#tablist[ indexToOpen ].open();
     }
 
 
-    private on() {
+    #on = (): void => {
         let hasAnOpenedTab;
 
         if( this.#status === this.#STATUS_ON ) {
@@ -173,21 +179,21 @@ export default class Tabs {
         if ( this.#VERTICAL_MODE ) {
             this.#keyboard = new KeyboardHandler( this.#$tabsWrapper, {
                 "selector": this.#options.tabSelector,
-                "onUp":     this.onPrevious,
-                "onDown":   this.onNext
+                "onUp":     this.#onPrevious,
+                "onDown":   this.#onNext
             } );
         }
         else {
             this.#keyboard = new KeyboardHandler( this.#$tabsWrapper, {
                 "selector": this.#options.tabSelector,
-                "onRight":  this.onNext,
-                "onLeft":   this.onPrevious
+                "onRight":  this.#onNext,
+                "onLeft":   this.#onPrevious
             } );
         }
     }
 
 
-    private off() {
+    #off = (): void => {
         if( this.#status === this.#STATUS_OFF ){
             return;
         }
@@ -197,23 +203,27 @@ export default class Tabs {
             tab.destroy();
         } );
 
-        this.#keyboard.off();
+        this.#keyboard?.off();
     }
 
 
     /**
      * Remove all events, css class, ...
      */
-    destroy() {
-        this.off();
-    };
+    destroy(): this {
+        this.#off();
+
+        return this;
+    }
 
 
     /**
      * Restart the module
      */
-    update() {
-        this.off();
-        this.on();
-    };
+    update(): this {
+        this.#off();
+        this.#on();
+
+        return this;
+    }
 }

package/Modules/Validator/Date.ts

@@ -1,6 +1,7 @@
 import isDate           from './Tools/IsDate';
 import { addValidator } from './index';
 
+
 /**
  * Date validation
  */
@@ -11,7 +12,7 @@ addValidator( 'date', '[data-date-control]', ( $input, value, isLiveValidation )
         "isValid": value === '' ||
                     isDate(
                         value as string,
-                        $input.getAttribute( 'data-date-control' ) || ''
+                        $input.getAttribute( 'data-date-control' ) || ''
                     ),
         "label": "date",
         isLiveValidation

package/Modules/Validator/Equals.ts

@@ -6,7 +6,7 @@ import { addValidator } from './index';
  * "Two fields equals" validation
  */
 addValidator( 'equals', '[data-equals]', ( $input, value, isLiveValidation ) => {
-    const name    = $input.getAttribute( 'data-equals' )!;
+    const name    = $input.getAttribute( 'data-equals' ) as string;
     const $target = document.getElementById( name );
 
     return Promise.resolve({