@nrk/core-dialog - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

core-dialog.cjs.js

@@ -166,5 +166,3 @@ 'use strict';
 if (!IS_BROWSER && !global.HTMLElement) {
-  global.HTMLElement =
-  /*#__PURE__*/
-  function () {
+  global.HTMLElement = /*#__PURE__*/function () {
     function _class() {
@@ -268,5 +266,3 @@ _classCallCheck(this, _class);
 
-var CoreDialog =
-/*#__PURE__*/
-function (_HTMLElement) {
+var CoreDialog = /*#__PURE__*/function (_HTMLElement) {
   _inherits(CoreDialog, _HTMLElement);
@@ -285,2 +281,3 @@
 
+      this._autoBackdrop = null;
       this.attributeChangedCallback(); // Ensure correct setup backdrop
@@ -295,6 +292,8 @@
     value: function disconnectedCallback() {
-      reFocus(this._foucs); // Try moving focus back to <button>
+      reFocus(this._focus); // Try moving focus back to <button>
 
-      this._focus = null; // Garbage collection
+      if (this._autoBackdrop) this._autoBackdrop.remove(); // Remove generated backdrop element
 
+      this._focus = this._autoBackdrop = null; // Garbage collection
+
       this.removeEventListener('transitionend', this);
@@ -343,3 +342,3 @@ document.removeEventListener('keydown', this);
       if (event.defaultPrevented) return;
-      if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this); // Move foucs after transition
+      if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this); // Move focus after transition
       else if (event.type === 'click') {
@@ -422,9 +421,11 @@ if (event.target === this.backdrop && !this.strict) return this.close(); // Click on backdrop
   return CoreDialog;
-}(_wrapNativeSuper(HTMLElement));
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
 function getBackdrop(el, attr) {
+  var next = el.nextElementSibling;
   if (!el.parentNode || attr === 'false') return false;
   if (attr && attr !== 'true') return document.getElementById(attr) || false;
-  var next = el.nextElementSibling;
-  return next && next.nodeName === 'BACKDROP' ? next : el.insertAdjacentElement('afterend', document.createElement('backdrop'));
+  if (next && next.nodeName === 'BACKDROP') return next;
+  el._autoBackdrop = document.createElement('backdrop');
+  return el.insertAdjacentElement('afterend', el._autoBackdrop);
 }
@@ -431,0 +432,0 @@

core-dialog.js

@@ -10,2 +10,3 @@ import { closest, dispatchEvent, toggleAttribute, queryAll } from '../utils'
     this._focus = true // Used to check if connectedCallback has run
+    this._autoBackdrop = null
     this.attributeChangedCallback() // Ensure correct setup backdrop
@@ -18,4 +19,5 @@ this.addEventListener('transitionend', this)
   disconnectedCallback () {
-    reFocus(this._foucs) // Try moving focus back to <button>
-    this._focus = null // Garbage collection
+    reFocus(this._focus) // Try moving focus back to <button>
+    if (this._autoBackdrop) this._autoBackdrop.remove() // Remove generated backdrop element
+    this._focus = this._autoBackdrop = null // Garbage collection
     this.removeEventListener('transitionend', this)
@@ -56,3 +58,3 @@ document.removeEventListener('keydown', this)
     if (event.defaultPrevented) return
-    if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this) // Move foucs after transition
+    if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this) // Move focus after transition
     else if (event.type === 'click') {
@@ -102,6 +104,8 @@ if (event.target === this.backdrop && !this.strict) return this.close() // Click on backdrop
 function getBackdrop (el, attr) {
+  const next = el.nextElementSibling
   if (!el.parentNode || attr === 'false') return false
   if (attr && attr !== 'true') return document.getElementById(attr) || false
-  const next = el.nextElementSibling
-  return next && next.nodeName === 'BACKDROP' ? next : el.insertAdjacentElement('afterend', document.createElement('backdrop'))
+  if (next && next.nodeName === 'BACKDROP') return next
+  el._autoBackdrop = document.createElement('backdrop')
+  return el.insertAdjacentElement('afterend', el._autoBackdrop)
 }
@@ -108,0 +112,0 @@

core-dialog.jsx.js

@@ -172,5 +172,3 @@ (function (global, factory) {
   if (!IS_BROWSER && !global.HTMLElement) {
-    global.HTMLElement =
-    /*#__PURE__*/
-    function () {
+    global.HTMLElement = /*#__PURE__*/function () {
       function _class() {
@@ -274,5 +272,3 @@ _classCallCheck(this, _class);
 
-  var CoreDialog =
-  /*#__PURE__*/
-  function (_HTMLElement) {
+  var CoreDialog = /*#__PURE__*/function (_HTMLElement) {
     _inherits(CoreDialog, _HTMLElement);
@@ -291,2 +287,3 @@
 
+        this._autoBackdrop = null;
         this.attributeChangedCallback(); // Ensure correct setup backdrop
@@ -301,6 +298,8 @@
       value: function disconnectedCallback() {
-        reFocus(this._foucs); // Try moving focus back to <button>
+        reFocus(this._focus); // Try moving focus back to <button>
 
-        this._focus = null; // Garbage collection
+        if (this._autoBackdrop) this._autoBackdrop.remove(); // Remove generated backdrop element
 
+        this._focus = this._autoBackdrop = null; // Garbage collection
+
         this.removeEventListener('transitionend', this);
@@ -349,3 +348,3 @@ document.removeEventListener('keydown', this);
         if (event.defaultPrevented) return;
-        if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this); // Move foucs after transition
+        if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this); // Move focus after transition
         else if (event.type === 'click') {
@@ -428,9 +427,11 @@ if (event.target === this.backdrop && !this.strict) return this.close(); // Click on backdrop
     return CoreDialog;
-  }(_wrapNativeSuper(HTMLElement));
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
   function getBackdrop(el, attr) {
+    var next = el.nextElementSibling;
     if (!el.parentNode || attr === 'false') return false;
     if (attr && attr !== 'true') return document.getElementById(attr) || false;
-    var next = el.nextElementSibling;
-    return next && next.nodeName === 'BACKDROP' ? next : el.insertAdjacentElement('afterend', document.createElement('backdrop'));
+    if (next && next.nodeName === 'BACKDROP') return next;
+    el._autoBackdrop = document.createElement('backdrop');
+    return el.insertAdjacentElement('afterend', el._autoBackdrop);
   }
@@ -482,3 +483,3 @@
 
-  var version = "3.0.3";
+  var version = "3.0.4";
 
@@ -538,5 +539,3 @@ /**
     var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
-    return (
-      /*@__PURE__*/
-      function (superclass) {
+    return (/*@__PURE__*/function (superclass) {
         function anonymous(props) {
@@ -543,0 +542,0 @@ var this$1 = this;

core-dialog.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-dialog v3.0.3 - Copyright (c) 2017-2019 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreDialog=e()}(this,function(){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function r(t){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,e){return(o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t,e,n){return(u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(t,i));return n&&o(r,n.prototype),r}).apply(null,arguments)}function c(t){var n="function"==typeof Map?new Map:void 0;return(c=function(t){if(null===t||!function(t){return-1!==Function.toString.call(t).indexOf("[native code]")}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return u(t,arguments,r(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),o(e,t)})(t)}function n(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){e(this,t)}}());var a,l,f=(a="undefined"==typeof window?{}:window.Element.prototype,l=a.matches||a.msMatchesSelector||a.webkitMatchesSelector,a.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(l.call(t,e))return t;return null});function d(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);return!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,""),i}function h(t,e){var n=1<arguments.length&&void 0!==e?e:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(n.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var p="[tabindex],a,button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])";function y(t,e){if(!t.parentNode||"false"===e)return!1;if(e&&"true"!==e)return document.getElementById(e)||!1;var n=t.nextElementSibling;return n&&"BACKDROP"===n.nodeName?n:t.insertAdjacentElement("afterend",document.createElement("backdrop"))}function b(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}function m(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n}function v(t){setTimeout(function(){try{t.focus()}catch(t){}})}function g(e){if(!e.contains(document.activeElement)&&b(e)){var t=h("[autofocus]",e).concat(h(p,e)).filter(b)[0];try{t.focus()}catch(t){console.warn(e,'is initialized without focusable elements. Please add [tabindex="-1"] the main element (for instance a <h1>)')}}}return function(){function t(){return e(this,t),n(this,r(t).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}(t,c(HTMLElement)),function(t,e,n){e&&i(t.prototype,e),n&&i(t,n)}(t,[{key:"connectedCallback",value:function(){this._focus=!0,this.attributeChangedCallback(),this.addEventListener("transitionend",this),document.addEventListener("keydown",this),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){v(this._foucs),this._focus=null,this.removeEventListener("transitionend",this),document.removeEventListener("keydown",this),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(t,e,n){var i=this;if(this._focus){var r="backdrop"===t&&y(this,e),o=this.backdrop;if(this.className=this.className,this.setAttribute("role","dialog"),this.setAttribute("aria-modal",Boolean(o)),r&&r.setAttribute("hidden",""),o&&d(o,"hidden",this.hidden),this.hidden)v(this._focus);else{var u=h("body *").filter(function(t){return t!==o&&!i.contains(t)&&b(t)}),c=Math.min(Math.max.apply(Math,[1].concat(s(u.map(m)))),2e9);o&&(o.style.zIndex=c+1),this.style.zIndex=c+2,this._focus=document.activeElement||document.body,setTimeout(function(){return g(i)})}"hidden"===t&&n!==e&&function(t,e,n){var i,r=2<arguments.length&&void 0!==n?n:{},o="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[o])return;t[o]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,r);var u=t.dispatchEvent(i);t[o]=null}(this,"dialog.toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented)if("transitionend"!==t.type||t.target!==this||this.hidden){if("click"===t.type){if(t.target===this.backdrop&&!this.strict)return this.close();var e=f(t.target,"button"),n=e&&e.getAttribute("for");"close"===n&&f(t.target,this.nodeName)===this?this.close():n===this.id&&(e.setAttribute(this._from,""),this.show())}else if("keydown"===t.type&&(9===t.keyCode||27===t.keyCode)&&!this.hidden){if(h("".concat(this.nodeName,":not([hidden])")).sort(function(t,e){return m(t)-m(e)}).pop()!==this)return;9===t.keyCode&&function(t,e){var n=h(p,t).filter(b),i=n[e.shiftKey?0:n.length-1];e.target!==i&&t.contains(e.target)||(e.preventDefault(),n[e.shiftKey?n.length-1:0].focus())}(this,t),27!==t.keyCode||this.strict||(t.preventDefault(),this.close())}}else g(this)}},{key:"close",value:function(){this.hidden=!0}},{key:"show",value:function(){this.hidden=!1}},{key:"open",get:function(){return!this.hidden},set:function(t){this.hidden=!t}},{key:"strict",get:function(){return this.hasAttribute("strict")},set:function(t){d(this,"strict",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){d(this,"hidden",t)}},{key:"backdrop",get:function(){return y(this,this.getAttribute("backdrop"))},set:function(t){this.setAttribute("backdrop",t||"false")}}],[{key:"observedAttributes",get:function(){return["hidden","backdrop"]}}]),t}()}),window.customElements.define("core-dialog",coreDialog);
+/*! @nrk/core-dialog v3.0.4 - Copyright (c) 2017-2020 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreDialog=e()}(this,function(){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function a(t,e,n){return(a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(t,i));return n&&c(r,n.prototype),r}).apply(null,arguments)}function s(t){var i="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return a(t,arguments,u(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var t="undefined"!=typeof window;t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){r(this,t)}}());var e,n,f=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(n.call(t,e))return t;return null});function h(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);return!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,""),i}function p(t,e){var n=1<arguments.length&&void 0!==e?e:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(n.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var y="[tabindex],a,button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])";function b(t,e){var n=t.nextElementSibling;return!(!t.parentNode||"false"===e)&&(e&&"true"!==e?document.getElementById(e)||!1:n&&"BACKDROP"===n.nodeName?n:(t._autoBackdrop=document.createElement("backdrop"),t.insertAdjacentElement("afterend",t._autoBackdrop)))}function m(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}function v(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n}function g(t){setTimeout(function(){try{t.focus()}catch(t){}})}function k(e){if(!e.contains(document.activeElement)&&m(e)){var t=p("[autofocus]",e).concat(p(y,e)).filter(m)[0];try{t.focus()}catch(t){console.warn(e,'is initialized without focusable elements. Please add [tabindex="-1"] the main element (for instance a <h1>)')}}}return function(){function t(){return r(this,t),l(this,u(t).apply(this,arguments))}var e,n,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(t,s(HTMLElement)),e=t,i=[{key:"observedAttributes",get:function(){return["hidden","backdrop"]}}],(n=[{key:"connectedCallback",value:function(){this._focus=!0,this._autoBackdrop=null,this.attributeChangedCallback(),this.addEventListener("transitionend",this),document.addEventListener("keydown",this),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){g(this._focus),this._autoBackdrop&&this._autoBackdrop.remove(),this._focus=this._autoBackdrop=null,this.removeEventListener("transitionend",this),document.removeEventListener("keydown",this),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(t,e,n){var i=this;if(this._focus){var r="backdrop"===t&&b(this,e),o=this.backdrop;if(this.className=this.className,this.setAttribute("role","dialog"),this.setAttribute("aria-modal",Boolean(o)),r&&r.setAttribute("hidden",""),o&&h(o,"hidden",this.hidden),this.hidden)g(this._focus);else{var u=p("body *").filter(function(t){return t!==o&&!i.contains(t)&&m(t)}),c=Math.min(Math.max.apply(Math,[1].concat(d(u.map(v)))),2e9);o&&(o.style.zIndex=c+1),this.style.zIndex=c+2,this._focus=document.activeElement||document.body,setTimeout(function(){return k(i)})}"hidden"===t&&n!==e&&function(t,e,n){var i,r=2<arguments.length&&void 0!==n?n:{},o="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[o])return;t[o]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,r);var u=t.dispatchEvent(i);t[o]=null}(this,"dialog.toggle")}}},{key:"handleEvent",value:function(t){var e,n,i,r;if(!t.defaultPrevented)if("transitionend"!==t.type||t.target!==this||this.hidden){if("click"===t.type){if(t.target===this.backdrop&&!this.strict)return this.close();var o=f(t.target,"button"),u=o&&o.getAttribute("for");"close"===u&&f(t.target,this.nodeName)===this?this.close():u===this.id&&(o.setAttribute(this._from,""),this.show())}else if("keydown"===t.type&&(9===t.keyCode||27===t.keyCode)&&!this.hidden){if(p("".concat(this.nodeName,":not([hidden])")).sort(function(t,e){return v(t)-v(e)}).pop()!==this)return;9===t.keyCode&&(n=t,i=p(y,e=this).filter(m),r=i[n.shiftKey?0:i.length-1],n.target!==r&&e.contains(n.target)||(n.preventDefault(),i[n.shiftKey?i.length-1:0].focus())),27!==t.keyCode||this.strict||(t.preventDefault(),this.close())}}else k(this)}},{key:"close",value:function(){this.hidden=!0}},{key:"show",value:function(){this.hidden=!1}},{key:"open",get:function(){return!this.hidden},set:function(t){this.hidden=!t}},{key:"strict",get:function(){return this.hasAttribute("strict")},set:function(t){h(this,"strict",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){h(this,"hidden",t)}},{key:"backdrop",get:function(){return b(this,this.getAttribute("backdrop"))},set:function(t){this.setAttribute("backdrop",t||"false")}}])&&o(e.prototype,n),i&&o(e,i),t}()}),window.customElements.define("core-dialog",coreDialog);
 //# sourceMappingURL=core-dialog.min.js.map

core-dialog.test.cjs.js

@@ -8,2 +8,38 @@ 'use strict';
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
+
 function prop(selector, name) {
@@ -23,4 +59,4 @@ return browser.executeScript(function (selector, name) {
 describe('core-dialog', function () {
-  beforeEach(function _callee() {
-    return regeneratorRuntime.async(function _callee$(_context) {
+  beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -30,11 +66,11 @@ switch (_context.prev = _context.next) {
             _context.next = 2;
-            return regeneratorRuntime.awrap(browser.refresh());
+            return browser.refresh();
 
           case 2:
             _context.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(customElements));
+            return browser.executeScript(customElements);
 
           case 4:
             _context.next = 6;
-            return regeneratorRuntime.awrap(browser.executeScript(coreDialog));
+            return browser.executeScript(coreDialog);
 
@@ -46,6 +82,6 @@ case 6:
       }
-    });
-  });
-  it('sets up properties', function _callee2() {
-    return regeneratorRuntime.async(function _callee2$(_context2) {
+    }, _callee);
+  })));
+  it('sets up properties', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -55,13 +91,13 @@ switch (_context2.prev = _context2.next) {
             _context2.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog-1\">Open</button>\n        <core-dialog id=\"dialog-1\" hidden></core-dialog>\n      ";
-            }));
+            });
 
           case 2:
             _context2.next = 4;
-            return regeneratorRuntime.awrap(expect(attr('core-dialog', 'role')).toEqual('dialog'));
+            return expect(attr('core-dialog', 'role')).toEqual('dialog');
 
           case 4:
             _context2.next = 6;
-            return regeneratorRuntime.awrap(expect(attr('core-dialog', 'aria-modal')).toMatch(/true/i));
+            return expect(attr('core-dialog', 'aria-modal')).toMatch(/true/i);
 
@@ -73,6 +109,6 @@ case 6:
       }
-    });
-  });
-  it('opens and closes', function _callee3() {
-    return regeneratorRuntime.async(function _callee3$(_context3) {
+    }, _callee2);
+  })));
+  it('opens and closes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
@@ -82,49 +118,49 @@ switch (_context3.prev = _context3.next) {
             _context3.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog\">Open</button>\n        <core-dialog id=\"dialog\" hidden>\n          <div>Some content</div>\n          <button for=\"close\">Close</button>\n        </core-dialog>\n      ";
-            }));
+            });
 
           case 2:
             _context3.next = 4;
-            return regeneratorRuntime.awrap($('button[for="dialog"]').click());
+            return $('button[for="dialog"]').click();
 
           case 4:
             _context3.next = 6;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i);
 
           case 6:
             _context3.next = 8;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/(null|false)/i);
 
           case 8:
             _context3.next = 10;
-            return regeneratorRuntime.awrap($('button[for="close"]').click());
+            return $('button[for="close"]').click();
 
           case 10:
             _context3.next = 12;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog', 'hidden')).toMatch(/true/i));
+            return expect(prop('core-dialog', 'hidden')).toMatch(/true/i);
 
           case 12:
             _context3.next = 14;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/true/i));
+            return expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/true/i);
 
           case 14:
             _context3.next = 16;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-dialog').hidden = false;
-            }));
+            });
 
           case 16:
             _context3.next = 18;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/(null|false)/i);
 
           case 18:
             _context3.next = 20;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-dialog').hidden = true;
-            }));
+            });
 
           case 20:
             _context3.next = 22;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/true/i));
+            return expect(prop('core-dialog + backdrop', 'hidden')).toMatch(/true/i);
 
@@ -136,6 +172,6 @@ case 22:
       }
-    });
-  });
-  it('opens and closes nested', function _callee4() {
-    return regeneratorRuntime.async(function _callee4$(_context4) {
+    }, _callee3);
+  })));
+  it('opens and closes nested', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
@@ -145,41 +181,41 @@ switch (_context4.prev = _context4.next) {
             _context4.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog-outer\">Open</button>\n        <core-dialog id=\"dialog-outer\" hidden>\n          <div>Some content</div>\n          <button type=\"button\" autofocus>Autofocus</button>\n          <button for=\"dialog-inner\">Open inner</button>\n          <core-dialog id=\"dialog-inner\" hidden>\n            <div>Nested content</div>\n            <button for=\"close\">Close</button>\n          </core-dialog>\n          <button for=\"close\">Close</button>\n        </core-dialog>\n      ";
-            }));
+            });
 
           case 2:
             _context4.next = 4;
-            return regeneratorRuntime.awrap($('button[for="dialog-outer"]').click());
+            return $('button[for="dialog-outer"]').click();
 
           case 4:
             _context4.next = 6;
-            return regeneratorRuntime.awrap($('button[for="dialog-inner"]').click());
+            return $('button[for="dialog-inner"]').click();
 
           case 6:
             _context4.next = 8;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-outer + backdrop', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('#dialog-outer + backdrop', 'hidden')).toMatch(/(null|false)/i);
 
           case 8:
             _context4.next = 10;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-outer #dialog-inner + backdrop', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('#dialog-outer #dialog-inner + backdrop', 'hidden')).toMatch(/(null|false)/i);
 
           case 10:
             _context4.next = 12;
-            return regeneratorRuntime.awrap($('#dialog-inner button[for="close"]').click());
+            return $('#dialog-inner button[for="close"]').click();
 
           case 12:
             _context4.next = 14;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-inner', 'hidden')).toMatch(/true/i));
+            return expect(prop('#dialog-inner', 'hidden')).toMatch(/true/i);
 
           case 14:
             _context4.next = 16;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-inner + backdrop', 'hidden')).toMatch(/true/i));
+            return expect(prop('#dialog-inner + backdrop', 'hidden')).toMatch(/true/i);
 
           case 16:
             _context4.next = 18;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-outer', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('#dialog-outer', 'hidden')).toMatch(/(null|false)/i);
 
           case 18:
             _context4.next = 20;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-outer + backdrop', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('#dialog-outer + backdrop', 'hidden')).toMatch(/(null|false)/i);
 
@@ -191,6 +227,6 @@ case 20:
       }
-    });
-  });
-  it('closes nested with pressed esc', function _callee5() {
-    return regeneratorRuntime.async(function _callee5$(_context5) {
+    }, _callee4);
+  })));
+  it('closes nested with pressed esc', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
       while (1) {
@@ -200,33 +236,33 @@ switch (_context5.prev = _context5.next) {
             _context5.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog-outer\">Open</button>\n        <core-dialog id=\"dialog-outer\" hidden>\n          <div>Some content</div>\n          <button type=\"button\" autofocus>Autofocus</button>\n          <button for=\"dialog-inner\">Open inner</button>\n          <core-dialog id=\"dialog-inner\" hidden>\n            <div>Nested content</div>\n            <button for=\"close\">Close</button>\n          </core-dialog>\n          <button for=\"close\">Close</button>\n        </core-dialog>\n      ";
-            }));
+            });
 
           case 2:
             _context5.next = 4;
-            return regeneratorRuntime.awrap($('button[for="dialog-outer"]').click());
+            return $('button[for="dialog-outer"]').click();
 
           case 4:
             _context5.next = 6;
-            return regeneratorRuntime.awrap($('button[for="dialog-inner"]').click());
+            return $('button[for="dialog-inner"]').click();
 
           case 6:
             _context5.next = 8;
-            return regeneratorRuntime.awrap($('button[for="dialog-outer"]').sendKeys(protractor.Key.ESCAPE));
+            return $('button[for="dialog-outer"]').sendKeys(protractor.Key.ESCAPE);
 
           case 8:
             _context5.next = 10;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-inner', 'hidden')).toMatch(/true/i));
+            return expect(prop('#dialog-inner', 'hidden')).toMatch(/true/i);
 
           case 10:
             _context5.next = 12;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-outer', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('#dialog-outer', 'hidden')).toMatch(/(null|false)/i);
 
           case 12:
             _context5.next = 14;
-            return regeneratorRuntime.awrap($('button[for="dialog-outer"]').sendKeys(protractor.Key.ESCAPE));
+            return $('button[for="dialog-outer"]').sendKeys(protractor.Key.ESCAPE);
 
           case 14:
             _context5.next = 16;
-            return regeneratorRuntime.awrap(expect(prop('#dialog-outer', 'hidden')).toMatch(/true/i));
+            return expect(prop('#dialog-outer', 'hidden')).toMatch(/true/i);
 
@@ -238,6 +274,6 @@ case 16:
       }
-    });
-  });
-  it('respects backdrop false option', function _callee6() {
-    return regeneratorRuntime.async(function _callee6$(_context6) {
+    }, _callee5);
+  })));
+  it('respects backdrop false option', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) {
@@ -247,17 +283,17 @@ switch (_context6.prev = _context6.next) {
             _context6.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog\">Open</button>\n        <core-dialog id=\"dialog\" backdrop=\"false\" hidden>\n          <button for=\"close\">Close</button>\n        </core-dialog>\n      ";
-            }));
+            });
 
           case 2:
             _context6.next = 4;
-            return regeneratorRuntime.awrap($('button[for="dialog"]').click());
+            return $('button[for="dialog"]').click();
 
           case 4:
             _context6.next = 6;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i);
 
           case 6:
             _context6.next = 8;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog', 'nextElementSibling')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog', 'nextElementSibling')).toMatch(/(null|false)/i);
 
@@ -269,6 +305,6 @@ case 8:
       }
-    });
-  });
-  it('respects strict option', function _callee7() {
-    return regeneratorRuntime.async(function _callee7$(_context7) {
+    }, _callee6);
+  })));
+  it('respects strict option', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -278,23 +314,23 @@ switch (_context7.prev = _context7.next) {
             _context7.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog\">Open</button>\n        <core-dialog id=\"dialog\" strict hidden>\n          <button for=\"close\">Close</button>\n        </core-dialog>\n      ";
-            }));
+            });
 
           case 2:
             _context7.next = 4;
-            return regeneratorRuntime.awrap($('button[for="dialog"]').click());
+            return $('button[for="dialog"]').click();
 
           case 4:
             _context7.next = 6;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i);
 
           case 6:
             _context7.next = 8;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-dialog + backdrop').click();
-            }));
+            });
 
           case 8:
             _context7.next = 10;
-            return regeneratorRuntime.awrap(expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-dialog', 'hidden')).toMatch(/(null|false)/i);
 
@@ -306,6 +342,6 @@ case 10:
       }
-    });
-  });
-  it('triggers toggle event', function _callee8() {
-    return regeneratorRuntime.async(function _callee8$(_context8) {
+    }, _callee7);
+  })));
+  it('triggers toggle event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
       while (1) {
@@ -315,3 +351,3 @@ switch (_context8.prev = _context8.next) {
             _context8.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button for=\"dialog\">Open</button>\n        <core-dialog id=\"dialog\" hidden>\n          <button for=\"close\">Close</button>\n        </core-dialog>\n      ";
@@ -322,9 +358,9 @@ document.addEventListener('dialog.toggle', function () {
               document.querySelector('core-dialog').hidden = false;
-            }));
+            });
 
           case 2:
             _context8.next = 4;
-            return regeneratorRuntime.awrap(expect(browser.executeScript(function () {
+            return expect(browser.executeScript(function () {
               return window.triggered;
-            })).toEqual(true));
+            })).toEqual(true);
 
@@ -336,4 +372,4 @@ case 4:
       }
-    });
-  });
+    }, _callee8);
+  })));
 });

jsx.js

@@ -170,5 +170,3 @@ 'use strict';
 if (!IS_BROWSER && !global.HTMLElement) {
-  global.HTMLElement =
-  /*#__PURE__*/
-  function () {
+  global.HTMLElement = /*#__PURE__*/function () {
     function _class() {
@@ -272,5 +270,3 @@ _classCallCheck(this, _class);
 
-var CoreDialog =
-/*#__PURE__*/
-function (_HTMLElement) {
+var CoreDialog = /*#__PURE__*/function (_HTMLElement) {
   _inherits(CoreDialog, _HTMLElement);
@@ -289,2 +285,3 @@
 
+      this._autoBackdrop = null;
       this.attributeChangedCallback(); // Ensure correct setup backdrop
@@ -299,6 +296,8 @@
     value: function disconnectedCallback() {
-      reFocus(this._foucs); // Try moving focus back to <button>
+      reFocus(this._focus); // Try moving focus back to <button>
 
-      this._focus = null; // Garbage collection
+      if (this._autoBackdrop) this._autoBackdrop.remove(); // Remove generated backdrop element
 
+      this._focus = this._autoBackdrop = null; // Garbage collection
+
       this.removeEventListener('transitionend', this);
@@ -347,3 +346,3 @@ document.removeEventListener('keydown', this);
       if (event.defaultPrevented) return;
-      if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this); // Move foucs after transition
+      if (event.type === 'transitionend' && event.target === this && !this.hidden) setFocus(this); // Move focus after transition
       else if (event.type === 'click') {
@@ -426,9 +425,11 @@ if (event.target === this.backdrop && !this.strict) return this.close(); // Click on backdrop
   return CoreDialog;
-}(_wrapNativeSuper(HTMLElement));
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
 function getBackdrop(el, attr) {
+  var next = el.nextElementSibling;
   if (!el.parentNode || attr === 'false') return false;
   if (attr && attr !== 'true') return document.getElementById(attr) || false;
-  var next = el.nextElementSibling;
-  return next && next.nodeName === 'BACKDROP' ? next : el.insertAdjacentElement('afterend', document.createElement('backdrop'));
+  if (next && next.nodeName === 'BACKDROP') return next;
+  el._autoBackdrop = document.createElement('backdrop');
+  return el.insertAdjacentElement('afterend', el._autoBackdrop);
 }
@@ -480,3 +481,3 @@
 
-var version = "3.0.3";
+var version = "3.0.4";
 
@@ -536,5 +537,3 @@ /**
   var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
-  return (
-    /*@__PURE__*/
-    function (superclass) {
+  return (/*@__PURE__*/function (superclass) {
       function anonymous(props) {
@@ -541,0 +540,0 @@ var this$1 = this;

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-dialog.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153650

increased by1.14%

Lines of code

2018

increased by1.51%

No dependency changes