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

package/Types/Slider.d.ts

@@ -0,0 +1,106 @@
+declare namespace FLib {
+    namespace Slider {
+        type SlideDirection = -1 | 1;
+
+        type SlideProperties = {
+            $slide:     HTMLElement;
+            id:         string;
+            delay:      number;
+            index:      number;
+            position:   number;
+            isFirst:    boolean;
+            isLast:     boolean;
+            isVisible:  boolean;
+            isActive:   boolean;
+            page:       number;
+            pageIndex:  number;
+        }
+
+
+        type SlideOptions = {
+            nbSlideVisibleBefore: number;
+            nbSlideVisibleAfter:  number;
+            slidePerPage:         number;
+            moveByPage:           boolean;
+            nbSlides:             number;
+            nbPages:              number;
+            speed:                number;
+            $slide:               HTMLElement;
+            index:                number;
+            /** Internal function using GSAP to set CSS styles. Can be override to use another library */
+            _setStyle?:             ( $elem, styles ) => void;
+            /** Internal function using GSAP to tween element. Can be override to use another library */
+            _tweenTo?:              ( $elem, styles ) => void;
+            /** Internal function using GSAP to initialize and tween element. Can be override to use another library */
+            _tweenFromTo?:          ( $elem, init, styles  ) => void;
+            /** Internal function using GSAP to remove tweens from element. Can be override to use another library */
+            _killTweens?:           ( $elem ) => void;
+        }
+
+        type CallbackParam = {
+            currentSlide: SlideProperties;
+            targetSlide: SlideProperties;
+            direction?: SlideDirection;
+            $button?: HTMLElement
+        }
+        type Callback     = ( data: CallbackParam ) => void;
+        type InitCallback = ({ currentSlide: SlidePropertiesType }) => void;
+
+        type Options = {
+            /** @defaultValue 0 */
+            startSlide:             number;
+            /** @defaultValue 0 */
+            nbSlideVisibleBefore:   number;
+            /** @defaultValue 0 */
+            nbSlideVisibleAfter:    number;
+            /** @defaultValue 1 */
+            slidePerPage:           number;
+            /** @defaultValue true */
+            moveByPage:             boolean;
+            /** In second
+             * @defaultValue 0.5
+            */
+            speed:                  number;
+            /** @defaultValue true */
+            smoothHeight:           boolean;
+            /** @defaultValue .list */
+            listSelector:           string;
+            /** @defaultValue .item */
+            itemsSelector:          string;
+            /** @defaultValue active-slide */
+            activeClass:            string;
+            /** @defaultValue true*/
+            loop:                   boolean;
+            /** Called one time at the begining of the animation */
+            onBefore?:              Callback;
+            /** Called for every slide that will come in the 1st position during the animation */
+            onBeforeEach?:          Callback;
+            /** Called one time at the end of the animation */
+            onAfter?:               Callback;
+            /** Called for every slide that is came in the 1st position during the animation */
+            onAfterEach?:           Callback;
+            /** Called one time at the initialisation of the slider */
+            onStart?:               InitCallback;
+            /** Internal function using GSAP to set CSS styles. Can be override to use another library */
+            _setStyle:              ( $elem, styles ) => void;
+            /** Internal function using GSAP to tween element. Can be override to use another library */
+            _tweenTo:               ( $elem, styles ) => void;
+            /** Internal function using GSAP to initialize and tween element. Can be override to use another library */
+            _tweenFromTo:           ( $elem, init, styles  ) => void;
+            /** Internal function using GSAP to remove tweens from element. Can be override to use another library */
+            _killTweens:            ( $elem ) => void;
+        }
+
+        type ControlsOptions = {
+            $btPrev?:                 HTMLElement;
+            $btNext?:                 HTMLElement;
+            $pagination?:             HTMLElement;
+            paginationItemsSelector?: string;
+            /** In second */
+            autoslide?:               number | boolean;
+            swipe?:                   boolean;
+            enableKeyboard?:          boolean;
+            gestureOptions?:          FLib.Events.Gesture.Options;
+        }
+    }
+}

package/Types/Tabs.d.ts

@@ -0,0 +1,33 @@
+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?: Callback;
+            onOpen?:        Callback;
+            onClose?:       Callback;
+            animations: {
+                open:    AnimationFunction;
+                close:   AnimationFunction;
+                destroy: AnimationFunction;
+            }
+        }
+
+
+        type TabOptions = Options & {
+            onOpenTab?: ( tab: Tab ) => void;
+            index:     number;
+        }
+    }
+}

package/Types/Validator.d.ts

