@creative-web-solution/front-library 7.1.36 → 7.1.38

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 7.1.38
+
+* [Slider]: Handle popin inside the background layer
+
+## 7.1.37
+
+* [Validator]: Add specific event handling in live validation for input file.
+
 ## 7.1.36
 
 * [DragSlider]: Fix end positioning when margin right and left are not equals

package/Modules/Popin/Popin.ts

@@ -115,6 +115,16 @@ export default class Popin {
             }
         );
 
+        if (!this.#options.isBackgroundAside && !this.#options.modal) {
+            on(
+                this.#$popin,
+                {
+                    "eventsName": CLICK_EVENT_NAME,
+                    "callback":  this.#clickBgHandler
+                }
+            );
+        }
+
 
         if ( this.#options.enableKeyboard ) {
             this.#keyboardControls = new KeyboardHandler( this.#$popin, {
@@ -432,6 +442,14 @@ export default class Popin {
         this.#closePopin();
     }
 
+    #clickBgHandler = ( e: Event ): void => {
+        const $target = e.target as HTMLElement;
+
+        if (!$target?.closest(this.#options.selectors.popinBody)) {
+            this.#closePopinHandler(e);
+        }
+    }
+
 
     #resize = (): void => {
         if ( !this.#options.autoResize ) {

package/Modules/Popin/Tools.ts

@@ -45,6 +45,7 @@ export const defaultOptions = {
     },
     "selectors": {
         "popin": ".popin",
+        "popinBody": ".popin",
         "popinContent": ".popin-content",
         "links": "a[data-popin]",
         "forms": "form[data-popin]",

package/Modules/Validator/Internal/Input.ts

@@ -10,7 +10,7 @@ import { getRadioList }             from '../Tools/RadioButton';
  */
 export default class Input implements FLib.Validator.Input {
     #isRadio:                   boolean;
-    #inputType:                 string;
+    #inputType:                 "optin" | "hidden" | "select" | "file" | "inputText";
     #inputId:                   string;
     #$input:                    HTMLElement;
     #$group:                    FLib.Validator.CustomValidatorRadioInput[] | undefined;
@@ -67,6 +67,9 @@ export default class Input implements FLib.Validator.Input {
         else if ( $input.nodeName === 'SELECT' ) {
             this.#inputType = 'select';
         }
+        else if ( $input.type === 'file' ) {
+            this.#inputType = 'file';
+        }
         else {
             this.#inputType = 'inputText';
         }
@@ -121,9 +124,9 @@ export default class Input implements FLib.Validator.Input {
         this.#hasError    = false;
 
 
-        if ( this.#hasValidator && options.hasLiveValidation && this.#inputType !== 'hidden' ) {
+        if ( this.#hasValidator && options.hasLiveValidation && this.#inputType !== 'hidden' && typeof options.liveValidation?.eventsName?.[ this.#inputType ] === "string" ) {
             on( this.#isRadio ? this.#$group : $input, {
-                "eventsName":   options.liveValidation?.eventsName?.[ this.#inputType ] as string,
+                "eventsName":   options.liveValidation.eventsName[ this.#inputType ]!,
                 "callback":     this.#onLiveValidation
             } );
         }
@@ -324,7 +327,7 @@ export default class Input implements FLib.Validator.Input {
      */
     destroy(): this {
 
-        if ( this.#hasValidator && this.#options.hasLiveValidation && this.#inputType !== 'hidden' ) {
+        if ( this.#hasValidator && this.#options.hasLiveValidation && this.#inputType !== 'hidden' && typeof this.#options.liveValidation.eventsName[ this.#inputType ] === "string" ) {
             off( this.#isRadio ? this.#$group : this.#$input, {
                 "eventsName":   this.#options.liveValidation.eventsName[ this.#inputType ],
                 "callback":     this.#onLiveValidation

package/Modules/Validator/index.ts

@@ -21,7 +21,8 @@ const defaultOptions = {
         "eventsName": {
             "optin":            "change",
             "select":           "change",
-            "inputText":        "input"
+            "inputText":        "input",
+            "file":             "change"
         },
         "eventsHook":           null
     }

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.36
+@version: 7.1.38
 
 
 ## Use

package/Types/Popin.d.ts

@@ -35,6 +35,8 @@ declare namespace FLib {
         interface SelectorsOptions {
             /** @defaultValue .popin */
             popin:               string;
+            /** @defaultValue .popin */
+            popinBody:           string;
             /** @defaultValue .popin-content */
             popinContent:        string;
             /** @defaultValue a[data-popin] */

package/Types/Validator.d.ts

@@ -84,6 +84,8 @@ declare namespace FLib {
                     select?:           string;
                     /** @defaultValue input */
                     inputText?:        string;
+                    /** @defaultValue change */
+                    file?:             string;
                 };
                 eventsHook?;
             }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.36",
+  "version": "7.1.38",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],