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

package/Types/EventsHelpersTypes.d.ts

@@ -1,370 +0,0 @@
-/**
- * ------------------------------------------------------
- * Device orientation Types
- *
- */
-
- type DeviceOrientationType = 'landscape-primary' | 'portrait-primary' | 'landscape-secondary' | 'portrait-secondary' | '';
-
- type DeviceOrientationOptionsType = {
-     onOrientationChange: ( ( type: DeviceOrientationType ) => void );
- }
-
-
- /**
-  * ------------------------------------------------------
-  * Events manager Types
-  *
-  */
-
- interface DataRegistryType {
-     $element: Element;
-     eventName: string;
-     options:   OnOptionsType;
-     delegate?:  ( e ) => void;
- }
-
- type EventOptionsType = {
-     capure?:  boolean;
-     once?:    boolean;
-     passive?: boolean;
- }
-
- type OnOptionsType = {
-     /** Name of events separate by a space */
-     eventsName:         string;
-     /** Css selector used for event delegation */
-     selector?:          string;
-     callback:           ( e, $target? ) => void;
-     /** Active or not event capture. */
-     capture?:           boolean;
-     /** Native addEventListener options. Priority to options.capture if it's present. */
-     eventOptions?:      EventOptionsType;
-     /** @internal */
-     _internalCallback?: ( e, $target? ) => void;
- }
-
- type OffOptionsType = {
-     /** Name of events separate by space */
-     eventsName: string;
-     callback?:  ( e, $target? ) => void;
- }
-
- type FireOptionsType = {
-     /** Name of events separate by space */
-     eventsName:  string;
-     /** Object to send with the event */
-     detail?:     any;
-     /** Only used for DOM */
-     bubbles?:    true;
-     /** Only used for DOM */
-     cancelable?: true;
- }
-
-
- /**
-  * ------------------------------------------------------
-  * Gesture Types
-  *
-  */
-
-
- type GestureDirectionType = 'up' | 'down' | 'left' | 'right' | 'up-right' | 'down-right' | 'up-left' | 'down-left' | 'none';
-
-
- type GestureModeType = 'touch' | 'mouse' | 'pointer' | 'click';
-
- type GestureManagerType = {
-     off();
- }
-
- type GestureVelocityType = {
-     velocity:        number;
-     averageVelocity: number;
-     angle:           number;
-     direction:       GestureDirection;
- }
-
- type GestureCoordsType = {
-     pageX:   number;
-     pageY:   number;
-     clientX: number;
-     clientY: number;
-     mode:    GestureMode
- }
-
- type VelocityType = {
-     velocity:         number;
-     velocityDistance: number;
-     deltaTime:        number;
- }
-
- type PreventAndStopPropagationType = boolean | (( e, $target: HTMLElement ) => boolean );
- type GestureCallbackType           = ( e: Event, $target: HTMLElement, coords: GestureCoordsType, type: string ) => void;
- type GestureSwipeCallbackType      = ( e: Event, $target: HTMLElement, type: string ) => void;
-
-
- interface GestureOptionsType {
-     /** Used for event delegation */
-     selector?:             string;
-     /** In px, minimal distance to do to trigger events.
-      * @default 20
-      */
-     threshold?:            number;
-     /**
-      * Use all touch, pointer or mouse events, or only click event */
-     useTouch?:             boolean;
-     /**
-      * Cap valocity
-      * @default -1
-      */
-     velocityMax?:          number;
-     /**
-      * In deg, sensitivity of angle detection
-      * @default 2
-      */
-     angleThreshold?:       number;
-     /** @default false */
-     preventClick?:         PreventAndStopPropagationType;
-     /** @default false */
-     stopPropagationClick?: PreventAndStopPropagationType;
-     /** @default false */
-     preventStart?:         PreventAndStopPropagationType;
-     /** @default false */
-     stopPropagationStart?: PreventAndStopPropagationType;
-     /** @default false */
-     preventMove?:          PreventAndStopPropagationType;
-     /** @default false */
-     stopPropagationMove?:  PreventAndStopPropagationType;
-     /** @default false */
-     preventEnd?:           PreventAndStopPropagationType;
-     /** @default false */
-     stopPropagationEnd?:   PreventAndStopPropagationType;
-     /** touchstart, pointerdown, mousedown */
-     start?:                GestureCallbackType;
-     /** touchmove, pointermove, mousemove */
-     move?:                 GestureCallbackType;
-     /** touchend, pointerup, mouseup */
-     end?:                  GestureCallbackType;
-     /** click */
-     click?:                GestureCallbackType;
-     /** touchend on touch device, click on other */
-     tap?:                  (( e: Event, $target: HTMLElement, coords: GestureCoordsType, type: string ) => void);
-     swipeLeft?:            GestureSwipeCallbackType;
-     swipeRight?:           GestureSwipeCallbackType;
-     swipeUp?:              GestureSwipeCallbackType;
-     swipeDown?:            GestureSwipeCallbackType;
-     swipe?:                (( e: Event, $target: HTMLElement, velocity: GestureVelocityType, type: string ) => void);
-     moveLeft?:             GestureSwipeCallbackType;
-     moveRight?:            GestureSwipeCallbackType;
-     moveUp?:               GestureSwipeCallbackType;
-     moveDown?:             GestureSwipeCallbackType;
- }
-
- type GestureElementsType = Node | NodeList | Node[] | HTMLElement | HTMLElement[];
-
-
- /**
-  * ------------------------------------------------------
-  * History controller Types
-  *
-  */
-
- type HistoryStateObjectType = {
-     url:    UrlParser;
-     state:  any;
-     title:  string;
- }
-
- type HistoryCallbackType = ( url: UrlParser, state: any ) => void;
-
-
- /**
-  * ------------------------------------------------------
-  * Images load Types
-  *
-  */
-
- interface ImagePromiseType extends Promise<any> {
-     off();
- }
-
- interface ImagesPromiseType extends Promise<any> {
-     off();
- }
-
- type ImageLoadEventType = 'load' | 'error' | 'complete';
-
-
- /**
-  * ------------------------------------------------------
-  * Intersect Observer Types
-  *
-  */
-
- type IntersectObserverOptionsType = {
-     /** Callback function */
-     onIntersecting: ( $target: Node, entry: IntersectionObserverEntry ) => void;
-     /** Execute the callback only once per $elements the first time it intersect the viewport. Default: false */
-     onlyOnce?:       boolean;
-     /** Native options to create to IntersectionObserver API */
-     ioOptions?:      IntersectionObserverInit
- }
-
-
- /**
-  * ------------------------------------------------------
-  * Keyboard handler Types
-  *
-  */
-
- type KeyboardHandlerCallback = ( event: KeyboardEvent, $context: HTMLElement ) => void;
-
- type KeyboardHandlerOptions = {
-     /** Used for event delegation */
-     selector?:       string;
-     /** Prevent default on all key pressed, except TAB */
-     preventDefault?: boolean;
-     onEnter?:        KeyboardHandlerCallback;
-     onSpace?:        KeyboardHandlerCallback;
-     /** Called when pressing ENTER or SPACE */
-     onSelect?:       KeyboardHandlerCallback;
-     onEscape?:       KeyboardHandlerCallback;
-     onTab?:          KeyboardHandlerCallback;
-     onTabReverse?:   KeyboardHandlerCallback;
-     /** Called when pressing RIGHT ARROW KEYS */
-     onRight?:        KeyboardHandlerCallback;
-     /** Called when pressing LEFT ARROW KEYS */
-     onLeft?:         KeyboardHandlerCallback;
-     /** Called when pressing UP ARROW KEYS */
-     onUp?:           KeyboardHandlerCallback;
-     /** Called when pressing DOWN ARROW KEYS */
-     onDown?:         KeyboardHandlerCallback;
-     onPageUp?:       KeyboardHandlerCallback;
-     onPageDown?:     KeyboardHandlerCallback;
-     /** Called when pressing LEFT or DOWN arrow keys */
-     onPrevious?:     KeyboardHandlerCallback;
-     /** Called when pressing RIGHT or UP arrow keys */
-     onNext?:         KeyboardHandlerCallback;
-     /** Called on every key */
-     onKey?:          KeyboardHandlerCallback;
- }
-
-
- /**
-  * ------------------------------------------------------
-  * Mediaqueries event Types
-  *
-  */
-
- type Breakpoint = {
-     name:  string,
-
-     /** Object buid with the window.matchMedia() function */
-     query: MediaQueryList,
-
-     /** mediaquery lower bound */
-     min?:  number,
-
-     /** mediaquery upper bound */
-     max?:  number,
-
-     /** Return true if the breakpoint is in the list: breakpoint.in(['bp1', 'bp2']) */
-     in:    ( breakpointNameList: string[] ) => boolean,
-
-     /** Return true if the name passed to the function is the name of the breakpoint: breakpoint.is */
-     is:    ( breakpointName: string ) => boolean,
-
-     /** @internal */
-     handler: ( e: MediaQueryListEvent ) => void
- }
-
- type MediaQueriesEventsCallbackType = "enter" | "leave" | "both";
-
- type MediaQueriesEventsCallback = ( breakpoint: Breakpoint, isMatching?: boolean ) => void;
-
- type MediaQueriesEventsListOptions = {
-     name:   string,
-     query?: MediaQueryList,
-     min?:   number,
-     max?:   number
- }
-
- type MediaQueriesEventsOptions = {
-     /** Default: px */
-     unit?: string;
- }
-
- type MediaQueriesEventsInternalCallbackType = {
-     callback: MediaQueriesEventsCallback,
-     type:     MediaQueriesEventsCallbackType
- }
-
-
- /**
-  * ------------------------------------------------------
-  * PubSub Types
-  *
-  */
-
- type PubSubCallbackType = ( data?: any ) => void;
-
-
- /**
-  * ------------------------------------------------------
-  * Touch hover Types
-  *
-  */
-
- type TouchHoverOptions = {
-     cssClass: string,
-     selector: string,
-     $wrapper: Element
- }
-
-
- /**
-  * ------------------------------------------------------
-  * Window events Types
-  *
-  */
-
-
- type WindowEventsType  =  'both' | 'force' | 'resize' | 'scroll';
-
- type ScrollInfoType = {
-     top:  number;
-     left: number;
- }
-
- type WindowInfoType = {
-     width:  number;
-     height: number;
- }
-
- type DocumentInfoType = {
-     width:  number;
-     height: number;
- }
-
- type ViewportInfoType = {
-     top:     number;
-     left:    number;
-     bottom:  number;
-     right:   number;
-     width:   number;
-     height:  number;
- }
-
-
- type WindowEventsCallbackParam = {
-     windowInfo:   WindowInfoType,
-     scrollInfo:   ScrollInfoType,
-     documentInfo: DocumentInfoType,
-     viewportInfo: ViewportInfoType
- }
-
-
- type WindowEventsCallbackType = ( info: WindowEventsCallbackParam, type: WindowEventsType, e? ) => void;
-
-

