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

package/Modules/Validator/ServerCheck.ts

@@ -8,18 +8,26 @@ import { addValidator } from './index';
  * data-servercheck-method="get|post"
  *
  * Return JSON format:
+ *
+ * @example
+ * ```json
  * {
- * 		"isValid": true|false
+ *      "isValid": true|false
  * }
+ * ```
  *
  * Validator parameters:
+ *
+ * @example
+ * ```json
  * {
- * 		"beforeCall": function( $input, value ),
- * 		"afterCall": function( $input, value ),
- * 		"normalize": fuction( response ){ return { "isValid": true|false } },
- * 		"onFail": function( $input, value ),
- * 		"allowLiveValidation": true|false,
+ *      "beforeCall": function( $input, value ),
+ *      "afterCall": function( $input, value ),
+ *      "normalize": fuction( response ){ return { "isValid": true|false } },
+ *      "onFail": function( $input, value ),
+ *      "allowLiveValidation": true|false,
  * }
+ * ```
  */
 addValidator(
     'servercheck',
@@ -27,10 +35,10 @@ addValidator(
     true,
     ( $input, value, isLiveValidation, options = {} ) => {
 
-        return new Promise<ValidatorValidationState>( resolve => {
-            let paramName, url, method, data, myHeaders;
+        return new Promise<FLib.Validator.ValidationState>( resolve => {
+            let url, method;
 
-            let { beforeCall, afterCall, normalize, onFail } = options;
+            const { beforeCall, afterCall, normalize, onFail } = options;
 
             if ( !( "AbortController" in window ) ) {
                 throw 'This plugin uses fecth and AbortController. You may need to add a polyfill for this browser.';
@@ -47,19 +55,19 @@ addValidator(
                  } );
             }
 
-            paramName = $input.getAttribute( 'name' );
+            const paramName = $input.getAttribute( 'name' );
             url = $input.getAttribute( 'data-servercheck' );
             method = $input.getAttribute( 'data-servercheck-method' ) || 'GET';
             method = method.toUpperCase();
 
-            data = `${ paramName }=${ value }`;
+            const data = `${ paramName }=${ value }`;
 
             if ( method === 'GET' ) {
                 url = [ url, url.indexOf('?') > -1 ? '&' : '?', data ].join( '' );
             }
 
             // Helper to create state
-            function state( isValid ): ValidatorValidationState {
+            function state( isValid ): FLib.Validator.ValidationState {
                 return {
                     $input,
                     value,
@@ -73,7 +81,7 @@ addValidator(
                 beforeCall( $input, value );
             }
 
-            myHeaders = new Headers();
+            const myHeaders = new Headers();
             myHeaders.append( 'X-Requested-With', 'XMLHttpRequest' );
 
             fetch(
@@ -89,9 +97,9 @@ addValidator(
                     return response;
                 }
                 else {
-                    let error = new Error( response.statusText );
-                    /** @ts-expect-error */
+                    const error: Error & { response? } = new Error( response.statusText );
                     error.response = response;
+
                     throw error;
                 }
             } )

package/Modules/Validator/Tools/GetQueryFromForm.ts

@@ -5,12 +5,7 @@ import { getValue } from '../../../Helpers/GetValue';
  * Create a query with the fields of a form.
  * Use a fallback for browser that doesn't support new URLSearchParams( formData ).toString()
  *
- * @function getQueryFromForm
- *
- * @param $form
- * @param [selector='select,input,textarea'] Only used for browser with no native new URLSearchParams( formData ).toString()
- *
- * @returns {String}
+ * @param selector - Only used for browser with no native new URLSearchParams( formData ).toString()
  */
 export default function getQueryFromForm( $form: HTMLFormElement, selector = 'select,input,textarea' ): string {
     let query;

package/Modules/Validator/Tools/IsDate.ts

@@ -1,12 +1,11 @@
 /**
  * Test if the value is a date
  *
- * @param value
- * @param [format="d/m/y"] d for day, m for month and y for year. Only in lowercase. January = 1
+ * @param format - d for day, m for month and y for year. Only in lowercase. January = 1
  *
  * @see extra/modules/validator.md for details
  */
-export default function isDate( value: string, format: string = 'd/m/y' ): boolean {
+export default function isDate( value: string, format = 'd/m/y' ): boolean {
     const RE_SEPARATOR = ( /[^dmy]/ ).exec( format );
 
     if ( !RE_SEPARATOR ) {

package/Modules/Validator/Tools/IsEmail.ts

@@ -1,13 +1,10 @@
 // Regular expression from Symfony
-const RE_EMAIL = /^[a-zA-Z0-9.!#$%&\'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
-const RE_EMAIL_LOOSE = /^.+\@\S+\.\S+$/;
+const RE_EMAIL = /^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
+const RE_EMAIL_LOOSE = /^.+@\S+\.\S+$/;
 
 /**
  * Test if the value is an email
  *
- * @param value
- * @param [loose]
- *
  * @see extra/modules/validator.md for details
  */
 export default function isEmail( value: string, loose?: boolean ): boolean {

package/Modules/Validator/Tools/IsEmpty.ts

@@ -3,8 +3,6 @@ const emptyRe = /(^$)|(^[\s]*$)/i;
 /**
  * Test if there is a value
  *
- * @param value
- *
  * @see extra/modules/validator.md for details
  */
 export default function isEmpty( value: string | string[] ): boolean {

package/Modules/Validator/Tools/IsNumber.ts

@@ -3,8 +3,6 @@ const numRe = /^-?[0-9]*(\.[0-9]+)?$/;
 /**
  * Test if the value is a number
  *
- * @param value
- *
  * @see extra/modules/validator.md for details
  */
 export default function isNumber( value: string ): boolean {

package/Modules/Validator/Tools/IsUrl.ts

@@ -1,10 +1,8 @@
-const urlRe = /^(https?:\/\/)?[\da-z\.\-]+\.[a-z\.]{2,6}[#&+_\?\/\w \.\-=]*$/i;
+const urlRe = /^(https?:\/\/)?[\da-z.-]+\.[a-z.]{2,6}[#&+_?/\w .\-=]*$/i;
 
 /**
  * Test if the value is an url
  *
- * @param value
- *
  * @see extra/modules/validator.md for details
  */
 export default function isUrl( value: string ): boolean {

package/Modules/Validator/Tools/Label.ts

@@ -1,15 +1,10 @@
 /**
- * Get the label of an input
- *
- * @param $input
- * @param [$wrapper=document.body]
+ * Return the label, if there is only one, the list of labels if many or null if none
  *
  * @see extra/modules/validator.md for details
- *
- * @return Return the label, if there is only one, the list of labels if many or null if none
 */
 export function getLabelElement( $input: HTMLElement, $wrapper: HTMLElement = document.body ): HTMLElement | NodeList | null {
-    let $labels = $wrapper.querySelectorAll( `label[for="${ $input.id }"]` );
+    const $labels = $wrapper.querySelectorAll( `label[for="${ $input.id }"]` );
 
     if ( !$labels.length ) {
         return null;
@@ -23,17 +18,12 @@ export function getLabelElement( $input: HTMLElement, $wrapper: HTMLElement = do
 
 
 /**
- * Get the text of a label's input
- *
- * @param $input
- * @param [$wrapper=document.body]
+ * Return the label, if there is only one, the list of labels if many or '' if none
  *
  * @see extra/modules/validator.md for details
- *
- * @return Return the label, if there is only one, the list of labels if many or '' if none
 */
 export function getLabel( $input: HTMLElement, $wrapper: HTMLElement = document.body ): string | string[] {
-    let $labels = getLabelElement( $input, $wrapper );
+    const $labels = getLabelElement( $input, $wrapper );
 
     if ( !$labels ) {
         return '';
@@ -42,5 +32,5 @@ export function getLabel( $input: HTMLElement, $wrapper: HTMLElement = document.
         return Array.from( $labels ).map( $label => $label.textContent || '' );
     }
 
-    return $labels.textContent || '';
+    return $labels.textContent || '';
 }

package/Modules/Validator/Tools/RadioButton.ts

@@ -3,10 +3,8 @@ import { extend } from '../../../Helpers/Extend';
 /**
  * Get all radio with the same name
  *
- * @param inputRadioOrInputName
- * @param userOptions
- * @param [userOptions.selector=input[name="{NAME}"]] - css selector of the elements with a {GROUP_NAME} tag that will be replace by groupName var.
- * @param [userOptions.othersOnly=false] - if true, return the list without the element in `inputRadioOrInputName`. If `inputRadioOrInputName` is a string (input name), return all radio
+ * @param selector - css selector of the elements with a `{`GROUP_NAME`}` tag that will be replace by groupName var.
+ * @param othersOnly - if true, return the list without the element in `inputRadioOrInputName`. If `inputRadioOrInputName` is a string (input name), return all radio
  *
  * @see extra/modules/validator.md for details
  *
@@ -54,16 +52,12 @@ export function getRadioList( inputRadioOrInputName: HTMLElement | string, userO
 
 
 /**
- * Get the selected radio button from a list.
- *
- * @param $iputRadioOrRadioList
+ * Return the selected radio button from a group or false
  *
  * @see extra/modules/validator.md for details
- *
- * @return Return the selected radio button from a group or false
  */
 export function isRadioListChecked( $iputRadioOrRadioList: HTMLElement[] | HTMLElement | NodeList ): false | HTMLInputElement {
-    let $list = ( $iputRadioOrRadioList instanceof NodeList || $iputRadioOrRadioList instanceof Array ) ? $iputRadioOrRadioList : getRadioList( $iputRadioOrRadioList );
+    const $list = ( $iputRadioOrRadioList instanceof NodeList || $iputRadioOrRadioList instanceof Array ) ? $iputRadioOrRadioList : getRadioList( $iputRadioOrRadioList );
 
     for ( const $item of Array.from( $list ) ) {
         if ( ($item as HTMLInputElement).checked ) {

package/Modules/Validator/Url.ts

@@ -1,6 +1,7 @@
 import isUrl            from './Tools/IsUrl';
 import { addValidator } from './index';
 
+
 /**
  * URL validation
  */

package/Modules/Validator/index.ts

@@ -33,6 +33,7 @@ const defaultOptions = {
  * @see extra/modules/validator.md for details
  *
  * @example
+ * ```ts
  * let validator = new Validator( $form, options )
  *
  * on( $form, {
@@ -56,21 +57,22 @@ const defaultOptions = {
  *                 );
  *     }
  * });
+ * ```
  */
 export default class Validator {
-    #options:            ValidatorOptionsType & { hasLiveValidation: boolean };
+    #options:            FLib.Validator.Options & { hasLiveValidation: boolean };
     #inputsList:         Input[];
-    #radioDuplicateHash: { [ key: string ]: boolean };
+    #radioDuplicateHash: Record<string, boolean>;
     #state:              string;
     #$form:              HTMLElement;
-    #validationPromise!: Promise<ValidatorValidationReturnType> | null;
+    #validationPromise:  Promise<FLib.Validator.ValidationReturnType> | undefined | null;
 
 
     #STATE_IDLE       = 'idle';
     #STATE_VALIDATING = 'validating';
 
 
-    constructor( $form: HTMLElement, userOptions: ValidatorOptionsType = {} ) {
+    constructor( $form: HTMLElement, userOptions: Partial<FLib.Validator.Options> = {} ) {
         this.#$form   = $form;
         this.#options = extend( defaultOptions, userOptions );
         this.#options.hasLiveValidation = !!this.#options.liveValidation?.onValidate || !!this.#options.liveValidation?.onInvalidate;
@@ -81,13 +83,14 @@ export default class Validator {
 
         $form.setAttribute( 'novalidate', 'novalidate' );
 
-        this.refresh();
+        this.#refresh();
     }
 
+
     /*
      * Filter radio button to validate only one button
      */
-    private filterRadioButton( $input: HTMLInputElement ): boolean {
+    #filterRadioButton = ( $input: HTMLInputElement ): boolean => {
         if ( $input.type !== 'radio' ) {
             return true;
         }
@@ -105,7 +108,7 @@ export default class Validator {
     /*
      * Call the function cleanup of all inputs and empty the list
      */
-    private cleanup() {
+    #cleanup = (): void => {
         this.#inputsList.forEach( input => input.destroy() );
         this.#inputsList.length = 0;
         this.#radioDuplicateHash = {};
@@ -115,9 +118,9 @@ export default class Validator {
     /*
      * Create and add one input to the list
      */
-    private addInput( $input: Element ) {
+    #addInput = ( $input: HTMLElement ): void => {
         // Check if this input type
-        if ( !$input.matches( this.#options.filter! ) && this.filterRadioButton( $input as HTMLInputElement ) ) {
+        if ( !$input.matches( this.#options.filter ) && this.#filterRadioButton( $input as HTMLInputElement ) ) {
             this.#inputsList.push( new Input( $input, this.#options ) );
         }
     }
@@ -126,20 +129,20 @@ export default class Validator {
     /*
      * Empty and clean the input list and recreate it
      */
-    private refresh() {
-        this.cleanup();
+    #refresh = (): void => {
+        this.#cleanup();
 
-        const $fieldToAdd = this.#$form.querySelectorAll( this.#options.fields! );
+        const $fieldToAdd = this.#$form.querySelectorAll( this.#options.fields ) as NodeListOf<HTMLElement>;
 
-        $fieldToAdd.forEach( this.addInput.bind( this ) );
+        $fieldToAdd.forEach( this.#addInput.bind( this ) );
     }
 
 
     /*
      * Validate all fields and return a promise
      */
-    private _validate(): Promise<void[]> {
-        let inputsValid: Promise<void>[] = [];
+    #_validate = (): Promise<void[]> => {
+        const inputsValid: Promise<void>[] = [];
 
         this.#inputsList.forEach( input => {
             inputsValid.push( input.isValid() );
@@ -149,7 +152,7 @@ export default class Validator {
     }
 
 
-    private filterInputError( input: Input ): boolean {
+    #filterInputError = ( input: Input ): boolean => {
         return input.hasError;
     }
 
@@ -157,25 +160,25 @@ export default class Validator {
     /*
      * Call validation and call callback if needed
      */
-    private process(): Promise<ValidatorValidationReturnType> {
+    #process = (): Promise<FLib.Validator.ValidationReturnType> => {
         if ( this.#validationPromise ) {
             return this.#validationPromise;
         }
-        this.#validationPromise = new Promise<ValidatorValidationReturnType>( ( resolve, reject ) => {
+        this.#validationPromise = new Promise<FLib.Validator.ValidationReturnType>( ( resolve, reject ) => {
             this.#state = this.#STATE_VALIDATING;
 
-            const retObject: ValidatorValidationReturnType = {
+            const retObject: FLib.Validator.ValidationReturnType = {
                 "inputs": this.#inputsList,
                 "errors": [],
                 "$form":  this.#$form
             };
 
-            this._validate()
+            this.#_validate()
                 .then( () => {
                     this.#validationPromise = null;
                     this.#state             = this.#STATE_IDLE;
 
-                    const errors = this.#inputsList.filter( this.filterInputError );
+                    const errors = this.#inputsList.filter( this.#filterInputError );
 
 
                     if ( errors && errors.length ) {
@@ -212,27 +215,27 @@ export default class Validator {
     /**
      * Start the validation of all the form
      */
-    validate(): Promise<ValidatorValidationReturnType> {
+    validate(): Promise<FLib.Validator.ValidationReturnType> {
         if ( this.#state !== this.#STATE_IDLE ) {
-            return this.#validationPromise as Promise<ValidatorValidationReturnType>;
+            return this.#validationPromise as Promise<FLib.Validator.ValidationReturnType>;
         }
 
-        return this.process();
+        return this.#process();
     }
 
 
     /**
      * Bind or rebind all inputs
      */
-    update() {
-        this.refresh();
+    update(): this {
+        this.#refresh();
+
+        return this
     }
 
 
     /**
      * Return the validator object of an input
-     *
-     * @param $field
      */
     getFieldValidator( $field: HTMLElement ): Input | void {
 
@@ -241,17 +244,14 @@ export default class Validator {
                 return input;
             }
         }
-
     }
 
 
     /**
      * Validate one field
-     *
-     * @param $field
      */
-    validateField( $field: HTMLElement ): Promise<ValidatorFieldValidationReturnType | void> {
-        return new Promise<ValidatorFieldValidationReturnType | void>( ( resolve, reject ) => {
+    validateField( $field: HTMLElement ): Promise<FLib.Validator.FieldValidationReturnType | void> {
+        return new Promise<FLib.Validator.FieldValidationReturnType | void>( ( resolve, reject ) => {
             const input = this.getFieldValidator( $field );
 
             if ( !input ) {
@@ -260,7 +260,7 @@ export default class Validator {
 
             this.#state = this.#STATE_VALIDATING;
 
-            const retObject: ValidatorFieldValidationReturnType = {
+            const retObject: FLib.Validator.FieldValidationReturnType = {
                 "input": input,
                 "error": null,
                 "$form": this.#$form
@@ -293,7 +293,7 @@ export default class Validator {
      * @param onlyValidated - If true, remove all fields without validator
      */
     getAllFields( onlyValidated: boolean ): HTMLElement[] {
-        let $fields: HTMLElement[] = [];
+        const $fields: HTMLElement[] = [];
 
         this.#inputsList.forEach( input => {
             if ( !onlyValidated || input.hasValidator ) {
@@ -325,7 +325,7 @@ export default class Validator {
      * Get all inputs (input objects, not DOM elements) with at least one validator
      */
     getCheckedInputs(): Input[] {
-        let inputs: Input[] = [];
+        const inputs: Input[] = [];
 
         this.#inputsList.forEach( input => {
             if ( input.hasValidator ) {

package/Modules/YouTubePlayer.ts

@@ -4,7 +4,7 @@ import { extend } from '../Helpers/Extend';
 let ytAPILoadingPromise;
 
 
-const defaultOptions = {
+const defaultOptions: Partial<FLib.YouTubePlayer.Options> = {
     "apiUrl": "//www.youtube.com/iframe_api",
     "playerVars": {
         "autoplay": 0,
@@ -22,13 +22,14 @@ const defaultOptions = {
  * @see extra/modules/youtube.md
  *
  * @example
+ * ```ts
  * let YouTubePlayer = new YouTubePlayer( {
  *         "height": 1920,
  *         "width": 1080,
  *         "videoId": "youtube-video-id-here",
  *         "$wrapper": $wrapper,
  *         "apiUrl": "//www.youtube.com/iframe_api",
- *         "onPlayerStateChange": ( newState ) => {
+ *         "onPlayerStateChange": ( newState ) =&gt; {
  *             if ( newState.data === YT.PlayerState.ENDED ) {
  *                  // Code here for video ended
  *             }
@@ -44,14 +45,15 @@ const defaultOptions = {
  *     }
  * );
  *
- * YouTubePlayer.load().then( ytPlayerInstance => {} );
+ * YouTubePlayer.load().then( ytPlayerInstance =&gt; {} );
+ * ```
 */
 export default class YouTubePlayer {
 
-    #options: YouTubePlayerOptionsType;
+    #options: FLib.YouTubePlayer.Options;
 
 
-    constructor( userOptions: YouTubePlayerOptionsType ) {
+    constructor( userOptions: Partial<FLib.YouTubePlayer.Options> ) {
         this.#options = extend( defaultOptions, userOptions );
 
         if ( !this.#options.$wrapper ) {
@@ -60,8 +62,8 @@ export default class YouTubePlayer {
     }
 
 
-    private loadYouTubeAPI() {
-        let tag, firstScriptTag, _resolve;
+    #loadYouTubeAPI = (): Promise<void> => {
+        let _resolve;
 
         if ( ytAPILoadingPromise ) {
             return ytAPILoadingPromise;
@@ -75,23 +77,23 @@ export default class YouTubePlayer {
             _resolve = resolve;
         } );
 
-        (window as YouTubePlayerWindowType).onYouTubeIframeAPIReady = function() {
+        (window as FLib.YouTubePlayer.PlayerWindow).onYouTubeIframeAPIReady = function() {
             _resolve();
 
-            (window as YouTubePlayerWindowType).onYouTubeIframeAPIReady = null;
+            (window as FLib.YouTubePlayer.PlayerWindow).onYouTubeIframeAPIReady = null;
         }
 
-        tag            = document.createElement( 'script' );
-        tag.src        = this.#options.apiUrl;
-        firstScriptTag = document.getElementsByTagName( 'script' )[ 0 ];
+        const tag            = document.createElement( 'script' );
+        tag.src              = this.#options.apiUrl;
+        const firstScriptTag = document.getElementsByTagName( 'script' )[ 0 ] as HTMLScriptElement;
 
-        firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
+        firstScriptTag.parentNode?.insertBefore( tag, firstScriptTag );
 
         return ytAPILoadingPromise;
     }
 
 
-    private initPlayer( $wrapper: YouTubePlayerWrapper ) {
+    #initPlayer = ( $wrapper: FLib.YouTubePlayer.PlayerWrapper ): Promise<YT.Player> => {
         let _resolve;
 
         const promise = new Promise( function( resolve ) {
@@ -126,8 +128,8 @@ export default class YouTubePlayer {
      * @returns
      */
     load(): Promise<YT.Player> {
-        return this.loadYouTubeAPI().then( () => {
-            return this.initPlayer( this.#options.$wrapper as YouTubePlayerWrapper );
+        return this.#loadYouTubeAPI().then( () => {
+            return this.#initPlayer( this.#options.$wrapper as FLib.YouTubePlayer.PlayerWrapper );
         } );
     }
 }

package/README.md

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

package/Types/Accordion.d.ts

@@ -0,0 +1,36 @@
+namespace FLib {
+    namespace Accordion {
+
+        type AnimationFunction = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
+        type Callback          = ( $tab: HTMLElement, $panel: HTMLElement ) => void;
+        type CloseCallback     = ( $tab: HTMLElement, $panel: HTMLElement, autoclose: boolean ) => void;
+
+        interface AnimationOptions {
+            open:          AnimationFunction;
+            close:         AnimationFunction;
+            destroy:       AnimationFunction;
+        }
+
+        interface Options {
+            /** @defaultValue 'button[aria-expanded]' */
+            tabSelector:       string;
+            /** @defaultValue false */
+            allowMultipleTab:  boolean;
+            /** @defaultValue false */
+            atLeastOneOpen:    boolean;
+            onOpenAtStart:     Callback;
+            onOpen:            Callback;
+            onClose:           CloseCallback;
+            animations:        AnimationOptions;
+        }
+
+        interface OptionsInit extends Partial<Options> {
+            animations?:        Partial<AnimationOptions>;
+        }
+
+        interface TabOptions extends Options {
+            onOpenTab: (( tab: Tab ) => void) | null;
+            index:     number;
+        }
+    }
+}