@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/collection/components/tabs/tab.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Component, Element, Host, Method, Prop, h, } from '@stencil/core';
+import { Component, Element, Host, Method, Prop, h, Event, } from '@stencil/core';
 let id = 0;
 /**
  * @slot - The tab's label.
@@ -15,6 +15,11 @@ export class Tab {
     this.active = false;
     /** Set to true to draw the tab in an active state. */
     this.disabled = false;
+    /** When true, the tab will be rendered with a close icon. */
+    this.closable = false;
+    this.handleCloseClick = () => {
+      this.nanoTabClose.emit();
+    };
   }
   /** Sets focus to the tab. */
   async setFocus() {
@@ -30,8 +35,10 @@ export class Tab {
           nanotab: true,
           'nanotab--active': this.active,
           'nanotab--disabled': this.disabled,
+          'nanotab--closable': this.closable,
         }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' },
-        h("slot", null))));
+        h("slot", null),
+        this.closable && (h("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
   }
   static get is() { return "nano-tab"; }
   static get encapsulation() { return "shadow"; }
@@ -101,8 +108,44 @@ export class Tab {
       "attribute": "disabled",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the tab will be rendered with a close icon."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "closable",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
+  static get events() { return [{
+      "method": "nanoTabClose",
+      "name": "nanoTabClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the tab is closable and the close button is activated."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "setFocus": {
       "complexType": {

package/dist/collection/components/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EAEJ,MAAM,EACN,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AAEvB,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;GAEG;AAOH,MAAM,OAAO,GAAG;EALhB;IAMU,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAInC,uGAAuG;IAC9E,UAAK,GAAG,EAAE,CAAC;IAEpC,0FAA0F;IACjE,WAAM,GAAG,KAAK,CAAC;IAExC,sDAAsD;IAC7B,aAAQ,GAAG,KAAK,CAAC;GAmC3C;EAjCC,6BAA6B;EAE7B,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;EAC1C,CAAC;EAED,kCAAkC;EAElC,KAAK,CAAC,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;EAClB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK;MAClC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;UAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;QAEpD,eAAQ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EAEJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,KAAK,GAEN,MAAM,eAAe,CAAC;AAEvB,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;GAEG;AAOH,MAAM,OAAO,GAAG;EALhB;IAMU,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAKnC,uGAAuG;IAC9E,UAAK,GAAG,EAAE,CAAC;IAEpC,0FAA0F;IACjE,WAAM,GAAG,KAAK,CAAC;IAExC,sDAAsD;IAC7B,aAAQ,GAAG,KAAK,CAAC;IAE1C,6DAA6D;IACrD,aAAQ,GAAG,KAAK,CAAC;IAiBjB,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;GAkCH;EAhDC,6BAA6B;EAE7B,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;EAC1C,CAAC;EAED,kCAAkC;EAElC,KAAK,CAAC,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;EAClB,CAAC;EAMD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK;MAClC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;UAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;UAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;QAEpD,eAAQ;QACP,IAAI,CAAC,QAAQ,IAAI,CAChB,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabClose: EventEmitter;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  private handleCloseClick = () => {\n    this.nanoTabClose.emit();\n  };\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/times\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tooltip/tooltip.css

@@ -7,6 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
+[hidden] {
+  display: none !important;
+}
 /**
  * @prop --hide-delay: The amount of time to wait before hiding the tooltip.
  * @prop --hide-duration: The amount of time the hide transition takes to complete.

package/dist/collection/utils/active-element.js

@@ -0,0 +1,16 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+export function getActiveElement(root = document) {
+  const activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot && activeEl.shadowRoot.activeElement) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  else {
+    return activeEl;
+  }
+}
+//# sourceMappingURL=active-element.js.map

package/dist/collection/utils/active-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-element.js","sourceRoot":"","sources":["../../src/utils/active-element.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAC9B,OAA8B,QAAQ;EAEtC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;EAEpC,IAAI,CAAC,QAAQ,EAAE;IACb,OAAO,IAAI,CAAC;GACb;EAED,IAAI,QAAQ,CAAC,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,aAAa,EAAE;IAC5D,OAAO,gBAAgB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;GAC9C;OAAM;IACL,OAAO,QAAQ,CAAC;GACjB;AACH,CAAC","sourcesContent":["export function getActiveElement(\n  root: Document | ShadowRoot = document\n): Element | null {\n  const activeEl = root.activeElement;\n\n  if (!activeEl) {\n    return null;\n  }\n\n  if (activeEl.shadowRoot && activeEl.shadowRoot.activeElement) {\n    return getActiveElement(activeEl.shadowRoot);\n  } else {\n    return activeEl;\n  }\n}\n"]}

package/dist/collection/utils/dom.js

@@ -14,19 +14,38 @@ export function closestElement(selector, base = this) {
   }
   return __closestFrom(base);
 }
-export const getDirectChildren = (elm, sel) => {
+export function getDirectChildren(el, sel, elesOnly = true) {
+  if (elesOnly === true) {
+    try {
+      sel = ':scope > ' + sel.split(',').join(', :scope >');
+      return Array.from(el.querySelectorAll(sel));
+    }
+    catch (e) {
+      console.log('an error sad');
+    }
+  }
   if (!Element.prototype.matches) {
     Element.prototype.matches =
       Element.prototype.msMatchesSelector ||
         Element.prototype.webkitMatchesSelector;
   }
   let ret = [];
-  Array.from(elm.children).forEach((el) => {
-    if (el instanceof Element && el.matches(sel))
-      ret.push(el);
+  Array.from(el.childNodes).forEach((e) => {
+    if (!!e.matches && e.matches(sel))
+      ret.push(e);
+    else if (e.nodeName.toLowerCase() === 'slot') {
+      Array.from(e.assignedNodes()).forEach((slotEl) => {
+        if (slotEl instanceof Element && slotEl.matches(sel))
+          ret.push(slotEl);
+        else if (slotEl instanceof Node && !elesOnly)
+          ret.push(slotEl);
+      });
+    }
+    else if (!elesOnly)
+      ret.push(e);
   });
   return ret;
-};
+}
 export const getSiblings = (el, sel) => {
   if (!Element.prototype.matches) {
     Element.prototype.matches =

package/dist/collection/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,OAAgB,IAAI;EACnE,SAAS,aAAa,CAAC,EAA+B;IACpD,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,MAAM;MAAE,OAAO,IAAI,CAAC;IACzD,IAAK,EAAsB,CAAC,YAAY;MACtC,EAAE,GAAI,EAAsB,CAAC,YAAY,CAAC;IAC5C,IAAI,KAAK,GAAI,EAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,KAAK;MACV,CAAC,CAAC,KAAK;MACP,CAAC,CAAC,aAAa,CAAG,EAAc,CAAC,WAAW,EAAiB,CAAC,IAAI,CAAC,CAAC;EACxE,CAAC;EACD,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAAY,EACZ,GAAW,EACS,EAAE;EACtB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE;IAC9B,OAAO,CAAC,SAAS,CAAC,OAAO;MACvB,OAAO,CAAC,SAAS,CAAC,iBAAiB;QACnC,OAAO,CAAC,SAAS,CAAC,qBAAqB,CAAC;GAC3C;EACD,IAAI,GAAG,GAAuB,EAAE,CAAC;EACjC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;IACtC,IAAI,EAAE,YAAY,OAAO,IAAI,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC;MAAE,GAAG,CAAC,IAAI,CAAC,EAAiB,CAAC,CAAC;EAC5E,CAAC,CAAC,CAAC;EACH,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAW,EAAE,GAAY,EAAkB,EAAE;EACvE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE;IAC9B,OAAO,CAAC,SAAS,CAAC,OAAO;MACvB,OAAO,CAAC,SAAS,CAAC,iBAAiB;QACnC,OAAO,CAAC,SAAS,CAAC,qBAAqB,CAAC;GAC3C;EACD,IAAI,QAAQ,GAAG,EAAE,CAAC;EAClB,IAAI,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC;EACjD,GAAG;IACD,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,KAAK,EAAE,IAAI,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;MACxD,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GAC7B,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC,kBAAkB,CAAC,EAAE;EACvD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,OAAoB,EAAE,MAAmB;EACjE,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO;IAAE,OAAO;EAChC,OAAO;IACL,GAAG,EACD,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,GAAG;IAC1E,IAAI,EACF,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI;MACpC,MAAM,CAAC,qBAAqB,EAAE,CAAC,IAAI;GACtC,CAAC;AACJ,CAAC","sourcesContent":["export function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    let found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\nexport const getDirectChildren = (\n  elm: Element,\n  sel: string\n): Array<HTMLElement> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  let ret: Array<HTMLElement> = [];\n  Array.from(elm.children).forEach((el) => {\n    if (el instanceof Element && el.matches(sel)) ret.push(el as HTMLElement);\n  });\n  return ret;\n};\n\nexport const getSiblings = (el: Element, sel?: string): Array<Element> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  let siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return;\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"]}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"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","sourcesContent":["export function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    let found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n */\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly: boolean | 'slot' = true\n) {\n  if (elesOnly === true) {\n    try {\n      sel = ':scope > ' + sel.split(',').join(', :scope >');\n      return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n    } catch (e) {\n      console.log('an error sad');\n    }\n  }\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n\n  let ret: Array<Node | T> = [];\n  Array.from(el.childNodes).forEach((e) => {\n    if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n    else if (e.nodeName.toLowerCase() === 'slot') {\n      Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n        if (slotEl instanceof Element && slotEl.matches(sel)) ret.push(slotEl);\n        else if (slotEl instanceof Node && !elesOnly) ret.push(slotEl as Node);\n      });\n    } else if (!elesOnly) ret.push(e as Node);\n  });\n  return ret;\n}\n\nexport const getSiblings = (el: Element, sel?: string): Array<Element> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  let siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return;\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"]}

package/dist/collection/utils/index.js

@@ -3,10 +3,11 @@
  */
 export * from './dom';
 export * from './throttle';
-export * from './legacy';
 export * from './scroll';
 export * from './slot';
 export * from './theme';
+export * from './active-element';
+export * from './tabbable';
 /**
  * Patched Request Animation Frame method.
  * Perform a function between browser paints for less page jank
@@ -111,24 +112,23 @@ export const transitionDone = (el) => {
  */
 export const displayTransition = (el, className, show = true) => {
   return new Promise((resolve) => {
-    const callbackOpen = () => {
-      el.removeEventListener('transitionend', callbackOpen);
-      resolve('shown');
-    };
-    const callbackClosed = () => {
-      el.removeEventListener('transitionend', callbackClosed);
-      el.style.display = 'none';
-      resolve('hidden');
-    };
     if (show) {
-      el.addEventListener('transitionend', callbackOpen);
+      el.addEventListener('transitionend', (e) => {
+        if (e.target !== el)
+          return;
+        resolve('shown');
+      }, { once: true });
       el.style.display = 'block';
       el.dataset.displayTransition = 'true';
       setTimeout(() => el.classList.add(className), 20);
-      // el.classList.add(className)
     }
     else {
-      el.addEventListener('transitionend', callbackClosed);
+      el.addEventListener('transitionend', (e) => {
+        if (e.target !== el)
+          return;
+        el.style.display = 'none';
+        resolve('hidden');
+      }, { once: true });
       el.classList.remove(className);
     }
   });

package/dist/collection/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { Side } from '../interface';\n\nexport * from './dom';\nexport * from './throttle';\nexport * from './legacy';\nexport * from './scroll';\nexport * from './slot';\nexport * from './theme';\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\ndeclare const requestAnimationFrame: any;\n\n/**\n * Patched Request Animation Frame method.\n * Perform a function between browser paints for less page jank\n * @param callback\n * @returns wrapped function\n */\nexport const raf = (callback: any) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow;\n};\n\nexport const browserCanUseCssVariables = () => {\n  return window.CSS && CSS.supports('color', 'var(--fake-var)');\n};\n\nexport const renderHiddenInput = (\n  always: boolean,\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  if (always || hasShadowDom(container)) {\n    let input = container.querySelector(\n      'input.aux-input'\n    ) as HTMLInputElement | null;\n    if (!input) {\n      input = container.ownerDocument!.createElement('input');\n      input.type = 'hidden';\n      input.classList.add('aux-input');\n      container.appendChild(input);\n    }\n    input.disabled = disabled;\n    input.name = name;\n    input.value = value || '';\n  }\n};\n\nexport const clamp = (min: number, n: number, max: number) => {\n  return Math.max(min, Math.min(n, max));\n};\n\nexport const assert = (actual: any, reason: string) => {\n  if (!actual) {\n    const message = 'ASSERT: ' + reason;\n    console.error(message);\n    debugger; // tslint:disable-line\n    throw new Error(message);\n  }\n};\n\nexport const now = (ev: UIEvent) => {\n  return ev.timeStamp || Date.now();\n};\n\nexport const pointerCoord = (ev: any): { x: number; y: number } => {\n  // get X coordinates for either a mouse click\n  // or a touch depending on the given event\n  if (ev) {\n    const changedTouches = ev.changedTouches;\n    if (changedTouches && changedTouches.length > 0) {\n      const touch = changedTouches[0];\n      return { x: touch.clientX, y: touch.clientY };\n    }\n    if (ev.pageX !== undefined) {\n      return { x: ev.pageX, y: ev.pageY };\n    }\n  }\n  return { x: 0, y: 0 };\n};\n\n/**\n * @hidden\n * Given a side, return if it should be on the end\n * based on the value of dir\n * @param side the side\n * @param isRTL whether the application dir is rtl\n */\nexport const isEndSide = (side: Side): boolean => {\n  const isRTL = document.dir === 'rtl';\n  switch (side) {\n    case 'start':\n      return isRTL;\n    case 'end':\n      return !isRTL;\n    default:\n      throw new Error(\n        `\"${side}\" is not a valid value for [side]. Use \"start\" or \"end\" instead.`\n      );\n  }\n};\n\n/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callbackOpen = () => {\n      el.removeEventListener('transitionend', callbackOpen);\n      resolve('shown');\n    };\n\n    const callbackClosed = () => {\n      el.removeEventListener('transitionend', callbackClosed);\n      el.style.display = 'none';\n      resolve('hidden');\n    };\n\n    if (show) {\n      el.addEventListener('transitionend', callbackOpen);\n      el.style.display = 'block';\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n      // el.classList.add(className)\n    } else {\n      el.addEventListener('transitionend', callbackClosed);\n      el.classList.remove(className);\n    }\n  });\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { Side } from '../interface';\n\nexport * from './dom';\nexport * from './throttle';\nexport * from './scroll';\nexport * from './slot';\nexport * from './theme';\nexport * from './active-element';\nexport * from './tabbable';\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\ndeclare const requestAnimationFrame: any;\n\n/**\n * Patched Request Animation Frame method.\n * Perform a function between browser paints for less page jank\n * @param callback\n * @returns wrapped function\n */\nexport const raf = (callback: any) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow;\n};\n\nexport const browserCanUseCssVariables = () => {\n  return window.CSS && CSS.supports('color', 'var(--fake-var)');\n};\n\nexport const renderHiddenInput = (\n  always: boolean,\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  if (always || hasShadowDom(container)) {\n    let input = container.querySelector(\n      'input.aux-input'\n    ) as HTMLInputElement | null;\n    if (!input) {\n      input = container.ownerDocument!.createElement('input');\n      input.type = 'hidden';\n      input.classList.add('aux-input');\n      container.appendChild(input);\n    }\n    input.disabled = disabled;\n    input.name = name;\n    input.value = value || '';\n  }\n};\n\nexport const clamp = (min: number, n: number, max: number) => {\n  return Math.max(min, Math.min(n, max));\n};\n\nexport const assert = (actual: any, reason: string) => {\n  if (!actual) {\n    const message = 'ASSERT: ' + reason;\n    console.error(message);\n    debugger; // tslint:disable-line\n    throw new Error(message);\n  }\n};\n\nexport const now = (ev: UIEvent) => {\n  return ev.timeStamp || Date.now();\n};\n\nexport const pointerCoord = (ev: any): { x: number; y: number } => {\n  // get X coordinates for either a mouse click\n  // or a touch depending on the given event\n  if (ev) {\n    const changedTouches = ev.changedTouches;\n    if (changedTouches && changedTouches.length > 0) {\n      const touch = changedTouches[0];\n      return { x: touch.clientX, y: touch.clientY };\n    }\n    if (ev.pageX !== undefined) {\n      return { x: ev.pageX, y: ev.pageY };\n    }\n  }\n  return { x: 0, y: 0 };\n};\n\n/**\n * @hidden\n * Given a side, return if it should be on the end\n * based on the value of dir\n * @param side the side\n * @param isRTL whether the application dir is rtl\n */\nexport const isEndSide = (side: Side): boolean => {\n  const isRTL = document.dir === 'rtl';\n  switch (side) {\n    case 'start':\n      return isRTL;\n    case 'end':\n      return !isRTL;\n    default:\n      throw new Error(\n        `\"${side}\" is not a valid value for [side]. Use \"start\" or \"end\" instead.`\n      );\n  }\n};\n\n/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (e.target !== el) return;\n          resolve('shown');\n        },\n        { once: true }\n      );\n      el.style.display = 'block';\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (e.target !== el) return;\n          el.style.display = 'none';\n          resolve('hidden');\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"]}

package/dist/collection/utils/popover.js

@@ -73,6 +73,15 @@ export default class Popover {
       placement: this.options.placement,
       strategy: this.options.strategy,
       modifiers: [
+        {
+          name: 'sameWidth',
+          enabled: true,
+          fn: ({ state }) => {
+            state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+          },
+          phase: 'beforeWrite',
+          requires: ['computeStyles'],
+        },
         {
           name: 'flip',
           options: {

package/dist/collection/utils/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/utils/popover.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.\n//\n// Powered by Popper.js.\n//\n// NOTE:\n//\n// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover\n//   won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.\n//\n// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different\n//   transitions for show/hide.\n//\n// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an\n//   undesired effect when the element is shown and when its placement changes.\n//\nimport { Instance as PopperInstance, createPopper } from '@popperjs/core';\n\nexport default class Popover {\n  anchor: HTMLElement;\n  isVisible: boolean;\n  popover: HTMLElement;\n  popper: PopperInstance;\n  options: PopoverOptions;\n\n  constructor(\n    anchor: HTMLElement,\n    popover: HTMLElement,\n    options?: PopoverOptions\n  ) {\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n\n    this.anchor = anchor;\n    this.popover = popover;\n    this.options = Object.assign(\n      {\n        skidding: 0,\n        distance: 0,\n        placement: 'bottom-start',\n        strategy: 'absolute',\n        transitionElement: this.popover,\n        visibleClass: 'popover-visible',\n        onAfterShow: () => {},\n        onAfterHide: () => {},\n        onTransitionEnd: () => {},\n      },\n      options\n    );\n\n    // this.isVisible = false;\n    this.popover.hidden = true;\n    this.popover.classList.remove(this.options.visibleClass);\n\n    this.popover.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Make sure the transition event originates from from the correct element, and not one that has bubbled up\n    if (target === this.options.transitionElement) {\n      // This is called before the element is hidden so users can do things like reset scroll. It will fire once for\n      // every transition property. Use `event.propertyName` to determine which property has finished transitioning.\n      this.options.onTransitionEnd.call(this, event);\n\n      // Make sure we only do this once, since transitionend will fire for every transition\n      if (this.isVisible === false && !this.popover.hidden) {\n        this.popover.hidden = true;\n        this.popover.classList.remove(this.options.visibleClass);\n        this.options.onAfterHide.call(this);\n      }\n    }\n  }\n\n  destroy() {\n    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);\n    if (this.popper) {\n      this.popper.destroy();\n      this.popper = null;\n    }\n  }\n\n  show() {\n    this.isVisible = true;\n    this.popover.hidden = false;\n    this.popover.clientWidth; // force reflow\n\n    requestAnimationFrame(() =>\n      this.popover.classList.add(this.options.visibleClass)\n    );\n\n    if (this.popper) {\n      this.popper.destroy();\n    }\n\n    this.popper = createPopper(this.anchor, this.popover, {\n      placement: this.options.placement,\n      strategy: this.options.strategy,\n      modifiers: [\n        {\n          name: 'flip',\n          options: {\n            boundary: 'viewport',\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            padding: 5,\n            offset: [this.options.skidding, this.options.distance],\n          },\n        },\n      ],\n    });\n\n    this.popover.addEventListener(\n      'transitionend',\n      () => this.options.onAfterShow.call(this),\n      { once: true }\n    );\n\n    // Reposition the menu after it appears in case a modifier kicked in\n    requestAnimationFrame(() => this.popper.update());\n  }\n\n  hide() {\n    // Apply the hidden styles and wait for the transition before hiding completely\n    this.isVisible = false;\n    this.popover.classList.remove(this.options.visibleClass);\n  }\n\n  setOptions(options: PopoverOptions) {\n    this.options = Object.assign(this.options, options);\n    this.isVisible\n      ? this.popover.classList.add(this.options.visibleClass)\n      : this.popover.classList.remove(this.options.visibleClass);\n\n    // Update popper options\n    if (this.popper) {\n      this.popper.setOptions({\n        placement: this.options.placement,\n        strategy: this.options.strategy,\n      });\n\n      requestAnimationFrame(() => this.popper.update());\n    }\n  }\n}\n\ninterface PopoverOptions {\n  distance?: number;\n  placement?:\n    | 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  skidding?: number;\n  strategy?: 'absolute' | 'fixed';\n  transitionElement?: HTMLElement;\n  visibleClass?: string;\n  onAfterShow?: () => any;\n  onAfterHide?: () => any;\n  onTransitionEnd?: (event: TransitionEvent) => any;\n}\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/utils/popover.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.\n//\n// Powered by Popper.js.\n//\n// NOTE:\n//\n// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover\n//   won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.\n//\n// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different\n//   transitions for show/hide.\n//\n// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an\n//   undesired effect when the element is shown and when its placement changes.\n//\nimport { Instance as PopperInstance, createPopper } from '@popperjs/core';\n\nexport default class Popover {\n  anchor: HTMLElement;\n  isVisible: boolean;\n  popover: HTMLElement;\n  popper: PopperInstance;\n  options: PopoverOptions;\n\n  constructor(\n    anchor: HTMLElement,\n    popover: HTMLElement,\n    options?: PopoverOptions\n  ) {\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n\n    this.anchor = anchor;\n    this.popover = popover;\n    this.options = Object.assign(\n      {\n        skidding: 0,\n        distance: 0,\n        placement: 'bottom-start',\n        strategy: 'absolute',\n        transitionElement: this.popover,\n        visibleClass: 'popover-visible',\n        onAfterShow: () => {},\n        onAfterHide: () => {},\n        onTransitionEnd: () => {},\n      },\n      options\n    );\n\n    // this.isVisible = false;\n    this.popover.hidden = true;\n    this.popover.classList.remove(this.options.visibleClass);\n\n    this.popover.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Make sure the transition event originates from from the correct element, and not one that has bubbled up\n    if (target === this.options.transitionElement) {\n      // This is called before the element is hidden so users can do things like reset scroll. It will fire once for\n      // every transition property. Use `event.propertyName` to determine which property has finished transitioning.\n      this.options.onTransitionEnd.call(this, event);\n\n      // Make sure we only do this once, since transitionend will fire for every transition\n      if (this.isVisible === false && !this.popover.hidden) {\n        this.popover.hidden = true;\n        this.popover.classList.remove(this.options.visibleClass);\n        this.options.onAfterHide.call(this);\n      }\n    }\n  }\n\n  destroy() {\n    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);\n    if (this.popper) {\n      this.popper.destroy();\n      this.popper = null;\n    }\n  }\n\n  show() {\n    this.isVisible = true;\n    this.popover.hidden = false;\n    this.popover.clientWidth; // force reflow\n\n    requestAnimationFrame(() =>\n      this.popover.classList.add(this.options.visibleClass)\n    );\n\n    if (this.popper) {\n      this.popper.destroy();\n    }\n\n    this.popper = createPopper(this.anchor, this.popover, {\n      placement: this.options.placement,\n      strategy: this.options.strategy,\n      modifiers: [\n        {\n          name: 'sameWidth',\n          enabled: true,\n          fn: ({ state }) => {\n            state.styles.popper.minWidth = `${state.rects.reference.width}px`;\n          },\n          phase: 'beforeWrite',\n          requires: ['computeStyles'],\n        },\n        {\n          name: 'flip',\n          options: {\n            boundary: 'viewport',\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            padding: 5,\n            offset: [this.options.skidding, this.options.distance],\n          },\n        },\n      ],\n    });\n\n    this.popover.addEventListener(\n      'transitionend',\n      () => this.options.onAfterShow.call(this),\n      { once: true }\n    );\n\n    // Reposition the menu after it appears in case a modifier kicked in\n    requestAnimationFrame(() => this.popper.update());\n  }\n\n  hide() {\n    // Apply the hidden styles and wait for the transition before hiding completely\n    this.isVisible = false;\n    this.popover.classList.remove(this.options.visibleClass);\n  }\n\n  setOptions(options: PopoverOptions) {\n    this.options = Object.assign(this.options, options);\n    this.isVisible\n      ? this.popover.classList.add(this.options.visibleClass)\n      : this.popover.classList.remove(this.options.visibleClass);\n\n    // Update popper options\n    if (this.popper) {\n      this.popper.setOptions({\n        placement: this.options.placement,\n        strategy: this.options.strategy,\n      });\n\n      requestAnimationFrame(() => this.popper.update());\n    }\n  }\n}\n\ninterface PopoverOptions {\n  distance?: number;\n  placement?:\n    | 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  skidding?: number;\n  strategy?: 'absolute' | 'fixed';\n  transitionElement?: HTMLElement;\n  visibleClass?: string;\n  onAfterShow?: () => any;\n  onAfterHide?: () => any;\n  onTransitionEnd?: (event: TransitionEvent) => any;\n}\n"]}

package/dist/collection/utils/tabbable.js

@@ -58,32 +58,34 @@ function isTabbable(el) {
 }
 // Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the
 // resulting array. This function will also look in open shadow roots.
-export function getTabbableElements(root) {
+export function getTabbableElements(root, first = false) {
   const tabbableElements = [];
   if (root instanceof HTMLElement) {
     // Is the root element tabbable?
     if (isTabbable(root)) {
       tabbableElements.push(root);
+      if (first)
+        return tabbableElements;
     }
     // Look for tabbable elements in the shadow root
     if (root.shadowRoot && root.shadowRoot.mode === 'open') {
-      getTabbableElements(root.shadowRoot).map((el) => tabbableElements.push(el));
+      getTabbableElements(root.shadowRoot, first).map((el) => tabbableElements.push(el));
     }
     // Look at slotted elements
     if (HTMLSlotElement && root instanceof HTMLSlotElement) {
       root.assignedElements().map((slottedEl) => {
-        getTabbableElements(slottedEl).map((el) => tabbableElements.push(el));
+        getTabbableElements(slottedEl, first).map((el) => tabbableElements.push(el));
       });
     }
   }
   // Look for tabbable elements in children
   Array.from(root.querySelectorAll('*')).map((el) => {
-    getTabbableElements(el).map((el) => tabbableElements.push(el));
+    getTabbableElements(el, first).map((el) => tabbableElements.push(el));
   });
   return tabbableElements;
 }
 export function getNearestTabbableElement(el) {
-  const tabbableElements = getTabbableElements(el);
+  const tabbableElements = getTabbableElements(el, true);
   return tabbableElements.length ? tabbableElements[0] : null;
 }
 //# sourceMappingURL=tabbable.js.map

package/dist/collection/utils/tabbable.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../src/utils/tabbable.ts"],"names":[],"mappings":"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","sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot).map((el) =>\n        tabbableElements.push(el)\n      );\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl).map((el) => tabbableElements.push(el));\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el).map((el) => tabbableElements.push(el));\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"]}
+{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../src/utils/tabbable.ts"],"names":[],"mappings":"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","sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(\n  root: HTMLElement | ShadowRoot,\n  first: boolean = false\n) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n\n      if (first) return tabbableElements;\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot, first).map((el) =>\n        tabbableElements.push(el)\n      );\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl, first).map((el) =>\n          tabbableElements.push(el)\n        );\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el, first).map((el) => tabbableElements.push(el));\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: Element): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el as HTMLElement, true);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"]}

package/dist/collection/utils/template.js

@@ -3,7 +3,11 @@
  */
 import * as Sqrl from 'squirrelly';
 const squirrel = Sqrl;
-squirrel.filters.define('date_long', (str, options = { year: 'numeric', month: 'long', day: 'numeric' }) => {
+squirrel.filters.define('date_long', (str, options = {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+}) => {
   if (!str)
     return;
   let date = new Date(parseInt(str) * 1000);

package/dist/collection/utils/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/utils/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { IndexResult, AlgoliaResultHit } from '../interface';\nimport * as Sqrl from 'squirrelly';\n\nconst squirrel = Sqrl;\n\nsquirrel.filters.define(\n  'date_long',\n  (\n    str: string,\n    options: {\n      year: 'numeric' | '2-digit';\n      month: 'numeric' | '2-digit' | 'long';\n      day: 'numeric' | '2-digit';\n    } = { year: 'numeric', month: 'long', day: 'numeric' }\n  ) => {\n    if (!str) return;\n    let date = new Date(parseInt(str) * 1000);\n    str = date.toLocaleDateString('en-GB', options);\n    return str;\n  }\n);\n\nsquirrel.filters.define(\n  'date_short',\n  (str: string, format: string = 'd/m/y') => {\n    if (!str) return;\n    let date = new Date(parseInt(str) * 1000);\n    str = format.replace(/(d)/, date.getDate().toString());\n    str = str.replace(/(m)/, (date.getMonth() + 1).toString());\n    str = str.replace(/(y)/, date.getFullYear().toString());\n    return str;\n  }\n);\n\nsquirrel.filters.define('public_name', (str: string) => {\n  if (!str) return;\n  str = str\n    .split('_')\n    .map((val) => {\n      return val.length < 3 ? val.toUpperCase() : val;\n    })\n    .join(' ');\n  return str.charAt(0).toUpperCase() + str.slice(1);\n});\n\nsquirrel.filters.define('trim_to', (str: string, length: number = 100) => {\n  if (!str) return;\n  if (str.length <= length) return str;\n  return str.substr(0, length) + '...';\n});\n\nsquirrel.filters.define('classname', (str: string) => {\n  if (!str) return;\n  return str.replace(/[\\W]+/g, '');\n});\n\nsquirrel.filters.define(\n  'abs_url',\n  (str: string, index: IndexResult = null, result?: AlgoliaResultHit) => {\n    if (!index) return str;\n    if (!str) return;\n\n    let domain = undefined;\n    if (index.domains && result && result.origin) {\n      let found = index.domains.find((dm) => dm.origin === result.origin);\n      domain = found ? found.domain : '';\n    } else if (index.domain) domain = index.domain;\n\n    if (!domain) return str;\n    return str.match(/^http/) ? str : location.protocol + '//' + domain + str;\n  }\n);\n\nsquirrel.filters.define(\n  'replace',\n  (str: string, search?: string, replace?: string) =>\n    str.replace(search, replace)\n);\nsquirrel.filters.define('remove_spaces', (str: string) =>\n  str.replace(/ /g, '_')\n);\nsquirrel.filters.define(\n  'add_spaces',\n  (str: string) => (str = str.replace(/[_\\-]/g, ' '))\n);\nsquirrel.filters.define(\n  'capitalise',\n  (str: string) => (str = str.charAt(0).toUpperCase() + str.slice(1))\n);\nsquirrel.filters.define(\n  'lowercase',\n  (str: string) => (str = str.toLowerCase())\n);\n\nexport const Squirrel = squirrel;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/utils/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { IndexResult, AlgoliaResultHit } from '../interface';\nimport * as Sqrl from 'squirrelly';\n\nconst squirrel = Sqrl;\n\nsquirrel.filters.define(\n  'date_long',\n  (\n    str: string,\n    options: Intl.DateTimeFormatOptions = {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }\n  ) => {\n    if (!str) return;\n    let date = new Date(parseInt(str) * 1000);\n    str = date.toLocaleDateString('en-GB', options);\n    return str;\n  }\n);\n\nsquirrel.filters.define(\n  'date_short',\n  (str: string, format: string = 'd/m/y') => {\n    if (!str) return;\n    let date = new Date(parseInt(str) * 1000);\n    str = format.replace(/(d)/, date.getDate().toString());\n    str = str.replace(/(m)/, (date.getMonth() + 1).toString());\n    str = str.replace(/(y)/, date.getFullYear().toString());\n    return str;\n  }\n);\n\nsquirrel.filters.define('public_name', (str: string) => {\n  if (!str) return;\n  str = str\n    .split('_')\n    .map((val) => {\n      return val.length < 3 ? val.toUpperCase() : val;\n    })\n    .join(' ');\n  return str.charAt(0).toUpperCase() + str.slice(1);\n});\n\nsquirrel.filters.define('trim_to', (str: string, length: number = 100) => {\n  if (!str) return;\n  if (str.length <= length) return str;\n  return str.substr(0, length) + '...';\n});\n\nsquirrel.filters.define('classname', (str: string) => {\n  if (!str) return;\n  return str.replace(/[\\W]+/g, '');\n});\n\nsquirrel.filters.define(\n  'abs_url',\n  (str: string, index: IndexResult = null, result?: AlgoliaResultHit) => {\n    if (!index) return str;\n    if (!str) return;\n\n    let domain = undefined;\n    if (index.domains && result && result.origin) {\n      let found = index.domains.find((dm) => dm.origin === result.origin);\n      domain = found ? found.domain : '';\n    } else if (index.domain) domain = index.domain;\n\n    if (!domain) return str;\n    return str.match(/^http/) ? str : location.protocol + '//' + domain + str;\n  }\n);\n\nsquirrel.filters.define(\n  'replace',\n  (str: string, search?: string, replace?: string) =>\n    str.replace(search, replace)\n);\nsquirrel.filters.define('remove_spaces', (str: string) =>\n  str.replace(/ /g, '_')\n);\nsquirrel.filters.define(\n  'add_spaces',\n  (str: string) => (str = str.replace(/[_\\-]/g, ' '))\n);\nsquirrel.filters.define(\n  'capitalise',\n  (str: string) => (str = str.charAt(0).toUpperCase() + str.slice(1))\n);\nsquirrel.filters.define(\n  'lowercase',\n  (str: string) => (str = str.toLowerCase())\n);\n\nexport const Squirrel = squirrel;\n"]}

package/dist/collection/utils/testing/index.js

@@ -56,7 +56,7 @@ export class E2EPlayGround {
     }
     return this.page.reportA11y(this.tag);
   }
-  component() {
+  async component() {
     if (!this.page) {
       console.warn('no page rendered');
       return;
@@ -95,6 +95,16 @@ export async function getFocusedElement(page, shadowEleSelector = null) {
     return page.evaluateHandle((shadowEleSelector) => document.querySelector(shadowEleSelector).shadowRoot.activeElement, shadowEleSelector);
   }
 }
+export async function clickOnElement(page, elem, x = null, y = null) {
+  const rect = await page.evaluate((el) => {
+    const { top, left, width, height } = el.getBoundingClientRect();
+    return { top, left, width, height };
+  }, elem);
+  // Use given position or default to center
+  const _x = x !== null ? x : rect.width / 2;
+  const _y = y !== null ? y : rect.height / 2;
+  await page.mouse.click(rect.left + _x, rect.top + _y);
+}
 export async function createPage(optionsOrHtml) {
   const options = typeof optionsOrHtml === 'string'
     ? { html: optionsOrHtml, viewportWidth: 600, dir: 'ltr', padding: '1rem' }

package/dist/collection/utils/testing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/testing/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage, E2EPage } from '@stencil/core/testing';\nimport { Page as PuppeteerPage } from 'puppeteer';\nimport axe, { RunOptions, ContextObject } from 'axe-core';\nimport { MatchImageSnapshotOptions } from 'jest-image-snapshot';\n\ndeclare global {\n  interface Window {\n    axe: typeof axe;\n  }\n}\n\nexport interface NanoE2EPage\n  extends E2EPage,\n    Pick<PuppeteerPage, 'screenshot' | 'viewport'> {\n  reportA11y: (contextQuery?: string) => Promise<string>;\n}\n\ntype NanoE2EPageOptions = {\n  html: string;\n  viewportWidth: number;\n  viewportHeight?: number;\n  dir: 'ltr' | 'rtl';\n  padding?: string;\n};\n\nexport class E2EPlayGround<T> {\n  public props: Partial<T>;\n  public viewportHeight: number;\n  /** element template string. Add `{{ attrs }}` to place the attributes */\n  public template: string;\n  public cssVars: { [key: string]: string };\n  public viewportWidth = 600;\n  public page: NanoE2EPage;\n  public tag: string;\n\n  constructor(setup: { template: string; tag: string } | string) {\n    setup =\n      typeof setup === 'string'\n        ? { template: `<${setup} {{ attrs }}></${setup}>`, tag: setup }\n        : setup;\n    this.template = setup.template;\n    this.tag = setup.tag;\n  }\n\n  private get attrs() {\n    if (!this.props) return '';\n    return Object.entries(this.props)\n      .map(([attr, value]) => `${kebabize(attr)}=\"${value}\"`)\n      .join(' ');\n  }\n\n  private get css() {\n    if (!this.cssVars) return '';\n    return Object.entries(this.cssVars)\n      .map(([attr, value]) => `${attr}: ${value}`)\n      .join('\\n');\n  }\n\n  public async newPage(\n    props?: Partial<T>,\n    docOpts?: { dir?: 'rtl' | 'ltr'; padding?: string }\n  ) {\n    if (!this.template || !this.tag) {\n      console.warn('no template set');\n      return;\n    }\n\n    this.props = props;\n    this.page = await createPage({\n      html: `\n      <style>\n        :root {\n          ${this.css}\n        }\n      </style>\n      ${this.template.replace(/(\\{\\{ attrs \\}\\})/g, this.attrs)}\n    `,\n      viewportWidth: this.viewportWidth,\n      viewportHeight: this.viewportHeight,\n      dir: docOpts ? docOpts.dir : 'ltr',\n      padding: docOpts ? docOpts.padding : '1rem',\n    });\n\n    return this.page;\n  }\n\n  public reportA11y() {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    return this.page.reportA11y(this.tag);\n  }\n\n  public component() {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    return this.page.find(this.tag);\n  }\n\n  public async componentQuery(selectorStr: string, shadow = true) {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    if (!selectorStr) {\n      console.warn('selectorStr not set');\n      return;\n    }\n\n    if (shadow) {\n      return (\n        await this.page.waitForFunction(\n          (args) => {\n            const [tag, selectorStr] = args;\n            return document\n              .querySelector(tag)\n              .shadowRoot.querySelector(selectorStr);\n          },\n          {},\n          [this.tag, selectorStr]\n        )\n      ).asElement();\n    } else {\n      return (\n        await this.page.waitForFunction(\n          (args) => {\n            const [tag, selectorStr] = args;\n            return document.querySelector(tag + ' ' + selectorStr);\n          },\n          {},\n          [this.tag, selectorStr]\n        )\n      ).asElement();\n    }\n  }\n}\n\nexport async function getFocusedElement(\n  page: E2EPage,\n  shadowEleSelector: string = null\n) {\n  if (!shadowEleSelector)\n    return page.evaluateHandle(() => document.activeElement);\n  else {\n    return page.evaluateHandle(\n      (shadowEleSelector) =>\n        document.querySelector(shadowEleSelector).shadowRoot.activeElement,\n      shadowEleSelector\n    );\n  }\n}\n\nexport async function createPage(optionsOrHtml?: string | NanoE2EPageOptions) {\n  const options: NanoE2EPageOptions =\n    typeof optionsOrHtml === 'string'\n      ? { html: optionsOrHtml, viewportWidth: 600, dir: 'ltr', padding: '1rem' }\n      : optionsOrHtml;\n\n  const page = (await newE2EPage()) as NanoE2EPage;\n\n  // setup navigator langs for consistent localization\n  await page.evaluate(() => {\n    Object.defineProperty(navigator, 'language', {\n      get: function () {\n        return 'en-GB';\n      },\n    });\n    Object.defineProperty(navigator, 'languages', {\n      get: function () {\n        return ['en-GB'];\n      },\n    });\n  });\n  const viewport = Object.assign(\n    { height: options.viewportHeight || page.viewport().height },\n    { width: options.viewportWidth }\n  );\n  // set viewport size\n  await page.setViewport(viewport);\n\n  // add content\n  await page.setContent(\n    `<link rel=\"stylesheet\" href=\"/themes/nanopore.css\">\n    <div class=\"screenshot\" style=\"padding: ${options.padding || '1rem'};\">${\n      options.html\n    }</div>`,\n    { waitUntil: 'networkidle2' }\n  );\n\n  // set the direction - need to set here as stencil removes it on setContent\n  await page.evaluate((dir) => {\n    document.documentElement.setAttribute('dir', dir);\n    document.dir = dir;\n  }, options.dir);\n\n  // monkey patch screenshot function to add some extra features\n  const screenshot = page.screenshot;\n  page.screenshot = async function () {\n    // get the element's height, and set viewport to that height\n    // this enables us to get full page, clipped screenshots\n    const htmlElement = await page.$('.screenshot');\n    let { width, height } = await htmlElement.boundingBox();\n\n    await page.setViewport({\n      width: page.viewport().width,\n      height: options.viewportHeight || Math.round(height),\n    });\n\n    return screenshot.call(page, {\n      clip: {\n        x: 0,\n        y: 0,\n        width: Math.round(width),\n        height: options.viewportHeight || Math.round(height),\n      },\n      captureBeyondViewport: false,\n    });\n  };\n\n  await page.evaluate(async (source) => await window.eval(source), axe.source);\n\n  page.reportA11y = async (contextQuery?: string) => {\n    const result = await page.evaluate(async (contextQuery) => {\n      const context: ContextObject = {\n        include: contextQuery ? [[contextQuery]] : undefined,\n        exclude: [[contextQuery + ' .button--primary']],\n      };\n      const opts: RunOptions = {};\n      return await window.axe.run(context, opts);\n    }, contextQuery);\n\n    // we only want serious issues and we want to ignore nanopore buttons. We know though they're bad.\n    const violations = result.violations\n      .filter((violation) => [`serious`, `critical`].includes(violation.impact))\n      .filter((violation) => {\n        violation.nodes = violation.nodes.filter(\n          (node) => !node.target.join().match('.button--')\n        );\n        return !!violation.nodes.length;\n      });\n\n    const outout = violations\n      .map(\n        (violations, index) => `(${index}) [Type: ${violations.id}]: ${\n          violations.description\n        } (${violations.help}).\n          Elements: ${violations.nodes\n            .map((node, index) => `[${index}]'${node.target}'`)\n            .join(`, `)}.`\n      )\n      .join(`\\n\\n`);\n    return outout;\n  };\n\n  return page;\n}\n\nexport const kebabize = (str) => {\n  return str\n    .split('')\n    .map((letter, idx) => {\n      return letter.toUpperCase() === letter\n        ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`\n        : letter;\n    })\n    .join('');\n};\n\nexport const screenshotSettings = (\n  dirname: string\n): MatchImageSnapshotOptions => {\n  return {\n    failureThreshold: 0.002,\n    failureThresholdType: 'percent',\n    customSnapshotsDir: `${dirname}/__screenshots__/${process.platform}`,\n  };\n};\n\nexport const waitForVisibleSnippet = (selector) => {\n  return `\n  (function () {\n    function isVisible(elem) {\n      if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');\n      const style = getComputedStyle(elem);\n      if (style.display === 'none') return false;\n      if (style.visibility !== 'visible') return false;\n      if (style.opacity < 0.1) return false;\n      if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +\n          elem.getBoundingClientRect().width === 0) {\n          return false;\n      }\n      const elemCenter   = {\n          x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,\n          y: elem.getBoundingClientRect().top + elem.offsetHeight / 2\n      };\n      if (elemCenter.x < 0) return false;\n      if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;\n      if (elemCenter.y < 0) return false;\n      if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;\n      let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);\n      do {\n          if (pointContainer === elem) return true;\n      } while (pointContainer = pointContainer.parentNode);\n      return false;\n    }\n    return isVisible(document.querySelector(\"${selector}\"));\n  })()\n`;\n};\n\nexport const stringifyFormSnippet = `\n<div id=\"form-result\"></div>\n<script>\n  var form = document.querySelector('form');\n  var result = document.querySelector('#form-result');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    var data = new FormData(event.target);\n    var object = {};\n    data.forEach((value, key) => {\n        // Reflect.has in favor of: object.hasOwnProperty(key)\n        if(!Reflect.has(object, key)){\n            object[key] = value;\n            return;\n        }\n        if(!Array.isArray(object[key])){\n            object[key] = [object[key]];\n        }\n        object[key].push(value);\n    });\n    result.innerHTML = JSON.stringify(object);\n  })\n</script>`;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/testing/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage, E2EPage } from '@stencil/core/testing';\nimport { ElementHandle, Page as PuppeteerPage } from 'puppeteer';\nimport axe, { RunOptions, ContextObject } from 'axe-core';\nimport { MatchImageSnapshotOptions } from 'jest-image-snapshot';\n\ndeclare global {\n  interface Window {\n    axe: typeof axe;\n  }\n}\n\nexport interface NanoE2EPage\n  extends E2EPage,\n    Pick<PuppeteerPage, 'screenshot' | 'viewport'> {\n  reportA11y: (contextQuery?: string) => Promise<string>;\n}\n\ntype NanoE2EPageOptions = {\n  html: string;\n  viewportWidth: number;\n  viewportHeight?: number;\n  dir: 'ltr' | 'rtl';\n  padding?: string;\n};\n\nexport class E2EPlayGround<T> {\n  public props: Partial<T>;\n  public viewportHeight: number;\n  /** element template string. Add `{{ attrs }}` to place the attributes */\n  public template: string;\n  public cssVars: { [key: string]: string };\n  public viewportWidth = 600;\n  public page: NanoE2EPage;\n  public tag: string;\n\n  constructor(setup: { template: string; tag: string } | string) {\n    setup =\n      typeof setup === 'string'\n        ? { template: `<${setup} {{ attrs }}></${setup}>`, tag: setup }\n        : setup;\n    this.template = setup.template;\n    this.tag = setup.tag;\n  }\n\n  private get attrs() {\n    if (!this.props) return '';\n    return Object.entries(this.props)\n      .map(([attr, value]) => `${kebabize(attr)}=\"${value}\"`)\n      .join(' ');\n  }\n\n  private get css() {\n    if (!this.cssVars) return '';\n    return Object.entries(this.cssVars)\n      .map(([attr, value]) => `${attr}: ${value}`)\n      .join('\\n');\n  }\n\n  public async newPage(\n    props?: Partial<T>,\n    docOpts?: { dir?: 'rtl' | 'ltr'; padding?: string }\n  ) {\n    if (!this.template || !this.tag) {\n      console.warn('no template set');\n      return;\n    }\n\n    this.props = props;\n    this.page = await createPage({\n      html: `\n      <style>\n        :root {\n          ${this.css}\n        }\n      </style>\n      ${this.template.replace(/(\\{\\{ attrs \\}\\})/g, this.attrs)}\n    `,\n      viewportWidth: this.viewportWidth,\n      viewportHeight: this.viewportHeight,\n      dir: docOpts ? docOpts.dir : 'ltr',\n      padding: docOpts ? docOpts.padding : '1rem',\n    });\n\n    return this.page;\n  }\n\n  public reportA11y() {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    return this.page.reportA11y(this.tag);\n  }\n\n  public async component() {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    return this.page.find(this.tag);\n  }\n\n  public async componentQuery(selectorStr: string, shadow = true) {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    if (!selectorStr) {\n      console.warn('selectorStr not set');\n      return;\n    }\n\n    if (shadow) {\n      return (\n        await this.page.waitForFunction(\n          (args) => {\n            const [tag, selectorStr] = args;\n            return document\n              .querySelector(tag)\n              .shadowRoot.querySelector(selectorStr);\n          },\n          {},\n          [this.tag, selectorStr]\n        )\n      ).asElement();\n    } else {\n      return (\n        await this.page.waitForFunction(\n          (args) => {\n            const [tag, selectorStr] = args;\n            return document.querySelector(tag + ' ' + selectorStr);\n          },\n          {},\n          [this.tag, selectorStr]\n        )\n      ).asElement();\n    }\n  }\n}\n\nexport async function getFocusedElement(\n  page: E2EPage,\n  shadowEleSelector: string = null\n) {\n  if (!shadowEleSelector)\n    return page.evaluateHandle(() => document.activeElement);\n  else {\n    return page.evaluateHandle(\n      (shadowEleSelector) =>\n        document.querySelector(shadowEleSelector).shadowRoot.activeElement,\n      shadowEleSelector\n    );\n  }\n}\n\nexport async function clickOnElement(\n  page: E2EPage,\n  elem: ElementHandle<Element>,\n  x: number = null,\n  y: number = null\n) {\n  const rect = await page.evaluate((el) => {\n    const { top, left, width, height } = el.getBoundingClientRect();\n    return { top, left, width, height };\n  }, elem);\n\n  // Use given position or default to center\n  const _x = x !== null ? x : rect.width / 2;\n  const _y = y !== null ? y : rect.height / 2;\n\n  await page.mouse.click(rect.left + _x, rect.top + _y);\n}\n\nexport async function createPage(optionsOrHtml?: string | NanoE2EPageOptions) {\n  const options: NanoE2EPageOptions =\n    typeof optionsOrHtml === 'string'\n      ? { html: optionsOrHtml, viewportWidth: 600, dir: 'ltr', padding: '1rem' }\n      : optionsOrHtml;\n\n  const page = (await newE2EPage()) as NanoE2EPage;\n\n  // setup navigator langs for consistent localization\n  await page.evaluate(() => {\n    Object.defineProperty(navigator, 'language', {\n      get: function () {\n        return 'en-GB';\n      },\n    });\n    Object.defineProperty(navigator, 'languages', {\n      get: function () {\n        return ['en-GB'];\n      },\n    });\n  });\n  const viewport = Object.assign(\n    { height: options.viewportHeight || page.viewport().height },\n    { width: options.viewportWidth }\n  );\n  // set viewport size\n  await page.setViewport(viewport);\n\n  // add content\n  await page.setContent(\n    `<link rel=\"stylesheet\" href=\"/themes/nanopore.css\">\n    <div class=\"screenshot\" style=\"padding: ${options.padding || '1rem'};\">${\n      options.html\n    }</div>`,\n    { waitUntil: 'networkidle2' }\n  );\n\n  // set the direction - need to set here as stencil removes it on setContent\n  await page.evaluate((dir) => {\n    document.documentElement.setAttribute('dir', dir);\n    document.dir = dir;\n  }, options.dir);\n\n  // monkey patch screenshot function to add some extra features\n  const screenshot = page.screenshot;\n  page.screenshot = async function () {\n    // get the element's height, and set viewport to that height\n    // this enables us to get full page, clipped screenshots\n    const htmlElement = await page.$('.screenshot');\n    let { width, height } = await htmlElement.boundingBox();\n\n    await page.setViewport({\n      width: page.viewport().width,\n      height: options.viewportHeight || Math.round(height),\n    });\n\n    return screenshot.call(page, {\n      clip: {\n        x: 0,\n        y: 0,\n        width: Math.round(width),\n        height: options.viewportHeight || Math.round(height),\n      },\n      captureBeyondViewport: false,\n    });\n  };\n\n  await page.evaluate(async (source) => await window.eval(source), axe.source);\n\n  page.reportA11y = async (contextQuery?: string) => {\n    const result = await page.evaluate(async (contextQuery) => {\n      const context: ContextObject = {\n        include: contextQuery ? [[contextQuery]] : undefined,\n        exclude: [[contextQuery + ' .button--primary']],\n      };\n      const opts: RunOptions = {};\n      return await window.axe.run(context, opts);\n    }, contextQuery);\n\n    // we only want serious issues and we want to ignore nanopore buttons. We know though they're bad.\n    const violations = result.violations\n      .filter((violation) => [`serious`, `critical`].includes(violation.impact))\n      .filter((violation) => {\n        violation.nodes = violation.nodes.filter(\n          (node) => !node.target.join().match('.button--')\n        );\n        return !!violation.nodes.length;\n      });\n\n    const outout = violations\n      .map(\n        (violations, index) => `(${index}) [Type: ${violations.id}]: ${\n          violations.description\n        } (${violations.help}).\n          Elements: ${violations.nodes\n            .map((node, index) => `[${index}]'${node.target}'`)\n            .join(`, `)}.`\n      )\n      .join(`\\n\\n`);\n    return outout;\n  };\n\n  return page;\n}\n\nexport const kebabize = (str) => {\n  return str\n    .split('')\n    .map((letter, idx) => {\n      return letter.toUpperCase() === letter\n        ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`\n        : letter;\n    })\n    .join('');\n};\n\nexport const screenshotSettings = (\n  dirname: string\n): MatchImageSnapshotOptions => {\n  return {\n    failureThreshold: 0.002,\n    failureThresholdType: 'percent',\n    customSnapshotsDir: `${dirname}/__screenshots__/${process.platform}`,\n  };\n};\n\nexport const waitForVisibleSnippet = (selector) => {\n  return `\n  (function () {\n    function isVisible(elem) {\n      if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');\n      const style = getComputedStyle(elem);\n      if (style.display === 'none') return false;\n      if (style.visibility !== 'visible') return false;\n      if (style.opacity < 0.1) return false;\n      if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +\n          elem.getBoundingClientRect().width === 0) {\n          return false;\n      }\n      const elemCenter   = {\n          x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,\n          y: elem.getBoundingClientRect().top + elem.offsetHeight / 2\n      };\n      if (elemCenter.x < 0) return false;\n      if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;\n      if (elemCenter.y < 0) return false;\n      if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;\n      let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);\n      do {\n          if (pointContainer === elem) return true;\n      } while (pointContainer = pointContainer.parentNode);\n      return false;\n    }\n    return isVisible(document.querySelector(\"${selector}\"));\n  })()\n`;\n};\n\nexport const stringifyFormSnippet = `\n<div id=\"form-result\"></div>\n<script>\n  var form = document.querySelector('form');\n  var result = document.querySelector('#form-result');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    var data = new FormData(event.target);\n    var object = {};\n    data.forEach((value, key) => {\n        // Reflect.has in favor of: object.hasOwnProperty(key)\n        if(!Reflect.has(object, key)){\n            object[key] = value;\n            return;\n        }\n        if(!Array.isArray(object[key])){\n            object[key] = [object[key]];\n        }\n        object[key].push(value);\n    });\n    result.innerHTML = JSON.stringify(object);\n  })\n</script>`;\n"]}