ay-dialog - npm Package Compare versions

Comparing version 1.4.0 to 2.0.0-beta.1

index.js

@@ -1,23 +0,640 @@
-/*! Copyright (c) 2016 Ayogo Health Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
+/*! Copyright 2019 Ayogo Health Inc. */
+(function () {
+  'use strict';
 
-import './dialog';
-export default 'ayDialog';
+  const POLYFILL_STYLES = [
+      'dialog-sentinel {',
+      '    display: none;',
+      '}',
+      '',
+      'dialog-backdrop {',
+      '    position: fixed;',
+      '    top: 0;',
+      '    left: 0;',
+      '    height: 100vh;',
+      '    width: 100vw;',
+      '    background: rgba(0, 0, 0, 0.1);',
+      '    display: flex;',
+      '    justify-content: center;',
+      '    justify-content: safe center;',
+      '    align-items: center;',
+      '    align-items: safe center;',
+      '    overflow: auto;',
+      '    overscroll-behavior: contain;',
+      '    touch-action: none;',
+      '    z-index: 2147483647;',
+      '    -webkit-overflow-scrolling: touch;',
+      '    isolation: isolate;',
+      '}'
+  ].join('\n');
+  const DIALOG_STYLES = [
+      'dialog, ay-dialog {',
+      '    display: block;',
+      '    position: absolute;',
+      '    top: auto;',
+      '    bottom: auto;',
+      '    left: auto;',
+      '    right: auto;',
+      '    width: -webkit-fit-content;',
+      '    width: -moz-fit-content;',
+      '    width: fit-content;',
+      '    height: -webkit-fit-content;',
+      '    height: -moz-fit-content;',
+      '    height: fit-content;',
+      '    block-size: -webkit-fit-content;',
+      '    block-size: -moz-fit-content;',
+      '    block-size: fit-content;',
+      '    inline-size: -webkit-fit-content;',
+      '    inline-size: -moz-fit-content;',
+      '    inline-size: fit-content;',
+      '    margin: auto !important;',
+      '    max-height: 100vh;',
+      '    padding: 1em;',
+      '    background: white;',
+      '    background: -apple-system-text-background;',
+      '    color: black;',
+      '    color: text;',
+      '    border: solid;',
+      '    overflow: auto;',
+      '    -webkit-overflow-scrolling: touch;',
+      '}',
+      '',
+      'dialog:focus, ay-dialog:focus {',
+      '    outline: 0 none;',
+      '}',
+      '',
+      'dialog:not([open]), ay-dialog:not([open]) {',
+      '    display: none;',
+      '}'
+  ].join('\n');
+  const focusableElements = [
+      'a[href]:not([tabindex^="-"]):not([inert])',
+      'area[href]:not([tabindex^="-"]):not([inert])',
+      'input:not(:disabled):not([tabindex^="-"]):not([inert])',
+      'select:not(:disabled):not([tabindex^="-"]):not([inert])',
+      'textarea:not(:disabled):not([tabindex^="-"]):not([inert])',
+      'button:not(:disabled):not([tabindex^="-"]):not([inert])',
+      'iframe:not([tabindex^="-"]):not([inert])',
+      'object:not([tabindex^="-"]):not([inert])',
+      'embed:not([tabindex^="-"]):not([inert])',
+      'details:not([tabindex^="-"]):not([inert])',
+      'summary:not([tabindex^="-"]):not([inert])',
+      '[contenteditable]:not([contenteditable="false"]):not([tabindex^="-"]):not([inert])',
+      '[tabindex]:not([tabindex^="-"]):not([inert])',
+      'audio[controls]:not([tabindex^="-"]):not([inert])',
+      'video[controls]:not([tabindex^="-"]):not([inert])'
+  ].join(',');
+  const hasWeakMap = ('WeakMap' in window);
+  const retValMap = hasWeakMap ? new WeakMap() : new Map();
+  const backdropMap = hasWeakMap ? new WeakMap() : new Map();
+  const sentinelMap = hasWeakMap ? new WeakMap() : new Map();
+  const origAriaHidden = hasWeakMap ? new WeakMap() : new Map();
+  const topLayerStack = [];
+  let initialized = false;
+  let DOMExceptionCtor = DOMException;
+  try {
+      new DOMExceptionCtor('test', 'NotSupportedError');
+  }
+  catch (ex) {
+      const NameToCode = {
+          'InvalidStateError': 11
+      };
+      DOMExceptionCtor = function (message, name) {
+          Object.setPrototypeOf(this, DOMException.prototype);
+          Object.defineProperty(this, 'message', { value: message });
+          Object.defineProperty(this, 'name', { value: name });
+          Object.defineProperty(this, 'code', { value: NameToCode[name] });
+      };
+  }
+  function addStyles(styles) {
+      const dlgStyle = document.createElement('style');
+      dlgStyle.appendChild(document.createTextNode(styles));
+      let insertPoint;
+      if (insertPoint = document.querySelector('link')) {
+          insertPoint.parentNode.insertBefore(dlgStyle, insertPoint);
+      }
+      else if (insertPoint = document.querySelector('style')) {
+          insertPoint.parentNode.insertBefore(dlgStyle, insertPoint);
+      }
+      else if (insertPoint = document.querySelector('head')) {
+          insertPoint.appendChild(dlgStyle);
+      }
+      else {
+          document.appendChild(dlgStyle);
+      }
+  }
+  function dialogFocusSteps(dialog, focusChild) {
+      if (focusChild === undefined) {
+          focusChild = true;
+      }
+      let control = null;
+      const autofocuses = dialog.querySelectorAll('[autofocus]:not(:disabled):not([tabindex^="-"]):not([inert])');
+      for (let i = 0; i < autofocuses.length; i++) {
+          if (!autofocuses[i].offsetWidth || !autofocuses[i].offsetHeight) {
+              continue;
+          }
+          control = autofocuses[i];
+          break;
+      }
+      if (!control && focusChild) {
+          control = dialogFocusFirstChild(dialog);
+      }
+      if (!control) {
+          control = dialog;
+      }
+      const active = document.activeElement;
+      if (active && ('blur' in active) && active !== document.body) {
+          active.blur();
+      }
+      control.focus();
+  }
+  function dialogFocusFirstChild(dialog) {
+      let control = null;
+      const focusables = dialog.querySelectorAll(focusableElements);
+      for (let i = 0; i < focusables.length; i++) {
+          if (!focusables[i].offsetWidth || !focusables[i].offsetHeight) {
+              continue;
+          }
+          control = focusables[i];
+          break;
+      }
+      return control;
+  }
+  function backdropClickHandler(dialog) {
+      return function (e) {
+          if (!e.target || !(e.target instanceof HTMLElement) || e.target.tagName.toLowerCase() !== 'dialog-backdrop') {
+              return;
+          }
+          let evt;
+          try {
+              evt = new MouseEvent(e.type, {
+                  bubbles: e.bubbles,
+                  cancelable: e.cancelable,
+                  view: e.view,
+                  detail: e.detail,
+                  screenX: e.screenX,
+                  screenY: e.screenY,
+                  clientX: e.clientX,
+                  clientY: e.clientY,
+                  ctrlKey: e.ctrlKey,
+                  altKey: e.altKey,
+                  shiftKey: e.shiftKey,
+                  metaKey: e.metaKey,
+                  button: e.button,
+                  relatedTarget: e.relatedTarget
+              });
+          }
+          catch (ex) {
+              evt = dialog.ownerDocument.createEvent('MouseEvent');
+              evt.initMouseEvent(e.type, e.bubbles, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget);
+          }
+          dialog.dispatchEvent(evt);
+          e.stopPropagation();
+          return false;
+      };
+  }
+  function escapeKeyHandler(evt) {
+      if (evt.defaultPrevented || evt.keyCode !== 27 || !evt.target) {
+          return;
+      }
+      const input = evt.target.closest('input');
+      if (input && ['button', 'submit', 'reset', 'checkbox', 'radio', 'range'].indexOf(input.type) === -1) {
+          return;
+      }
+      const dlg = evt.target.closest('dialog,ay-dialog');
+      if (!dlg || !dlg.open || !backdropMap.has(dlg)) {
+          return;
+      }
+      let cancel;
+      try {
+          cancel = new Event('cancel', { bubbles: false, cancelable: true });
+      }
+      catch (e) {
+          cancel = dlg.ownerDocument.createEvent('Event');
+          cancel.initEvent('cancel', false, true);
+      }
+      requestAnimationFrame(function () {
+          if (dlg.dispatchEvent(cancel)) {
+              dlg.close();
+          }
+      });
+  }
+  function applyInertness() {
+      for (let i = 0; i < topLayerStack.length - 1; i++) {
+          const el = topLayerStack[i];
+          if (!origAriaHidden.has(el)) {
+              origAriaHidden.set(el, el.getAttribute('aria-hidden'));
+              el.setAttribute('aria-hidden', 'true');
+          }
+      }
+      const topEl = topLayerStack[topLayerStack.length - 1];
+      if (origAriaHidden.has(topEl)) {
+          const value = origAriaHidden.get(topEl);
+          if (value) {
+              topEl.setAttribute('aria-hidden', value);
+          }
+          else {
+              topEl.removeAttribute('aria-hidden');
+          }
+          origAriaHidden.delete(topEl);
+      }
+  }
+  function checkInertFocus(evt) {
+      const topEl = topLayerStack[topLayerStack.length - 1];
+      if (!(topEl instanceof AyDialogElement)) {
+          return;
+      }
+      if (evt.target instanceof HTMLElement && evt.target !== topEl && !topEl.contains(evt.target)) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          evt.target.blur();
+          const el = dialogFocusFirstChild(topEl);
+          if (el) {
+              el.focus();
+          }
+      }
+  }
+  function AyDialogElement() {
+      var _this = this;
+      try {
+          const _newTarget = this && this instanceof AyDialogElement ? this.constructor : void 0;
+          if (_newTarget) {
+              _this = Reflect.construct(HTMLElement, [], _newTarget);
+          }
+      }
+      catch (e) { }
+      _this.addEventListener('keydown', escapeKeyHandler);
+      return _this;
+  }
+  AyDialogElement.prototype = Object.create(HTMLElement.prototype);
+  Object.defineProperty(AyDialogElement.prototype, 'constructor', {
+      configurable: true,
+      enumerable: false,
+      writable: false,
+      value: AyDialogElement
+  });
+  Object.defineProperty(AyDialogElement.prototype, 'open', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+          return this.hasAttribute('open');
+      },
+      set: function (value) {
+          if (value) {
+              this.setAttribute('open', '');
+          }
+          else {
+              this.removeAttribute('open');
+          }
+      }
+  });
+  Object.defineProperty(AyDialogElement.prototype, 'returnValue', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+          return retValMap.get(this) || '';
+      },
+      set: function (value) {
+          if (value !== undefined) {
+              retValMap.set(this, value !== null ? value.toString() : "null");
+          }
+      }
+  });
+  if ('Symbol' in window) {
+      Object.defineProperty(AyDialogElement.prototype, Symbol.toStringTag, {
+          value: 'HTMLDialogElement',
+          configurable: true,
+          enumerable: false,
+          writable: false
+      });
+  }
+  Object.defineProperty(AyDialogElement.prototype, 'show', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function () {
+          if (!(this instanceof AyDialogElement)) {
+              throw new TypeError("Illegal Invocation");
+          }
+          if (this.hasAttribute('open')) {
+              return;
+          }
+          this.setAttribute('open', '');
+          dialogFocusSteps(this, AyDialogElement._focusChildrenOnOpen);
+      }
+  });
+  Object.defineProperty(AyDialogElement.prototype, 'showModal', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function () {
+          if (!(this instanceof AyDialogElement)) {
+              throw new TypeError("Illegal Invocation");
+          }
+          if (this.hasAttribute('open')) {
+              throw new DOMExceptionCtor("The element already has an 'open' attribute, and therefore cannot be opened modally.", 'InvalidStateError');
+          }
+          const parentNode = this.parentNode;
+          if (!this.ownerDocument || !this.ownerDocument.documentElement.contains(this) || !parentNode) {
+              throw new DOMExceptionCtor("The element is not connected to a document.", 'InvalidStateError');
+          }
+          this.setAttribute('open', '');
+          if (!sentinelMap.has(this)) {
+              const sentinel = this.ownerDocument.createElement('dialog-sentinel');
+              parentNode.insertBefore(sentinel, this);
+              sentinelMap.set(this, sentinel);
+          }
+          const backdropEl = backdropMap.get(this);
+          if (backdropEl) {
+              backdropEl.hidden = false;
+          }
+          else {
+              const backdrop = this.ownerDocument.createElement('dialog-backdrop');
+              backdrop.addEventListener('click', backdropClickHandler(this));
+              this.ownerDocument.documentElement.appendChild(backdrop);
+              backdrop.appendChild(this);
+              backdropMap.set(this, backdrop);
+          }
+          topLayerStack.push(this);
+          applyInertness();
+          dialogFocusSteps(this, AyDialogElement._focusChildrenOnOpen);
+      }
+  });
+  Object.defineProperty(AyDialogElement.prototype, 'close', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function () {
+          if (!(this instanceof AyDialogElement)) {
+              throw new TypeError("Illegal Invocation");
+          }
+          if (!this.open) {
+              return;
+          }
+          this.removeAttribute('open');
+          const result = arguments && arguments[0];
+          if (result !== undefined) {
+              retValMap.set(this, result !== null ? result.toString() : "null");
+          }
+          const idx = topLayerStack.indexOf(this);
+          if (idx >= 0) {
+              topLayerStack.splice(idx, 1);
+              applyInertness();
+          }
+          const sentinel = sentinelMap.get(this);
+          sentinelMap.delete(this);
+          if (sentinel && sentinel.parentNode) {
+              const parentNode = sentinel.parentNode;
+              parentNode.insertBefore(this, sentinel);
+              parentNode.removeChild(sentinel);
+          }
+          const backdrop = backdropMap.get(this);
+          backdropMap.delete(this);
+          if (backdrop && backdrop.parentNode) {
+              backdrop.parentNode.removeChild(backdrop);
+          }
+          let evt;
+          try {
+              evt = new Event('close', { bubbles: false, cancelable: false });
+          }
+          catch (e) {
+              evt = this.ownerDocument.createEvent('Event');
+              evt.initEvent('close', false, false);
+          }
+          requestAnimationFrame((function () {
+              this.dispatchEvent(evt);
+              if (this.onclose) {
+                  this.onclose(evt);
+              }
+          }).bind(this));
+      }
+  });
+  if (!('remove' in AyDialogElement.prototype)) {
+      Object.defineProperty(AyDialogElement.prototype, 'remove', {
+          configurable: true,
+          enumerable: true,
+          writable: true,
+          value: function () {
+              if (this.parentNode) {
+                  this.parentNode.removeChild(this);
+              }
+          }
+      });
+  }
+  Object.defineProperty(AyDialogElement.prototype, 'connectedCallback', {
+      configurable: true,
+      enumerable: false,
+      value: function () {
+          if (!initialized) {
+              initialized = true;
+              if (getComputedStyle(this).position !== 'absolute') {
+                  addStyles(POLYFILL_STYLES + DIALOG_STYLES);
+              }
+              else {
+                  addStyles(POLYFILL_STYLES);
+              }
+              if (!topLayerStack.length) {
+                  topLayerStack.push(document.body);
+              }
+              document.addEventListener('focus', checkInertFocus, true);
+          }
+          if (!this.hasAttribute('role')) {
+              this.setAttribute('role', 'dialog');
+          }
+          if (!this.hasAttribute('tabindex')) {
+              this.tabIndex = -1;
+          }
+      }
+  });
+  Object.defineProperty(AyDialogElement.prototype, 'attributeChangedCallback', {
+      configurable: true,
+      enumerable: false,
+      writable: true,
+      value: function (attribute, _oldValue, _newValue) {
+          if (attribute === 'open' && !this.hasAttribute('open')) {
+              const backdrop = backdropMap.get(this);
+              if (backdrop) {
+                  backdrop.hidden = true;
+              }
+          }
+      }
+  });
+  Object.defineProperty(AyDialogElement.prototype, 'disconnectedCallback', {
+      configurable: true,
+      enumerable: false,
+      writable: true,
+      value: function () {
+          if ((('isConnected' in this) && this.isConnected) || (this.ownerDocument.documentElement.contains(this))) {
+              return;
+          }
+          this.removeEventListener('keydown', escapeKeyHandler);
+          if (sentinelMap.has(this)) {
+              const sentinel = sentinelMap.get(this);
+              sentinelMap.delete(this);
+              if (sentinel && sentinel.parentNode) {
+                  sentinel.parentNode.removeChild(sentinel);
+              }
+          }
+          if (backdropMap.has(this)) {
+              const backdrop = backdropMap.get(this);
+              backdropMap.delete(this);
+              if (backdrop && backdrop.parentNode) {
+                  backdrop.parentNode.removeChild(backdrop);
+              }
+          }
+          retValMap.delete(this);
+      }
+  });
+
+  function attributeObservation(records) {
+      for (let i = 0; i < records.length; i++) {
+          const record = records[i];
+          if (record.type !== 'attributes') {
+              continue;
+          }
+          if (!(record.target instanceof AyDialogElement)) {
+              continue;
+          }
+          const target = record.target;
+          AyDialogElement.prototype.attributeChangedCallback.call(target, record.attributeName, record.oldValue, target.getAttribute(record.attributeName));
+      }
+  }
+  function augmentElements(mutationList, _obs) {
+      let addedNodeCount = 0;
+      let removedNodeCount = 0;
+      function sumMutatedNodes(prop) {
+          return function (a, r) {
+              return a += r[prop].length;
+          };
+      }
+      if (mutationList) {
+          addedNodeCount = mutationList.reduce(sumMutatedNodes('addedNodes'), 0);
+          removedNodeCount = mutationList.reduce(sumMutatedNodes('removedNodes'), 0);
+      }
+      if (mutationList && addedNodeCount === 0 && removedNodeCount === 0) {
+          return;
+      }
+      if (!mutationList || addedNodeCount > 0) {
+          const elements = document.querySelectorAll('dialog:not([__defined])');
+          for (let i = 0; i < elements.length; i++) {
+              AyDialogElement.call(elements[i]);
+              Object.setPrototypeOf(elements[i], AyDialogElement.prototype);
+              elements[i].setAttribute('__defined', '');
+              AyDialogElement.prototype.connectedCallback.call(elements[i]);
+              const mo = new MutationObserver(attributeObservation);
+              mo.observe(elements[i], {
+                  attributes: true,
+                  attributeOldValue: true,
+                  attributeFilter: ['open']
+              });
+          }
+      }
+      if (mutationList && removedNodeCount > 0) {
+          for (let i = 0; i < mutationList.length; i++) {
+              if (!mutationList[i].removedNodes.length) {
+                  continue;
+              }
+              for (let j = 0; j < mutationList[i].removedNodes.length; j++) {
+                  const el = mutationList[i].removedNodes[j];
+                  if (!(el instanceof HTMLElement)) {
+                      continue;
+                  }
+                  if (el.tagName.toLowerCase() === 'dialog' && el.hasAttribute('__defined')) {
+                      AyDialogElement.prototype.disconnectedCallback.call(el);
+                  }
+                  if (!el.isConnected) {
+                      const children = el.querySelectorAll('dialog[__defined]');
+                      for (let k = 0; k < children.length; k++) {
+                          AyDialogElement.prototype.disconnectedCallback.call(children[k]);
+                      }
+                  }
+              }
+          }
+      }
+  }
+  if (!('HTMLDialogElement' in window) || !('showModal' in HTMLDialogElement.prototype)) {
+      window.HTMLDialogElement = AyDialogElement;
+      const observer = new MutationObserver(augmentElements);
+      if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', function () {
+              augmentElements(null);
+          });
+      }
+      else {
+          augmentElements(null);
+      }
+      observer.observe(document.documentElement, { childList: true, subtree: true });
+      const createElement = document.createElement;
+      document.createElement = function (tagName) {
+          const el = createElement.call(this, tagName);
+          if (tagName.toLowerCase() === 'dialog') {
+              AyDialogElement.call(el);
+              Object.setPrototypeOf(el, AyDialogElement.prototype);
+          }
+          return el;
+      };
+  }
+
+  function backdropClickHandler$1(evt) {
+      if (!evt.target) {
+          return;
+      }
+      const dlg = evt.target.closest('dialog,ay-dialog');
+      if (!dlg || !dlg.open) {
+          return;
+      }
+      const rect = dlg.getBoundingClientRect();
+      const inDialog = evt.clientY >= rect.top &&
+          evt.clientY <= rect.top + rect.height &&
+          evt.clientX >= rect.left &&
+          evt.clientX <= rect.left + rect.width;
+      if (inDialog) {
+          return;
+      }
+      let cancel;
+      try {
+          cancel = new Event('cancel', { bubbles: false, cancelable: true });
+      }
+      catch (e) {
+          cancel = dlg.ownerDocument.createEvent('Event');
+          cancel.initEvent('cancel', false, true);
+      }
+      requestAnimationFrame(function () {
+          if (dlg.dispatchEvent(cancel)) {
+              dlg.close();
+          }
+      });
+  }
+  function addDialogBehaviour (DialogElement) {
+      Object.defineProperty(DialogElement, '_focusChildrenOnOpen', {
+          enumerable: false,
+          configurable: false,
+          value: true
+      });
+      const _showModal = DialogElement.prototype.showModal;
+      DialogElement.prototype.showModal = function () {
+          _showModal.apply(this, arguments);
+          this.addEventListener('click', backdropClickHandler$1);
+      };
+      const _close = DialogElement.prototype.close;
+      DialogElement.prototype.close = function () {
+          _close.apply(this, arguments);
+          this.removeEventListener('click', backdropClickHandler$1);
+      };
+      const _disconnectedCallback = DialogElement.prototype['disconnectedCallback'];
+      if (_disconnectedCallback) {
+          DialogElement.prototype['disconnectedCallback'] = function () {
+              _disconnectedCallback.apply(this, arguments);
+              if ((('isConnected' in this) && this.isConnected) || (this.ownerDocument.documentElement.contains(this))) {
+                  return;
+              }
+              this.removeEventListener('click', backdropClickHandler$1);
+          };
+      }
+      return DialogElement;
+  }
+
+  addDialogBehaviour(window.HTMLDialogElement);
+
+}());
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "ay-dialog",
-  "version": "1.4.0",
-  "copyright": "Copyright 2016 Ayogo Health Inc.",
+  "author": "Ayogo Health Inc. <[e-mail]>",
+  "copyright": "Copyright 2019 Ayogo Health Inc.",
   "license": "MIT",
