@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/components/nano-algolia-results.js

@@ -0,0 +1,224 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, Build, readTask, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { W as Wormhole, S as SearchChangeEvent } from './algolia-data.js';
+
+let AlgoliaResults = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoPageChanged = createEvent(this, "nanoPageChanged", 7);
+    this.nanoTplUpdated = createEvent(this, "nanoTplUpdated", 7);
+    this.append = false;
+    this.shouldClear = true;
+    this.currHitNum = 0;
+    this.showResults = false;
+    this.results = null;
+    this.indexResults = null;
+    this.resultsPage = 0;
+    this.changeEvent = SearchChangeEvent.Init;
+    this.isLoading = true;
+    /**
+     * Load and append pages automatically on scroll
+     */
+    this.infiniteScroll = false;
+    /**
+     * Whether new pages loaded by pagination will replace or be appended to the results block
+     * (this will be ignored if 'infiniteScroll' is set to true)
+     */
+    this.appendPages = false;
+  }
+  // For append / infinite-scroll it's useful to have a universal index on render
+  addContentIndex() {
+    this.shouldPageClear();
+    if (this.shouldClear || this.resultsPage === 0)
+      this.currHitNum = 0;
+    if (this.indexResults && this.indexResults.results) {
+      this.indexResults.results.map((res) => {
+        res._uIndex = this.currHitNum++;
+      });
+    }
+  }
+  // Update content template and perhaps add IO for infinite scrolling
+  resultsChange() {
+    this.shouldPageClear();
+    // console.log('going to do update', this.resultsPage, this.results.length);
+    this.updateResultContent();
+    this.infiniteScrollChange();
+  }
+  // We have a foot / head slot template.
+  // Can be useful to display current filter / search meta
+  headerFooterChange() {
+    this.updateStartEndContent();
+  }
+  appendChange() {
+    this.append = this.infiniteScroll ? true : this.appendPages;
+  }
+  infiniteScrollChange() {
+    this.append = this.infiniteScroll ? true : this.appendPages;
+    this.infiniteScroll ? this.attachIO() : this.detachIO();
+  }
+  handlePageChage() {
+    this.infiniteScroll ? this.attachIO() : this.detachIO();
+  }
+  handleLoading() {
+    if (!this.isLoading)
+      this.infiniteScrollChange();
+  }
+  // Decide whether incoming content should clear or not.
+  // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...
+  // Then leave up to the current, set append behaviour. Other clear it all out.
+  shouldPageClear() {
+    this.shouldClear =
+      this.changeEvent === SearchChangeEvent.Page ? !this.append : true;
+  }
+  // Called by IO. Emits page change event to parent which then iterated the global page count.
+  nextPage() {
+    this.shouldClear = !this.append;
+    this.nanoPageChanged.emit({ page: this.resultsPage + 1 });
+  }
+  attachIO() {
+    if (!this.infiniteScrollBar ||
+      !this.infiniteScroll ||
+      this.io ||
+      !Build.isBrowser ||
+      typeof window === 'undefined' ||
+      !window.IntersectionObserver)
+      return;
+    this.io = new window.IntersectionObserver(async (data) => {
+      if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {
+        this.nextPage();
+        this.detachIO();
+      }
+    }, { document, rootMargin: '100px', threshold: 1 });
+    this.io.observe(this.infiniteScrollBar);
+  }
+  detachIO() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = null;
+    }
+  }
+  updateStartEndContent() {
+    // clear start slot if present
+    if (this.startTpl && this.startOutputSlot) {
+      this.startOutputSlot.innerHTML = this.tplRenderFn(this.startTpl, this.indexResults);
+    }
+    // clear end slot if present
+    if (this.endOutputSlot && this.endTpl) {
+      this.endOutputSlot.innerHTML = this.tplRenderFn(this.endTpl, this.indexResults);
+    }
+    this.nanoTplUpdated.emit(this.el);
+  }
+  updateResultContent() {
+    this.outputTo = this.outputSlot || this.outputEle;
+    if (!this.resultTpl || !this.indexResults)
+      return;
+    // after filtering or new index - clear all content.
+    // after pagination when the 'appendPages' set to true - don't clear results content
+    if (this.shouldClear)
+      this.outputTo.innerHTML = '';
+    if (!this.tplRenderFn)
+      return;
+    let div = document.createElement('div');
+    div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);
+    Array.from(div.children).forEach((child) => {
+      this.outputTo.appendChild(child);
+    });
+    this.shouldClear = true;
+    this.nanoTplUpdated.emit(this.el);
+  }
+  connectedCallback() {
+    readTask(() => {
+      this.startTplSlot = this.el.querySelector('[slot="start-template"]');
+      this.startOutputSlot = this.el.querySelector('[slot="start-output"]');
+      if (!!this.startTplSlot) {
+        this.startTpl = this.startTplSlot.innerHTML;
+        this.startTpl = this.startTpl.replace(/=>/gm, '=>');
+      }
+      this.resultTplSlot = this.el.querySelector('[slot="result-template"]');
+      this.outputSlot = this.el.querySelector('[slot="result-output"]');
+      if (!!this.resultTplSlot) {
+        this.resultTpl = this.resultTplSlot.innerHTML;
+        this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');
+      }
+      this.endTplSlot = this.el.querySelector('[slot="end-template"]');
+      this.endOutputSlot = this.el.querySelector('[slot="end-output"]');
+      if (!!this.endTplSlot) {
+        this.endTpl = this.endTplSlot.innerHTML;
+        this.endTpl = this.endTpl.replace(/=>/gm, '=>');
+      }
+      if (this.indexResults) {
+        this.addContentIndex();
+        this.updateResultContent();
+      }
+    });
+  }
+  componentDidLoad() {
+    this.updateStartEndContent();
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        'show-results': this.showResults,
+      } }, h("div", { class: "default" }, h("slot", null)), h("div", { ref: (div) => (this.outputEle = div) }, h("slot", { name: "start-output" }), h("slot", { name: "result-output" }), h("div", { ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { name: "end-output" }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "results": ["addContentIndex", "resultsChange"],
+    "tplRenderFn": ["resultsChange"],
+    "facets": ["headerFooterChange"],
+    "appendPages": ["appendChange"],
+    "infiniteScroll": ["infiniteScrollChange"],
+    "resultsPage": ["handlePageChage"],
+    "isLoading": ["handleLoading"]
+  }; }
+};
+Wormhole(AlgoliaResults, [
+  'indexResults',
+  'results',
+  'tplRenderFn',
+  'resultsPage',
+  'changeEvent',
+  'facets',
+  'isLoading',
+]);
+AlgoliaResults = /*@__PURE__*/ proxyCustomElement(AlgoliaResults, [1, "nano-algolia-results", {
+    "infiniteScroll": [4, "infinite-scroll"],
+    "appendPages": [4, "append-pages"],
+    "showResults": [32],
+    "tplRenderFn": [32],
+    "results": [32],
+    "indexResults": [32],
+    "resultsPage": [32],
+    "changeEvent": [32],
+    "facets": [32],
+    "isLoading": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-algolia-results"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-algolia-results":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AlgoliaResults);
+      }
+      break;
+  } });
+}
+
+const NanoAlgoliaResults = AlgoliaResults;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAlgoliaResults, defineCustomElement };
+
+//# sourceMappingURL=nano-algolia-results.js.map

