@lemonadejs/modal 2.4.9 → 2.5.0

package/dist/index.js

@@ -1,504 +1,557 @@
-/**
- * pin the modal to the left panel
- */
-if (!lemonade && typeof (require) === 'function') {
-    var lemonade = require('lemonadejs');
-}
-
-;(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Modal = factory();
-}(this, (function () {
-
-    // References
-    const modals = [];
-    // State of the resize and move modal
-    let state = {};
-    // Internal controls of the action of resize and move
-    let controls = {};
-    // Width of the border
-    let cornerSize = 10;
-    // Container with minimized modals
-    const minimizedModals = [];
-    // Default z-index for the modals
-    const defaultZIndex = 20;
-
-    /**
-     * Send the modal to the front
-     * @param container
-     */
-    const sendToFront = function(container) {
-        let highestXIndex = defaultZIndex;
-        for (let i = 0; i < modals.length; i++) {
-            const zIndex = parseInt(modals[i].el.style.zIndex);
-            if (zIndex > highestXIndex) {
-                highestXIndex = zIndex;
-            }
-        }
-        container.style.zIndex = highestXIndex + 1;
-    }
-
-    /**
-     * Send modal to the back
-     * @param container
-     */
-    const sendToBack = function(container) {
-        container.style.zIndex = defaultZIndex;
-    }
-
-    // Get the coordinates of the action
-    const getCoords = function(e) {
-        let x;
-        let y;
-
-        if (e.changedTouches && e.changedTouches[0]) {
-            x = e.changedTouches[0].clientX;
-            y = e.changedTouches[0].clientY;
-        } else {
-            x = e.clientX;
-            y = e.clientY;
-        }
-
-        return [x,y];
-    }
-
-    // Get the button status
-    const getButton = function(e) {
-        e = e || window.event;
-        if (e.buttons) {
-            return e.buttons;
-        } else if (e.button) {
-            return e.button;
-        } else {
-            return e.which;
-        }
-    }
-
-    // Finalize any potential action
-    const mouseUp = function(e) {
-        // Finalize all actions
-        if (typeof(controls.action) === 'function') {
-            controls.action();
-        }
-        // Remove cursor
-        if (controls.e) {
-            controls.e.style.cursor = '';
-            controls.e.classList.remove('moving');
-        }
-        // Reset controls
-        controls = {};
-        // Reset state controls
-        state = {
-            x: null,
-            y: null,
-        }
-    }
-
-    const mouseMove = function(e) {
-        if (! getButton(e)) {
-            return false;
-        }
-        // Get mouse coordinates
-        let [x,y] = getCoords(e);
-
-        // Move modal
-        if (controls.type === 'move') {
-            if (state && state.x == null && state.y == null) {
-                state.x = x;
-                state.y = y;
-            }
-
-            let dx = x - state.x;
-            let dy = y - state.y;
-            let top = controls.e.offsetTop + dy;
-            let left = controls.e.offsetLeft + dx;
-
-            // Update position
-            controls.top = top
-            controls.left = left
-            controls.e.style.top = top + 'px';
-            controls.e.style.left = left + 'px';
-
-            state.x = x;
-            state.y = y;
-            state.top = top
-            state.left = left
-        } else if (controls.type === 'resize') {
-            let width = null;
-            let height = null;
-            let newHeight = null;
-
-            if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {
-                // Update width
-                width = controls.w + (x - controls.x);
-                controls.e.style.width = width + 'px';
-
-                // Update Height
-                if (e.shiftKey) {
-                    newHeight = (x - controls.x) * (controls.h / controls.w);
-                    height = controls.h + newHeight;
-                    controls.e.style.height = height + 'px';
-                } else {
-                    newHeight = false;
-                }
-            }
-
-            if (! newHeight) {
-                if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
-                    height = controls.h + (y - controls.y);
-                    controls.e.style.height = height + 'px';
-                }
-            }
-        }
-    }
-
-    document.addEventListener('mouseup', mouseUp);
-    document.addEventListener('mousemove', mouseMove);
-
-    // Dispatcher
-    const Dispatch = function(type, option){
-        if (typeof this[type] === 'function') {
-            this[type](this, option)
-        }
-    }
-
-    const refreshMinimized = function() {
-        let items = minimizedModals;
-        let numOfItems = items.length;
-        let width = 0;
-        let height = 5;
-        for (let i = 0; i < numOfItems; i++) {
-            let item = items[i];
-            item.el.style.marginLeft = width;
-            item.el.style.marginBottom = height;
-            width += 205;
-
-            if (document.body.offsetWidth - width < 205) {
-                width = 0;
-                height += 50;
-            }
-        }
-    }
-
-    const setMini = function(self) {
-        // Minimize modals
-        minimizedModals.push(self);
-        // Refresh positions
-        refreshMinimized.call(self);
-    }
-
-    const removeMini = function(self) {
-        minimizedModals.splice(minimizedModals.indexOf(self), 1);
-        self.el.style.marginLeft = '';
-        self.el.style.marginBottom = '';
-        // Refresh positions
-        refreshMinimized.call(self);
-    }
-
-    const adjustTop = function() {
-        let self = this;
-        self.el.style.marginTop = '';
-        let rect = self.el.getBoundingClientRect();
-        let limit = document.documentElement.clientHeight + window.scrollY - (rect.top +  rect.height);
-        if (limit < 0) {
-            self.el.style.marginTop = limit - 10 + 'px';
-        }
-    }
-
-    const adjustLeft = function() {
-        let self = this;
-        let rect = self.el.getBoundingClientRect();
-        // Make sure component will be visible on page
-        let limit = document.documentElement.clientWidth - (rect.left +  rect.width);
-        if (limit < 0) {
-            self.el.style.marginLeft = limit - 10 + 'px';
-        }
-    }
-
-    const isTrue = function(e) {
-        return e === true || e === 1 || e === 'true';
-    }
-
-    const Modal = function (template) {
-        let self = this;
-        let backdrop = null;
-        // Make sure keep the state as boolean
-        self.closed = !!self.closed;
-
-        // Keep all modals references
-        modals.push(self);
-
-        self.back = function() {
-            sendToBack(self.el);
-        }
-        self.front = function() {
-            sendToFront(self.el);
-        }
-
-        self.onload = function() {
-            if (self.url) {
-                fetch(self.url)
-                    .then(response => response.clone().body)
-                    .then(body => {
-                        let reader = body.getReader();
-                        reader.read().then(function pump({done, value}) {
-                            const decoder = new TextDecoder();
-                            template += decoder.decode(value.buffer);
-                        });
-                    });
-            }
-
-            // Dimensions
-            if (self.width) {
-                self.el.style.width = self.width + 'px';
-            } else if (self.el.offsetWidth) {
-                self.width = self.el.offsetWidth;
-            }
-            if (self.height) {
-                self.el.style.height = self.height + 'px';
-            } else if (self.el.offsetHeight) {
-                self.height = self.el.offsetHeight;
-            }
-            if (self.top) {
-                self.el.style.top = self.top + 'px';
-            }
-            if (self.left) {
-                self.el.style.left = self.left + 'px';
-            }
-
-            // Initial centralize
-            if (self.position === 'center') {
-                self.top = (window.innerHeight - self.height) / 2;
-                self.left = (window.innerWidth - self.width) / 2;
-            }
-
-            // Full screen
-            if (self.height > 300) {
-                self.el.classList.add('fullscreen');
-            }
-
-            // Responsive
-            if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
-                self.el.setAttribute('data-responsive', true);
-            }
-
-            // Backdrop
-            if (self.backdrop === true) {
-                backdrop = document.createElement('div');
-                backdrop.classList.add('lm-modal-backdrop');
-                backdrop.addEventListener('mousedown', function() {
-                    self.closed = true;
-                })
-            }
-
-            // Bring to front on focus
-            if (self.layers !== false) {
-                self.el.classList.add('lm-modal-layers');
-            }
-
-            // Focus out of the component
-            self.el.addEventListener('focusout', function(e) {
-                if (isTrue(self['auto-close'])) {
-                    if (!self.el.contains(e.relatedTarget)) {
-                        self.closed = true;
-                    }
-                }
-            });
-
-            // Close and stop propagation
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && self.closed === false) {
-                    self.closed = true;
-                    e.preventDefault();
-                    e.stopImmediatePropagation();
-                }
-            });
-        }
-
-        self.onchange = function(property) {
-            if (property === 'closed') {
-                if (self.closed === false) {
-                    // Focus on the modal
-                    if (self.focus !== false) {
-                        self.el.focus();
-                    }
-                    // Show backdrop
-                    if (backdrop) {
-                        self.el.parentNode.insertBefore(backdrop, self.el);
-                    }
-                    // Animation
-                    if (self.animation) {
-                        self.el.classList.add('lm-modal-animation');
-                    }
-                } else {
-                    // Hide backdrop
-                    if (backdrop) {
-                        backdrop.remove();
-                    }
-                    if (self.animation) {
-                        self.el.classList.remove('lm-modal-animation');
-                    }
-                }
-
-                // Call the vents
-                self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
-            } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
-                self.el.style[property] = self[property] + 'px';
-            }
-
-            // Adjust position
-            if (self.closed === false) {
-                if (isTrue(self['auto-adjust'])) {
-                    adjustTop.call(self);
-                    adjustLeft.call(self);
-                }
-            }
-        }
-        
-        self.mousemove = function(e) {
-            if (getButton(e)) {
-                return;
-            }
-
-            // Root element of the component
-            let item = self.el;
-            // Get the position and dimensions
-            let rect = item.getBoundingClientRect();
-
-            controls.type = null;
-            controls.d = null;
-            controls.e = item;
-            controls.w = rect.width;
-            controls.h = rect.height;
-
-            // When resizable
-            if (self.resizable === true) {
-                if (rect.height - (e.clientY - rect.top) < cornerSize) {
-                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                        item.style.cursor = 'se-resize';
-                    } else {
-                        item.style.cursor = 's-resize';
-                    }
-                } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
-                    item.style.cursor = 'e-resize';
-                } else {
-                    item.style.cursor = '';
-                }
-
-                if (item.style.cursor) {
-                    controls.type = 'resize';
-                    controls.d = item.style.cursor;
-                } else {
-                    controls.type = null;
-                    controls.d = null;
-                }
-            }
-        }
-
-        self.mousedown = function(e) {
-            // Get mouse coordinates
-            let [x,y] = getCoords(e);
-            controls.x = x;
-            controls.y = y;
-            // Root element of the component
-            let item = self.el;
-            // Get the position and dimensions
-            let rect = item.getBoundingClientRect();
-
-            controls.e = item;
-            controls.w = rect.width;
-            controls.h = rect.height;
-
-            let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
-
-            if (isTrue(self.minimizable) && corner === true) {
-                self.minimized = ! self.minimized;
-                // Handles minimized modal positioning
-                if (self.minimized) {
-                    setMini(self);
-                } else {
-                    removeMini(self);
-                }
-            } else if (isTrue(self.closable) && corner === true) {
-                self.closed = true;
-            } else if (! self.minimized) {
-                // If is not minimized
-                if (controls.type === 'resize') {
-                    // This will be the callback when finalize the resize
-                    controls.action = function () {
-                        self.width = parseInt(item.style.width);
-                        self.height = parseInt(item.style.height);
-                    }
-                    // Make sure the width and height is defined for the modal
-                    if (!item.style.width) {
-                        item.style.width = controls.w + 'px';
-                    }
-                    if (!item.style.height) {
-                        item.style.height = controls.h + 'px';
-                    }
-
-                    e.preventDefault();
-                } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
-                    self.left = parseInt(self.el.style.left) + parseInt(self.el.style.marginLeft);
-                    self.top = parseInt(self.el.style.top) + parseInt(self.el.style.marginTop);
-                    self.el.style.marginLeft = 0;
-                    self.el.style.marginTop = 0;
-                    // Action
-                    controls.type = 'move';
-                    // Callback
-                    controls.action = function () {
-                        self.top = parseInt(item.style.top);
-                        self.left = parseInt(item.style.left);
-                    }
-                    controls.e.classList.add('moving');
-                }
-            }
-        }
-
-        self.open = function() {
-            if (self.closed === true) {
-                self.closed = false;
-            }
-        }
-
-        self.close = function() {
-            if (self.closed === false) {
-                self.closed = true;
-            }
-        }
-
-        return `<div class="lm-modal" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
-            <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
-            <div>${template}</div>
-        </div>`
-    }
-
-    lemonade.setComponents({ Modal: Modal });
-
-    return function (root, options, template) {
-        if (typeof(root) === 'object') {
-            if (! template) {
-                template = '';
-            }
-            // Keep the DOM elements
-            let elements = [];
-            while (root.firstChild) {
-                elements.push(root.firstChild);
-                root.firstChild.remove();
-            }
-            // Create the modal
-            let e = lemonade.render(Modal, root, options, template);
-            // Append any elements inside the modal
-            if (elements.length) {
-                while (elements[0]) {
-                    e.children[1].appendChild(elements[0]);
-                    elements.shift();
-                }
-            }
-            return options;
-        } else {
-            return Modal.call(this, root);
-        }
-    }
+/**
+ * pin the modal to the left panel
+ */
+if (!lemonade && typeof (require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+
+;(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Modal = factory();
+}(this, (function () {
+
+    // References
+    const modals = [];
+    // State of the resize and move modal
+    let state = {};
+    // Internal controls of the action of resize and move
+    let controls = {};
+    // Width of the border
+    let cornerSize = 10;
+    // Container with minimized modals
+    const minimizedModals = [];
+    // Default z-index for the modals
+    const defaultZIndex = 20;
+
+    /**
+     * Send the modal to the front
+     * @param container
+     */
+    const sendToFront = function(container) {
+        let highestXIndex = defaultZIndex;
+        for (let i = 0; i < modals.length; i++) {
+            const zIndex = parseInt(modals[i].el.style.zIndex);
+            if (zIndex > highestXIndex) {
+                highestXIndex = zIndex;
+            }
+        }
+        container.style.zIndex = highestXIndex + 1;
+    }
+
+    /**
+     * Send modal to the back
+     * @param container
+     */
+    const sendToBack = function(container) {
+        container.style.zIndex = defaultZIndex;
+    }
+
+    // Get the coordinates of the action
+    const getCoords = function(e) {
+        let x;
+        let y;
+
+        if (e.changedTouches && e.changedTouches[0]) {
+            x = e.changedTouches[0].clientX;
+            y = e.changedTouches[0].clientY;
+        } else {
+            x = e.clientX;
+            y = e.clientY;
+        }
+
+        return [x,y];
+    }
+
+    // Get the button status
+    const getButton = function(e) {
+        e = e || window.event;
+        if (e.buttons) {
+            return e.buttons;
+        } else if (e.button) {
+            return e.button;
+        } else {
+            return e.which;
+        }
+    }
+
+    // Finalize any potential action
+    const mouseUp = function(e) {
+        // Finalize all actions
+        if (typeof(controls.action) === 'function') {
+            controls.action();
+        }
+        setTimeout(function() {
+            // Remove cursor
+            if (controls.e) {
+                controls.e.style.cursor = '';
+            }
+            // Reset controls
+            controls = {};
+            // Reset state controls
+            state = {
+                x: null,
+                y: null,
+            }
+        }, 0)
+    }
+
+    const mouseMove = function(e) {
+        if (! getButton(e)) {
+            return false;
+        }
+        // Get mouse coordinates
+        let [x,y] = getCoords(e);
+
+        // Move modal
+        if (controls.type === 'move') {
+            if (state && state.x == null && state.y == null) {
+                state.x = x;
+                state.y = y;
+            }
+
+            let dx = x - state.x;
+            let dy = y - state.y;
+            let top = controls.e.offsetTop + dy;
+            let left = controls.e.offsetLeft + dx;
+
+            // Update position
+            controls.top = top;
+            controls.left = left;
+            controls.e.style.top = top + 'px';
+            controls.e.style.left = left + 'px';
+
+            state.x = x;
+            state.y = y;
+            state.top = top
+            state.left = left
+        } else if (controls.type === 'resize') {
+            let width = null;
+            let height = null;
+            let newHeight = null;
+
+            if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {
+                // Update width
+                width = controls.w + (x - controls.x);
+                controls.e.style.width = width + 'px';
+
+                // Update Height
+                if (e.shiftKey) {
+                    newHeight = (x - controls.x) * (controls.h / controls.w);
+                    height = controls.h + newHeight;
+                    controls.e.style.height = height + 'px';
+                } else {
+                    newHeight = false;
+                }
+            }
+
+            if (! newHeight) {
+                if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
+                    height = controls.h + (y - controls.y);
+                    controls.e.style.height = height + 'px';
+                }
+            }
+        }
+    }
+
+    document.addEventListener('mouseup', mouseUp);
+    document.addEventListener('mousemove', mouseMove);
+
+    // Dispatcher
+    const Dispatch = function(type, option){
+        if (typeof this[type] === 'function') {
+            this[type](this, option)
+        }
+    }
+
+    const refreshMinimized = function() {
+        let items = minimizedModals;
+        let numOfItems = items.length;
+        let width = 10;
+        let height = 10;
+        let offsetWidth = document.body.offsetWidth;
+        let offsetHeight = document.body.offsetHeight;
+        for (let i = 0; i < numOfItems; i++) {
+            let item = items[i];
+            item.el.style.left = width + 'px';
+            item.el.style.top = offsetHeight - 30 - height + 'px';
+            width += 205;
+
+            if (offsetWidth - width < 205) {
+                width = 10;
+                height += 50;
+            }
+        }
+    }
+
+    const setMini = function(self) {
+        // Minimize modals
+        minimizedModals.push(self);
+        // Refresh positions
+        refreshMinimized();
+    }
+
+    const removeMini = function(self) {
+        minimizedModals.splice(minimizedModals.indexOf(self), 1);
+        self.el.style.top = self.top + 'px';
+        self.el.style.left = self.left + 'px';
+        // Refresh positions
+        refreshMinimized();
+    }
+
+    const adjustVertical = function() {
+        let self = this;
+        let rect = self.el.getBoundingClientRect();
+        let limit = document.documentElement.clientHeight + window.scrollY - (rect.top +  rect.height);
+        if (limit < 0) {
+            return rect.top + (limit - 10);
+        } else if (rect.top < 0) {
+            return 10;
+        }
+    }
+
+    const adjustHorizontal = function() {
+        let self = this;
+        let rect = self.el.getBoundingClientRect();
+        // Make sure component will be visible on page
+        let limit = document.documentElement.clientWidth - (rect.left +  rect.width);
+        if (limit < 0) {
+            return rect.left + (limit - 10);
+        } else if (rect.left < 0) {
+            return 10;
+        }
+    }
+
+    const isTrue = function(e) {
+        return e === true || e === 1 || e === 'true';
+    }
+
+    const Modal = function (template) {
+        let self = this;
+        let backdrop = null;
+        // Make sure keep the state as boolean
+        self.closed = !!self.closed;
+
+        // Keep all modals references
+        modals.push(self);
+
+        self.back = function() {
+            sendToBack(self.el);
+        }
+        self.front = function() {
+            sendToFront(self.el);
+        }
+
+        // Onload method
+        let onload = self.onload;
+
+        // Native lemonade
+        self.onload = function() {
+            if (self.url) {
+                fetch(self.url)
+                    .then(response => response.clone().body)
+                    .then(body => {
+                        let reader = body.getReader();
+                        reader.read().then(function pump({done, value}) {
+                            const decoder = new TextDecoder();
+                            template += decoder.decode(value.buffer);
+                        });
+                    });
+            }
+
+            // Dimensions
+            if (self.width) {
+                self.el.style.width = self.width + 'px';
+            }
+            if (self.height) {
+                self.el.style.height = self.height + 'px';
+            }
+
+            // Initial centralize
+            if (! self.position) {
+                if (! self.width && self.el.offsetWidth) {
+                    self.width = self.el.offsetWidth;
+                }
+                if (! self.height && self.el.offsetHeight) {
+                    self.height = self.el.offsetHeight;
+                }
+            } else if (self.position === 'center') {
+                self.top = (window.innerHeight - self.height) / 2;
+                self.left = (window.innerWidth - self.width) / 2;
+            }
+
+            // Full screen
+            if (self.height > 300) {
+                self.el.classList.add('fullscreen');
+            }
+
+            // Responsive
+            if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
+                self.el.setAttribute('data-responsive', true);
+            }
+
+            // Backdrop
+            if (self.backdrop === true) {
+                backdrop = document.createElement('div');
+                backdrop.classList.add('lm-modal-backdrop');
+                backdrop.addEventListener('mousedown', function() {
+                    self.closed = true;
+                })
+            }
+
+            // Adjust position
+            if (isTrue(self['auto-adjust'])) {
+                let v = adjustVertical.call(self);
+                if (v) {
+                    self.top = v;
+                }
+                v = adjustHorizontal.call(self);
+                if (v) {
+                    self.left = v;
+                }
+            }
+
+            // Bring to front on focus
+            if (self.layers !== false) {
+                self.el.classList.add('lm-modal-layers');
+            }
+
+            // Focus out of the component
+            self.el.addEventListener('focusout', function(e) {
+                if (isTrue(self['auto-close'])) {
+                    if (! self.el.contains(e.relatedTarget)) {
+                        self.closed = true;
+                    }
+                }
+            });
+
+            // Close and stop propagation
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && self.closed === false) {
+                    self.closed = true;
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                }
+            });
+
+            if (typeof(onload) === 'function') {
+                Dispatch.call(self, 'onload', self);
+            }
+        }
+
+        let ignoreEvents = false;
+
+        self.onchange = function(property) {
+            if (ignoreEvents) {
+                return false;
+            }
+
+            if (property === 'closed') {
+                if (self.closed === false) {
+                    // Focus on the modal
+                    if (self.focus !== false) {
+                        self.el.focus();
+                    }
+                    // Show backdrop
+                    if (backdrop) {
+                        self.el.parentNode.insertBefore(backdrop, self.el);
+                    }
+                } else {
+                    // Hide backdrop
+                    if (backdrop) {
+                        backdrop.remove();
+                    }
+                }
+
+                // Call the vents
+                self.closed ? Dispatch.call(self,'onclose',self) : Dispatch.call(self,'onopen',self);
+            } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
+                if (self[property] !== '') {
+                    self.el.style[property] = self[property] + 'px';
+                } else {
+                    self.el.style[property] = '';
+                }
+            } else if (property === 'position') {
+                if (self.position) {
+                    if (self.position === 'center') {
+                        self.top = (window.innerHeight - self.el.offsetHeight) / 2;
+                        self.left = (window.innerWidth - self.el.offsetWidth) / 2;
+                    } else {
+                        self.top = '';
+                        self.left = '';
+                    }
+                }
+            }
+        }
+        
+        self.mousemove = function(e) {
+            if (getButton(e)) {
+                return;
+            }
+
+            // Root element of the component
+            let item = self.el;
+            // Get the position and dimensions
+            let rect = item.getBoundingClientRect();
+
+            controls.type = null;
+            controls.d = null;
+            controls.e = item;
+            controls.w = rect.width;
+            controls.h = rect.height;
+
+            // When resizable
+            if (self.resizable === true) {
+                if (rect.height - (e.clientY - rect.top) < cornerSize) {
+                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                        item.style.cursor = 'se-resize';
+                    } else {
+                        item.style.cursor = 's-resize';
+                    }
+                } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                    item.style.cursor = 'e-resize';
+                } else {
+                    item.style.cursor = '';
+                }
+
+                if (item.style.cursor) {
+                    controls.type = 'resize';
+                    controls.d = item.style.cursor;
+                } else {
+                    controls.type = null;
+                    controls.d = null;
+                }
+            }
+        }
+
+        self.mousedown = function(e) {
+            // Get mouse coordinates
+            let [x,y] = getCoords(e);
+            controls.x = x;
+            controls.y = y;
+            // Root element of the component
+            let item = self.el;
+            // Get the position and dimensions
+            let rect = item.getBoundingClientRect();
+
+            controls.e = item;
+            controls.w = rect.width;
+            controls.h = rect.height;
+
+            let corner = (y - rect.top) < 40 && rect.width - (x - rect.left) < 34;
+
+            // Check if the click in on close
+            if (isTrue(self.closable)) {
+                if (corner) {
+                    self.closed = true;
+                    if (isTrue(self.minimizable)) {
+                        removeMini(self);
+                    }
+                    return;
+                }
+
+                corner = (y - rect.top) < 40 && rect.width - (x - rect.left) < 65;
+            }
+
+            // Check if the click in on minimize
+            if (isTrue(self.minimizable)) {
+                if (corner) {
+                    // Minimize
+                    self.minimized = ! self.minimized;
+                    // Handles minimized modal positioning
+                    if (self.minimized) {
+                        if (! self.top) {
+                            self.top = self.el.offsetTop;
+                        }
+                        if (! self.left) {
+                            self.left = self.el.offsetLeft;
+                        }
+
+                        setMini(self);
+                    } else {
+                        removeMini(self);
+                    }
+
+                    return;
+                }
+            }
+
+            if (! self.minimized) {
+                // If is not minimized
+                if (controls.type === 'resize') {
+                    // Make sure the width and height is defined for the modal
+                    if (! item.style.width) {
+                        item.style.width = controls.w + 'px';
+                    }
+                    if (! item.style.height) {
+                        item.style.height = controls.h + 'px';
+                    }
+                    // This will be the callback when finalize the resize
+                    controls.action = function () {
+                        self.width = parseInt(item.style.width);
+                        self.height = parseInt(item.style.height);
+                        controls.e.classList.remove('resizing');
+                    }
+                    controls.e.classList.add('resizing');
+                } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
+                    // Action
+                    controls.type = 'move';
+                    // Callback
+                    controls.action = function () {
+                        let v = adjustVertical.call(self) || item.style.top;
+                        let h = adjustHorizontal.call(self) || item.style.left;
+                        self.top = parseInt(v);
+                        self.left = parseInt(h);
+                        controls.e.classList.remove('moving');
+                    }
+                    controls.e.classList.add('moving');
+                }
+            }
+        }
+
+        self.open = function() {
+            if (self.closed === true) {
+                self.closed = false;
+            }
+        }
+
+        self.close = function() {
+            if (self.closed === false) {
+                self.closed = true;
+            }
+        }
+
+        return `<div class="lm-modal" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
+            <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
+            <div>${template}</div>
+        </div>`
+    }
+
+    lemonade.setComponents({ Modal: Modal });
+
+    return function (root, options, template) {
+        if (typeof(root) === 'object') {
+            if (! template) {
+                template = '';
+            }
+            // Keep the DOM elements
+            let elements = [];
+            while (root.firstChild) {
+                elements.push(root.firstChild);
+                root.firstChild.remove();
+            }
+            // Create the modal
+            let e = lemonade.render(Modal, root, options, template);
+            // Append any elements inside the modal
+            if (elements.length) {
+                while (elements[0]) {
+                    e.children[1].appendChild(elements[0]);
+                    elements.shift();
+                }
+            }
+            return options;
+        } else {
+            return Modal.call(this, root);
+        }
+    }
 })));