-  "homepage": "http://ayogo.com",
-  "author": "Ayogo Health Inc. <[e-mail]>",
-  "contributors": [
-    "Darryl Pogue <[e-mail]>",
-    "Onataze Messiri <[e-mail]>",
-    "Jeffrey Chang <[e-mail]>"
-  ],
+  "homepage": "https://ayogo.com",
+  "version": "2.0.0-beta.1",
   "description": "An HTML5 spec-compliant <dialog> polyfill.",
-  "keywords": [
-    "client-side",
-    "dialog",
-    "browser"
-  ],
   "repository": {
@@ -26,14 +16,43 @@ "type": "git",
   },
-  "main": "dialog.js",
-  "jsnext:main": "index.js",
-  "typings": "index.d.ts",
-  "dependencies": {
-    "angular": "^1.4.0"
+  "keywords": [
+    "client-side",
+    "dialog",
+    "browser"
+  ],
+  "files": [
+    "index.js",
+    "index.js.map",
+    "component.js",
+    "component.js.map",
+    "polyfill.js",
+    "polyfill.js.map"
+  ],
+  "contributors": [
+    "Darryl Pogue <[e-mail]>",
+    "Jeffrey Chang <[e-mail]>",
+    "Onataze Messiri <[e-mail]>",
+    "Sam Evanuk <[e-mail]>"
+  ],
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.8.0",
+    "@typescript-eslint/parser": "^2.8.0",
+    "copyfiles": "^2.1.1",
+    "eslint": "^6.5.1",
+    "eslint-plugin-header": "^3.0.0",
+    "rollup": "^1.27.2",
+    "rollup-plugin-cleanup": "^3.0.0",
+    "rollup-plugin-sourcemaps": "^0.4.1",
+    "rollup-plugin-typescript2": "^0.25.2",
+    "typescript": "^3.7.2",
+    "wpt-runner": "github:dpogue/wpt-runner#sub"
   },