package/dist/components/nano-algolia-results.js.map

@@ -0,0 +1 @@
+{"file":"nano-algolia-results.js","mappings":"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","names":[],"sources":["./src/components/algolia/algolia-results.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Watch,\n  State,\n  Build,\n  EventEmitter,\n  Event,\n  Prop,\n  readTask,\n} from '@stencil/core';\nimport {\n  IndexResult,\n  AlgoliaResultHit,\n  PageChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\nimport { Wormhole, SearchChangeEvent } from '../algolia/algolia-data';\n\n/**\n * Displays and syncs results from Algolia searches.\n * Must be nested within an nano-algolia component.\n * @slot start-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot start-output - A placeholder for template output.\n * @slot result-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot result-output - A placeholder for template output.\n * @slot end-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot end-output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-results',\n  shadow: true,\n})\nexport class AlgoliaResults {\n  @Element() el: HTMLNanoAlgoliaResultsElement;\n\n  private resultTpl: string;\n  private resultTplSlot: HTMLElement;\n  private startTpl: string;\n  private startTplSlot: HTMLElement;\n  private endTpl: string;\n  private endTplSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLDivElement;\n  private outputTo: HTMLElement;\n  private startOutputSlot: HTMLElement;\n  private endOutputSlot: HTMLElement;\n\n  private io?: IntersectionObserver;\n  private infiniteScrollBar: HTMLDivElement;\n  private append: boolean = false;\n  private shouldClear: boolean = true;\n  private currHitNum: number = 0;\n\n  @State() showResults: boolean = false;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() results: AlgoliaResultHit[] = null;\n  @State() indexResults: IndexResult = null;\n  @State() resultsPage: number = 0;\n  @State() changeEvent: SearchChangeEvent = SearchChangeEvent.Init;\n  @State() facets: AlgoliaFacet;\n  @State() isLoading: boolean = true;\n\n  /**\n   * Load and append pages automatically on scroll\n   */\n  @Prop() infiniteScroll: boolean = false;\n\n  /**\n   * Whether new pages loaded by pagination will replace or be appended to the results block\n   * (this will be ignored if 'infiniteScroll' is set to true)\n   */\n  @Prop() appendPages: boolean = false;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<PageChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaResultsElement>;\n\n  // For append / infinite-scroll it's useful to have a universal index on render\n  @Watch('results')\n  addContentIndex() {\n    this.shouldPageClear();\n    if (this.shouldClear || this.resultsPage === 0) this.currHitNum = 0;\n    if (this.indexResults && this.indexResults.results) {\n      this.indexResults.results.map((res) => {\n        (res as any)._uIndex = this.currHitNum++;\n      });\n    }\n  }\n\n  // Update content template and perhaps add IO for infinite scrolling\n  @Watch('results')\n  @Watch('tplRenderFn')\n  resultsChange() {\n    this.shouldPageClear();\n    // console.log('going to do update', this.resultsPage, this.results.length);\n    this.updateResultContent();\n    this.infiniteScrollChange();\n  }\n\n  // We have a foot / head slot template.\n  // Can be useful to display current filter / search meta\n  @Watch('facets')\n  headerFooterChange() {\n    this.updateStartEndContent();\n  }\n\n  @Watch('appendPages')\n  appendChange() {\n    this.append = this.infiniteScroll ? true : this.appendPages;\n  }\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.append = this.infiniteScroll ? true : this.appendPages;\n    this.infiniteScroll ? this.attachIO() : this.detachIO();\n  }\n\n  @Watch('resultsPage')\n  handlePageChage() {\n    this.infiniteScroll ? this.attachIO() : this.detachIO();\n  }\n\n  @Watch('isLoading')\n  handleLoading() {\n    if (!this.isLoading) this.infiniteScrollChange();\n  }\n\n  // Decide whether incoming content should clear or not.\n  // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...\n  // Then leave up to the current, set append behaviour. Other clear it all out.\n  private shouldPageClear() {\n    this.shouldClear =\n      this.changeEvent === SearchChangeEvent.Page ? !this.append : true;\n  }\n\n  // Called by IO. Emits page change event to parent which then iterated the global page count.\n  private nextPage() {\n    this.shouldClear = !this.append;\n    this.nanoPageChanged.emit({ page: this.resultsPage + 1 });\n  }\n\n  private attachIO() {\n    if (\n      !this.infiniteScrollBar ||\n      !this.infiniteScroll ||\n      this.io ||\n      !Build.isBrowser ||\n      typeof window === 'undefined' ||\n      !(window as any).IntersectionObserver\n    )\n      return;\n\n    this.io = new (window as any).IntersectionObserver(\n      async (data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n          this.nextPage();\n          this.detachIO();\n        }\n      },\n      { document, rootMargin: '100px', threshold: 1 }\n    );\n    this.io.observe(this.infiniteScrollBar);\n  }\n\n  private detachIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  private updateStartEndContent() {\n    // clear start slot if present\n    if (this.startTpl && this.startOutputSlot) {\n      this.startOutputSlot.innerHTML = this.tplRenderFn(\n        this.startTpl,\n        this.indexResults\n      );\n    }\n    // clear end slot if present\n    if (this.endOutputSlot && this.endTpl) {\n      this.endOutputSlot.innerHTML = this.tplRenderFn(\n        this.endTpl,\n        this.indexResults\n      );\n    }\n    this.nanoTplUpdated.emit(this.el);\n  }\n\n  private updateResultContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n\n    if (!this.resultTpl || !this.indexResults) return;\n\n    // after filtering or new index - clear all content.\n    // after pagination when the 'appendPages' set to true - don't clear results content\n    if (this.shouldClear) this.outputTo.innerHTML = '';\n\n    if (!this.tplRenderFn) return;\n\n    let div = document.createElement('div');\n    div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);\n\n    Array.from(div.children).forEach((child) => {\n      this.outputTo.appendChild(child);\n    });\n\n    this.shouldClear = true;\n    this.nanoTplUpdated.emit(this.el);\n  }\n\n  connectedCallback() {\n    readTask(() => {\n      this.startTplSlot = this.el.querySelector('[slot=\"start-template\"]');\n      this.startOutputSlot = this.el.querySelector('[slot=\"start-output\"]');\n      if (!!this.startTplSlot) {\n        this.startTpl = this.startTplSlot.innerHTML;\n        this.startTpl = this.startTpl.replace(/=&gt;/gm, '=>');\n      }\n\n      this.resultTplSlot = this.el.querySelector('[slot=\"result-template\"]');\n      this.outputSlot = this.el.querySelector('[slot=\"result-output\"]');\n      if (!!this.resultTplSlot) {\n        this.resultTpl = this.resultTplSlot.innerHTML;\n        this.resultTpl = this.resultTpl.replace(/=&gt;/gm, '=>');\n      }\n\n      this.endTplSlot = this.el.querySelector('[slot=\"end-template\"]');\n      this.endOutputSlot = this.el.querySelector('[slot=\"end-output\"]');\n      if (!!this.endTplSlot) {\n        this.endTpl = this.endTplSlot.innerHTML;\n        this.endTpl = this.endTpl.replace(/=&gt;/gm, '=>');\n      }\n      if (this.indexResults) {\n        this.addContentIndex();\n        this.updateResultContent();\n      }\n    });\n  }\n\n  componentDidLoad() {\n    this.updateStartEndContent();\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-results': this.showResults,\n        }}\n      >\n        <div class=\"default\">\n          <slot />\n        </div>\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"start-output\" />\n          <slot name=\"result-output\" />\n          <div ref={(div) => (this.infiniteScrollBar = div)}></div>\n          <slot name=\"end-output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaResults, [\n  'indexResults',\n  'results',\n  'tplRenderFn',\n  'resultsPage',\n  'changeEvent',\n  'facets',\n  'isLoading',\n]);\n"],"version":3}

