From 1fc4f58a89a3fdd0ad0ff97bcf6fd9c137e950e6 Mon Sep 17 00:00:00 2001
From: kouts <koutsaftakis@gmail.com>
Date: Fri, 21 Dec 2018 17:38:02 +0200
Subject: [PATCH] Updated package.json, fixed minification, updated Bootstrap,
 bumped version.

---
 README.md                 |   2 +-
 demo/index.html           |   9 +-
 dist/ractive-modal.js     | 207 ++++++++++++++++++++++++++++++++++----
 dist/ractive-modal.min.js |  10 +-
 package.json              |  10 +-
 webpack.config.js         |   2 +-
 webpack.config.old.js     |  49 ---------
 7 files changed, 203 insertions(+), 86 deletions(-)
 delete mode 100644 webpack.config.old.js

diff --git a/README.md b/README.md
index 0386904..32f1fa6 100644
--- a/README.md
+++ b/README.md
@@ -26,5 +26,5 @@ In order to start development:
 
 ```sh
 npm i
-npm run dev
+npm run watch
 ```
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 3f18ab5..39b545d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,8 +8,8 @@
 
     <title>ractive-modal demo page</title>
 
-    <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
+    <!-- Bootstrap 4 CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
     <!-- Animate -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
@@ -595,6 +595,11 @@ <h5>ractive-modal comes with integrated focus management - How it works</h5>
         <div class="col-sm-12">
           <h2 class="pb-2">Changelog</h2>
 
+          <h5>version 0.3.2</h5>
+          <ul>
+            <li>Fixed build when used in module environment via import.</li>
+          </ul>
+
           <h5>version 0.3.1</h5>
           <ul>
             <li>Added opening event.</li>
diff --git a/dist/ractive-modal.js b/dist/ractive-modal.js
index 30fef0d..21d5409 100644
--- a/dist/ractive-modal.js
+++ b/dist/ractive-modal.js
@@ -7,7 +7,7 @@
 		exports["RactiveModal"] = factory(require("ractive"));
 	else
 		root["RactiveModal"] = factory(root["Ractive"]);
-})(window, function(__WEBPACK_EXTERNAL_MODULE_ractive__) {
+})(window, function(__WEBPACK_EXTERNAL_MODULE__0__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -91,33 +91,202 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = "./ractive-modal.ractive.html");
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
 /******/ })
 /************************************************************************/