-  "peerDependencies": {
-    "angular": "^1.4.0"
-  },
   "scripts": {
-    "postversion": "git push && git push --tags"
+    "build": "rollup -c",
+    "lint": "eslint --ext .ts,.js .",
+    "test": "npm run lint && rollup -c --environment OUTPUT_PATH:tests/dist && echo \"\nTODO: Run the WPT tests using WebDriver\"",
+    "test-server": "rollup -c --environment OUTPUT_PATH:tests/dist && wpt-server tests --root-url=tests --port=1337",
+    "preversion": "npm run lint",
+    "version": "npm run build",
+    "postversion": "git push && git push --tag"
   }
 }

README.md

@@ -1,81 +0,102 @@
-ayDialog
-========
+# ayDialog
 
-An HTML5 spec-compliant <dialog> polyfill built with Angular 1.x.
+An HTML5 spec-compliant `dialog` element polyfill.
 
-<small>Copyright © 2016 Ayogo Health Inc.</small>
 
+## Features
 
-Features
---------
-
-* Automatic upgrading of `dialog` elements via Angular directive
-* Support for API methods (`show()`, `showModal()`, `close()`, `returnValue`)
-* Compatible with native `dialog` support in Chrome
+* Automatic support for `dialog` elements in the page
+* Support for `HTMLDialogElement` API methods
+* Compatible with native `dialog` support in Chrome and Firefox
 * Support for normal and modal dialogs (with backdrops)
