@creative-web-solution/front-library 7.1.1 → 7.1.2

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 # CHANGELOG
 
 
+## 7.1.2
+
+* Typescript: Fix some type
+
+
 ## 7.1.1
 
 * Validator: Fix error message generation

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/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/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,7 +37,7 @@ 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 {
+export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
     #$select:           FLib.SkinSelect.CustomSelect;
     #loading!:          boolean;
     #options!:          FLib.SkinSelect.Options;

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;

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.1
+@version: 7.1.2
 
 
 ## 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:    FLib.Helpers.UrlParser;
                 state:  any;
                 title:  string;
             }
 
-            type Callback = ( url: UrlParser, state: any ) => void;
+            type Callback = ( url: FLib.Helpers.UrlParser, 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,13 +77,13 @@ 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;
+                    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.1",
+  "version": "7.1.2",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],