@nanoporetech-digital/components 1.14.1 → 1.15.0

package/dist/collection/components/tabs/tab-group.css

@@ -9,7 +9,7 @@
 }
 /**
   * @prop --indicator-transition: Only relevant to placement 'start'. defaults to var(--nano-transition-fast, 0.3s);
-  * @prop --indicator-color: defaults to #90c6e7 on placement 'top' and #0084a9 on placement 'start';
+  * @prop --indicator-color: defaults to #90c6e7 on placement 'top' and #007495 on placement 'start';
   * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #e4e6e8;
   * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';
 
@@ -28,7 +28,7 @@
   * @prop --tabs-padding-bottom: defaults to 0;
   * @prop --tabs-bg-rgb: defaults to var(--bg-color);
   * @prop --tab-border-radius: defaults to var(--border-radius);
-  * @prop --tab-text-color: defaults to #0084a9 on placement 'top' and #455556 on placement 'start';
+  * @prop --tab-text-color: defaults to #007495 on placement 'top' and #455556 on placement 'start';
   */
 :host {
   --indicator-transition: var(--nano-transition-fast, 0.3s);
@@ -47,7 +47,7 @@
   --tabs-padding-bottom: 0;
   --tabs-bg-rgb: var(--background-rgb);
   --tab-border-radius: var(--border-radius);
-  --tab-text-color: #0084a9;
+  --tab-text-color: #007495;
   --shadow-opacity: 0.1;
   display: block;
   position: relative;
@@ -81,16 +81,16 @@
   --tabs-padding-top: 0;
   --tabs-padding-bottom: 0;
   --tab-text-color: #455556;
-  --indicator-color: #0084a9;
+  --indicator-color: #007495;
   --indicator-size: 2px;
 }
 
 :host(.nano-color) {
-  --indicator-color: var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));
+  --indicator-color: var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));
   --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);
 }
 :host(.nano-color) ::slotted(nano-tab) {
-  --active-text-color: var(--nano-color-shade, var(--nano-color-primary-shade, #007090));
+  --active-text-color: var(--nano-color-shade, var(--nano-color-primary-shade, #00637f));
 }
 
 .nano-tab-group {

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

@@ -440,7 +440,7 @@ export class TabGroup {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/Xi7NpFYo/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -483,7 +483,7 @@ export class TabGroup {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/Xi7NpFYo/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },

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

@@ -16,7 +16,7 @@
   * @prop --active-bg-rgb: Defaults to var(--bg-rgb);
   * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);
 
-  * @prop --text-color: Defaults to #0084a9;
+  * @prop --text-color: Defaults to #007495;
   * @prop --disabled-text-color: Defaults to #455556;
   * @prop --active-text-color: Defaults to #0c5a71;
 
@@ -32,7 +32,7 @@
   --bg-rgb: var(--nano-layer-bg-rgb, 255, 255, 255);
   --active-bg-rgb: var(--bg-rgb);
   --disabled-bg-rgb: var(--bg-rgb);
-  --text-color: #0084a9;
+  --text-color: #007495;
   --disabled-text-color: #455556;
   --active-text-color: #0c5a71;
   --h-font-size: 0.93em;

package/dist/collection/global/script/global.js

@@ -29,9 +29,11 @@ if (Build.isBrowser) {
     return true;
   };
   if (!docIsReady()) {
-    const mutationO = new MutationObserver((_) => {
-      if (docIsReady())
+    let mutationO = new MutationObserver((_) => {
+      if (docIsReady()) {
         mutationO.disconnect();
+        mutationO = null;
+      }
     });
     mutationO.observe(document.documentElement, {
       childList: false,

package/dist/collection/global/script/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","sourceRoot":"","sources":["../../../src/global/script/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,gBAAgB;AAEhB,OAAO,wBAAwB,CAAC;AAEhC,wBAAwB;AAExB,IACE,CAAC,CAAC,sBAAsB,IAAI,MAAM,CAAC;EACnC,CAAC,CAAC,2BAA2B,IAAI,MAAM,CAAC;EACxC,CAAC,CAAC,mBAAmB,IAAI,MAAM,CAAC,yBAAyB,CAAC,SAAS,CAAC,EACpE;EACA,MAAM;EACJ,yDAAyD,CAAC,uBAAuB,CAClF,CAAC;CACH;AAED,mBAAmB;AAEnB,IAAI,CAAC,CAAC,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;EACzD,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;IACf,MAAM;IACJ,mDAAmD,CAAC,0BAA0B,CAC/E,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;MACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;IAC3D,CAAC,CAAC,CAAC;EACL,CAAC,EAAE,CAAC,CAAC,CAAC;CACP;;EAAM,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;AAEhE,wDAAwD;AAExD,IAAI,KAAK,CAAC,SAAS,EAAE;EACnB,MAAM,MAAM,GAAG,QAAQ,CAAC,eAAe,CAAC;EACxC,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;MAAE,OAAO,KAAK,CAAC;IACzD,QAAQ,CAAC,eAAe,CAAC,aAAa,CACpC,IAAI,WAAW,CAAC,qBAAqB,CAAC,CACvC,CAAC;IACF,OAAO,IAAI,CAAC;EACd,CAAC,CAAC;EAEF,IAAI,CAAC,UAAU,EAAE,EAAE;IACjB,MAAM,SAAS,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE;MAC3C,IAAI,UAAU,EAAE;QAAE,SAAS,CAAC,UAAU,EAAE,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;MAC1C,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,KAAK;MACd,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;GACJ;CACF","sourcesContent":["import { Build } from '@stencil/core';\n\n// focus options\n\nimport 'focus-options-polyfill';\n\n// Intersection observer\n\nif (\n  !('IntersectionObserver' in window) ||\n  !('IntersectionObserverEntry' in window) ||\n  !('intersectionRatio' in window.IntersectionObserverEntry.prototype)\n) {\n  import(\n    /* webpackChunkName: 'polyfills-intersection-observer' */ 'intersection-observer'\n  );\n}\n\n// scroll-behaviour\n\nif (!('scrollBehavior' in document.documentElement.style)) {\n  setTimeout((_) => {\n    import(\n      /* webpackChunkName: 'polyfills-scroll-behavior' */ 'scroll-behavior-polyfill'\n    ).then((_) => {\n      document.documentElement.style.scrollBehavior = 'smooth';\n    });\n  }, 0);\n} else document.documentElement.style.scrollBehavior = 'smooth';\n\n// fire global 'ready' event when everything is hydrated\n\nif (Build.isBrowser) {\n  const docEle = document.documentElement;\n  const docIsReady = () => {\n    if (!docEle.classList.contains('hydrated')) return false;\n    document.documentElement.dispatchEvent(\n      new CustomEvent('nanoComponentsReady')\n    );\n    return true;\n  };\n\n  if (!docIsReady()) {\n    const mutationO = new MutationObserver((_) => {\n      if (docIsReady()) mutationO.disconnect();\n    });\n\n    mutationO.observe(document.documentElement, {\n      childList: false,\n      subtree: false,\n      attributes: true,\n    });\n  }\n}\n"]}
+{"version":3,"file":"global.js","sourceRoot":"","sources":["../../../src/global/script/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,gBAAgB;AAEhB,OAAO,wBAAwB,CAAC;AAEhC,wBAAwB;AAExB,IACE,CAAC,CAAC,sBAAsB,IAAI,MAAM,CAAC;EACnC,CAAC,CAAC,2BAA2B,IAAI,MAAM,CAAC;EACxC,CAAC,CAAC,mBAAmB,IAAI,MAAM,CAAC,yBAAyB,CAAC,SAAS,CAAC,EACpE;EACA,MAAM;EACJ,yDAAyD,CAAC,uBAAuB,CAClF,CAAC;CACH;AAED,mBAAmB;AAEnB,IAAI,CAAC,CAAC,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;EACzD,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;IACf,MAAM;IACJ,mDAAmD,CAAC,0BAA0B,CAC/E,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;MACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;IAC3D,CAAC,CAAC,CAAC;EACL,CAAC,EAAE,CAAC,CAAC,CAAC;CACP;;EAAM,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;AAEhE,wDAAwD;AAExD,IAAI,KAAK,CAAC,SAAS,EAAE;EACnB,MAAM,MAAM,GAAG,QAAQ,CAAC,eAAe,CAAC;EACxC,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;MAAE,OAAO,KAAK,CAAC;IACzD,QAAQ,CAAC,eAAe,CAAC,aAAa,CACpC,IAAI,WAAW,CAAC,qBAAqB,CAAC,CACvC,CAAC;IACF,OAAO,IAAI,CAAC;EACd,CAAC,CAAC;EAEF,IAAI,CAAC,UAAU,EAAE,EAAE;IACjB,IAAI,SAAS,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE;MACzC,IAAI,UAAU,EAAE,EAAE;QAChB,SAAS,CAAC,UAAU,EAAE,CAAC;QACvB,SAAS,GAAG,IAAI,CAAC;OAClB;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;MAC1C,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,KAAK;MACd,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;GACJ;CACF","sourcesContent":["import { Build } from '@stencil/core';\n\n// focus options\n\nimport 'focus-options-polyfill';\n\n// Intersection observer\n\nif (\n  !('IntersectionObserver' in window) ||\n  !('IntersectionObserverEntry' in window) ||\n  !('intersectionRatio' in window.IntersectionObserverEntry.prototype)\n) {\n  import(\n    /* webpackChunkName: 'polyfills-intersection-observer' */ 'intersection-observer'\n  );\n}\n\n// scroll-behaviour\n\nif (!('scrollBehavior' in document.documentElement.style)) {\n  setTimeout((_) => {\n    import(\n      /* webpackChunkName: 'polyfills-scroll-behavior' */ 'scroll-behavior-polyfill'\n    ).then((_) => {\n      document.documentElement.style.scrollBehavior = 'smooth';\n    });\n  }, 0);\n} else document.documentElement.style.scrollBehavior = 'smooth';\n\n// fire global 'ready' event when everything is hydrated\n\nif (Build.isBrowser) {\n  const docEle = document.documentElement;\n  const docIsReady = () => {\n    if (!docEle.classList.contains('hydrated')) return false;\n    document.documentElement.dispatchEvent(\n      new CustomEvent('nanoComponentsReady')\n    );\n    return true;\n  };\n\n  if (!docIsReady()) {\n    let mutationO = new MutationObserver((_) => {\n      if (docIsReady()) {\n        mutationO.disconnect();\n        mutationO = null;\n      }\n    });\n\n    mutationO.observe(document.documentElement, {\n      childList: false,\n      subtree: false,\n      attributes: true,\n    });\n  }\n}\n"]}

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

@@ -32,23 +32,17 @@ export class E2EPlayGround {
     this.props = props;
     this.page = await createPage({
       html: `
-      <body>
-        <style>
-          :root {
-            ${this.css}
-          }
-        </style>
-        ${this.template.replace(/(\{\{ attrs \}\})/g, this.attrs)}
-      </body>
+      <style>
+        :root {
+          ${this.css}
+        }
+      </style>
+      ${this.template.replace(/(\{\{ attrs \}\})/g, this.attrs)}
     `,
       viewportWidth: this.viewportWidth,
       viewportHeight: this.viewportHeight,
+      dir: docOpts ? docOpts.dir : 'ltr',
     });
-    if (docOpts) {
-      await this.page.evaluate(() => {
-        document.dir = docOpts.dir;
-      });
-    }
     return this.page;
   }
   reportA11y() {
@@ -90,18 +84,42 @@ export class E2EPlayGround {
     }
   }
 }
-export async function getFocusedElement(page) {
-  return page.evaluateHandle(() => document.activeElement);
+export async function getFocusedElement(page, shadowEleSelector = null) {
+  if (!shadowEleSelector)
+    return page.evaluateHandle(() => document.activeElement);
+  else {
+    return page.evaluateHandle((shadowEleSelector) => document.querySelector(shadowEleSelector).shadowRoot.activeElement, shadowEleSelector);
+  }
 }
 export async function createPage(optionsOrHtml) {
   const options = typeof optionsOrHtml === 'string'
-    ? { html: optionsOrHtml, viewportWidth: 600 }
+    ? { html: optionsOrHtml, viewportWidth: 600, dir: 'ltr' }
     : optionsOrHtml;
   const page = (await newE2EPage());
+  // setup navigator langs for consistent localization
+  await page.evaluate(() => {
+    Object.defineProperty(navigator, 'language', {
+      get: function () {
+        return 'en-GB';
+      },
+    });
+    Object.defineProperty(navigator, 'languages', {
+      get: function () {
+        return ['en-GB'];
+      },
+    });
+  });
   const viewport = Object.assign({ height: options.viewportHeight || page.viewport().height }, { width: options.viewportWidth });
+  // set viewport size
   await page.setViewport(viewport);
+  // add content
   await page.setContent(`<link rel="stylesheet" href="/themes/nanopore.css">
-    <div class="screenshot" style="padding: 1rem;">${options.html}</div>`, { waitUntil: 'networkidle0' });
+    <div class="screenshot" style="padding: 1rem;">${options.html}</div>`, { waitUntil: 'networkidle2' });
+  // set the direction - need to set here as stencil removes it on setContent
+  await page.evaluate((dir) => {
+    document.documentElement.setAttribute('dir', dir);
+    document.dir = dir;
+  }, options.dir);
   // monkey patch screenshot function to add some extra features
   const screenshot = page.screenshot;
   page.screenshot = async function () {
@@ -120,6 +138,7 @@ export async function createPage(optionsOrHtml) {
         width: Math.round(width),
         height: options.viewportHeight || Math.round(height),
       },
+      captureBeyondViewport: false,
     });
   };
   await page.evaluate(async (source) => await window.eval(source), axe.source);
@@ -161,9 +180,63 @@ export const kebabize = (str) => {
 };
 export const screenshotSettings = (dirname) => {
   return {
-    failureThreshold: 0.001,
+    failureThreshold: 0.002,
     failureThresholdType: 'percent',
     customSnapshotsDir: `${dirname}/__screenshots__/${process.platform}`,
   };
 };
+export const waitForVisibleSnippet = (selector) => {
+  return `
+  (function () {
+    function isVisible(elem) {
+      if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
+      const style = getComputedStyle(elem);
+      if (style.display === 'none') return false;
+      if (style.visibility !== 'visible') return false;
+      if (style.opacity < 0.1) return false;
+      if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
+          elem.getBoundingClientRect().width === 0) {
+          return false;
+      }
+      const elemCenter   = {
+          x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
+          y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
+      };
+      if (elemCenter.x < 0) return false;
+      if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
+      if (elemCenter.y < 0) return false;
+      if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
+      let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
+      do {
+          if (pointContainer === elem) return true;
+      } while (pointContainer = pointContainer.parentNode);
+      return false;
+    }
+    return isVisible(document.querySelector("${selector}"));
+  })()
+`;
+};
+export const stringifyFormSnippet = `
+<div id="form-result"></div>
+<script>
+  var form = document.querySelector('form');
+  var result = document.querySelector('#form-result');
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    var data = new FormData(event.target);
+    var object = {};
+    data.forEach((value, key) => {
+        // Reflect.has in favor of: object.hasOwnProperty(key)
+        if(!Reflect.has(object, key)){
+            object[key] = value;
+            return;
+        }
+        if(!Array.isArray(object[key])){
+            object[key] = [object[key]];
+        }
+        object[key].push(value);
+    });
+    result.innerHTML = JSON.stringify(object);
+  })
+</script>`;
 //# sourceMappingURL=index.js.map

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};\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(props?: Partial<T>, docOpts?: { dir: 'rtl' | 'ltr' }) {\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      <body>\n        <style>\n          :root {\n            ${this.css}\n          }\n        </style>\n        ${this.template.replace(/(\\{\\{ attrs \\}\\})/g, this.attrs)}\n      </body>\n    `,\n      viewportWidth: this.viewportWidth,\n      viewportHeight: this.viewportHeight,\n    });\n\n    if (docOpts) {\n      await this.page.evaluate(() => {\n        document.dir = docOpts.dir;\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(page: E2EPage) {\n  return page.evaluateHandle(() => document.activeElement);\n}\n\nexport async function createPage(optionsOrHtml?: string | NanoE2EPageOptions) {\n  const options: NanoE2EPageOptions =\n    typeof optionsOrHtml === 'string'\n      ? { html: optionsOrHtml, viewportWidth: 600 }\n      : optionsOrHtml;\n\n  const page = (await newE2EPage()) as NanoE2EPage;\n\n  const viewport = Object.assign(\n    { height: options.viewportHeight || page.viewport().height },\n    { width: options.viewportWidth }\n  );\n  await page.setViewport(viewport);\n  await page.setContent(\n    `<link rel=\"stylesheet\" href=\"/themes/nanopore.css\">\n    <div class=\"screenshot\" style=\"padding: 1rem;\">${options.html}</div>`,\n    { waitUntil: 'networkidle0' }\n  );\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    });\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.001,\n    failureThresholdType: 'percent',\n    customSnapshotsDir: `${dirname}/__screenshots__/${process.platform}`,\n  };\n};\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 { 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};\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(props?: Partial<T>, docOpts?: { dir: 'rtl' | 'ltr' }) {\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    });\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' }\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: 1rem;\">${options.html}</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"]}