package/Types/GlobalStateTypes.d.ts

@@ -1,5 +0,0 @@
-type GlobalStateOptionsType = {
-    alwaysDispatch?: boolean;
-    dispatchEvents?: boolean;
-};
-type GlobalStateCallbackType = ( value: any, properyName: string, storeName: string ) => void;

package/Types/HelpersTypes.d.ts

@@ -1,23 +0,0 @@
-type ColorRenderType =  'obj' | 'hex' | 'rgba';
-
-type ColorType = {
-    r:  number;
-    g:  number;
-    b:  number;
-    a:  number;
-    hr: string;
-    hg: string;
-    hb: string;
-    ha: string;
-}
-
-
-type CookieOptionsType = {
-    days:    number | null;
-    /** Default value is true if the location protocol is https */
-    secure:  boolean;
-    /** Default: window.location.hostname */
-    domain:  string;
-    /** Default: / */
-    path:    string;
-}

package/Types/MediaPreloaderTypes.d.ts

@@ -1,12 +0,0 @@
-type MediaPreloaderProgressCallbackType = ( percent: number ) => void;
-
-type VideoCanPlayType = {
-    mp4:  boolean;
-    webm: boolean;
-    mp3:  boolean;
-}
-
-type MediaPreloaderOption = {
-    $media:     HTMLVideoElement;
-    onProgress: MediaPreloaderProgressCallbackType;
-}