-/******/ ({
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
 
-/***/ "./ractive-modal.ractive.html":
-/*!************************************!*\
-  !*** ./ractive-modal.ractive.html ***!
-  \************************************/
-/*! exports provided: default */
+/***/ }),
+/* 1 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var ractive__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ractive */ \"ractive\");\n/* harmony import */ var ractive__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ractive__WEBPACK_IMPORTED_MODULE_0__);\n\n\n\nractive__WEBPACK_IMPORTED_MODULE_0___default.a.sharedSet({'rm.animating': undefined, 'rm.delay': 0});\n/* harmony default export */ __webpack_exports__[\"default\"] = (ractive__WEBPACK_IMPORTED_MODULE_0___default.a.extend({\n    template: {v:4,t:[{t:4,f:[{t:7,e:\"div\",m:[{n:\"class\",f:[\"rm-backdrop \",{t:2,r:\"bg_class\"},\" \",{t:2,r:\"base_anim_class\"},\" \",{t:2,r:\"bg_anim_class\"},\" backdrop-\",{t:2,r:\"modal_id\"}],t:13},{n:\"style\",f:[\"z-index: \",{t:2,x:{r:[\"zindex\"],s:\"_0-1\"}},\";\"],t:13}]}],n:50,r:\"showbackdrop\"},{t:4,f:[{t:7,e:\"div\",m:[{n:\"class\",f:[\"rm-wrapper \",{t:2,r:\"base_anim_class\"},\" \",{t:2,r:\"anim_class\"},\" \",{t:2,r:\"modal_id\"}],t:13},{n:\"role\",f:\"dialog\",t:13,g:1},{n:\"aria-label\",f:[{t:2,r:\"title\"}],t:13},{n:\"tabindex\",f:\"0\",t:13,g:1},{n:\"style\",f:[\"opacity: \",{t:2,r:\"opacity\"},\"; display: \",{t:2,r:\"display\"},\"; z-index: \",{t:2,r:\"zindex\"},\"; cursor: \",{t:2,x:{r:[\"enableclose\"],s:\"_0?\\\"pointer\\\":\\\"default\\\"\"}}],t:13},{n:[\"click\"],t:70,f:\"clickoutside\"},{n:[\"keydown\"],t:70,f:\"keydown\"}],f:[{t:7,e:\"div\",m:[{n:\"class\",f:[\"rm \",{t:2,r:\"class\"}],t:13},{n:\"style\",f:[{t:2,r:\"style\"}],t:13}],f:[{t:4,f:[{t:7,e:\"div\",m:[{t:13,n:\"class\",f:\"rm-titlebar\",g:1}],f:[{t:7,e:\"h3\",m:[{t:13,n:\"class\",f:\"rm-title\",g:1}],f:[{t:2,r:\"title\"}]},\" \",{t:4,f:[{t:7,e:\"button\",m:[{t:13,n:\"class\",f:\"rm-btn-close\",g:1},{n:\"type\",f:\"button\",t:13,g:1},{n:[\"click\"],t:70,f:\"close\"}],f:[\"×\"]}],n:50,r:\"enableclose\"}]}],n:50,x:{r:[\"title\",\"enableclose\"],s:\"_0||_1\"}},\" \",{t:7,e:\"div\",m:[{t:13,n:\"class\",f:\"rm-content\",g:1}],f:[{t:16}]}]}]}],n:50,r:\"showmodal\"}],e:{\"_0-1\":function (_0){return(_0-1);},\"_0?\\\"pointer\\\":\\\"default\\\"\":function (_0){return(_0?\"pointer\":\"default\");},\"_0||_1\":function (_0,_1){return(_0||_1);}}},\n    css: \" .rm-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);} .rm-wrapper {position: fixed; text-align: center; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; display: none; outline: 0;} .rm {position: relative; display: inline-block; width:100%; text-align: left; color: #333333; background-color: #fff; top:30px; cursor: default; min-width: 110px; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);} .rm-titlebar {padding:15px; color: #333; overflow: auto; border-bottom: 1px solid #e5e5e5;} .rm-title {margin-top:2px; margin-bottom: 0px; display: inline-block; font-size:1.25rem;} .rm-btn-close {padding: 0px 4px 0px 4px; cursor: pointer; background: 0 0; border: 0; font-weight:700; float: right; font-size: 1.5rem; line-height: 1; margin-right: -5px; color:#ccc;} .rm-btn-close:hover, .rm-btn-close:focus:hover{color:#6f6f6f; border-color: transparent; background-color: transparent;} .rm-btn-close:focus {color:#939393; border-color: transparent; background-color: transparent;} .rm-content {padding:15px 15px 15px 15px;} .rm-content .full-hr {width: auto; border: 0; border-top: 1px solid #e0e0e0; margin-top:15px; margin-bottom:15px; margin-left:-14px; margin-right:-14px;} .rm-fadeIn {-webkit-animation-name: rm-fadeIn; animation-name: rm-fadeIn;} @-webkit-keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} @keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} .rm-fadeOut {-webkit-animation-name: rm-fadeOut; animation-name: rm-fadeOut;} @-webkit-keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} @keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} .rm-fadeIn, .rm-fadeOut {-webkit-animation-duration: .25s; animation-duration: .25s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}\",\n    data: function() {\n        return {\n            showmodal: false,\n            showbackdrop: false,\n            basedon: false,\n            live: false,\n            appendto: '',\n            class: '',\n            bg_class: '',\n            base_anim_class: '',\n            anim_class: '',\n            bg_anim_class: '',\n            bg_in_class: 'rm-fadeIn',\n            bg_out_class: 'rm-fadeOut',\n            in_class: 'rm-fadeIn',\n            out_class: 'rm-fadeOut',\n            style: '',\n            title: '',\n            modal_id: this._guid + '_rm',\n            enableclose: true,\n            base_zindex: 1051,\n            opacity: 0,\n            display: 'none',\n            zindex: 0\n        }\n    },\n    delegate: false,\n    elToFocus: null,\n    on: {\n        close: function(ctx){\n            ctx.original.preventDefault();\n            if(this.get('enableclose')){\n                this.set('basedon', false);\n            }\n        },\n        clickoutside: function(ctx){\n            if(ctx.original.target === ctx.node){\n                this.fire('close', ctx);\n            }\n        },\n        keydown: function(ctx){\n            var e = ctx.original;\n            if(e.which === 27){\n                this.fire('close', ctx);\n            }\n            if(e.which === 9){\n                // Get only visible elements\n                var all = this.findAll('input, select, textarea, button, a').filter(function(el){\n                    return !!( el.offsetWidth || el.offsetHeight || el.getClientRects().length );\n                });\n                if(e.shiftKey){\n                    if(e.target === all[0] || e.target === this.find('.rm-wrapper')){\n                        e.preventDefault();\n                        all[all.length-1].focus();\n                    }\n                }else{\n                    if(e.target === all[all.length-1]){\n                        e.preventDefault();\n                        all[0].focus();\n                    }\n                }\n            }\n        }\n    },\n    onconfig: function(){\n        if(this.get('live')){\n            this.set('showmodal', true);\n        }\n    },\n    onrender: function(){\n        var modal_id = this.get('modal_id');\n        this.observe_basedon = this.observe('basedon', function(newValue, oldValue, keypath){\n            var live = this.get('live');\n            if(newValue === true){\n                if(document.querySelector('.'+modal_id) && document.querySelector('.'+modal_id).style.display === 'block'){\n                    return;\n                }\n                this.elToFocus = document.activeElement;\n                this.fire('beforeOpen');\n                var lastZindex = this.getTopZindex();\n                var zindex = (lastZindex === 0) ? this.get('base_zindex') : lastZindex+2;\n                if(!live){\n                    this.set('showmodal', true);\n                }\n                this.insert(this.get('appendto') ? document.querySelector(this.get('appendto')) : this.root.el);\n                this.set({'display': 'block', 'zindex': zindex});\n                this.fire('opening');\n                this.animateModal('in').then(function(){\n                    this.find('[autofocus]') ? this.find('[autofocus]').focus() : this.find('.rm-wrapper').focus();\n                    this.fire('afterOpen');\n                }.bind(this));\n            }else{\n                if(!document.querySelector('.'+modal_id) || document.querySelector('.'+modal_id).style.display !== 'block'){\n                    return;\n                }\n                this.fire('beforeClose');\n                this.animateModal('out').then(function(){\n                    this.set({'display': 'none', 'zindex': 0});\n                    if(!live){\n                        this.set('showmodal', false);\n                    }\n                    this.fire('afterClose');\n                    var lastZindex = this.getTopZindex();\n                    if(lastZindex > 0){\n                        var all = document.querySelectorAll('.rm-wrapper');\n                        for (var i = 0; i < all.length; i++) {\n                            if(all[i].style.zIndex == lastZindex){\n                                var r = ractive__WEBPACK_IMPORTED_MODULE_0___default.a.getContext(all[i]).ractive;\n                                if(r.find('.rm-wrapper').contains(this.elToFocus)){\n                                    this.elToFocus.focus();\n                                }else{\n                                    r.find('[autofocus]') ? r.find('[autofocus]').focus() : r.find('.rm-wrapper').focus();\n                                }\n                                break;\n                            }\n                        };\n                    }else{\n                        if(document.body.contains(this.elToFocus)){\n                            this.elToFocus.focus();\n                        }\n                    }\n                }.bind(this));\n            }\n        }, {\n            defer: true\n        });\n    },\n    onunrender: function(){\n        this.observe_basedon.cancel();\n    },\n    animateModal: function(dir){\n        return new Promise(function(resolve, reject){\n            var handler = function(e) {\n                this.find('.rm-wrapper').removeEventListener('animationend', handler);\n                this.set({\n                    'anim_class': '',\n                    'bg_anim_class': '',\n                    '@shared.rm.animating': undefined,\n                    '@shared.rm.delay': 0\n                });\n                if(dir == 'out'){\n                    this.set({showbackdrop: false, opacity: 0});\n                }\n                resolve();\n            }.bind(this);\n            this.find('.rm-wrapper').addEventListener('animationend', handler);\n            if(typeof this.get('@shared.rm.animating') === 'object'){\n                this.set('@shared.rm.delay', this.get('@shared.rm.delay') + this.getAnimationDuration(this.get('@shared.rm.animating').find('.rm-wrapper')) + 100);\n            }\n            this.set('@shared.rm.animating', this);\n            setTimeout(function(){\n                if(dir == 'in'){\n                    this.set({showbackdrop: true, opacity: 1});\n                }\n                this.set({'anim_class': this.get(dir+'_class'), 'bg_anim_class': this.get('bg_'+dir+'_class')});\n            }.bind(this), this.get('@shared.rm.delay'));\n        }.bind(this));\n    },\n    getTopZindex: function(){\n        var toret = 0;\n        var all = document.querySelectorAll('.rm-wrapper');\n        for (var i = 0; i < all.length; i++) {\n            toret = parseInt(all[i].style.zIndex) > toret ? parseInt(all[i].style.zIndex) : toret;\n        };\n        return toret;\n    },\n    getAnimationDuration: function(el){\n        var duration = window.getComputedStyle(el, null)['animation-duration'];\n        return (duration.indexOf('ms') !== -1) ? parseFloat(duration.replace('ms', '')) : parseFloat(duration.replace('s', '')) * 1000;\n    }\n}));\n\n//# sourceURL=webpack://RactiveModal/./ractive-modal.ractive.html?");
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var ractive__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var ractive__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ractive__WEBPACK_IMPORTED_MODULE_0__);
 
