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

package/Modules/SkinRadio.ts

@@ -16,24 +16,26 @@ const defaultOptions = {
  * You can access the skin API in the __skinAPI property of the $radio HTMLElement or its wrapper.
  *
  * @example
+ * ```ts
  * // Call with default options:
  * skinRadio( $radio, {
- *  "wrap":  "<span class=\"rb-skin\"></span>",
+ *  "wrap":  "&lt;span class=\"rb-skin\"&gt;&lt;/span&gt;",
  *  "invalidClass": "invalid",
  *  "disabledClass": "disabled",
  *  "checkedClass": "checked"
  * } );
+ * ```
  */
 export default class SkinRadioButton {
-    #$radio!:   CustomRadioButtonType;
-    #options!:  SkinRadioOptionsType;
-    #$parent!:  CustomRadioButtonParentType;
-    #$rdGroup!: NodeList;
+    #$radio!:   FLib.SkinRadio.CustomRadioButton;
+    #options!:  FLib.SkinRadio.Options;
+    #$parent!:  FLib.SkinRadio.CustomRadioButtonParent;
+    #$rdGroup!: NodeListOf<FLib.SkinRadio.CustomRadioButton>;
 
-    constructor( $radio: HTMLInputElement, userOptions?: SkinRadioOptionsType ) {
+    constructor( $radio: HTMLInputElement, userOptions?: Partial<FLib.SkinRadio.Options> ) {
 
         // Already skinned
-        if ( ($radio as CustomRadioButtonType).__skinAPI ) {
+        if ( ($radio as FLib.SkinRadio.CustomRadioButton).__skinAPI ) {
             return;
         }
 
@@ -45,20 +47,20 @@ export default class SkinRadioButton {
 
         // Store all radio with same name
 
-        if ( !this.#$radio.__$rdGroup ) {
-            this.#$rdGroup = document.querySelectorAll( `input[type="radio"][name="${ rdName }"]` );
+        if ( !this.#$radio.__$radioGroup ) {
+            this.#$rdGroup = document.querySelectorAll( `input[type="radio"][name="${ rdName }"]` ) as NodeListOf<FLib.SkinRadio.CustomRadioButton>;
 
             this.#$rdGroup.forEach( $r => {
-                ($r as CustomRadioButtonType).__$rdGroup = this.#$rdGroup;
+                ($r as FLib.SkinRadio.CustomRadioButton).__$radioGroup = this.#$rdGroup;
             } );
         }
         else {
-            this.#$rdGroup = this.#$radio.__$rdGroup;
+            this.#$rdGroup = this.#$radio.__$radioGroup;
         }
 
 
-        wrap( this.#$radio, this.#options.wrap! );
-        this.#$parent = this.#$radio.parentNode as CustomRadioButtonParentType;
+        wrap( this.#$radio, this.#options.wrap );
+        this.#$parent = this.#$radio.parentNode as FLib.SkinRadio.CustomRadioButtonParent;
 
         this.#$parent.__skinAPI = this.#$radio.__skinAPI = this;
 
@@ -68,22 +70,22 @@ export default class SkinRadioButton {
 
         this.#$radio.addEventListener( 'click', this.#changeHandler );
 
-        this.update( this.#$radio );
+        this.#update( this.#$radio );
 
     }
 
 
-    private update( $rd ) {
+    #update = ( $rd: FLib.SkinRadio.CustomRadioButton ): void => {
         $rd.__skinAPI[ $rd.checked ? 'check' : 'uncheck' ]();
     }
 
 
-    #changeHandler = () => {
-        this.#$rdGroup.forEach( $rd => this.update( $rd ) );
+    #changeHandler = (): void => {
+        this.#$rdGroup.forEach( $rd => this.#update( $rd ) );
     }
 
 
-    private enableDisable( fnName: string, disabled: boolean ) {
+    #enableDisable = ( fnName: string, disabled: boolean ): void => {
         this.#$rdGroup.forEach( ( $r: Node ) => {
             ($r as HTMLInputElement).disabled = disabled;
             ($r.parentNode as HTMLElement).classList[ fnName ]( this.#options.disabledClass );
@@ -91,7 +93,7 @@ export default class SkinRadioButton {
     }
 
 
-    private validInvalid( fnName: string ) {
+    #validInvalid = ( fnName: string ): void => {
         this.#$rdGroup.forEach( ( $r: Node ) => {
             ($r.parentNode as HTMLElement).classList[ fnName ]( this.#options.invalidClass );
         } );
@@ -101,53 +103,65 @@ export default class SkinRadioButton {
     /**
      * Force the radio button to be check
      */
-    check() {
+    check(): this {
         this.#$rdGroup.forEach( ( $r: Node ) => {
             ($r as HTMLInputElement).checked = $r === this.#$radio;
-            ($r.parentNode as HTMLElement).classList[ $r === this.#$radio ? 'add' : 'remove' ]( this.#options.checkedClass! );
+            ($r.parentNode as HTMLElement).classList[ $r === this.#$radio ? 'add' : 'remove' ]( this.#options.checkedClass );
         } );
-    };
+
+        return this;
+    }
 
 
     /**
      * Force the radio button to be uncheck
      */
-    uncheck() {
+    uncheck(): this {
         this.#$radio.checked = false;
-        this.#$parent.classList.remove( this.#options.checkedClass! );
-    };
+        this.#$parent.classList.remove( this.#options.checkedClass );
+
+        return this;
+    }
 
 
     /**
      * Force the radio button to be enable
      */
-    enable() {
-        this.enableDisable( 'remove', false );
-    };
+    enable(): this {
+        this.#enableDisable( 'remove', false );
+
+        return this;
+    }
 
 
     /**
      * Force the radio button to be disable
      */
-    disable() {
-        this.enableDisable( 'add', true );
-    };
+    disable(): this {
+        this.#enableDisable( 'add', true );
+
+        return this;
+    }
 
 
     /**
      * Force the state of the radio button to invalid
      */
-    setInvalid() {
-        this.validInvalid( 'add' );
-    };
+    setInvalid(): this {
+        this.#validInvalid( 'add' );
+
+        return this;
+    }
 
 
     /**
      * Force the state of the radio button to valid
      */
-    setValid() {
-        this.validInvalid( 'remove' );
-    };
+    setValid(): this {
+        this.#validInvalid( 'remove' );
+
+        return this;
+    }
 }
 
 
@@ -155,15 +169,17 @@ export default class SkinRadioButton {
  * Skin a radio input
  *
  * @example
+ * ```ts
  * // Call with default options:
  * skinRadio( $radio, {
- *  "wrap":  "<span class=\"rb-skin\"></span>",
+ *  "wrap":  "&lt;span class=\"rb-skin\"&gt;&lt;/span&gt;",
  *  "invalidClass": "invalid",
  *  "disabledClass": "disabled",
  *  "checkedClass": "checked"
  * } );
+ * ```
 */
-export function skinRadio( $radio: HTMLInputElement, options: SkinRadioOptionsType ): SkinRadioButton {
+export function skinRadio( $radio: HTMLInputElement, options: Partial<FLib.SkinRadio.Options> ): SkinRadioButton {
     return new SkinRadioButton( $radio, options );
 }
 
@@ -172,16 +188,18 @@ export function skinRadio( $radio: HTMLInputElement, options: SkinRadioOptionsTy
  * Select all radio input in a $wrapper
  *
  * @example
+ * ```ts
  * // Call with default options:
  * skinRadioAll( $wrapper, {
- *  "wrap":  "<span class=\"rb-skin\"></span>",
+ *  "wrap":  "&lt;span class=\"rb-skin\"&gt;&lt;/span&gt;",
  *  "selector": "input[type=\"radio\"]",
  *  "invalidClass": "invalid",
  *  "disabledClass": "disabled",
  *  "checkedClass": "checked"
  * } );
+ * ```
 */
-export function skinRadioAll( $wrapper: HTMLElement, options: SkinRadioAllOptionsType = {} ): SkinRadioButton[] {
+export function skinRadioAll( $wrapper: HTMLElement, options: Partial<FLib.SkinRadio.AllOptions> = {} ): SkinRadioButton[] {
 
     const $radioButtons = $wrapper.querySelectorAll( options.selector || 'input[type="radio"]' );
     const skinList: SkinRadioButton[] = [];
@@ -196,6 +214,7 @@ export function skinRadioAll( $wrapper: HTMLElement, options: SkinRadioAllOption
  * Select all radio input of the same group (same name)
  *
  * @example
+ * ```ts
  * // Call with default options:
  * skinRadioGroup( $radio, {
  *  "wrap":  "<span class=\"rb-skin\"></span>",
@@ -203,8 +222,9 @@ export function skinRadioAll( $wrapper: HTMLElement, options: SkinRadioAllOption
  *  "disabledClass": "disabled",
  *  "checkedClass": "checked"
  * } );
+ * ```
 */
-export function skinRadioGroup( $radioButtonOrInputName: HTMLInputElement | string, options: SkinRadioOptionsType ): SkinRadioButton[] {
+export function skinRadioGroup( $radioButtonOrInputName: HTMLInputElement | string, options: FLib.SkinRadio.Options ): SkinRadioButton[] {
 
     const inputName = isString( $radioButtonOrInputName ) ? $radioButtonOrInputName : ($radioButtonOrInputName as HTMLInputElement).getAttribute( 'name' );