package/Types/PopinTypes.d.ts

@@ -1,83 +0,0 @@
-type PopinAnimationFunctionType = ( $element: HTMLElement ) => Promise<void>;
-type PopinResponseType          = 'arrayBuffer' | 'blob' | 'json' | 'text' | 'formData';
-
-type PopinTemplatesOptionsType = {
-    /** @default <div class="popin-loader"></div> */
-    popinLoader?:  string;
-    /** @default <div class="popin"><div class="popin-content"></div></div> */
-    popin?:        string;
-    /** @default <div class="bg-popin"></div> */
-    bgLayer?:      string;
-    /** @default <div class="error"><%= message %></div> */
-    errorMessage?: string;
-}
-
-type PopinSelectorsOptionsType = {
-    /** @default .popin */
-    popin?:               string;
-    /** @default .popin-content */
-    popinContent?:        string;
-    /** @default a[data-popin] */
-    links?:               string;
-    /** @default form[data-popin] */
-    forms?:               string;
-    /** @default button[data-close-popin] */
-    btClosePopin?:        string;
-    /** @default data-onload-popin */
-    openOnLoadAttribute?: string;
-}
-
-type PopinAnimationsOptionsType = {
-    /** @default $bg => { $bg.style.display = 'block'; return Promise.resolve(); } */
-    openBg?:        PopinAnimationFunctionType;
-    /** @default $bg => { $bg.style.display = 'none'; return Promise.resolve(); } */
-    closeBg?:       PopinAnimationFunctionType;
-    /** @default $popin => { $popin.style.display = 'block'; $popin.style.opacity = 0; return Promise.resolve(); } */
-    initOpenPopin?: PopinAnimationFunctionType;
-    /** @default $popin => { $popin.style.opacity = 1; return Promise.resolve(); } */
-    openPopin?:     PopinAnimationFunctionType;
-    /** @default $popin => { $popin.style.display = 'none'; return Promise.resolve(); } */
-    closePopin?:    PopinAnimationFunctionType;
-    /** @default $loader => { $loader.style.display = 'block'; return Promise.resolve(); } */
-    openLoader?:    PopinAnimationFunctionType;
-    /** @default $loader => { $loader.style.display = 'none'; return Promise.resolve(); } */
-    closeLoader?:   PopinAnimationFunctionType;
-}
-
-type PopinOptionsType = {
-    /** @default false */
-    modal?:             boolean;
-    /** @default 20 */
-    marginHeight?:      number;
-    /** @default false */
-    autoResize?:        boolean;
-    /** @default "Error while loading.." */
-    errorMessage?:      string;
-    /** @default true */
-    enableKeyboard?:    boolean;
-    onOpen?:            ( $popin: HTMLElement ) => void;
-    onClose?:           ( $popin: HTMLElement ) => void;
-    onLoad?:            ( $popin: HTMLElement ) => Promise<void>;
-    /** @default () => 'text' */
-    setLinkResponseType?: ( url: string, $link: HTMLAnchorElement ) => PopinResponseType;
-    /** @default () => 'text' */
-    setFormResponseType?: ( $form: HTMLElement ) => PopinResponseType;
-    /** @default () => true */
-    checkValidity?:       ( $form: HTMLElement ) => boolean | Promise<void>;
-    /** @default (body) => { return { success: true, data: body }  */
-    normalize?:           ( body, response, isHttpError: boolean ) => { success: boolean, data };
-    /**
-     * If false, ajax http error (404, 500, ...) should be handled in the normalize function
-     * @default true
-    */
-    autoHandleAjaxError?: boolean;
-    templates?:           PopinTemplatesOptionsType;
-    selectors?:           PopinSelectorsOptionsType;
-    animations?:          PopinAnimationsOptionsType;
-}
-
-
-type PopinControllerOptionsType = {
-    controller: PopinController;
-    background: PopinBackground;
-}