-/***/ }),
 
-/***/ "ractive":
-/*!**********************************************************************************************!*\
-  !*** external {"commonjs":"ractive","commonjs2":"ractive","amd":"ractive","root":"Ractive"} ***!
-  \**********************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
 
-eval("module.exports = __WEBPACK_EXTERNAL_MODULE_ractive__;\n\n//# sourceURL=webpack://RactiveModal/external_%7B%22commonjs%22:%22ractive%22,%22commonjs2%22:%22ractive%22,%22amd%22:%22ractive%22,%22root%22:%22Ractive%22%7D?");
+ractive__WEBPACK_IMPORTED_MODULE_0___default.a.sharedSet({'rm.animating': undefined, 'rm.delay': 0});
+/* harmony default export */ __webpack_exports__["default"] = (ractive__WEBPACK_IMPORTED_MODULE_0___default.a.extend({
+    template: {v:4,t:[{t:4,f:[{t:7,e:"div",m:[{n:"class",f:["rm-backdrop ",{t:2,r:"bg_class"}," ",{t:2,r:"base_anim_class"}," ",{t:2,r:"bg_anim_class"}," backdrop-",{t:2,r:"modal_id"}],t:13},{n:"style",f:["z-index: ",{t:2,x:{r:["zindex"],s:"_0-1"}},";"],t:13}]}],n:50,r:"showbackdrop"},{t:4,f:[{t:7,e:"div",m:[{n:"class",f:["rm-wrapper ",{t:2,r:"base_anim_class"}," ",{t:2,r:"anim_class"}," ",{t:2,r:"modal_id"}],t:13},{n:"role",f:"dialog",t:13,g:1},{n:"aria-label",f:[{t:2,r:"title"}],t:13},{n:"tabindex",f:"0",t:13,g:1},{n:"style",f:["opacity: ",{t:2,r:"opacity"},"; display: ",{t:2,r:"display"},"; z-index: ",{t:2,r:"zindex"},"; cursor: ",{t:2,x:{r:["enableclose"],s:"_0?\"pointer\":\"default\""}}],t:13},{n:["click"],t:70,f:"clickoutside"},{n:["keydown"],t:70,f:"keydown"}],f:[{t:7,e:"div",m:[{n:"class",f:["rm ",{t:2,r:"class"}],t:13},{n:"style",f:[{t:2,r:"style"}],t:13}],f:[{t:4,f:[{t:7,e:"div",m:[{t:13,n:"class",f:"rm-titlebar",g:1}],f:[{t:7,e:"h3",m:[{t:13,n:"class",f:"rm-title",g:1}],f:[{t:2,r:"title"}]}," ",{t:4,f:[{t:7,e:"button",m:[{t:13,n:"class",f:"rm-btn-close",g:1},{n:"type",f:"button",t:13,g:1},{n:["click"],t:70,f:"close"}],f:["×"]}],n:50,r:"enableclose"}]}],n:50,x:{r:["title","enableclose"],s:"_0||_1"}}," ",{t:7,e:"div",m:[{t:13,n:"class",f:"rm-content",g:1}],f:[{t:16}]}]}]}],n:50,r:"showmodal"}],e:{"_0-1":function (_0){return(_0-1);},"_0?\"pointer\":\"default\"":function (_0){return(_0?"pointer":"default");},"_0||_1":function (_0,_1){return(_0||_1);}}},
+    css: " .rm-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);} .rm-wrapper {position: fixed; text-align: center; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; display: none; outline: 0;} .rm {position: relative; display: inline-block; width:100%; text-align: left; color: #333333; background-color: #fff; top:30px; cursor: default; min-width: 110px; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);} .rm-titlebar {padding:15px; color: #333; overflow: auto; border-bottom: 1px solid #e5e5e5;} .rm-title {margin-top:2px; margin-bottom: 0px; display: inline-block; font-size:1.25rem;} .rm-btn-close {padding: 0px 4px 0px 4px; cursor: pointer; background: 0 0; border: 0; font-weight:700; float: right; font-size: 1.5rem; line-height: 1; margin-right: -5px; color:#ccc;} .rm-btn-close:hover, .rm-btn-close:focus:hover{color:#6f6f6f; border-color: transparent; background-color: transparent;} .rm-btn-close:focus {color:#939393; border-color: transparent; background-color: transparent;} .rm-content {padding:15px 15px 15px 15px;} .rm-content .full-hr {width: auto; border: 0; border-top: 1px solid #e0e0e0; margin-top:15px; margin-bottom:15px; margin-left:-14px; margin-right:-14px;} .rm-fadeIn {-webkit-animation-name: rm-fadeIn; animation-name: rm-fadeIn;} @-webkit-keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} @keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} .rm-fadeOut {-webkit-animation-name: rm-fadeOut; animation-name: rm-fadeOut;} @-webkit-keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} @keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} .rm-fadeIn, .rm-fadeOut {-webkit-animation-duration: .25s; animation-duration: .25s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}",
+    data: function() {
+        return {
+            showmodal: false,
+            showbackdrop: false,
+            basedon: false,
+            live: false,
+            appendto: '',
+            class: '',
+            bg_class: '',
+            base_anim_class: '',
+            anim_class: '',
+            bg_anim_class: '',
+            bg_in_class: 'rm-fadeIn',
+            bg_out_class: 'rm-fadeOut',
+            in_class: 'rm-fadeIn',
+            out_class: 'rm-fadeOut',
+            style: '',
+            title: '',
+            modal_id: this._guid + '_rm',
+            enableclose: true,
+            base_zindex: 1051,
+            opacity: 0,
+            display: 'none',
+            zindex: 0
+        }
+    },
+    delegate: false,
+    elToFocus: null,
+    on: {
+        close: function(ctx){
+            ctx.original.preventDefault();
+            if(this.get('enableclose')){
+                this.set('basedon', false);
+            }
+        },
+        clickoutside: function(ctx){
+            if(ctx.original.target === ctx.node){
+                this.fire('close', ctx);
+            }
+        },
+        keydown: function(ctx){
+            var e = ctx.original;
+            if(e.which === 27){
+                this.fire('close', ctx);
+            }
+            if(e.which === 9){
+                // Get only visible elements
+                var all = this.findAll('input, select, textarea, button, a').filter(function(el){
+                    return !!( el.offsetWidth || el.offsetHeight || el.getClientRects().length );
+                });
+                if(e.shiftKey){
+                    if(e.target === all[0] || e.target === this.find('.rm-wrapper')){
+                        e.preventDefault();
+                        all[all.length-1].focus();
+                    }
+                }else{
+                    if(e.target === all[all.length-1]){
+                        e.preventDefault();
+                        all[0].focus();
+                    }
+                }
+            }
+        }
+    },
+    onconfig: function(){
+        if(this.get('live')){
+            this.set('showmodal', true);
+        }
+    },
+    onrender: function(){
+        var modal_id = this.get('modal_id');
+        this.observe_basedon = this.observe('basedon', function(newValue, oldValue, keypath){
+            var live = this.get('live');
+            if(newValue === true){
+                if(document.querySelector('.'+modal_id) && document.querySelector('.'+modal_id).style.display === 'block'){
+                    return;
+                }
+                this.elToFocus = document.activeElement;
+                this.fire('beforeOpen');
+                var lastZindex = this.getTopZindex();
+                var zindex = (lastZindex === 0) ? this.get('base_zindex') : lastZindex+2;
+                if(!live){
+                    this.set('showmodal', true);
+                }
+                this.insert(this.get('appendto') ? document.querySelector(this.get('appendto')) : this.root.el);
+                this.set({'display': 'block', 'zindex': zindex});
+                this.fire('opening');
+                this.animateModal('in').then(function(){
+                    this.find('[autofocus]') ? this.find('[autofocus]').focus() : this.find('.rm-wrapper').focus();
+                    this.fire('afterOpen');
+                }.bind(this));
+            }else{
+                if(!document.querySelector('.'+modal_id) || document.querySelector('.'+modal_id).style.display !== 'block'){
+                    return;
+                }
+                this.fire('beforeClose');
+                this.animateModal('out').then(function(){
+                    this.set({'display': 'none', 'zindex': 0});
+                    if(!live){
+                        this.set('showmodal', false);
+                    }
+                    this.fire('afterClose');
+                    var lastZindex = this.getTopZindex();
+                    if(lastZindex > 0){
+                        var all = document.querySelectorAll('.rm-wrapper');
+                        for (var i = 0; i < all.length; i++) {
+                            if(all[i].style.zIndex == lastZindex){
+                                var r = ractive__WEBPACK_IMPORTED_MODULE_0___default.a.getContext(all[i]).ractive;
+                                if(r.find('.rm-wrapper').contains(this.elToFocus)){
+                                    this.elToFocus.focus();
+                                }else{
+                                    r.find('[autofocus]') ? r.find('[autofocus]').focus() : r.find('.rm-wrapper').focus();
+                                }
+                                break;
+                            }
+                        };
+                    }else{
+                        if(document.body.contains(this.elToFocus)){
+                            this.elToFocus.focus();
+                        }
+                    }
+                }.bind(this));
+            }
+        }, {
+            defer: true
+        });
+    },
+    onunrender: function(){
+        this.observe_basedon.cancel();
+    },
+    animateModal: function(dir){
+        return new Promise(function(resolve, reject){
+            var handler = function(e) {
+                this.find('.rm-wrapper').removeEventListener('animationend', handler);
+                this.set({
+                    'anim_class': '',
+                    'bg_anim_class': '',
+                    '@shared.rm.animating': undefined,
+                    '@shared.rm.delay': 0
+                });
+                if(dir == 'out'){
+                    this.set({showbackdrop: false, opacity: 0});
+                }
+                resolve();
+            }.bind(this);
+            this.find('.rm-wrapper').addEventListener('animationend', handler);
+            if(typeof this.get('@shared.rm.animating') === 'object'){
+                this.set('@shared.rm.delay', this.get('@shared.rm.delay') + this.getAnimationDuration(this.get('@shared.rm.animating').find('.rm-wrapper')) + 100);
+            }
+            this.set('@shared.rm.animating', this);
+            setTimeout(function(){
+                if(dir == 'in'){
+                    this.set({showbackdrop: true, opacity: 1});
+                }
+                this.set({'anim_class': this.get(dir+'_class'), 'bg_anim_class': this.get('bg_'+dir+'_class')});
+            }.bind(this), this.get('@shared.rm.delay'));
+        }.bind(this));
+    },
+    getTopZindex: function(){
+        var toret = 0;
+        var all = document.querySelectorAll('.rm-wrapper');
+        for (var i = 0; i < all.length; i++) {
+            toret = parseInt(all[i].style.zIndex) > toret ? parseInt(all[i].style.zIndex) : toret;
+        };
+        return toret;
+    },
+    getAnimationDuration: function(el){
+        var duration = window.getComputedStyle(el, null)['animation-duration'];
+        return (duration.indexOf('ms') !== -1) ? parseFloat(duration.replace('ms', '')) : parseFloat(duration.replace('s', '')) * 1000;
+    }
+}));
 
 /***/ })
