@creative-web-solution/front-library 7.1.48 → 7.1.50

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## 7.1.50
+
+- [Autocomplete]: Rework module
+- [DOM]: Update Index function
+- [DOM]: Add type to strToDOM
+- [QuickTemplate]: Add params for opening and closing tag
+
+## 7.1.49
+
+- [Accordion]: Fix bug when a tab is opened at start
+
 ## 7.1.48
 
 - [MediaQueriesEvents]: Add position check function

package/DOM/Index.ts

@@ -6,22 +6,10 @@
  *
  * @returns - Position (starting at 0) of the element in the DOM list is belong to. -1 if there is no parentNode.
  */
-export function index( $element: Element ): number {
-    let $child: ChildNode | null, idx: number;
-
-    if ( !$element.parentNode ) {
+export function index($element: Element): number {
+    if (!$element.parentElement) {
         return -1;
     }
 
-    idx = 0;
-    $child = $element.parentNode.firstChild;
-
-    while ( $child && $element !== $child ) {
-        if ( $child.nodeType === 1 ) {
-            idx++;
-        }
-        $child = $child.nextSibling;
-    }
-
-    return idx;
+    return Array.from($element.parentElement.children).indexOf($element);
 }

package/DOM/StrToDOM.ts

@@ -12,24 +12,25 @@
  *
  * @returns The created DOM element
  */
-export function strToDOM( html: string, tag = 'DIV' ): Node | DocumentFragment {
+export function strToDOM<T extends HTMLElement>(html: string, tag = "DIV"): T {
     let $child;
 
     const $frag: DocumentFragment = document.createDocumentFragment();
-    const $elem: HTMLElement      = document.createElement( tag );
+    const $elem: HTMLElement = document.createElement(tag);
 
     $elem.innerHTML = html;
 
-    while ( $elem.childNodes.length ) {
-        $child = $elem.childNodes[ 0 ];
+    while ($elem.childNodes.length) {
+        $child = $elem.childNodes[0];
 
-        if ( $child && $child.nodeType === 1 ) {
-            $frag.appendChild( $child );
-        }
-        else {
-            $elem.removeChild( $child );
+        if ($child && $child.nodeType === 1) {
+            $frag.appendChild($child);
+        } else {
+            $elem.removeChild($child);
         }
     }
 
-    return $frag.childNodes.length === 1 ? $frag.childNodes[ 0 ] : $frag;
+    const $result = $frag.childNodes.length === 1 ? $frag.childNodes[0] : $frag;
+
+    return $result as T;
 }

package/Modules/Accordion/Tab.ts

@@ -1,13 +1,12 @@
-import { next }    from '../../DOM/Traversing';
-
+import { next } from "../../DOM/Traversing";
 
 /**
  * Tab of an accordion
  */
 export default class Tab {
-    #isOpen:              boolean;
+    #isOpen: boolean;
     #originalOpenedState: boolean;
-    #$TAB_PANNEL:         HTMLElement | null;
+    #$TAB_PANNEL: HTMLElement | null;
     #options;
     #$TAB;
 
@@ -15,75 +14,82 @@ export default class Tab {
         return this.#isOpen;
     }
 
-    constructor( $TAB: HTMLElement, options: FLib.Accordion.TabOptions ) {
-        this.#options     = options;
-        this.#$TAB        = $TAB ;
-
-        const ID          = $TAB.getAttribute( 'aria-controls' );
-        this.#$TAB_PANNEL = ID ? document.getElementById( ID ) : next( $TAB ) as HTMLElement;
+    constructor($TAB: HTMLElement, options: FLib.Accordion.TabOptions) {
+        this.#options = options;
+        this.#$TAB = $TAB;
 
-        this.#isOpen = this.#originalOpenedState = $TAB.getAttribute( 'aria-expanded' ) === 'true';
+        const ID = $TAB.getAttribute("aria-controls");
+        this.#$TAB_PANNEL = ID
+            ? document.getElementById(ID)
+            : (next($TAB) as HTMLElement);
 
+        this.#isOpen = this.#originalOpenedState =
+            $TAB.getAttribute("aria-expanded") === "true";
 
-        if ( this.#isOpen ) {
-            this.#openTab( true );
+        if (this.#isOpen) {
+            this.#openTab(true);
         }
     }
 
-
     #changeTabState = (): void => {
-        this.#$TAB.setAttribute( 'aria-expanded', this.#isOpen ? 'true' : 'false' );
-    }
-
+        this.#$TAB.setAttribute(
+            "aria-expanded",
+            this.#isOpen ? "true" : "false",
+        );
+    };
 
-    #openTab = ( isOpenAtStart?: boolean ): void => {
+    #openTab = (isOpenAtStart?: boolean): void => {
         this.#options.animations
-                    .open( this.#$TAB, this.#$TAB_PANNEL )
-                    .then( () => {
-
-                        if ( isOpenAtStart && this.#options.onOpenAtStart ) {
-                            this.#options.onOpenAtStart( this.#$TAB, this.#$TAB_PANNEL );
-                        }
-                        else if ( !isOpenAtStart && this.#options.onOpen ) {
-                            this.#options.onOpen( this.#$TAB, this.#$TAB_PANNEL );
-                        }
-                    } );
+            .open(this.#$TAB, this.#$TAB_PANNEL)
+            .then(() => {
+                if (isOpenAtStart && this.#options.onOpenAtStart) {
+                    this.#options.onOpenAtStart(this.#$TAB, this.#$TAB_PANNEL);
+                } else if (!isOpenAtStart && this.#options.onOpen) {
+                    this.#options.onOpen(this.#$TAB, this.#$TAB_PANNEL);
+                }
+            });
 
         this.#isOpen = true;
         this.#changeTabState();
-    }
+    };
 
-    #closeTab = ( autoClose?: boolean ): void => {
+    #closeTab = (autoClose?: boolean): void => {
         this.#options.animations
-                    .close( this.#$TAB, this.#$TAB_PANNEL )
-                    .then( () => {
-                        this.#options.onClose?.( this.#$TAB, this.#$TAB_PANNEL, autoClose );
-                    } );
+            .close(this.#$TAB, this.#$TAB_PANNEL)
+            .then(() => {
+                this.#options.onClose?.(
+                    this.#$TAB,
+                    this.#$TAB_PANNEL,
+                    autoClose,
+                );
+            });
 
         this.#isOpen = false;
         this.#changeTabState();
-    }
+    };
 
     open(): this {
-        if( !this.#isOpen ) {
-            this.#openTab( false );
+        if (!this.#isOpen) {
+            this.#openTab(false);
         }
         return this;
     }
 
-    close( autoClose?: boolean ): this {
-        if( this.#isOpen ) {
-            this.#closeTab( autoClose );
+    close(autoClose?: boolean): this {
+        if (this.#isOpen) {
+            this.#closeTab(autoClose);
         }
 
         return this;
     }
 
-
     destroy(): this {
-        this.#options.animations.destroy( this.#$TAB, this.#$TAB_PANNEL );
+        this.#options.animations.destroy(this.#$TAB, this.#$TAB_PANNEL);
 
-        this.#$TAB.setAttribute( 'aria-expanded', this.#originalOpenedState ? 'true' : 'false' );
+        this.#$TAB.setAttribute(
+            "aria-expanded",
+            this.#originalOpenedState ? "true" : "false",
+        );
 
         return this;
     }

package/Modules/Accordion/index.ts

@@ -1,33 +1,31 @@
-import { aClass, rClass }       from '../../DOM/Class';
-import { extend }               from '../../Helpers/Extend';
-import { on, off }              from '../../Events/EventsManager';
-import Tab                      from './Tab';
-
+import { aClass, rClass } from "../../DOM/Class";
+import { extend } from "../../Helpers/Extend";
+import { on, off } from "../../Events/EventsManager";
+import Tab from "./Tab";
 
 const DEFAULT_OPTIONS = {
-    "tabSelector":      "button[aria-expanded]",
-    "allowMultipleTab": false,
-    "atLeastOneOpen":   false,
-    "animations": {
-        "open": function( $TAB, $TAB_PANNEL ) {
-            aClass( [ $TAB, $TAB_PANNEL ], 'on' );
+    tabSelector: "button[aria-expanded]",
+    allowMultipleTab: false,
+    atLeastOneOpen: false,
+    animations: {
+        open: function ($TAB, $TAB_PANNEL) {
+            aClass([$TAB, $TAB_PANNEL], "on");
 
             return Promise.resolve();
         },
-        "close": function( $TAB, $TAB_PANNEL ) {
-            rClass( [ $TAB, $TAB_PANNEL ], 'on' );
+        close: function ($TAB, $TAB_PANNEL) {
+            rClass([$TAB, $TAB_PANNEL], "on");
 
             return Promise.resolve();
         },
-        "destroy": function( $TAB, $TAB_PANNEL ) {
-            rClass( [ $TAB, $TAB_PANNEL ], 'on' );
+        destroy: function ($TAB, $TAB_PANNEL) {
+            rClass([$TAB, $TAB_PANNEL], "on");
 
             return Promise.resolve();
-        }
-    }
+        },
+    },
 };
 
-
 /**
  * Accordion
  *
@@ -86,70 +84,76 @@ const DEFAULT_OPTIONS = {
  */
 export default class Accordion {
     #$accordionWrapper: HTMLElement;
-    #options:       FLib.Accordion.Options;
-    #$tabs:         NodeListOf<HTMLElement>;
-    #tablist        = new Map<HTMLElement, Tab>();
-    #status:        string;
+    #options: FLib.Accordion.Options;
+    #$tabs: NodeListOf<HTMLElement>;
+    #tablist = new Map<HTMLElement, Tab>();
+    #status: string;
     #lastOpenedTabs = new Set<Tab>();
 
+    #STATUS_ON = "STATUS_ON";
+    #STATUS_OFF = "STATUS_OFF";
 
-    #STATUS_ON  = 'STATUS_ON';
-    #STATUS_OFF = 'STATUS_OFF';
-
-
-    constructor( $accordionWrapper: HTMLElement, userOptions: FLib.Accordion.OptionsInit ) {
+    constructor(
+        $accordionWrapper: HTMLElement,
+        userOptions: FLib.Accordion.OptionsInit,
+    ) {
         this.#$accordionWrapper = $accordionWrapper;
 
-        this.#options       = extend( DEFAULT_OPTIONS, userOptions );
+        this.#options = extend(DEFAULT_OPTIONS, userOptions);
 
-        this.#$tabs         = $accordionWrapper.querySelectorAll( this.#options.tabSelector );
-        this.#status        = this.#STATUS_OFF;
+        this.#$tabs = $accordionWrapper.querySelectorAll(
+            this.#options.tabSelector,
+        );
+        this.#status = this.#STATUS_OFF;
 
         this.#on();
     }
 
     #on = (): void => {
-        if( this.#status === this.#STATUS_ON ){
+        if (this.#status === this.#STATUS_ON) {
             return;
         }
 
         this.#status = this.#STATUS_ON;
 
-        this.#$tabs.forEach( ( $tab, index ) => {
-            this.#tablist.set($tab, new Tab( $tab, {
+        this.#$tabs.forEach(($tab, index) => {
+            const tab = new Tab($tab, {
                 ...this.#options,
                 index,
-            } ) );
-        } );
-
-        on( this.#$accordionWrapper, {
-            "eventsName": "click",
-            "selector": this.#options.tabSelector,
-            "callback": this.#toggleTab
-        } );
-    }
-
+            });
+            this.#tablist.set($tab, tab);
+            if (tab.isOpen) {
+                this.#lastOpenedTabs.add(tab);
+            }
+        });
+
+        on(this.#$accordionWrapper, {
+            eventsName: "click",
+            selector: this.#options.tabSelector,
+            callback: this.#toggleTab,
+        });
+    };
 
     #off = (): void => {