@@ -0,0 +1,99 @@
+declare namespace FLib {
+    namespace Validator {
+        type ValidationState = {
+            $input:              HTMLElement;
+            value:               string | string[];
+            isValid:             boolean;
+            label:               string;
+            data?:               any;
+            isLiveValidation:    boolean;
+            extraErrorMessages?: string[];
+            extraMessages?:      string[];
+        }
+
+        type Validator = {
+            name:     string;
+            selector: string;
+            isAsynch: boolean;
+            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>
+
+
+        type ValidationReturnType = {
+            "inputs": Input[];
+            "errors": Input[];
+            "$form":  HTMLElement;
+        }
+
+        type FieldValidationReturnType = {
+            "input":  Input;
+            "error":  Input | null;
+            "$form":  HTMLElement;
+        }
+
+
+        type Options = {
+            /** @defaultValue input,textarea,select */
+            fields:                    string;
+            /** @defaultValue input[type="button"], input[type="submit"], input[type="reset"], input */
+            filter:                    string;
+            /** @defaultValue data-error-label */
+            customErrorLabelPrefix:    string;
+            /** @defaultValue `{}` */
+            errorMessages:             { [ key: string ]: string };
+            validatorsOptions?:        { [ key: string ]: any };
+            onValidate?:               ( data: ValidationReturnType ) => void;
+            onInvalidate?:             ( data: ValidationReturnType ) => void;
+            liveValidation?: {
+                onValidate?:           ( input: Input, event ) => void;
+                onInvalidate?:         ( input: Input, event ) => void;
+                eventsName?: {
+                    /** @defaultValue change */
+                    optin?:            string;
+                    /** @defaultValue change */
+                    select?:           string;
+                    /** @defaultValue input */
+                    inputText?:        string;
+                }
+                eventsHook
+            }
+        }
+
+
+        type CustomValidatorRadioInput = HTMLInputElement & {
+            __$radioMaster:       CustomValidatorRadioInput;
+            __$radioGroup:        CustomValidatorRadioInput[];
+            __$otherRadioOfGroup: CustomValidatorRadioInput[];
+        }
+    }
+}

package/Types/YouTubePlayer.d.ts

@@ -0,0 +1,27 @@
+declare namespace FLib {
+    namespace YouTubePlayer {
+        type Options = {
+            height:               number;
+            width:                number;
+            videoId:              string;
+            $wrapper:             HTMLElement;
+            /**
+             * @defaultValue //www.youtube.com/iframe_api
+             */
+            apiUrl:              string;
+            onPlayerStateChange?: ( e: YT.PlayerEvent ) => void;
+            /**
+             * @defaultValue `{ "autoplay": 0, "controls": 2, "autohide": 1, "modestbranding": 1, "showinfo": 0 }`
+             */
+            playerVars:          YT.PlayerVars;
+        }
+
+        type PlayerWindow = Window & typeof globalThis & {
+            onYouTubeIframeAPIReady: (() => void) | null;
+        }
+
+        type PlayerWrapper = HTMLElement & {
+            YTPlayer: YT.Player;
+        }
+    }
+}

package/Types/index.d.ts

@@ -1,21 +1,22 @@
-/// <reference path="AccordionTypes.d.ts" />
-/// <reference path="AutocompleteTypes.d.ts" />
-/// <reference path="DOMTypes.d.ts" />
-/// <reference path="DragSliderTypes.d.ts" />
-/// <reference path="EventsHelpersTypes.d.ts" />
-/// <reference path="GLImageTransition.d.ts" />
-/// <reference path="Global.d.ts" />
-/// <reference path="GlobalStateTypes.d.ts" />
-/// <reference path="HelpersTypes.d.ts" />
-/// <reference path="MediaPreloaderTypes.d.ts" />
-/// <reference path="Notifications.d.ts" />
-/// <reference path="PopinTypes.d.ts" />
-/// <reference path="ScrollSnapTypes.d.ts" />
-/// <reference path="SkinCheckboxTypes.d.ts" />
-/// <reference path="SkinFileTypes.d.ts" />
-/// <reference path="SkinRadioTypes.d.ts" />
-/// <reference path="SkinSelectTypes.d.ts" />
-/// <reference path="SliderTypes.d.ts" />
-/// <reference path="TabsTypes.d.ts" />
-/// <reference path="ValidatorTypes.d.ts" />
-/// <reference path="YouTubePlayerTypes.d.ts" />
+declare namespace FLib {}
+
+import './Accordion';
+import './Autocomplete';
+import './DOM';
+import './DragSlider';
+import './EventsHelpers';
+import './GLImageTransition';
+import './Global';
+import './GlobalState';
+import './Helpers';
+import './Notifications';
+import './Popin';
+import './ScrollSnap';
+import './SkinCheckbox';
+import './SkinFile';
+import './SkinRadio';
+import './SkinSelect';
+import './Slider';
+import './Tabs';
+import './Validator';
+import './YouTubePlayer';