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

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 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.

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

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.37
+@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/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.37",
+  "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": [],