-        if( this.#status === this.#STATUS_OFF ){
+        if (this.#status === this.#STATUS_OFF) {
             return;
         }
 
         this.#status = this.#STATUS_OFF;
 
-        this.#tablist.forEach( tab => {
+        this.#tablist.forEach((tab) => {
             tab.destroy();
-        } );
+        });
 
         this.#tablist.clear();
 
-        off( this.#$accordionWrapper, {
-            "eventsName": "click",
-            "callback": this.#toggleTab
-        } );
-    }
+        off(this.#$accordionWrapper, {
+            eventsName: "click",
+            callback: this.#toggleTab,
+        });
+    };
 
-    #toggleTab = ( e: Event, $target: HTMLElement ): void => {
+    #toggleTab = (e: Event, $target: HTMLElement): void => {
         e.preventDefault();
 
         const tab = this.#tablist.get($target);
@@ -159,12 +163,12 @@ export default class Accordion {
         }
 
         if (tab.isOpen) {
-            this.closeTab(tab)
+            this.closeTab(tab);
             return;
         }
 
-        this.openTab(tab)
-    }
+        this.openTab(tab);
+    };
 
     closeTab(tab: Tab): this {
         if (this.#options.atLeastOneOpen && this.#lastOpenedTabs.size < 2) {
@@ -179,7 +183,7 @@ export default class Accordion {
 
     openTab(tab: Tab): this {
         if (!this.#options.allowMultipleTab && this.#lastOpenedTabs.size > 0) {
-            this.#lastOpenedTabs.forEach(tab => {
+            this.#lastOpenedTabs.forEach((tab) => {
                 tab.close(true);
             });
             this.#lastOpenedTabs.clear();
@@ -210,7 +214,6 @@ export default class Accordion {
         return this;
     }
 
-
     /**
      * Restart the module
      */

package/Modules/Autocomplete/AbstractAutocompleteAdapter.ts

@@ -0,0 +1,24 @@
+export default abstract class AbstractAutocompleteAdapter<ItemDataType> {
+    abstract layerRender(): string;
+    abstract listRender(): string;
+    abstract itemRender(options: { item: ItemDataType; index: number }): string;
+    abstract errorRender(errorMessage: string, query: string): string;
+    abstract noResultRender(query: string): string;
+    abstract queryParamAdapter(
+        query: string,
+        $input: HTMLElement,
+    ): Record<string, any>;
+    abstract markValue(options: {
+        item: ItemDataType;
+        index: number;
+        query: string;
+    }): ItemDataType;
+    abstract updateInputValueFromItem?(options: {
+        item: ItemDataType;
+        index: number;
+        query: string;
+        results: ItemDataType[];
+    }): string;
+    abstract source(query: string): Promise<ItemDataType[]>;
+    abstract abortSource?(): void;
+}