package/Types/ScrollSnapTypes.d.ts

@@ -1,62 +0,0 @@
-type ScrollSnapSnapType = 'scroll' | 'api';
-
-type ScrollSnapDirectionType = 'h' | 'v';
-
-type ScrollSnapScrollPropertyType = 'scrollLeft' | 'scrollTop';
-
-type ScrollSnapSizePropertyType = 'scrollWidth' | 'scrollHeight';
-
-
-type ScrollSnapItemType = {
-    coord:   number;
-    index:   number;
-    isFirst: boolean;
-    isLast:  boolean;
-    $item:   HTMLElement;
-}
-
-type ScrollToCallbackType  = ( snapItem: ScrollSnapItemType, snapItemType: ScrollSnapSnapType ) => void;
-type ScrollSnapCallbackType = ( item: ScrollSnapCallbackParamType ) => void;
-
-type ScrollSnapCallbackParamType = {
-    $scroller:    HTMLElement;
-    snapItem:     ScrollSnapItemType;
-    /** If the event comes after a scroll: scroll. If it comes after a function call (like next, previous, ...): api. */
-    type:         ScrollSnapSnapType;
-    scrollerSize: number;
-    offsetSize:   number;
-}
-
-type ScrollSnapRefreshOptionType = {
-    /** Selector or DOMList of the items */
-    snapTo?:         string | NodeList;
-    /** Item to put on the left */
-    $itemToSnapOn?:  HTMLElement;
-    $offsetElement?: HTMLElement;
-    offset?: {
-        top?:        number;
-        left?:       number;
-    };
-    direction?:      ScrollSnapDirectionType;
-}
-
-type ScrollSnapOptionsType = {
-    /** @default locked */
-    lockedClass?:        string;
-    /** @default 2 */
-    minItemsToActivate?: number;
-    /** @default h */
-    direction?:          ScrollSnapDirectionType;
-    /** Internal function using GSAP and scrollTo plugin to set the scroll. Can be override to use another library */
-    _setScroll?:         ( $scroller: HTMLElement, x: number, y: number ) => void;
-    $offsetElement?:     HTMLElement;
-    offset?: {
-        top?:            number;
-        left?:           number;
-    };
-    onSnapStart?:        ScrollSnapCallbackType;
-    onSnapEnd?:          ScrollSnapCallbackType;
-    onReachStart?:       ScrollSnapCallbackType;
-    onReachEnd?:         ScrollSnapCallbackType;
-    snapTo?:             string | NodeList;
-}

