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

package/CHANGELOG.md

@@ -1,6 +1,27 @@
 # CHANGELOG
 
 
+## 7.1.4
+
+* Typescript: Fix tsify and browserify compatibility
+* HistoryController: Remove UrlParser for window.URL
+
+
+## 7.1.3
+
+* Typescript: Fix some type
+
+
+## 7.1.2
+
+* Typescript: Fix some type
+
+
+## 7.1.1
+
+* Validator: Fix error message generation
+
+
 ## 7.1.0
 
 * Typescript cleanup

package/Events/HistoryController.ts

@@ -1,5 +1,4 @@
 import { on }        from './EventsManager';
-import { UrlParser } from '../Helpers/UrlParser';
 import { slice }     from '../Helpers/Slice';
 
 
@@ -33,7 +32,7 @@ export default class HistoryController {
     #hasPushstate:           boolean;
     #hasPopStateEvent:       boolean;
     #currentState:           FLib.Events.History.StateObject;
-    #registeredFunctionList: (( url: UrlParser, state: any ) => void)[];
+    #registeredFunctionList: (( url: URL, state: any ) => void)[];
 
 
     get state(): FLib.Events.History.StateObject {
@@ -53,7 +52,7 @@ export default class HistoryController {
         this.#defaultTitle = encodeURIComponent( defaultTitle );
 
         this.#currentState = {
-            "url":   new UrlParser( window.location.href ),
+            "url":   new window.URL( window.location.href ),
             "state": {},
             "title": this.#defaultTitle
         };
@@ -69,7 +68,7 @@ export default class HistoryController {
 
 
     // Call each registered function for popstate event
-    #callRegisteredFunction = ( url: UrlParser, state: any ): void => {
+    #callRegisteredFunction = ( url: URL, state: any ): void => {
         if ( !this.#registeredFunctionList.length ) {
             return;
         }
@@ -87,7 +86,7 @@ export default class HistoryController {
         }
 
         this.#currentState = {
-            "url": new UrlParser( document.location.href ),
+            "url": new URL( document.location.href ),
             state,
             "title": ""
         };
@@ -101,15 +100,15 @@ export default class HistoryController {
      *
      * @param state - Native browser state object
      */
-    pushState( state: any, title: string, url: string | UrlParser ): this {
+    pushState( state: any, title: string, url: string | URL ): this {
         if ( !this.#hasPushstate ) {
             return this;
         }
 
-        url = url instanceof UrlParser ? url : new UrlParser( url as string );
+        url = url instanceof URL ? url : new URL( url as string );
 
         this.#currentState = {
-            "url": url as UrlParser,
+            "url": url as URL,
             state,
             "title": title ? encodeURIComponent( title ) : this.#defaultTitle
         };
@@ -118,7 +117,7 @@ export default class HistoryController {
             window.history.pushState(
                 state,
                 this.#currentState.title,
-                this.#currentState.url.absolute2
+                this.#currentState.url.href
             );
         }
         catch ( e ) {
@@ -137,14 +136,14 @@ export default class HistoryController {
             return this;
         }
 
-        anchor = anchor.indexOf( '#' ) === -1 ? anchor : anchor.slice( 1 );
+        anchor = anchor.indexOf( '#' ) === -1 ? `#${ anchor }` : anchor;
 
         try {
-            this.#currentState.url.setAnchor( anchor );
+            this.#currentState.url.hash = anchor.indexOf( '#' ) === -1 ? `#${ anchor }` : anchor;
             window.history.pushState(
                 this.#currentState.state,
                 this.#currentState.title,
-                this.#currentState.url.absolute2
+                this.#currentState.url.href
             );
         }
         catch ( e ) {

package/Helpers/Debounce.ts

@@ -9,7 +9,7 @@ export function debounce(
                     threshold = 100,
                     immediate = false
                 ): ( ...args: any[] ) => void {
-    let timeout: ReturnType<typeof setTimeout> | undefined;
+    let timeout: any;
 
     return function<Type>( this: Type, ...args: any[] ) {
 

package/Helpers/UrlParser.ts

@@ -33,7 +33,7 @@
  * url.removeAll()
  * ```
  */
-export class UrlParser {
+export class UrlParser implements FLib.Helpers.UrlParser {
     /** Complete url without userInfo and anchor. Ex: https://demo.domain.com:1337/section/page.html?param=2 */
     absolute     = '';
     /** Complete url with anchor but without userInfo. Ex: https://demo.domain.com:1337/section/page.html?param=2#anchor */

package/Modules/Accordion/Tab.ts

@@ -5,7 +5,7 @@ import { next }    from '../../DOM/Traversing';
 /**
  * Tab of an accordion
  */
-export default class Tab {
+export default class Tab implements FLib.Accordion.Tab {
     #isOpen:              boolean;
     #originalOpenedState: boolean;
     #$TAB_PANNEL:         HTMLElement | null;

package/Modules/Accordion/index.ts

@@ -86,9 +86,9 @@ const DEFAULT_OPTIONS = {
 export default class Accordion {
     #options:       FLib.Accordion.Options;
     #$tabs:         NodeListOf<HTMLElement>;
-    #tablist:       Tab[];
+    #tablist:       FLib.Accordion.Tab[];
     #status:        string;
-    #lastOpenedTab: Tab | null = null;
+    #lastOpenedTab: FLib.Accordion.Tab | null = null;
 
 
     #STATUS_ON  = 'STATUS_ON';
@@ -107,7 +107,7 @@ export default class Accordion {
     }
 
 
-    #onOpenTab = ( tab: Tab ): void => {
+    #onOpenTab = ( tab: FLib.Accordion.Tab ): void => {
         if ( this.#lastOpenedTab ) {
             this.#lastOpenedTab.close( true );
         }
@@ -127,7 +127,7 @@ export default class Accordion {
             this.#tablist.push( new Tab( $tab, {
                 ...this.#options,
                 index,
-                "onOpenTab": this.#options.allowMultipleTab ? null : this.#onOpenTab
+                "onOpenTab": this.#options.allowMultipleTab ? undefined : this.#onOpenTab
             } ) );
         } );
     }

package/Modules/DragSlider.ts

@@ -20,17 +20,17 @@ export default class DragSlider {
     #$slider:               HTMLElement;
     #viewportInfo;
     #siteOffset;
-    #listDelta!:             number;
-    #$viewport!:             HTMLElement;
-    #$items!:                NodeList;
-    #$list!:                 HTMLElement;
-    #isDragging!:            boolean;
-    #itemMap!:               Map<HTMLElement, FLib.DragSlider.Item>;
-    #firstItem!:             FLib.DragSlider.Item;
-    #currentSnapItem!:       FLib.DragSlider.Item;
-    #hasAlreadyBeenDragged!: boolean;
-    #startDragCoords!:       FLib.Events.Gesture.Coords;
-    #isInitialized!:         boolean;
+    #listDelta               = 0;
+    #$viewport:              HTMLElement | undefined;
+    #$items:                 NodeList | undefined;
+    #$list:                  HTMLElement | undefined;
+    #isDragging              = false;
+    #itemMap                 = new Map<HTMLElement, FLib.DragSlider.Item>();
+    #firstItem:              FLib.DragSlider.Item | undefined;
+    #currentSnapItem:        FLib.DragSlider.Item | undefined;
+    #hasAlreadyBeenDragged   = false;
+    #startDragCoords:        FLib.Events.Gesture.Coords | undefined;
+    #isInitialized           = false;
     #debouncedOnResize;
 
 
@@ -40,6 +40,7 @@ export default class DragSlider {
 
 
     constructor( $slider: HTMLElement, options: Partial<FLib.DragSlider.Options> ) {
+
         if ( !options.viewportSelector || !options.listSelector || !options.itemSelector || !options.dragClass ) {
             throw '[Drag Slider]: Missing at least one of viewportSelector, listSelector, itemSelector, dragClass';
         }
@@ -80,7 +81,10 @@ export default class DragSlider {
 
 
     #onResize = (): void => {
-        this.#viewportInfo = offset( this.#$viewport );
+        if ( !this.#$items || !this.#$list ) {
+            return;
+        }
+        this.#viewportInfo = offset( this.#$viewport as HTMLElement );
         this.#siteOffset   = parseInt( prop( (this.#$items[ 0 ] as HTMLElement), 'marginLeft' ), 10 );
         this.#listDelta    = this.#viewportInfo.width - this.#$list.scrollWidth;
 
@@ -105,6 +109,8 @@ export default class DragSlider {
 
         this.#itemArray.length = 0;
 
+        const LAST_INDEX = this.#$items.length;
+
         this.#$items.forEach( ( $item: Node, index: number ) => {
             const $ITEM       = $item as HTMLElement;
             const ITEM_OFFSET = offset( $ITEM, false, this.#$list );
@@ -112,7 +118,7 @@ export default class DragSlider {
             this.#itemArray.push({
                 index,
                 "isFirst": index === 0,
-                "isLast":  index === this.#$items.length - 1 || ITEM_OFFSET.left > Math.abs( this.#listDelta ),
+                "isLast":  index === LAST_INDEX - 1 || ITEM_OFFSET.left > Math.abs( this.#listDelta ),
                 "$item":   $ITEM,
                 "info":    ITEM_OFFSET
             });
@@ -161,7 +167,7 @@ export default class DragSlider {
 
         this.#currentSnapItem = snapItem;
 
-        const TWEEN = gsap.to( this.#$list, {
+        const TWEEN = gsap.to( this.#$list as HTMLElement, {
             "duration": 0.3,
             "x":        finalX,
             "y":        0,
@@ -276,7 +282,7 @@ export default class DragSlider {
 
         const ABS_DELTA_X = Math.abs( this.#deltaMove.deltaX );
 
-        if ( ABS_DELTA_X >= this.#options.swipeTresholdMin && ABS_DELTA_X < Math.min( this.#firstItem.info.width * this.#options.swipeTresholdSize, this.#options.swipeTresholdMin * 3 ) ) {
+        if ( ABS_DELTA_X >= this.#options.swipeTresholdMin && ABS_DELTA_X < Math.min( (this.#firstItem as FLib.DragSlider.Item ).info.width * this.#options.swipeTresholdSize, this.#options.swipeTresholdMin * 3 ) ) {
             if ( this.#deltaMove.deltaX < 0 ) {
                 snapItem = this.#getFirstNextItem( this.#deltaMove.x );
             }
@@ -302,7 +308,7 @@ export default class DragSlider {
             this.#hasAlreadyBeenDragged = true;
         }
 
-        if ( !this.#isDraggingActive ) {
+        if ( !this.#isDraggingActive || !this.#$list ) {
             return;
         }
 
@@ -339,8 +345,8 @@ export default class DragSlider {
     #onMove = ( e: Event, $target: HTMLElement, coords: FLib.Events.Gesture.Coords ): void => {
         this.#cancelLinkClick();
 
-        this.#deltaMove.deltaX = coords.pageX - this.#startDragCoords.pageX;
-        this.#deltaMove.deltaY = coords.pageY - this.#startDragCoords.pageY;
+        this.#deltaMove.deltaX = coords.pageX - ( this.#startDragCoords as FLib.Events.Gesture.Coords ).pageX;
+        this.#deltaMove.deltaY = coords.pageY - ( this.#startDragCoords as FLib.Events.Gesture.Coords ).pageY;
 
         this.#deltaMove.newX  = this.#deltaMove.deltaX + this.#deltaMove.x;
 
@@ -351,7 +357,7 @@ export default class DragSlider {
             this.#deltaMove.newX = this.#listDelta;
         }
 
-        gsap.set( this.#$list, {
+        gsap.set( this.#$list as HTMLElement, {
             "x": this.#deltaMove.newX,
             "y": 0,
             "z": 0
@@ -424,20 +430,20 @@ export default class DragSlider {
 
 
     next(): gsap.core.Tween | void {
-        if ( !this.#isDraggingActive || this.#currentSnapItem.isLast ) {
+        if ( !this.#isDraggingActive || ( this.#currentSnapItem as FLib.DragSlider.Item ).isLast ) {
             return;
         }
 
-        return this.#snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index + 1 ] );
+        return this.#snapToItemAnimation( this.#itemArray[ ( this.#currentSnapItem as FLib.DragSlider.Item ).index + 1 ] );
     }
 
 
     previous(): gsap.core.Tween | void {
-        if ( !this.#isDraggingActive || this.#currentSnapItem.isFirst ) {
+        if ( !this.#isDraggingActive || ( this.#currentSnapItem as FLib.DragSlider.Item ).isFirst ) {
             return;
         }
 
-        return this.#snapToItemAnimation( this.#itemArray[ this.#currentSnapItem.index - 1 ] );
+        return this.#snapToItemAnimation( this.#itemArray[ ( this.#currentSnapItem as FLib.DragSlider.Item ).index - 1 ] );
     }
 
 
@@ -461,7 +467,7 @@ export default class DragSlider {
             "isAtEnd":     this.#deltaMove.x === this.#listDelta
         } );
 
-        return gsap.to( this.#$list, {
+        return gsap.to( this.#$list as HTMLElement, {
             "duration": 0.3,
             "x":        -1 * ITEM.info.left + this.#siteOffset,
             "y":        0,
@@ -491,8 +497,6 @@ export default class DragSlider {
         this.#isInitialized = true;
 
         if ( !this.#$viewport ) {
-            this.#itemMap           = new Map();
-
             const $VP = this.#$slider.querySelector( this.#options.viewportSelector );
             if ( !$VP ) {
                 throw `"${ this.#options.viewportSelector }" not found`;
@@ -514,7 +518,7 @@ export default class DragSlider {
             this.#debouncedOnResize = debounce( this.#onResize );
         }
 
-        if ( !this.#$items.length ) {
+        if ( !this.#$items?.length ) {
             return this;
         }
 
@@ -563,7 +567,7 @@ export default class DragSlider {
         this.#isInitialized         = false;
         this.#hasAlreadyBeenDragged = false;
 
-        if ( !this.#$items.length ) {
+        if ( !this.#$items?.length ) {
             return this;
         }
 
@@ -572,7 +576,7 @@ export default class DragSlider {
             "callback":    this.#debouncedOnResize
         } );
 
-        gestureOff( this.#$viewport, 'dragSlider' );
+        this.#$viewport && gestureOff( this.#$viewport, 'dragSlider' );
 
         gestureOff( document.body, 'dragSlider' );
 
@@ -591,14 +595,15 @@ export default class DragSlider {
             "callback":   this.#onMouseleave
         } );
 
+        if ( this.#$list ) {
+            gsap.killTweensOf( this.#$list );
 
-        gsap.killTweensOf( this.#$list );
-
-        gsap.set( this.#$list, {
-            "clearProps": "all"
-        } );
+            gsap.set( this.#$list, {
+                "clearProps": "all"
+            } );
+        }
 
-        rClass( this.#$viewport, this.#options.dragClass );
+        this.#$viewport && rClass( this.#$viewport, this.#options.dragClass );
 
         rClass( this.#$slider, 'is-active' );
 

package/Modules/Popin/PopinBackground.ts

@@ -4,7 +4,7 @@ import Popin                from './Popin';
 import { CLICK_EVENT_NAME } from './Tools';
 
 
-export default class PopinBackground {
+export default class PopinBackground implements FLib.Popin.Background {
 
     #$bgLayer: HTMLElement;
     #isOpened: boolean;

package/Modules/Popin/PopinController.ts

@@ -14,7 +14,7 @@ import { CLICK_EVENT_NAME, defaultOptions, toggleTabIndex } from './Tools';
  * let controller = new PopinController( popinOptions );
  * popin.loadForm( $form );
  */
-export default class PopinController {
+export default class PopinController implements FLib.Popin.Controller {
     #options:    FLib.Popin.Options;
     #selectors:  FLib.Popin.SelectorsOptions;
     #background: PopinBackground;

package/Modules/ScrollSnap.ts

@@ -35,12 +35,12 @@ function getPosition( start, end, elapsed, duration ) {
 
 
 class ScrollTo {
-    #startTime!:     number;
+    #startTime:      number | undefined;
     #animationFrame;
-    #duration!:      number;
-    #startPosition!: number;
-    #snapItem!:      FLib.ScrollSnap.Item;
-    #snapItemType!:  FLib.ScrollSnap.SnapType;
+    #duration:       number | undefined;
+    #startPosition:  number | undefined;
+    #snapItem:       FLib.ScrollSnap.Item | undefined;
+    #snapItemType:   FLib.ScrollSnap.SnapType | undefined;
     #scrollPropName: FLib.ScrollSnap.ScrollPropertyType;
     #$element:       HTMLElement;
     #callback:       FLib.ScrollSnap.ScrollToCallback;
@@ -54,6 +54,10 @@ class ScrollTo {
 
 
     #step = ( timestamp: number ) => {
+        if ( !this.#snapItem ) {
+            return;
+        }
+
         if ( !this.#startTime ) {
             this.#startTime = timestamp;
         }
@@ -69,13 +73,13 @@ class ScrollTo {
             );
         }
 
-        if ( elapsed < this.#duration ) {
+        if ( elapsed < (this.#duration as number) ) {
             this.#animationFrame = window.requestAnimationFrame( this.#step.bind( this ) );
         }
         else {
             if ( typeof this.#callback === 'function' ) {
                 window.requestAnimationFrame( () => {
-                    this.#callback( this.#snapItem, this.#snapItemType );
+                    this.#callback( this.#snapItem as FLib.ScrollSnap.Item, this.#snapItemType as FLib.ScrollSnap.SnapType );
                 } );
             }
         }
@@ -98,7 +102,7 @@ class ScrollTo {
         if ( !delta ) {
             if ( typeof this.#callback === 'function' ) {
                 window.requestAnimationFrame( () => {
-                    this.#callback( this.#snapItem, this.#snapItemType );
+                    this.#callback( this.#snapItem as FLib.ScrollSnap.Item, this.#snapItemType as FLib.ScrollSnap.SnapType );
                 } );
             }
             return;

package/Modules/SkinCheckbox.ts

@@ -14,7 +14,7 @@ const defaultOptions: FLib.SkinCheckbox.Options = {
  * Skin an HTML input checkbox element.
  * You can access the skin API in the __skinAPI property of the $checkbox HTMLElement or its wrapper.
  */
- export default class SkinCheckbox {
+ export default class SkinCheckbox implements FLib.SkinCheckbox.SkinCheckbox {
 
     #$checkbox!: FLib.SkinCheckbox.CustomCheckbox;
     #options!:   FLib.SkinCheckbox.Options;

package/Modules/SkinFile.ts

@@ -21,7 +21,7 @@ const defaultOptions: FLib.SkinFile.Options = {
 /**
  * Skin an HTML input file element.
  */
- export default class SkinFile {
+ export default class SkinFile implements FLib.SkinFile.SkinFile {
 
     #options:             FLib.SkinFile.Options;
     #$parent:             FLib.SkinFile.CustomInputFileParent;

package/Modules/SkinRadio.ts

@@ -26,7 +26,7 @@ const defaultOptions = {
  * } );
  * ```
  */
-export default class SkinRadioButton {
+export default class SkinRadioButton implements FLib.SkinRadio.SkinRadio {
     #$radio!:   FLib.SkinRadio.CustomRadioButton;
     #options!:  FLib.SkinRadio.Options;
     #$parent!:  FLib.SkinRadio.CustomRadioButtonParent;

package/Modules/SkinSelect.ts

@@ -37,27 +37,27 @@ const defaultOptions: FLib.SkinSelect.Options = {
  * Skin an HTML select element. If options.full is set to true, also skin the options list.
  * You can access the skin API in the __skinAPI property of the $select HTMLElement or its wrapper.
  */
-export default class SkinSelect {
-    #$select:           FLib.SkinSelect.CustomSelect;
-    #loading!:          boolean;
+export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
+    #$select!:          FLib.SkinSelect.CustomSelect;
+    #loading            = false;
     #options!:          FLib.SkinSelect.Options;
     #extraClass!:       string;
     #$parent!:          FLib.SkinSelect.CustomSelectParent;
     #$title!:           HTMLElement;
-    #isListOpened!:     boolean;
-    #$options!:         NodeList;
-    #$lastOption!:      HTMLElement | null;
-    #focusedItemIndex!: number;
-    #$layer!:           HTMLElement;
+    #isListOpened       = false;
+    #$options:          NodeList | undefined;
+    #$lastOption:       HTMLElement | null = null;
+    #focusedItemIndex   = -1;
+    #$layer:            HTMLElement | undefined;
 
-    constructor( $select: HTMLSelectElement, userOptions?: Partial<FLib.SkinSelect.Options> ) {
+    constructor( $select: FLib.SkinSelect.CustomSelect, userOptions?: Partial<FLib.SkinSelect.Options> ) {
 
-        this.#$select = $select;
-
-        if ( this.#$select.hasAttribute( 'multiple' ) || this.#$select.__skinAPI ) {
+        if ( $select.hasAttribute( 'multiple' ) || $select.__skinAPI ) {
             return;
         }
 
+        this.#$select = $select;
+
         this.#loading = false;
 
         this.#options = extend( defaultOptions, userOptions );
@@ -420,6 +420,10 @@ export default class SkinSelect {
 
 
     #focusItem = ( index: number ): void => {
+        if ( !this.#$options ) {
+            return;
+        }
+
         if ( index < 0 ) {
             index = this.#$options.length - 1;
         }

package/Modules/Tabs/Tab.ts

@@ -4,7 +4,7 @@ import { on, off }        from '../../Events/EventsManager';
 /**
  * Tab of a tabs list
  */
-export default class Tab {
+export default class Tab implements FLib.Tabs.Tab {
 
     #options:             FLib.Tabs.TabOptions;
     #$TAB:                HTMLElement;

package/Modules/Tabs/index.ts

@@ -98,10 +98,10 @@ export default class Tabs {
     #options:        FLib.Tabs.Options;
     #$TABS_LIST:     HTMLElement;
     #$TABS:          NodeList;
-    #tablist:        Tab[];
+    #tablist:        FLib.Tabs.Tab[];
     #status:         string;
     #VERTICAL_MODE:  boolean;
-    #lastOpenedTab:  Tab | undefined;
+    #lastOpenedTab:  FLib.Tabs.Tab | undefined;
     #keyboard:       KeyboardHandler | undefined;
     #$tabsWrapper:   HTMLElement;
 
@@ -124,7 +124,7 @@ export default class Tabs {
     }
 
 
-    #onOpenTab = ( tab: Tab ): void => {
+    #onOpenTab = ( tab: FLib.Tabs.Tab ): void => {
         if ( this.#lastOpenedTab ) {
             this.#lastOpenedTab.close( true );
         }

package/Modules/Validator/Internal/Input.ts

@@ -8,7 +8,7 @@ import { getRadioList }             from '../Tools/RadioButton';
 /*
  * Handle one input
  */
-export default class Input {
+export default class Input implements FLib.Validator.Input {
     #isRadio:                   boolean;
     #inputType:                 string;
     #inputId:                   string;
@@ -123,7 +123,7 @@ export default class Input {
 
         if ( this.#hasValidator && options.hasLiveValidation && this.#inputType !== 'hidden' ) {
             on( this.#isRadio ? this.#$group : $input, {
-                "eventsName":   options.liveValidation?.eventsName[ this.#inputType ],
+                "eventsName":   options.liveValidation?.eventsName?.[ this.#inputType ] as string,
                 "callback":     this.#onLiveValidation
             } );
         }
@@ -194,7 +194,7 @@ export default class Input {
             if ( !validator.isValid() ) {
                 this.#validatorsInErrors.push( validator );
             }
-        })
+        });
 
         return this.#validatorsInErrors;
     }
@@ -250,9 +250,7 @@ export default class Input {
      * Return an array of error messages and labels
      */
     getErrorMessages( _locale?: { [ key: string ]: string } ): { message: string, label: string, type: string }[] {
-        if ( !this.#validatorsInErrors ) {
-            this.getErrors();
-        }
+        this.getErrors();
 
         if ( !this.#validatorsInErrors.length ) {
             return [];
@@ -299,9 +297,7 @@ export default class Input {
      * Get custom data of all validators
      */
     getData(): any[] {
-        if ( !this.#validatorsInErrors ) {
-            this.getErrors();
-        }
+        this.getErrors();
 
         if ( !this.#validatorsInErrors.length ) {
             return [];

package/Modules/Validator/Internal/InputValidator.ts

@@ -5,7 +5,7 @@ import { getValue } from '../../../Helpers/GetValue';
  * Used to make one validation on one input
  * Store the state (valid or not) between validations
  */
-export default class InputValidator {
+export default class InputValidator implements FLib.Validator.InputValidator {
     #$input:                HTMLElement;
     #name:                  string;
     #isAsynch:              boolean;

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.0
+@version: 7.1.4
 
 
 ## Use

package/Types/Accordion.d.ts

@@ -1,6 +1,11 @@
-namespace FLib {
+declare namespace FLib {
     namespace Accordion {
 
+        interface Tab {
+            close( autoClose?: boolean ): this;
+            destroy(): this;
+        }
+
         type AnimationFunction = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
         type Callback          = ( $tab: HTMLElement, $panel: HTMLElement ) => void;
         type CloseCallback     = ( $tab: HTMLElement, $panel: HTMLElement, autoclose: boolean ) => void;
@@ -21,7 +26,7 @@ namespace FLib {
             onOpenAtStart:     Callback;
             onOpen:            Callback;
             onClose:           CloseCallback;
-            animations:        AnimationOptions;
+            animations:        Partial<AnimationOptions>;
         }
 
         interface OptionsInit extends Partial<Options> {
@@ -29,7 +34,7 @@ namespace FLib {
         }
 
         interface TabOptions extends Options {
-            onOpenTab: (( tab: Tab ) => void) | null;
+            onOpenTab?: ( tab: Tab ) => void;
             index:     number;
         }
     }

package/Types/Autocomplete.d.ts

@@ -1,9 +1,8 @@
-namespace FLib {
+declare namespace FLib {
     namespace Autocomplete {
         type Item = {
             name: string;
-            [ key: string ]: any;
-        }
+        } & Record<string, any>
 
         type LayerPosition  = 'top' | 'bottom';
 

package/Types/DOM.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace DOM {
         type ClassInput = Element | Element[] | Node | NodeList;
 

package/Types/DragSlider.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace DragSlider {
         type CallbackParam = {
             item:        any;
@@ -13,7 +13,7 @@ namespace FLib {
             isFirst: boolean;
             isLast:  boolean;
             $item:   HTMLElement;
-            info:    OffsetType;
+            info:    FLib.DOM.Offset;
         }
 
         type DeltaMove = {

package/Types/EventsHelpers.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace Events {
 
         /**
@@ -26,7 +26,7 @@ namespace FLib {
             interface DataRegistry {
                 $element: Element;
                 eventName: string;
-                options:   OnOptionsType;
+                options:   OnOptions;
                 delegate?:  ( e ) => void;
             }
 
@@ -156,7 +156,7 @@ namespace FLib {
                 /** click */
                 click?:                Callback;
                 /** touchend on touch device, click on other */
-                tap?:                  (( e: Event, $target: HTMLElement, coords: CoordsType, type: string ) => void);
+                tap?:                  (( e: Event, $target: HTMLElement, coords: Coords, type: string ) => void);
                 swipeLeft?:            SwipeCallback;
                 swipeRight?:           SwipeCallback;
                 swipeUp?:              SwipeCallback;
@@ -179,12 +179,12 @@ namespace FLib {
          */
         namespace History {
             type StateObject = {
-                url:    UrlParser;
+                url:    URL;
                 state:  any;
                 title:  string;
             }
 
-            type Callback = ( url: UrlParser, state: any ) => void;
+            type Callback = ( url: URL, state: any ) => void;
         }
 
 
@@ -378,10 +378,10 @@ namespace FLib {
 
 
             type CallbackParam = {
-                windowInfo:   WindowInfoType,
-                scrollInfo:   ScrollInfoType,
-                documentInfo: DocumentInfoType,
-                viewportInfo: ViewportInfoType
+                windowInfo:   WindowInfo,
+                scrollInfo:   ScrollInfo,
+                documentInfo: DocumentInfo,
+                viewportInfo: ViewportInfo
             }
 
             type Callback = ( info: CallbackParam, type: Type, e? ) => void;

package/Types/GLImageTransition.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace GLImageTransition {
         type FitType  = 'cover' | 'contains';
 

package/Types/GlobalState.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace GlobalState {
         type Options = {
             alwaysDispatch: boolean;

package/Types/Helpers.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace Helpers {
         namespace Color {
             type RenderType =  'obj' | 'hex' | 'rgba';
@@ -26,5 +26,38 @@ namespace FLib {
                 path:    string;
             }
         }
+
+        interface UrlParser {
+            absolute:       string;
+            absolute2:      string;
+            anchor:         string;
+            authority:      string;
+            directory:      string;
+            file:           string;
+            full:           string;
+            full2:          string;
+            host:           string;
+            location;
+            password:       string;
+            path:           string;
+            port:           string;
+            protocol:       string;
+            query:          string;
+            queryKey:       Record<string, string>;
+            relative:       string;
+            relative2:      string;
+            source:         string;
+            user:           string;
+            userInfo:       string;
+            isAnchor:       boolean;
+            isSameDomain:   boolean;
+
+            init( url: string ): void;
+            setAnchor( anchor: string ): this;
+            getParam( key: string ): string;
+            setParam( keys: string | Record<string, string>, value?: string ): this;
+            removeParam( keys: string | string[] ): this
+            removeAll(): this;
+        }
     }
 }

package/Types/Notifications.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace Notifications {
         type Type =  'info' | 'success' | 'warning' | 'danger';
 
@@ -38,8 +38,8 @@ namespace FLib {
                 info:    string;
             };
             animations: {
-                show: ( $notification, options ) => Promise
-                hide: ( $notification, options ) => Promise
+                show: ( $notification, options ) => Promise<any>
+                hide: ( $notification, options ) => Promise<any>
             };
         }
 

package/Types/Popin.d.ts

@@ -1,8 +1,26 @@
-namespace FLib {
+declare namespace FLib {
     namespace Popin {
         type AnimationFunction = ( $element: HTMLElement ) => Promise<void>;
         type ResponseType          = 'arrayBuffer' | 'blob' | 'json' | 'text' | 'formData';
 
+        interface Controller {
+            load( url: string, data: RequestInit, type?: FLib.Popin.ResponseType ): Promise<void>
+            loadForm( $form: HTMLFormElement ):      Promise<void>
+            loadLink( $link: HTMLAnchorElement ):    Promise<void>
+            set( html: string, openFirst?: boolean ): Promise<void>
+            clear():                                void;
+            close():                                Promise<void>;
+            open():                                 Promise<void>;
+            destroy():                              this;
+        }
+
+        interface Background {
+            isOpened:  boolean;
+            open():    Promise<any>;
+            close():   Promise<any>;
+            destroy(): void;
+        }
+
         interface TemplatesOptions {
             /** @defaultValue `<div class="popin-loader"></div>` */
             popinLoader:  string;

package/Types/ScrollSnap.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace ScrollSnap {
         type SnapType = 'scroll' | 'api';
 

package/Types/SkinCheckbox.d.ts

@@ -1,5 +1,14 @@
-namespace FLib {
+declare namespace FLib {
     namespace SkinCheckbox {
+        interface SkinCheckbox {
+            check():      this;
+            uncheck():    this;
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+        }
+
         type Options = {
             /** @defaultValue <span class="cb-skin"></span> */
             wrap:          string;

package/Types/SkinFile.d.ts

@@ -1,5 +1,12 @@
-namespace FLib {
+declare namespace FLib {
     namespace SkinFile {
+        interface SkinFile {
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+        }
+
         type Options = {
             /** @defaultValue .file-skin */
             selector:             string;

package/Types/SkinRadio.d.ts

@@ -1,5 +1,14 @@
-namespace FLib {
+declare namespace FLib {
     namespace SkinRadio {
+        interface SkinRadio {
+            check():      this;
+            uncheck():    this;
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+        }
+
         type Options = {
             /** @defaultValue <span class="rb-skin"></span> */
             wrap:          string;

package/Types/SkinSelect.d.ts

@@ -1,5 +1,18 @@
-namespace FLib {
+declare declare namespace FLib {
     namespace SkinSelect {
+        interface SkinSelect {
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+            setLoading(): this
+            unsetLoading(): this
+            updateTitle(): this
+            select( optionOrIndex: HTMLElement | number ): this
+            updateOptions( optionsArray?: FLib.SkinSelect.OptionArray[] ): this
+        }
+
+
         type Options = {
             /**
              * If true, skin event the option list

package/Types/Slider.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace Slider {
         type SlideDirection = -1 | 1;
 

package/Types/Tabs.d.ts

@@ -1,25 +1,32 @@
-namespace FLib {
+declare namespace FLib {
     namespace Tabs {
         type AnimationFunction = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
         type Callback          = ( $tab: HTMLElement, $panel: HTMLElement, autoClose?: boolean ) => void;
 
+        interface Tab {
+            isOpened:                    boolean;
+            index:                       number;
+            close( autoClose?: boolean ): this;
+            open( autoOpen?: boolean ):   this;
+            destroy():                   this;
+        }
 
         type Options = {
             /** @defaultValue 'li[aria-selected]' */
             tabSelector:    string;
-            onOpenAtStart?: TabsCallbackType;
-            onOpen?:        TabsCallbackType;
-            onClose?:       TabsCallbackType;
+            onOpenAtStart?: Callback;
+            onOpen?:        Callback;
+            onClose?:       Callback;
             animations: {
-                open:    TabsAnimationFunctionType;
-                close:   TabsAnimationFunctionType;
-                destroy: TabsAnimationFunctionType;
+                open:    AnimationFunction;
+                close:   AnimationFunction;
+                destroy: AnimationFunction;
             }
         }
 
 
         type TabOptions = Options & {
-            onOpenTab: (( tab: Tab ) => void) | null;
+            onOpenTab?: ( tab: Tab ) => void;
             index:     number;
         }
     }

package/Types/Validator.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace Validator {
         type ValidationState = {
             $input:              HTMLElement;
@@ -18,6 +18,33 @@ namespace FLib {
             validate: ValidateFunction;
         }
 
+        interface InputValidator {
+            $input:             HTMLElement;
+            name:               string;
+            isAsynch:           boolean;
+            extraMessages:      string[];
+            extraErrorMessages: string[];
+            data:               any;
+            validate( isLiveValidation: boolean ): Promise<void>;
+            isValid():          boolean;
+            getData():          any;
+        }
+
+        interface Input {
+            $input:             HTMLElement;
+            $label:             HTMLElement | undefined;
+            hasError:           boolean;
+            isLiveValidation:   boolean;
+            $radioGroup:        CustomValidatorRadioInput[] | undefined;
+            $otherRadioOfGroup: CustomValidatorRadioInput[];
+            hasValidator:       boolean;
+            getErrors(): InputValidator[];
+            getErrorMessages( _locale?: { [ key: string ]: string } ): { message: string, label: string, type: string }[];
+            isValid(): Promise<void>;
+            getData(): any[];
+            destroy(): this
+        }
+
 
         type ValidateFunction = ( $input: HTMLElement, value: string | string[], isLiveValidation: boolean, validatorOptions ) => Promise<ValidationState>
 
@@ -50,15 +77,15 @@ namespace FLib {
             liveValidation?: {
                 onValidate?:           ( input: Input, event ) => void;
                 onInvalidate?:         ( input: Input, event ) => void;
-                eventsName: {
+                eventsName?: {
                     /** @defaultValue change */
-                    optin:             string;
+                    optin?:            string;
                     /** @defaultValue change */
-                    select:            string;
+                    select?:           string;
                     /** @defaultValue input */
-                    inputText:         string;
-                }
-                eventsHook
+                    inputText?:        string;
+                };
+                eventsHook?;
             }
         }
 

package/Types/YouTubePlayer.d.ts

@@ -1,4 +1,4 @@
-namespace FLib {
+declare namespace FLib {
     namespace YouTubePlayer {
         type Options = {
             height:               number;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.0",
+  "version": "7.1.4",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],