@nanoporetech-digital/components 5.11.9 → 5.12.0

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

@@ -102,8 +102,8 @@ export async function clickOnElement(page, elem, x = null, y = null) {
     // @ts-ignore
   }, elem);
   // Use given position or default to center
-  const _x = x !== null ? x : rect.width / 2;
-  const _y = y !== null ? y : rect.height / 2;
+  const _x = x !== null ? x : rect.width / 3;
+  const _y = y !== null ? y : rect.height / 3;
   await page.mouse.click(rect.left + _x, rect.top + _y);
 }
 export async function createPage(optionsOrHtml) {

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 * as axe from 'axe-core';\nimport { MatchImageSnapshotOptions } from 'jest-image-snapshot';\nimport { ElementHandle, Page as PuppeteerPage } from 'puppeteer';\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    // @ts-ignore\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    const { 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: axe.ContextObject = {\n        include: contextQuery ? [[contextQuery]] : undefined,\n        exclude: [[contextQuery + ' .button--primary', '#shadow-host']],\n      };\n      const opts: axe.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 output = violations\n    //   .map(\n    //     (violations, index) => `(${index}) [Type: ${violations.id}]: ${\n    //       violations.description\n    //     } (${violations.help}).\n    //       Elements: ${violations.nodes\n    //         .map(\n    //           (node, index) => `[${index}]'${node.target}'. HTML: ${node.html}`\n    //         )\n    //         .join(`, `)}.`\n    //   )\n    //   .join(`\\n\\n`);\n    return violations.length ? JSON.stringify(violations, null, 2) : '';\n    // return output;\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 * as axe from 'axe-core';\nimport { MatchImageSnapshotOptions } from 'jest-image-snapshot';\nimport { ElementHandle, Page as PuppeteerPage } from 'puppeteer';\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    // @ts-ignore\n  }, elem);\n\n  // Use given position or default to center\n  const _x = x !== null ? x : rect.width / 3;\n  const _y = y !== null ? y : rect.height / 3;\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    const { 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: axe.ContextObject = {\n        include: contextQuery ? [[contextQuery]] : undefined,\n        exclude: [[contextQuery + ' .button--primary', '#shadow-host']],\n      };\n      const opts: axe.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 output = violations\n    //   .map(\n    //     (violations, index) => `(${index}) [Type: ${violations.id}]: ${\n    //       violations.description\n    //     } (${violations.help}).\n    //       Elements: ${violations.nodes\n    //         .map(\n    //           (node, index) => `[${index}]'${node.target}'. HTML: ${node.html}`\n    //         )\n    //         .join(`, `)}.`\n    //   )\n    //   .join(`\\n\\n`);\n    return violations.length ? JSON.stringify(violations, null, 2) : '';\n    // return output;\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"]}

package/dist/collection/utils/theme.js

@@ -12,7 +12,12 @@ export const hostContext = (selector, el) => {
  */
 export const createColorClasses = (color, cssClassMap) => {
   return typeof color === 'string' && color.length > 0
-    ? Object.assign({ 'nano-color': true, [`nano-color-${color}`]: true }, cssClassMap) : cssClassMap;
+    ? {
+      'nano-color': true,
+      [`nano-color-${color}`]: true,
+      ...cssClassMap,
+    }
+    : cssClassMap;
 };
 /**
  * @param classes

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

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,EAAe,EAAW,EAAE;EACxE,OAAO,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;AACvC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAA+B,EAC/B,WAAyB,EACA,EAAE;EAC3B,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAClD,CAAC,iBACG,YAAY,EAAE,IAAI,EAClB,CAAC,cAAc,KAAK,EAAE,CAAC,EAAE,IAAI,IAC1B,WAAW,EAElB,CAAC,CAAC,WAAW,CAAC;AAClB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,YAAY,GAAG,CACnB,OAA2D,EACjD,EAAE;EACZ,IAAI,OAAO,KAAK,SAAS,EAAE;IACzB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpE,OAAO,KAAK;OACT,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC;OACxB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAE,CAAY,CAAC,IAAI,EAAE,CAAC;OAChC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;GAC5B;EACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,OAAsC,EACzB,EAAE;EACf,MAAM,GAAG,GAAgB,EAAE,CAAC;EAC5B,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;EACtD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC","sourcesContent":["import type { Color, CssClassMap } from '../interface';\n\nexport const hostContext = (selector: string, el: HTMLElement): boolean => {\n  return el.closest(selector) !== null;\n};\n\n/**\n * Create the mode and color classes for the component based on the classes passed in\n * @param color\n * @param cssClassMap\n * @returns an jsx class map\n */\nexport const createColorClasses = (\n  color: Color | undefined | null,\n  cssClassMap?: CssClassMap\n): CssClassMap | undefined => {\n  return typeof color === 'string' && color.length > 0\n    ? {\n        'nano-color': true,\n        [`nano-color-${color}`]: true,\n        ...cssClassMap,\n      }\n    : cssClassMap;\n};\n\n/**\n * @param classes\n * @returns an array of trimmed class names\n */\nconst getClassList = (\n  classes: string | (string | null | undefined)[] | undefined\n): string[] => {\n  if (classes !== undefined) {\n    const array = Array.isArray(classes) ? classes : classes.split(' ');\n    return array\n      .filter((c) => c != null)\n      .map((c) => (c as string).trim())\n      .filter((c) => c !== '');\n  }\n  return [];\n};\n\n/**\n * turns a string, or array of strings into a jsx class map\n * @param classes\n * @returns a jsx class map\n */\nexport const getClassMap = (\n  classes: string | string[] | undefined\n): CssClassMap => {\n  const map: CssClassMap = {};\n  getClassList(classes).forEach((c) => (map[c] = true));\n  return map;\n};\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,EAAe,EAAW,EAAE;EACxE,OAAO,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;AACvC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAA+B,EAC/B,WAAyB,EACA,EAAE;EAC3B,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;IAClD,CAAC,CAAC;MACE,YAAY,EAAE,IAAI;MAClB,CAAC,cAAc,KAAK,EAAE,CAAC,EAAE,IAAI;MAC7B,GAAG,WAAW;KACf;IACH,CAAC,CAAC,WAAW,CAAC;AAClB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,YAAY,GAAG,CACnB,OAA2D,EACjD,EAAE;EACZ,IAAI,OAAO,KAAK,SAAS,EAAE;IACzB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpE,OAAO,KAAK;OACT,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC;OACxB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAE,CAAY,CAAC,IAAI,EAAE,CAAC;OAChC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;GAC5B;EACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,OAAsC,EACzB,EAAE;EACf,MAAM,GAAG,GAAgB,EAAE,CAAC;EAC5B,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;EACtD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC","sourcesContent":["import type { Color, CssClassMap } from '../interface';\n\nexport const hostContext = (selector: string, el: HTMLElement): boolean => {\n  return el.closest(selector) !== null;\n};\n\n/**\n * Create the mode and color classes for the component based on the classes passed in\n * @param color\n * @param cssClassMap\n * @returns an jsx class map\n */\nexport const createColorClasses = (\n  color: Color | undefined | null,\n  cssClassMap?: CssClassMap\n): CssClassMap | undefined => {\n  return typeof color === 'string' && color.length > 0\n    ? {\n        'nano-color': true,\n        [`nano-color-${color}`]: true,\n        ...cssClassMap,\n      }\n    : cssClassMap;\n};\n\n/**\n * @param classes\n * @returns an array of trimmed class names\n */\nconst getClassList = (\n  classes: string | (string | null | undefined)[] | undefined\n): string[] => {\n  if (classes !== undefined) {\n    const array = Array.isArray(classes) ? classes : classes.split(' ');\n    return array\n      .filter((c) => c != null)\n      .map((c) => (c as string).trim())\n      .filter((c) => c !== '');\n  }\n  return [];\n};\n\n/**\n * turns a string, or array of strings into a jsx class map\n * @param classes\n * @returns a jsx class map\n */\nexport const getClassMap = (\n  classes: string | string[] | undefined\n): CssClassMap => {\n  const map: CssClassMap = {};\n  getClassList(classes).forEach((c) => (map[c] = true));\n  return map;\n};\n"]}

package/dist/collection/utils/transitions.js

@@ -25,7 +25,12 @@ export const transitionDone = (el) => {
  * @returns a promise of resolving as either 'show' or 'hidden'
  */
 export const displayTransition = (el, options) => {
-  const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
+  const opts = {
+    className: '',
+    show: true,
+    showDisplay: 'block',
+    ...options,
+  };
   return new Promise((resolve) => {
     const showCb = (e) => {
       if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&

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

@@ -1 +1 @@
-{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../../src/utils/transitions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,EAAe,EACc,EAAE;EAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;MAClD,OAAO,CAAC;IACV,CAAC,CAAC;IACF,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC/C,KAAK;EACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC,EAC4B,EAAE;EAC/B,MAAM,IAAI,mBACR,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IACjB,OAAO,CACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACvC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;IACH,CAAC,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,qBAAqB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["/**\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 * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        el.dataset.displayTransition = 'false';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      requestAnimationFrame(() => el.classList.add(opts.className));\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"]}
+{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../../src/utils/transitions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,EAAe,EACc,EAAE;EAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;MAClD,OAAO,CAAC;IACV,CAAC,CAAC;IACF,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC/C,KAAK;EACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC,EAC4B,EAAE;EAC/B,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,OAAO;IACpB,GAAG,OAAO;GACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACvC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;IACH,CAAC,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,qBAAqB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["/**\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 * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        el.dataset.displayTransition = 'false';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      requestAnimationFrame(() => el.classList.add(opts.className));\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"]}

package/dist/components/algolia.js

@@ -1422,7 +1422,7 @@ const Algolia = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.staticFacetFilters[filter.filterId] = filter;
       else {
         dynFilterObj[filter.filterId] = filter;
-        this._dynFacetFilters = Object.assign(Object.assign({}, this._dynFacetFilters), dynFilterObj);
+        this._dynFacetFilters = { ...this._dynFacetFilters, ...dynFilterObj };
       }
       this.indexResults.appliedFilters = this.makeAppliedFilters();
     }