package/dist/components/nano-algolia.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoAlgolia extends Components.NanoAlgolia, HTMLElement {}
+export const NanoAlgolia: {
+  prototype: NanoAlgolia;
+  new (): NanoAlgolia;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-algolia.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { A as Algolia, d as defineCustomElement$1 } from './algolia.js';
+
+const NanoAlgolia = Algolia;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAlgolia, defineCustomElement };
+
+//# sourceMappingURL=nano-algolia.js.map

package/dist/components/nano-algolia.js.map

@@ -0,0 +1 @@
+{"file":"nano-algolia.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-aspect-ratio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoAspectRatio extends Components.NanoAspectRatio, HTMLElement {}
+export const NanoAspectRatio: {
+  prototype: NanoAspectRatio;
+  new (): NanoAspectRatio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-aspect-ratio.js

@@ -0,0 +1,74 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const aspectRatioCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){-o-object-fit:cover !important;object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){-o-object-fit:contain !important;object-fit:contain !important}";
+
+let AspectRatio = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.
+     * Ratios not in this format will be ignored. */
+    this.aspectRatio = '16:9';
+    /** Determines how content will be resized to fit its container. */
+    this.fit = 'cover';
+    this.handleSlotChange = () => {
+      this.setAspectRatio();
+    };
+  }
+  handleAspectRatioChange() {
+    this.setAspectRatio();
+  }
+  setAspectRatio() {
+    if (typeof this.aspectRatio !== 'string') {
+      console.warn('aspectRatio should be a string.');
+      return;
+    }
+    else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {
+      console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');
+      return;
+    }
+    const split = this.aspectRatio.split(':');
+    const x = parseInt(split[0]);
+    const y = parseInt(split[1]);
+    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.base = el), part: "base", class: {
+        'aspect-ratio': true,
+        'aspect-ratio--cover': this.fit === 'cover',
+        'aspect-ratio--contain': this.fit === 'contain',
+      } }, h("slot", { onSlotchange: this.handleSlotChange })));
+  }
+  static get watchers() { return {
+    "aspectRatio": ["handleAspectRatioChange"]
+  }; }
+  static get style() { return aspectRatioCss; }
+};
+AspectRatio = /*@__PURE__*/ proxyCustomElement(AspectRatio, [1, "nano-aspect-ratio", {
+    "aspectRatio": [1, "aspect-ratio"],
+    "fit": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-aspect-ratio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-aspect-ratio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AspectRatio);
+      }
+      break;
+  } });
+}
+
+const NanoAspectRatio = AspectRatio;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAspectRatio, defineCustomElement };
+
+//# sourceMappingURL=nano-aspect-ratio.js.map