-* Proper focus handling and disabling of background content for accessibility
+* Proper focus trapping and disabling of background content for accessibility
+* Browser support includes IE11 and Edge, Chrome, Firefox, and Safari
+    * `Element.closest()` polyfill (not included) required for IE11 and Edge <15
 
-Usage
------
+### Additional (non-standard) Features
 
-To get started, install the package from npm: `npm install ay-dialog`
+* Block scrolling while a modal dialog is open
+* Restoring focus when a modal dialog is closed
+* Automatic closing of the dialog when the backdrop is clicked
 
-### Basic Usage
 
-Add a script tag to your page to reference the dialog.js file:
+## Installation
 
-```html
-<script src="node_modules/ay-dialog/dialog.js"></script>
+The polyfill can be installed from npm:
+
+```bash
+npm install ay-dialog
 ```
 
-Reference the module in your Angular app's dependencies:
 
+## Usage
+
+There are 3 varieties included in the package, offering a polyfill for strictly
+the spec-compliant behaviour, a polyfill with additional features, and a Web
+Component custom element.
+
+### Polyfill with Extras
+
+A polyfill implementation of the `<dialog>` element and additional behaviour in
+all modern browsers.
+
 ```javascript
-angular.module(myApp, ['ayDialog'])
+// ES6 import:
+import 'ay-dialog/index.js';
+
+// CommonJS require:
+require('ay-dialog');
 ```
 
-### ES5 with Browserify
+### Pure Spec Polyfill
 
-Reference the module in your Angular app's dependencies:
+A polyfill implementation for the `<dialog>` element in all modern browsers,
+matching spec behaviour as closely as possible. No extra behaviour.
 
 ```javascript