-
-/******/ })["default"];
+/******/ ])["default"];
 });
\ No newline at end of file
diff --git a/dist/ractive-modal.min.js b/dist/ractive-modal.min.js
index 497a660..076c998 100644
--- a/dist/ractive-modal.min.js
+++ b/dist/ractive-modal.min.js
@@ -1,9 +1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("ractive")):"function"==typeof define&&define.amd?define(["ractive"],n):"object"==typeof exports?exports.RactiveModal=n(require("ractive")):e.RactiveModal=n(e.Ractive)}(window,function(__WEBPACK_EXTERNAL_MODULE_ractive__){return function(t){var i={};function r(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=t,r.c=i,r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(n,e){if(1&e&&(n=r(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var i in n)r.d(t,i,function(e){return n[e]}.bind(null,i));return t},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.p="",r(r.s="./ractive-modal.ractive.html")}({"./ractive-modal.ractive.html":
-/*!************************************!*\
-  !*** ./ractive-modal.ractive.html ***!
-  \************************************/
-/*! exports provided: default */function(module,__webpack_exports__,__webpack_require__){"use strict";eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var ractive__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ractive */ \"ractive\");\n/* harmony import */ var ractive__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ractive__WEBPACK_IMPORTED_MODULE_0__);\n\n\n\nractive__WEBPACK_IMPORTED_MODULE_0___default.a.sharedSet({'rm.animating': undefined, 'rm.delay': 0});\n/* harmony default export */ __webpack_exports__[\"default\"] = (ractive__WEBPACK_IMPORTED_MODULE_0___default.a.extend({\n    template: {v:4,t:[{t:4,f:[{t:7,e:\"div\",m:[{n:\"class\",f:[\"rm-backdrop \",{t:2,r:\"bg_class\"},\" \",{t:2,r:\"base_anim_class\"},\" \",{t:2,r:\"bg_anim_class\"},\" backdrop-\",{t:2,r:\"modal_id\"}],t:13},{n:\"style\",f:[\"z-index: \",{t:2,x:{r:[\"zindex\"],s:\"_0-1\"}},\";\"],t:13}]}],n:50,r:\"showbackdrop\"},{t:4,f:[{t:7,e:\"div\",m:[{n:\"class\",f:[\"rm-wrapper \",{t:2,r:\"base_anim_class\"},\" \",{t:2,r:\"anim_class\"},\" \",{t:2,r:\"modal_id\"}],t:13},{n:\"role\",f:\"dialog\",t:13,g:1},{n:\"aria-label\",f:[{t:2,r:\"title\"}],t:13},{n:\"tabindex\",f:\"0\",t:13,g:1},{n:\"style\",f:[\"opacity: \",{t:2,r:\"opacity\"},\"; display: \",{t:2,r:\"display\"},\"; z-index: \",{t:2,r:\"zindex\"},\"; cursor: \",{t:2,x:{r:[\"enableclose\"],s:\"_0?\\\"pointer\\\":\\\"default\\\"\"}}],t:13},{n:[\"click\"],t:70,f:\"clickoutside\"},{n:[\"keydown\"],t:70,f:\"keydown\"}],f:[{t:7,e:\"div\",m:[{n:\"class\",f:[\"rm \",{t:2,r:\"class\"}],t:13},{n:\"style\",f:[{t:2,r:\"style\"}],t:13}],f:[{t:4,f:[{t:7,e:\"div\",m:[{t:13,n:\"class\",f:\"rm-titlebar\",g:1}],f:[{t:7,e:\"h3\",m:[{t:13,n:\"class\",f:\"rm-title\",g:1}],f:[{t:2,r:\"title\"}]},\" \",{t:4,f:[{t:7,e:\"button\",m:[{t:13,n:\"class\",f:\"rm-btn-close\",g:1},{n:\"type\",f:\"button\",t:13,g:1},{n:[\"click\"],t:70,f:\"close\"}],f:[\"×\"]}],n:50,r:\"enableclose\"}]}],n:50,x:{r:[\"title\",\"enableclose\"],s:\"_0||_1\"}},\" \",{t:7,e:\"div\",m:[{t:13,n:\"class\",f:\"rm-content\",g:1}],f:[{t:16}]}]}]}],n:50,r:\"showmodal\"}],e:{\"_0-1\":function (_0){return(_0-1);},\"_0?\\\"pointer\\\":\\\"default\\\"\":function (_0){return(_0?\"pointer\":\"default\");},\"_0||_1\":function (_0,_1){return(_0||_1);}}},\n    css: \" .rm-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);} .rm-wrapper {position: fixed; text-align: center; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; display: none; outline: 0;} .rm {position: relative; display: inline-block; width:100%; text-align: left; color: #333333; background-color: #fff; top:30px; cursor: default; min-width: 110px; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);} .rm-titlebar {padding:15px; color: #333; overflow: auto; border-bottom: 1px solid #e5e5e5;} .rm-title {margin-top:2px; margin-bottom: 0px; display: inline-block; font-size:1.25rem;} .rm-btn-close {padding: 0px 4px 0px 4px; cursor: pointer; background: 0 0; border: 0; font-weight:700; float: right; font-size: 1.5rem; line-height: 1; margin-right: -5px; color:#ccc;} .rm-btn-close:hover, .rm-btn-close:focus:hover{color:#6f6f6f; border-color: transparent; background-color: transparent;} .rm-btn-close:focus {color:#939393; border-color: transparent; background-color: transparent;} .rm-content {padding:15px 15px 15px 15px;} .rm-content .full-hr {width: auto; border: 0; border-top: 1px solid #e0e0e0; margin-top:15px; margin-bottom:15px; margin-left:-14px; margin-right:-14px;} .rm-fadeIn {-webkit-animation-name: rm-fadeIn; animation-name: rm-fadeIn;} @-webkit-keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} @keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} .rm-fadeOut {-webkit-animation-name: rm-fadeOut; animation-name: rm-fadeOut;} @-webkit-keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} @keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} .rm-fadeIn, .rm-fadeOut {-webkit-animation-duration: .25s; animation-duration: .25s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}\",\n    data: function() {\n        return {\n            showmodal: false,\n            showbackdrop: false,\n            basedon: false,\n            live: false,\n            appendto: '',\n            class: '',\n            bg_class: '',\n            base_anim_class: '',\n            anim_class: '',\n            bg_anim_class: '',\n            bg_in_class: 'rm-fadeIn',\n            bg_out_class: 'rm-fadeOut',\n            in_class: 'rm-fadeIn',\n            out_class: 'rm-fadeOut',\n            style: '',\n            title: '',\n            modal_id: this._guid + '_rm',\n            enableclose: true,\n            base_zindex: 1051,\n            opacity: 0,\n            display: 'none',\n            zindex: 0\n        }\n    },\n    delegate: false,\n    elToFocus: null,\n    on: {\n        close: function(ctx){\n            ctx.original.preventDefault();\n            if(this.get('enableclose')){\n                this.set('basedon', false);\n            }\n        },\n        clickoutside: function(ctx){\n            if(ctx.original.target === ctx.node){\n                this.fire('close', ctx);\n            }\n        },\n        keydown: function(ctx){\n            var e = ctx.original;\n            if(e.which === 27){\n                this.fire('close', ctx);\n            }\n            if(e.which === 9){\n                // Get only visible elements\n                var all = this.findAll('input, select, textarea, button, a').filter(function(el){\n                    return !!( el.offsetWidth || el.offsetHeight || el.getClientRects().length );\n                });\n                if(e.shiftKey){\n                    if(e.target === all[0] || e.target === this.find('.rm-wrapper')){\n                        e.preventDefault();\n                        all[all.length-1].focus();\n                    }\n                }else{\n                    if(e.target === all[all.length-1]){\n                        e.preventDefault();\n                        all[0].focus();\n                    }\n                }\n            }\n        }\n    },\n    onconfig: function(){\n        if(this.get('live')){\n            this.set('showmodal', true);\n        }\n    },\n    onrender: function(){\n        var modal_id = this.get('modal_id');\n        this.observe_basedon = this.observe('basedon', function(newValue, oldValue, keypath){\n            var live = this.get('live');\n            if(newValue === true){\n                if(document.querySelector('.'+modal_id) && document.querySelector('.'+modal_id).style.display === 'block'){\n                    return;\n                }\n                this.elToFocus = document.activeElement;\n                this.fire('beforeOpen');\n                var lastZindex = this.getTopZindex();\n                var zindex = (lastZindex === 0) ? this.get('base_zindex') : lastZindex+2;\n                if(!live){\n                    this.set('showmodal', true);\n                }\n                this.insert(this.get('appendto') ? document.querySelector(this.get('appendto')) : this.root.el);\n                this.set({'display': 'block', 'zindex': zindex});\n                this.fire('opening');\n                this.animateModal('in').then(function(){\n                    this.find('[autofocus]') ? this.find('[autofocus]').focus() : this.find('.rm-wrapper').focus();\n                    this.fire('afterOpen');\n                }.bind(this));\n            }else{\n                if(!document.querySelector('.'+modal_id) || document.querySelector('.'+modal_id).style.display !== 'block'){\n                    return;\n                }\n                this.fire('beforeClose');\n                this.animateModal('out').then(function(){\n                    this.set({'display': 'none', 'zindex': 0});\n                    if(!live){\n                        this.set('showmodal', false);\n                    }\n                    this.fire('afterClose');\n                    var lastZindex = this.getTopZindex();\n                    if(lastZindex > 0){\n                        var all = document.querySelectorAll('.rm-wrapper');\n                        for (var i = 0; i < all.length; i++) {\n                            if(all[i].style.zIndex == lastZindex){\n                                var r = ractive__WEBPACK_IMPORTED_MODULE_0___default.a.getContext(all[i]).ractive;\n                                if(r.find('.rm-wrapper').contains(this.elToFocus)){\n                                    this.elToFocus.focus();\n                                }else{\n                                    r.find('[autofocus]') ? r.find('[autofocus]').focus() : r.find('.rm-wrapper').focus();\n                                }\n                                break;\n                            }\n                        };\n                    }else{\n                        if(document.body.contains(this.elToFocus)){\n                            this.elToFocus.focus();\n                        }\n                    }\n                }.bind(this));\n            }\n        }, {\n            defer: true\n        });\n    },\n    onunrender: function(){\n        this.observe_basedon.cancel();\n    },\n    animateModal: function(dir){\n        return new Promise(function(resolve, reject){\n            var handler = function(e) {\n                this.find('.rm-wrapper').removeEventListener('animationend', handler);\n                this.set({\n                    'anim_class': '',\n                    'bg_anim_class': '',\n                    '@shared.rm.animating': undefined,\n                    '@shared.rm.delay': 0\n                });\n                if(dir == 'out'){\n                    this.set({showbackdrop: false, opacity: 0});\n                }\n                resolve();\n            }.bind(this);\n            this.find('.rm-wrapper').addEventListener('animationend', handler);\n            if(typeof this.get('@shared.rm.animating') === 'object'){\n                this.set('@shared.rm.delay', this.get('@shared.rm.delay') + this.getAnimationDuration(this.get('@shared.rm.animating').find('.rm-wrapper')) + 100);\n            }\n            this.set('@shared.rm.animating', this);\n            setTimeout(function(){\n                if(dir == 'in'){\n                    this.set({showbackdrop: true, opacity: 1});\n                }\n                this.set({'anim_class': this.get(dir+'_class'), 'bg_anim_class': this.get('bg_'+dir+'_class')});\n            }.bind(this), this.get('@shared.rm.delay'));\n        }.bind(this));\n    },\n    getTopZindex: function(){\n        var toret = 0;\n        var all = document.querySelectorAll('.rm-wrapper');\n        for (var i = 0; i < all.length; i++) {\n            toret = parseInt(all[i].style.zIndex) > toret ? parseInt(all[i].style.zIndex) : toret;\n        };\n        return toret;\n    },\n    getAnimationDuration: function(el){\n        var duration = window.getComputedStyle(el, null)['animation-duration'];\n        return (duration.indexOf('ms') !== -1) ? parseFloat(duration.replace('ms', '')) : parseFloat(duration.replace('s', '')) * 1000;\n    }\n}));\n\n//# sourceURL=webpack://RactiveModal/./ractive-modal.ractive.html?")},ractive:
-/*!**********************************************************************************************!*\
-  !*** external {"commonjs":"ractive","commonjs2":"ractive","amd":"ractive","root":"Ractive"} ***!
-  \**********************************************************************************************/
-/*! no static exports found */function(module,exports){eval("module.exports = __WEBPACK_EXTERNAL_MODULE_ractive__;\n\n//# sourceURL=webpack://RactiveModal/external_%7B%22commonjs%22:%22ractive%22,%22commonjs2%22:%22ractive%22,%22amd%22:%22ractive%22,%22root%22:%22Ractive%22%7D?")}}).default});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("ractive")):"function"==typeof define&&define.amd?define(["ractive"],e):"object"==typeof exports?exports.RactiveModal=e(require("ractive")):t.RactiveModal=e(t.Ractive)}(window,function(n){return function(n){var i={};function o(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}return o.m=n,o.c=i,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=1)}([function(t,e){t.exports=n},function(t,e,n){"use strict";n.r(e);var i=n(0),s=n.n(i);s.a.sharedSet({"rm.animating":void 0,"rm.delay":0}),e.default=s.a.extend({template:{v:4,t:[{t:4,f:[{t:7,e:"div",m:[{n:"class",f:["rm-backdrop ",{t:2,r:"bg_class"}," ",{t:2,r:"base_anim_class"}," ",{t:2,r:"bg_anim_class"}," backdrop-",{t:2,r:"modal_id"}],t:13},{n:"style",f:["z-index: ",{t:2,x:{r:["zindex"],s:"_0-1"}},";"],t:13}]}],n:50,r:"showbackdrop"},{t:4,f:[{t:7,e:"div",m:[{n:"class",f:["rm-wrapper ",{t:2,r:"base_anim_class"}," ",{t:2,r:"anim_class"}," ",{t:2,r:"modal_id"}],t:13},{n:"role",f:"dialog",t:13,g:1},{n:"aria-label",f:[{t:2,r:"title"}],t:13},{n:"tabindex",f:"0",t:13,g:1},{n:"style",f:["opacity: ",{t:2,r:"opacity"},"; display: ",{t:2,r:"display"},"; z-index: ",{t:2,r:"zindex"},"; cursor: ",{t:2,x:{r:["enableclose"],s:'_0?"pointer":"default"'}}],t:13},{n:["click"],t:70,f:"clickoutside"},{n:["keydown"],t:70,f:"keydown"}],f:[{t:7,e:"div",m:[{n:"class",f:["rm ",{t:2,r:"class"}],t:13},{n:"style",f:[{t:2,r:"style"}],t:13}],f:[{t:4,f:[{t:7,e:"div",m:[{t:13,n:"class",f:"rm-titlebar",g:1}],f:[{t:7,e:"h3",m:[{t:13,n:"class",f:"rm-title",g:1}],f:[{t:2,r:"title"}]}," ",{t:4,f:[{t:7,e:"button",m:[{t:13,n:"class",f:"rm-btn-close",g:1},{n:"type",f:"button",t:13,g:1},{n:["click"],t:70,f:"close"}],f:["×"]}],n:50,r:"enableclose"}]}],n:50,x:{r:["title","enableclose"],s:"_0||_1"}}," ",{t:7,e:"div",m:[{t:13,n:"class",f:"rm-content",g:1}],f:[{t:16}]}]}]}],n:50,r:"showmodal"}],e:{"_0-1":function(t){return t-1},'_0?"pointer":"default"':function(t){return t?"pointer":"default"},"_0||_1":function(t,e){return t||e}}},css:" .rm-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);} .rm-wrapper {position: fixed; text-align: center; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; display: none; outline: 0;} .rm {position: relative; display: inline-block; width:100%; text-align: left; color: #333333; background-color: #fff; top:30px; cursor: default; min-width: 110px; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);} .rm-titlebar {padding:15px; color: #333; overflow: auto; border-bottom: 1px solid #e5e5e5;} .rm-title {margin-top:2px; margin-bottom: 0px; display: inline-block; font-size:1.25rem;} .rm-btn-close {padding: 0px 4px 0px 4px; cursor: pointer; background: 0 0; border: 0; font-weight:700; float: right; font-size: 1.5rem; line-height: 1; margin-right: -5px; color:#ccc;} .rm-btn-close:hover, .rm-btn-close:focus:hover{color:#6f6f6f; border-color: transparent; background-color: transparent;} .rm-btn-close:focus {color:#939393; border-color: transparent; background-color: transparent;} .rm-content {padding:15px 15px 15px 15px;} .rm-content .full-hr {width: auto; border: 0; border-top: 1px solid #e0e0e0; margin-top:15px; margin-bottom:15px; margin-left:-14px; margin-right:-14px;} .rm-fadeIn {-webkit-animation-name: rm-fadeIn; animation-name: rm-fadeIn;} @-webkit-keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} @keyframes rm-fadeIn {0% {opacity: 0} 100% {opacity: 1}} .rm-fadeOut {-webkit-animation-name: rm-fadeOut; animation-name: rm-fadeOut;} @-webkit-keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} @keyframes rm-fadeOut {0% {opacity: 1} 100% {opacity: 0}} .rm-fadeIn, .rm-fadeOut {-webkit-animation-duration: .25s; animation-duration: .25s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}",data:function(){return{showmodal:!1,showbackdrop:!1,basedon:!1,live:!1,appendto:"",class:"",bg_class:"",base_anim_class:"",anim_class:"",bg_anim_class:"",bg_in_class:"rm-fadeIn",bg_out_class:"rm-fadeOut",in_class:"rm-fadeIn",out_class:"rm-fadeOut",style:"",title:"",modal_id:this._guid+"_rm",enableclose:!0,base_zindex:1051,opacity:0,display:"none",zindex:0}},delegate:!1,elToFocus:null,on:{close:function(t){t.original.preventDefault(),this.get("enableclose")&&this.set("basedon",!1)},clickoutside:function(t){t.original.target===t.node&&this.fire("close",t)},keydown:function(t){var e=t.original;if(27===e.which&&this.fire("close",t),9===e.which){var n=this.findAll("input, select, textarea, button, a").filter(function(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)});e.shiftKey?e.target!==n[0]&&e.target!==this.find(".rm-wrapper")||(e.preventDefault(),n[n.length-1].focus()):e.target===n[n.length-1]&&(e.preventDefault(),n[0].focus())}}},onconfig:function(){this.get("live")&&this.set("showmodal",!0)},onrender:function(){var a=this.get("modal_id");this.observe_basedon=this.observe("basedon",function(t,e,n){var o=this.get("live");if(!0===t){if(document.querySelector("."+a)&&"block"===document.querySelector("."+a).style.display)return;this.elToFocus=document.activeElement,this.fire("beforeOpen");var i=this.getTopZindex(),r=0===i?this.get("base_zindex"):i+2;o||this.set("showmodal",!0),this.insert(this.get("appendto")?document.querySelector(this.get("appendto")):this.root.el),this.set({display:"block",zindex:r}),this.fire("opening"),this.animateModal("in").then(function(){this.find("[autofocus]")?this.find("[autofocus]").focus():this.find(".rm-wrapper").focus(),this.fire("afterOpen")}.bind(this))}else{if(!document.querySelector("."+a)||"block"!==document.querySelector("."+a).style.display)return;this.fire("beforeClose"),this.animateModal("out").then(function(){this.set({display:"none",zindex:0}),o||this.set("showmodal",!1),this.fire("afterClose");var t=this.getTopZindex();if(0<t){for(var e=document.querySelectorAll(".rm-wrapper"),n=0;n<e.length;n++)if(e[n].style.zIndex==t){var i=s.a.getContext(e[n]).ractive;i.find(".rm-wrapper").contains(this.elToFocus)?this.elToFocus.focus():i.find("[autofocus]")?i.find("[autofocus]").focus():i.find(".rm-wrapper").focus();break}}else document.body.contains(this.elToFocus)&&this.elToFocus.focus()}.bind(this))}},{defer:!0})},onunrender:function(){this.observe_basedon.cancel()},animateModal:function(i){return new Promise(function(e,t){var n=function(t){this.find(".rm-wrapper").removeEventListener("animationend",n),this.set({anim_class:"",bg_anim_class:"","@shared.rm.animating":void 0,"@shared.rm.delay":0}),"out"==i&&this.set({showbackdrop:!1,opacity:0}),e()}.bind(this);this.find(".rm-wrapper").addEventListener("animationend",n),"object"==typeof this.get("@shared.rm.animating")&&this.set("@shared.rm.delay",this.get("@shared.rm.delay")+this.getAnimationDuration(this.get("@shared.rm.animating").find(".rm-wrapper"))+100),this.set("@shared.rm.animating",this),setTimeout(function(){"in"==i&&this.set({showbackdrop:!0,opacity:1}),this.set({anim_class:this.get(i+"_class"),bg_anim_class:this.get("bg_"+i+"_class")})}.bind(this),this.get("@shared.rm.delay"))}.bind(this))},getTopZindex:function(){for(var t=0,e=document.querySelectorAll(".rm-wrapper"),n=0;n<e.length;n++)t=parseInt(e[n].style.zIndex)>t?parseInt(e[n].style.zIndex):t;return t},getAnimationDuration:function(t){var e=window.getComputedStyle(t,null)["animation-duration"];return-1!==e.indexOf("ms")?parseFloat(e.replace("ms","")):1e3*parseFloat(e.replace("s",""))}})}]).default});
\ No newline at end of file
diff --git a/package.json b/package.json
index 1e95d56..48cff6a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "//": "To use type: npm run dev",
+  "//": "To use type: npm run watch",
   "name": "ractive-modal",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A modal popup component for ractive",
   "main": "dist/ractive-modal.js",
   "repository": "https://github.com/kouts/ractive-modal",
