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

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 7.1.49
+
+- [Accordion]: Fix bug when a tab is opened at start
+
 ## 7.1.48
 
 - [MediaQueriesEvents]: Add position check function

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/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.48
+@version: 7.1.49
 
 
 ## Use

package/Types/Accordion.d.ts

@@ -1,35 +1,41 @@
 declare 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;
+        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;
+            open: AnimationFunction;
+            close: AnimationFunction;
+            destroy: AnimationFunction;
         }
 
         interface Options {
             /** @defaultValue 'button[aria-expanded]' */
-            tabSelector:       string;
+            tabSelector: string;
             /** @defaultValue false */
-            allowMultipleTab:  boolean;
+            allowMultipleTab: boolean;
             /** @defaultValue false */
-            atLeastOneOpen:    boolean;
-            onOpenAtStart:     Callback;
-            onOpen:            Callback;
-            onClose:           CloseCallback;
-            animations:        Partial<AnimationOptions>;
+            atLeastOneOpen: boolean;
+            onOpenAtStart: Callback;
+            onOpen: Callback;
+            onClose: CloseCallback;
+            animations: Partial<AnimationOptions>;
         }
 
         interface OptionsInit extends Partial<Options> {
-            animations?:        Partial<AnimationOptions>;
+            animations?: Partial<AnimationOptions>;
         }
 
         interface TabOptions extends Options {
-            index:     number;
+            index: 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.48",
+  "version": "7.1.49",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],