-var ayDialog = require('ay-dialog').default;
+// ES6 import:
+import 'ay-dialog/polyfill.js';
 
-angular.module(myApp, [ayDialog])
+// CommonJS require:
+require('ay-dialog/polyfill');
 ```
 
-### ES6 / TypeScript
+### `ay-dialog` Custom Element
 
-Reference the module in your Angular app's dependencies:
+An implementation of the dialog spec and additional behaviour as a
+`<ay-dialog>` custom element. This only works in modern browsers with support
+for HTML custom elements.
 
-```typescript
-import ayDialog from 'ay-dialog';
+```javascript
+// ES6 import:
+import 'ay-dialog/component.js';
 
-angular.module(myApp, [ayDialog])
+// CommonJS require:
+require('ay-dialog/component');
 ```
 
-A TypeScript module definition is included, which also provides typings for the
-HTMLDialogElement interface.
 
+## Tests
 
-Styling
--------
+This project is tested against the [Web Platform
+Tests](https://web-platform-tests.org/) for the HTML5 `dialog` element.
 
-It's not possible to implement the backdrop as a pseudo-element (as it is in native implementations), so the backdrop is added as a sibling element with a `.backdrop` class.
+See the `tests` folder for test cases and instructions for running tests in a
+browser.
 
-Note that you need two separate selectors to support both `.backdrop` and `::backdrop`, otherwise browsers that don't recognize the pseudo-element will skip the CSS block entirely!
 
-```css
-dialog + .backdrop {
-    background: rgba(1, 0, 0, 0.1);
-}
+## Contributing
 
-dialog::backdrop {
-    background: rgba(1, 0, 0, 0.1);
-}
-```
+Contributions of bug reports, feature requests, and pull requests are greatly
+appreciated!
 
-Notes
------
+Please note that this project is released with a [Contributor Code of
+Conduct](https://github.com/AyogoHealth/ay-dialog/blob/master/CODE_OF_CONDUCT.md).
+By participating in this project you agree to abide by its terms.
 
-Released under the terms of the [MIT License](LICENSE).
+
+## Licence
+
+Released under the MIT Licence.
+
+Copyright © 2019 Ayogo Health Inc.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

199814

increased by325.9%

Dependency count

0

decreased by-100%

Lines of code

1758

increased by210.05%

Number of lines in readme file

103

increased by25.61%

Worsened metrics

Dev dependency count

11

increased byInfinity%

Number of low quality alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedangular@^1.4.0

• - Removedangular@1.8.3(transitive)