package/Types/SkinCheckboxTypes.d.ts

@@ -1,23 +0,0 @@
-
-type SkinCheckboxOptionsType = {
-    /** @default <span class="cb-skin"></span> */
-    wrap?:          string;
-    /** @default invalid */
-    invalidClass?:  string;
-    /** @default disabled */
-    disabledClass?: string;
-    /** @default checked */
-    checkedClass?:  string;
-}
-
-type SkinCheckboxAllOptionsType = SkinCheckboxOptionsType & {
-    selector?: string;
-}
-
-type CustomCheckboxType = HTMLInputElement & {
-    __skinAPI?: SkinCheckbox
-}
-
-type CustomCheckboxParentType = HTMLElement & {
-    __skinAPI?: SkinCheckbox
-}

package/Types/SkinFileTypes.d.ts

@@ -1,34 +0,0 @@
-type SkinFileOptionsType = {
-    /** @default .file-skin */
-    selector?:            string;
-    /** @default <div class="file-skin"></div> */
-    wrap?:                string;
-    /** @default .file-info */
-    fileInfoSelector?:    string;
-    /** @default <div class="file-info"></div> */
-    fileInfo?:            string;
-    /** @default true */
-    autoHideFileInfo?:    boolean;
-    /** @default .file-reset */
-    resetButtonSelector?: string;
-    /** @default <span class="file-reset">&times;</span> */
-    resetButton?:         string;
-    /** @default disabled */
-    disabledClass?:       string;
-    /** @default invalid */
-    invalidClass?:        string;
-    /** @default selected */
-    selectedClass?:       string;
-}
-
-type SkinFileAllOptionsType = SkinFileOptionsType & {
-    selector?: string;
-}
-
-type CustomInputFileType = HTMLInputElement & {
-    __skinAPI?: SkinFile
-}
-
-type CustomInputFileParentType = HTMLElement & {
-    __skinAPI?: SkinFile
-}

package/Types/SkinRadioTypes.d.ts

@@ -1,24 +0,0 @@
-type SkinRadioOptionsType = {
-    /** @default <span class="rb-skin"></span> */
-    wrap?:          string;
-    /** @default invalid */
-    invalidClass?:  string;
-    /** @default disabled */
-    disabledClass?: string;
-    /** @default checked */
-    checkedClass?:  string;
-}
-
-type SkinRadioAllOptionsType = SkinRadioOptionsType & {
-    selector?: string;
-}
-
-type CustomRadioButtonType = HTMLInputElement & {
-    __skinAPI?:  SkinRadioButton;
-    __$rdGroup?: NodeList;
-}
-
-type CustomRadioButtonParentType = HTMLElement & {
-    __skinAPI?:  SkinRadioButton;
-    __$rdGroup?: NodeList;
-}

package/Types/SkinSelectTypes.d.ts

@@ -1,48 +0,0 @@
-type SkinSelectOptionsType = {
-    /**
-     * If true, skin event the option list
-     * @default false
-    */
-    full?:                boolean;
-    /** @default [] */
-    extraClass?:          string[];
-    /** @default select-skin */
-    className?:           string;
-    /** @default select-itm */
-    itemClassName?:       string;
-    /** @default select */
-    selectWrapClassName?: string;
-    /** @default select-layer */
-    layerClassName?:      string;
-    /** @default hover */
-    hoverItemClass?:      string;
-    /** @default show */
-    openedListClass?:     string;
-    /** @default on */
-    activeOptionClass?:   string;
-    /** @default disabled */
-    disabledClass?:       string;
-    /** @default invalid */
-    invalidClass?:        string;
-    /** @default loading */
-    loadingClass?:        string;
-    listTpl?:             string;
-}
-
-type SkinSelectAllOptionsType = SkinSelectOptionsType & {
-    selector?: string;
-}
-
-type CustomSelectType = HTMLSelectElement & {
-    __skinAPI?:  SkinSelect;
-}
-
-type CustomSelectParentType = HTMLElement & {
-    __skinAPI?:  SkinSelect;
-}
-
-type SkinSelectOptionArrayType = {
-    text:      string;
-    value:     string;
-    selected?: boolean;
-}