@@ -12,15 +12,15 @@
     "popup"
   ],
   "devDependencies": {
-    "onchange": "*",
-    "ractive": "*",
+    "ractive": "^1.1.1",
     "ractive-bin-loader": "^1.0.1",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2"
   },
   "scripts": {
-    "start": "webpack --config webpack.config.js"
+    "build": "webpack --config webpack.config.js",
+    "watch": "webpack --config webpack.config.js --watch"
   },
   "author": "kouts",
   "license": "ISC",
diff --git a/webpack.config.js b/webpack.config.js
index 85ce862..3b7552f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = {
 	node: false,
-	mode: 'development',
+	mode: 'production',
     target: 'web',
     context: path.resolve(__dirname, 'src'),
     optimization: {
diff --git a/webpack.config.old.js b/webpack.config.old.js
deleted file mode 100644
index 5f88576..0000000
--- a/webpack.config.old.js
+++ /dev/null
@@ -1,49 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-
-var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common');
-
-// Lazymode so we don't have to require Ractive in every component / endpoint / etc
-/*
-var providerPlugin = new webpack.ProvidePlugin({
-	Ractive: 'ractive'
-});
-*/
-
-// Minify javascript
-var minifyPlugin = new webpack.optimize.UglifyJsPlugin({
-	include: /\.min\.js$/,
-	compress: {
-		warnings: false
-	}
-});
-
-module.exports = {
-	module: {
-	  loaders: [
-	    {
-	      test: /\.ractive\.html$/,
-	      loaders: 'ractive-bin-loader'
-	    }
-	  ]
-	},
-	plugins: [
-		// providerPlugin,
-		minifyPlugin
-	],
-	externals: {
-	  ractive: 'Ractive'
-	},
-	target: 'web',
-	entry: {
-		'ractive-modal': './src/ractive-modal.ractive.html',
-		'ractive-modal.min': './src/ractive-modal.ractive.html'
-	},
-  	output: {
-	    filename: '[name].js',
-	    path: path.resolve(__dirname, 'dist'),
-	    library: "RactiveModal",
-	    libraryExport: "default",
-		libraryTarget: "umd"
-  	}
-};
\ No newline at end of file