@lemonadejs/modal 3.3.0 → 5.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * pin the modal to the left panel
  */
-if (! lemonade && typeof (require) === 'function') {
+if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -180,8 +180,10 @@ if (! lemonade && typeof (require) === 'function') {
         }
     }
 
-    document.addEventListener('mouseup', mouseUp);
-    document.addEventListener('mousemove', mouseMove);
+    if (typeof(document) !== "undefined") {
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener('mousemove', mouseMove);
+    }
 
     const isTrue = function(e) {
         return e === true || e === 1 || e === 'true';
@@ -494,11 +496,6 @@ if (! lemonade && typeof (require) === 'function') {
                 }
             }
 
-            // Bring to front on focus
-            if (self.layers !== false) {
-                self.el.classList.add('lm-modal-layers');
-            }
-
             // Import content from DOM
             if (self.content) {
                 if (typeof(self.content) === 'string') {
@@ -510,13 +507,20 @@ if (! lemonade && typeof (require) === 'function') {
 
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
-                if (isTrue(self['auto-close'])) {
-                    if (! self.el.contains(e.relatedTarget)) {
+                if (! self.el.contains(e.relatedTarget)) {
+                    if (isTrue(self['auto-close'])) {
                         self.closed = true;
                     }
+                    // Remove focus
+                    self.el.classList.remove('lm-modal-focus');
                 }
             });
 
+            // Focus out of the component
+            self.el.addEventListener('focusin', function(e) {
+                self.el.classList.add('lm-modal-focus');
+            });
+
             // Close and stop propagation
             self.el.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape') {
@@ -741,6 +745,8 @@ if (! lemonade && typeof (require) === 'function') {
             if (self.closed === true) {
                 self.closed = false;
             }
+            // Focus on the new modal
+            self.el.focus();
         }
 
         self.close = function() {

package/dist/style.css

@@ -1,7 +1,7 @@
 .lm-modal {
     position: fixed;
-    min-width: 300px;
-    min-height: 240px;
+    min-width: 200px;
+    min-height: 200px;
     border-radius: 5px;
     z-index: 15;
     background-color: var(--lm-background-color, #fff);
@@ -28,15 +28,19 @@
 .lm-modal-title {
     width: 100%;
     border-bottom: 1px solid  var(--lm-border-color, #ccc);
-    padding: 10px;
+    padding: 12px;
     box-sizing: border-box;
-    font-size: 1.2em;
+    font-size: 1.3em;
     line-height: 24px;
     user-select: none;
     display: flex;
     border-radius: 5px 5px 0 0;
 }
 
+.lm-modal-focus {
+    z-index: 999;
+}
+
 .lm-modal > .lm-modal-title {
     display: none;
 }
@@ -57,9 +61,9 @@
     height: 24px;
     font-size: 24px;
     cursor: pointer;
-    font-family: "Material Icons";
+    font-family: "Material Symbols Outlined", "Material Icons";
     text-align: center;
-    margin-right: 5px;
+    margin-right: 8px;
     display: none;
 }
 
@@ -92,10 +96,6 @@
     opacity: 0;
 }
 
-.lm-modal-layers:focus {
-    z-index: 999;
-}
-
 .lm-modal[animation="false"] {
     transition: initial;
 }

package/package.json

@@ -13,9 +13,9 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.3.3"
+        "lemonadejs": "^5.0.3"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.3.0"
+    "version": "5.0.0"
 }