package/dist/components/nano-aspect-ratio.js.map

@@ -0,0 +1 @@
+{"file":"nano-aspect-ratio.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,kxBAAkxB;;ICa5xB,WAAW;EALxB;;;;;;IAUU,gBAAW,GAAG,MAAM,CAAC;;IAGrB,QAAG,GAAwB,OAAO,CAAC;IAOnC,qBAAgB,GAAG;MACzB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC;GA+BH;EArCC,uBAAuB;IACrB,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAMO,cAAc;IACpB,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE;MACxC,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;MAChD,OAAO;KACR;SAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,mBAAmB,CAAC,EAAE;MACvD,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;MAC1E,OAAO;KACR;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;GACrE;EAED,MAAM;IACJ,QACE,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAC7B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,qBAAqB,EAAE,IAAI,CAAC,GAAG,KAAK,OAAO;QAC3C,uBAAuB,EAAE,IAAI,CAAC,GAAG,KAAK,SAAS;OAChD,IAED,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACzC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","./src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRatio implements ComponentInterface {\n  private base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    if (typeof this.aspectRatio !== 'string') {\n      console.warn('aspectRatio should be a string.');\n      return;\n    } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n      console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n      return;\n    }\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-checkbox-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoCheckboxGroup extends Components.NanoCheckboxGroup, HTMLElement {}
+export const NanoCheckboxGroup: {
+  prototype: NanoCheckboxGroup;
+  new (): NanoCheckboxGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-checkbox-group.js

@@ -0,0 +1,235 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as debounce } from './throttle.js';
+import { g as getClassMap } from './theme.js';
+
+const checkboxGroupCss = ".sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:8px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__legend.sc-nano-checkbox-group,.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}";
+
+let CheckboxGroup = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.nanoValidate = createEvent(this, "nanoValidate", 7);
+    this.grpId = `nano-checkbox-group-${grpIds++}`;
+    this._invalid = false;
+    this.errorMessage = '';
+    this.showErrorMsg = false;
+    this.hasHelperSlot = false;
+    // public properties
+    /**
+     * When should the field perform validation
+     */
+    this.validateOn = 'submit';
+    /**
+     * Whether to show validation errors underneath input
+     */
+    this.showInlineError = true;
+    /**
+     * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.
+     * A validation error will be thrown if not enough controls are checked.
+     */
+    this.min = 0;
+    /**
+     * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.
+     * Other controls will automatically be disabled upon reaching this number.
+     */
+    this.max = null;
+    /**
+     * Disable all the nested form controls
+     */
+    this.disabled = null;
+    /**
+     * A common label for children controls
+     */
+    this.legend = '';
+    this.handleInvalid = (ev) => {
+      this._invalid = true;
+      if (this.validateOn === 'submit') {
+        this._invalid = this.showErrorMsg = this.customValidate();
+      }
+      if (!!this.showInlineError)
+        ev.preventDefault();
+      setTimeout((_) => this.showInlineValidation(ev), 20);
+    };
+    this.showInlineValidation = (ev) => {
+      if (!this.nativeCbs || !this.nativeCbs.length)
+        return;
+      if (this.validateOn === 'submitThenDirty')
+        this.validateOn = 'dirty';
+      this.showErrorMsg = false;
+      this._invalid = false;
+      this.nativeCbs.forEach((cb, i) => {
+        if (!cb.validity.valid) {
+          this.errorMessage = cb.validationMessage;
+          this.showErrorMsg = true;
+          this._invalid = true;
+          if (!!this.showInlineError) {
+            this.checkboxes[i].setFocus();
+          }
+        }
+      });
+      this.nanoValidate.emit({
+        isValid: !this.invalid,
+        errorMessage: this.errorMessage,
+        originalEvent: ev,
+      });
+    };
+  }
+  /**
+   * This will be true when the control is in an invalid state.
+   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+   */
+  get invalid() {
+    return this._invalid;
+  }
+  // Public methods
+  /**
+   * Get the current state of the control.
+   * @param validateFirst - perform validation first before reporting
+   * @returns `{ isValid: boolean, errorMessage: string }`
+   */
+  async reportValidity(validateFirst) {
+    return new Promise((resolve) => {
+      if (validateFirst)
+        this.showInlineValidation();
+      setTimeout(() => {
+        resolve({
+          isValid: !this.invalid,
+          errorMessage: this.errorMessage,
+        });
+      }, 20);
+    });
+  }
+  // listeners & watchers
+  /**
+   * Notes on validation... custom validation messages should be set
+   * no matter whether we show inline messages or native html5.
+   * this will mean forms cannot submit when there are pending validation issues.
+   */
+  handleCbChange() {
+    if (this.invalid)
+      this.showErrorMsg = this._invalid = false;
+    this.customValidate();
+    if (this.validateOn !== 'dirty')
+      return;
+    this.showInlineValidation();
+  }
+  customValidate() {
+    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes)
+      return;
+    // we only care about checkbox controls.
+    let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');
+    if (!onlyCbs || !onlyCbs.length)
+      return;
+    let checked = onlyCbs.filter((cb) => cb.checked).length;
+    let invalid = false;
+    this.checkboxes.forEach((cb) => {
+      if (cb.required && !cb.checked) {
+        invalid = true;
+      }
+      cb.setError('');
+      if (this.min && checked < this.min) {
+        cb.setError(`You must select a minimum of ${this.min} values.`);
+        invalid = true;
+      }
+      if (this.max && checked > this.max) {
+        cb.setError(`Only up to ${this.max} values are allowed.`);
+        invalid = true;
+      }
+    });
+    return invalid;
+  }
+  handleComponentChange() {
+    this.checkboxTypes = getClassMap(this.checkboxes.map((cb) => 'types-' + cb.type));
+  }
+  handleDisabledChange() {
+    if (this.disabled === null)
+      return;
+    this.checkboxes.map((cb) => (cb.disabled = this.disabled));
+  }
+  // private methods
+  attachSlotObserver() {
+    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));
+    mo.observe(this.host, { childList: true });
+  }
+  async handleSlotChange() {
+    forceUpdate(this.host);
+    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));
+    this.hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
+    this.nativeCbs = await Promise.all(this.checkboxes.reduce((acc, cb) => {
+      acc.push(cb.getInputElement());
+      return acc;
+    }, []));
+    this.nativeCbs.forEach((cb) => cb.addEventListener('invalid', this.handleInvalid));
+  }
+  // stencil hooks
+  componentWillLoad() {
+    this.showInlineValidation = debounce(this.showInlineValidation, 20);
+    this.customValidate = this.customValidate.bind(this);
+    this.handleDisabledChange();
+  }
+  connectedCallback() {
+    this.attachSlotObserver();
+  }
+  disconnectedCallback() {
+    if (this.mo)
+      this.mo.disconnect();
+  }
+  componentDidLoad() {
+    this.handleComponentChange();
+  }
+  render() {
+    let isRtl = this.host.ownerDocument.dir === 'rtl';
+    const legendId = this.grpId + '-lbl';
+    const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
+    return (h(Host, Object.assign({}, this.checkboxTypes, { dir: isRtl ? 'rtl' : null }), h("fieldset", { disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { class: "nanogroupcb__legend", id: legendId }, this.legend), h("div", { class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", null)), (this.showInlineError || this.hasHelperSlot) && (h("div", { class: "nanogroupcb__more", id: moreId }, !!this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { class: "nanogroupcb__help" }, h("slot", { name: "helper" })))))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "validateOn": ["handleCbChange"],
+    "min": ["handleCbChange"],
+    "max": ["handleCbChange"],
+    "nativeCbs": ["customValidate"],
+    "checkboxes": ["handleComponentChange", "handleDisabledChange"],
+    "disabled": ["handleDisabledChange"]
+  }; }
+  static get style() { return checkboxGroupCss; }
+};
+let grpIds = 0;
+CheckboxGroup = /*@__PURE__*/ proxyCustomElement(CheckboxGroup, [6, "nano-checkbox-group", {
+    "validateOn": [1025, "validate-on"],
+    "showInlineError": [4, "show-inline-error"],
+    "min": [2],
+    "max": [2],
+    "disabled": [516],
+    "legend": [1],
+    "invalid": [2564],
+    "checkboxes": [32],
+    "nativeCbs": [32],
+    "errorMessage": [32],
+    "showErrorMsg": [32],
+    "hasHelperSlot": [32],
+    "reportValidity": [64]
+  }, [[0, "nanoChange", "handleCbChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-checkbox-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-checkbox-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CheckboxGroup);
+      }
+      break;
+  } });
+}
+
+const NanoCheckboxGroup = CheckboxGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoCheckboxGroup, defineCustomElement };
+
+//# sourceMappingURL=nano-checkbox-group.js.map