@nanoporetech-digital/components 1.15.6 → 2.1.0

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

@@ -0,0 +1 @@
+{"file":"nano-algolia-filter.js","mappings":"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","names":[],"sources":["./src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","./src/components/algolia/algolia-filter.tsx"],"sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']),\n  &::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n  Listen,\n} from '@stencil/core';\nimport {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop({ mutable: true }) value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    let valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      let foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        let foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  @Listen('nanoChange')\n  @Listen('change')\n  handleChangeEvent() {\n    let vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  private updateContent() {\n    let outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    let values = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    let found = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (var i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (!!this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"],"version":3}

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

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

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

@@ -0,0 +1,224 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { a as algoliasearch_umd } from './algoliasearch.umd.js';
+import { W as Wormhole } from './algolia-data.js';
+import { C as ComponentStore } from './component-store.js';
+
+let AlgoliaInput = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoSearchResult = createEvent(this, "nanoSearchResult", 7);
+    this.nanoSearch = createEvent(this, "nanoSearch", 7);
+    this.nanoSearchReset = createEvent(this, "nanoSearchReset", 7);
+    this.searchStr = '';
+    this.algoliaIndex = null;
+    /**
+     * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.
+     * Alternatively this will be set automatically when nested within an algolia component
+     */
+    this.appId = '';
+    /**
+     * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.
+     * Alternatively this will be set automatically when nested within an algolia component
+     */
+    this.apiKey = '';
+    /**
+     * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'.
+     * Alternatively this will be set automatically if you're using a 'resultsEmitter' element.
+     * ```
+     * { index: string, // algolia index name
+     *   domain?: string, // used in template filers to resolve incomplete url fields
+     *   filters?: [string], // algolia facets to retrive
+     *   hitsPerPage?: number,
+     *   name?: string // human readable index name
+     * }
+     * ```
+     */
+    this.searchIndex = null;
+    /**
+     * Minimum number of characters before performing a search
+     */
+    this.minChars = 2;
+    /**
+     * Automatically emit results data to algolia components.
+     * For example, if you wanted to provide an 'autocomplete' style dropdown
+     * before showing the main results with a submit button
+     */
+    this.autoEmit = true;
+    /**
+     * Will maintain a search all / '*' on init and reset allowing for a view
+     * then filter experience rather than a search first experience
+     */
+    this.browseIndex = false; // eslint-disable-line @stencil/strict-mutable
+    /**
+     * The method of storage.
+     * Either session storage, url hash (after the '#') or url query (after the '?').
+     */
+    this.storeMethod = 'session';
+    this.handleFocus = () => {
+      if (this.inputField)
+        this.inputField.setFocus();
+    };
+  }
+  /**
+   * Manually emit search results to algolia components.
+   * Useful if you don't wish to search on input change / want to provide 'autocomplete' options
+   * or / and want to use a submit button */
+  async search() {
+    this.emitResults();
+  }
+  searchIndexNameChange() {
+    if (!this.searchIndexName || !this.searchIndexName.length)
+      return;
+    this.searchIndex = { index: this.searchIndexName };
+  }
+  algoliaChange() {
+    this.internalIndex = this.algoliaIndex;
+  }
+  browseIndexChange() {
+    if (this.browseIndex) {
+      this.searchStr = '*';
+      this.searchSubmit();
+    }
+  }
+  initAlgoliaClient() {
+    if (this.isNested || !this.appId || !this.apiKey)
+      return;
+    this.algoliaClient = algoliasearch_umd(this.appId, this.apiKey);
+    if (this.searchIndex)
+      this.algoliaIndex = this.algoliaClient.initIndex(this.searchIndex.index);
+  }
+  async searchSubmit(ev) {
+    if (!this.internalIndex) {
+      console.error('No algolia index set');
+      return;
+    }
+    if (ev) {
+      if (ev.target.tagName.toLowerCase() !== 'nano-input')
+        return;
+      this.searchStr = ev.detail.value;
+    }
+    else {
+      this.inputField =
+        this.inputField || this.host.querySelector('nano-input');
+      if (!this.inputField)
+        return;
+      this.searchStr = this.inputField.value;
+    }
+    if (this.searchStr.length < this.minChars) {
+      if (this.browseIndex)
+        this.searchStr = '*';
+      else {
+        if (this.searchStr.length === 0) {
+          this.nanoSearchResult.emit({
+            results: [],
+            client: { apiKey: this.appId, appId: this.appId },
+          });
+          return;
+        }
+        if (this.searchStr.length < this.minChars)
+          return;
+      }
+    }
+    let options = {};
+    if (this.searchIndex.filters)
+      options = { facets: this.searchIndex.filters };
+    let results = this.fixDomain(await this.internalIndex.search(this.searchStr, options));
+    results.indexName = this.searchIndex.name;
+    results.selected = true;
+    results.domain = this.searchIndex.domain || null;
+    results.index = this.searchIndex.index;
+    this.currentResults = results;
+    this.nanoSearch.emit({
+      results: [this.currentResults],
+      client: { apiKey: this.appId, appId: this.appId },
+    });
+    if (this.autoEmit)
+      this.emitResults();
+  }
+  emitResults() {
+    this.nanoSearchResult.emit({
+      results: [this.currentResults],
+      client: { apiKey: this.appId, appId: this.appId },
+    });
+  }
+  fixDomain(results) {
+    if (!this.searchIndex.domain)
+      return results;
+    results.hits.map((hit) => {
+      if (hit.url && !hit.url.match(/^http/))
+        hit.url = location.protocol + '//' + this.searchIndex.domain + hit.url;
+    });
+    return results;
+  }
+  connectedCallback() {
+    this.isNested =
+      this.host.parentElement.tagName.toLowerCase() === 'nano-algolia' &&
+        this.host.hasAttribute('slot') &&
+        this.host.getAttribute('slot') === 'search-input';
+    if (!this.isNested) {
+      this.host.addEventListener('openWormhole', (ev) => {
+        ev.detail.onOpen.resolve();
+        this.searchIndexNameChange();
+        this.initAlgoliaClient();
+      });
+    }
+  }
+  componentWillLoad() {
+    this.inputField = this.host.querySelector('nano-input');
+    if (this.storeId)
+      ComponentStore.init(this, ['searchStr'], this.storeMethod, this.storeId);
+  }
+  render() {
+    return (h(Host, { onFocus: this.handleFocus, tabindex: "-1" }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "searchIndexName": ["searchIndexNameChange"],
+    "algoliaIndex": ["algoliaChange"],
+    "browseIndex": ["browseIndexChange"],
+    "apiKey": ["initAlgoliaClient"],
+    "appId": ["initAlgoliaClient"],
+    "searchIndex": ["initAlgoliaClient"]
+  }; }
+};
+Wormhole(AlgoliaInput, ['algoliaIndex', 'searchIndex', 'browseIndex']);
+AlgoliaInput = /*@__PURE__*/ proxyCustomElement(AlgoliaInput, [1, "nano-algolia-input", {
+    "appId": [1, "app-id"],
+    "apiKey": [1, "api-key"],
+    "searchIndex": [1040],
+    "searchIndexName": [1, "search-index-name"],
+    "minChars": [2, "min-chars"],
+    "autoEmit": [4, "auto-emit"],
+    "browseIndex": [1028, "browse-index"],
+    "storeId": [1, "store-id"],
+    "storeMethod": [1, "store-method"],
+    "searchStr": [32],
+    "algoliaIndex": [32],
+    "currentResults": [32],
+    "search": [64]
+  }, [[0, "nanoChange", "searchSubmit"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-algolia-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-algolia-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AlgoliaInput);
+      }
+      break;
+  } });
+}
+
+const NanoAlgoliaInput = AlgoliaInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAlgoliaInput, defineCustomElement };
+
+//# sourceMappingURL=nano-algolia-input.js.map

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

@@ -0,0 +1 @@
+{"file":"nano-algolia-input.js","mappings":"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","names":["algoliasearch"],"sources":["./src/components/algolia/algolia-input.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  State,\n  EventEmitter,\n  Event,\n  Listen,\n  Method,\n  Watch,\n  ComponentInterface,\n} from '@stencil/core';\n\nimport algoliasearch, {\n  SearchClient as AlgoliaClient,\n  SearchIndex as AlgoliaIndex,\n} from 'algoliasearch';\nimport {\n  InputChangeEventDetail,\n  AloliaSearchResultDetail,\n  SearchIndex,\n  AlgoliaMultiResult,\n} from '../../interface';\nimport { Wormhole } from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * @deprecated\n * Component for querying Algolia Indeces.\n * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)\n * Must include one 'nano-input' component\n */\n@Component({\n  tag: 'nano-algolia-input',\n  shadow: true,\n})\nexport class AlgoliaInput implements ComponentInterface {\n  private internalIndex: AlgoliaIndex;\n  private algoliaClient: AlgoliaClient;\n  private isNested: boolean;\n  private inputField: HTMLNanoInputElement;\n\n  @Element() host: HTMLNanoAlgoliaInputElement;\n\n  @State() searchStr: string = '';\n  @State() algoliaIndex: AlgoliaIndex = null;\n  @State() currentResults: AlgoliaMultiResult;\n\n  /**\n   * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() appId: string = '';\n\n  /**\n   * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() apiKey: string = '';\n\n  /**\n   * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically if you're using a 'resultsEmitter' element.\n   * ```\n   * { index: string, // algolia index name\n   *   domain?: string, // used in template filers to resolve incomplete url fields\n   *   filters?: [string], // algolia facets to retrive\n   *   hitsPerPage?: number,\n   *   name?: string // human readable index name\n   * }\n   * ```\n   */\n  @Prop({ mutable: true }) searchIndex: SearchIndex = null;\n\n  /**\n   * Algolia search index name. Alternative to 'searchIndex'.\n   * A simplified shortcut for setting an index.\n   * properties such as hitsPerPage and facets will come from the algolia index\n   */\n  @Prop() searchIndexName: string;\n\n  /**\n   * Minimum number of characters before performing a search\n   */\n  @Prop() minChars: number = 2;\n\n  /**\n   * Automatically emit results data to algolia components.\n   * For example, if you wanted to provide an 'autocomplete' style dropdown\n   * before showing the main results with a submit button\n   */\n  @Prop() autoEmit: boolean = true;\n\n  /**\n   * Will maintain a search all / '*' on init and reset allowing for a view\n   * then filter experience rather than a search first experience\n   */\n  @Prop({ mutable: true }) browseIndex: boolean = false; // eslint-disable-line @stencil/strict-mutable\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Manually emit search results to algolia components.\n   * Useful if you don't wish to search on input change / want to provide 'autocomplete' options\n   * or / and want to use a submit button */\n  @Method()\n  async search() {\n    this.emitResults();\n  }\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   * @internal\n   */\n  @Event() nanoSearchResult!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   */\n  @Event() nanoSearch!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search field is cleared.\n   */\n  @Event() nanoSearchReset!: EventEmitter<AloliaSearchResultDetail>;\n\n  @Watch('searchIndexName')\n  searchIndexNameChange() {\n    if (!this.searchIndexName || !this.searchIndexName.length) return;\n    this.searchIndex = { index: this.searchIndexName };\n  }\n\n  @Watch('algoliaIndex')\n  algoliaChange() {\n    this.internalIndex = this.algoliaIndex;\n  }\n\n  @Watch('browseIndex')\n  browseIndexChange() {\n    if (this.browseIndex) {\n      this.searchStr = '*';\n      this.searchSubmit();\n    }\n  }\n\n  @Watch('apiKey')\n  @Watch('appId')\n  @Watch('searchIndex')\n  initAlgoliaClient() {\n    if (this.isNested || !this.appId || !this.apiKey) return;\n    this.algoliaClient = algoliasearch(this.appId, this.apiKey);\n    if (this.searchIndex)\n      this.algoliaIndex = this.algoliaClient.initIndex(this.searchIndex.index);\n  }\n\n  @Listen('nanoChange')\n  async searchSubmit(ev?: CustomEvent<InputChangeEventDetail>) {\n    if (!this.internalIndex) {\n      console.error('No algolia index set');\n      return;\n    }\n\n    if (ev) {\n      if ((ev.target as HTMLElement).tagName.toLowerCase() !== 'nano-input')\n        return;\n      this.searchStr = ev.detail.value;\n    } else {\n      this.inputField =\n        this.inputField || this.host.querySelector('nano-input');\n      if (!this.inputField) return;\n      this.searchStr = this.inputField.value;\n    }\n\n    if (this.searchStr.length < this.minChars) {\n      if (this.browseIndex) this.searchStr = '*';\n      else {\n        if (this.searchStr.length === 0) {\n          this.nanoSearchResult.emit({\n            results: [],\n            client: { apiKey: this.appId, appId: this.appId },\n          });\n          return;\n        }\n        if (this.searchStr.length < this.minChars) return;\n      }\n    }\n\n    let options = {};\n    if (this.searchIndex.filters)\n      options = { facets: this.searchIndex.filters };\n\n    let results = this.fixDomain(\n      await this.internalIndex.search(this.searchStr, options)\n    );\n    results.indexName = this.searchIndex.name;\n    results.selected = true;\n    results.domain = this.searchIndex.domain || null;\n    results.index = this.searchIndex.index;\n\n    this.currentResults = results;\n    this.nanoSearch.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n\n    if (this.autoEmit) this.emitResults();\n  }\n\n  private emitResults() {\n    this.nanoSearchResult.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n  }\n\n  private fixDomain(results: AlgoliaMultiResult) {\n    if (!this.searchIndex.domain) return results;\n    results.hits.map((hit) => {\n      if (hit.url && !hit.url.match(/^http/))\n        hit.url = location.protocol + '//' + this.searchIndex.domain + hit.url;\n    });\n    return results;\n  }\n\n  private handleFocus = () => {\n    if (this.inputField) this.inputField.setFocus();\n  };\n\n  connectedCallback() {\n    this.isNested =\n      this.host.parentElement.tagName.toLowerCase() === 'nano-algolia' &&\n      this.host.hasAttribute('slot') &&\n      this.host.getAttribute('slot') === 'search-input';\n\n    if (!this.isNested) {\n      this.host.addEventListener(\n        'openWormhole',\n        (ev: CustomEvent<{ onOpen: any }>) => {\n          ev.detail.onOpen.resolve();\n          this.searchIndexNameChange();\n          this.initAlgoliaClient();\n        }\n      );\n    }\n  }\n\n  componentWillLoad() {\n    this.inputField = this.host.querySelector('nano-input');\n    if (this.storeId)\n      ComponentStore.init(this, ['searchStr'], this.storeMethod, this.storeId);\n  }\n\n  render() {\n    return (\n      <Host onFocus={this.handleFocus} tabindex=\"-1\">\n        <slot />\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaInput, ['algoliaIndex', 'searchIndex', 'browseIndex']);\n"],"version":3}

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

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

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

@@ -0,0 +1,104 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { W as Wormhole } from './algolia-data.js';
+
+let AlgoliaPagination = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoPageChanged = createEvent(this, "nanoPageChanged", 7);
+    this.currentPage = null;
+    this.canGoPrev = false;
+    this.canGoNext = false;
+    this.show = true;
+    this.indexResults = null;
+    this.infiniteScroll = false;
+    /** Max number of page numbers to show */
+    this.maxToShow = null;
+  }
+  currentPageChange() { }
+  infiniteScrollChange() {
+    this.show = !this.infiniteScroll;
+  }
+  /** Go to next page from current */
+  async nextPage() { }
+  /** Go to previous page from current */
+  async prevPage() { }
+  /** Go to a particular page */
+  async goToPage(page) {
+    console.log(page);
+  }
+  updateContent() {
+    this.outputTo = this.outputSlot || this.outputEle;
+    if (!this.templateStr || !this.outputTo || !this.indexResults) {
+      this.show = false;
+      return;
+    }
+    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {
+    //   orig: { ...this.currentIndex.origFilters[this.filterName] },
+    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }
+    // });
+  }
+  componentWillLoad() {
+    this.templateSlot = this.el.querySelector('[slot="filter-template"]');
+    this.outputSlot = this.el.querySelector('[slot="output"]');
+    if (!!this.templateSlot)
+      this.templateStr = this.templateSlot.innerHTML;
+    // this.boundChangeEvent = this.handleChangeEvent.bind(this);
+  }
+  componentDidLoad() {
+    this.updateContent();
+  }
+  render() {
+    return (h(Host, { class: {
+        'show-pagination': this.show,
+      } }, h("div", { ref: (div) => (this.outputEle = div) }, h("slot", { name: "output" }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "currentPage": ["currentPageChange"],
+    "infiniteScroll": ["infiniteScrollChange"]
+  }; }
+};
+// Use the injectProps method to pass from the tunnel as props to the component
+Wormhole(AlgoliaPagination, [
+  'indexResults',
+  'filterChanged',
+  'tplRenderFn',
+]);
+AlgoliaPagination = /*@__PURE__*/ proxyCustomElement(AlgoliaPagination, [1, "nano-algolia-pagination", {
+    "maxToShow": [2, "max-to-show"],
+    "currentPage": [32],
+    "canGoPrev": [32],
+    "canGoNext": [32],
+    "show": [32],
+    "tplRenderFn": [32],
+    "indexResults": [32],
+    "infiniteScroll": [32],
+    "nextPage": [64],
+    "prevPage": [64],
+    "goToPage": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-algolia-pagination"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-algolia-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AlgoliaPagination);
+      }
+      break;
+  } });
+}
+
+const NanoAlgoliaPagination = AlgoliaPagination;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAlgoliaPagination, defineCustomElement };
+
+//# sourceMappingURL=nano-algolia-pagination.js.map

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

@@ -0,0 +1 @@
+{"file":"nano-algolia-pagination.js","mappings":";;;;;;IAsBa,iBAAiB;EAJ9B;;;;;IAaW,gBAAW,GAAW,IAAI,CAAC;IAC3B,cAAS,GAAY,KAAK,CAAC;IAC3B,cAAS,GAAY,KAAK,CAAC;IAC3B,SAAI,GAAY,IAAI,CAAC;IAErB,iBAAY,GAAgB,IAAI,CAAC;IACjC,mBAAc,GAAY,KAAK,CAAC;;IAGjC,cAAS,GAAW,IAAI,CAAC;GAmElC;EA3DC,iBAAiB,MAAK;EAGtB,oBAAoB;IAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAClC;;EAID,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,CAAC,IAAY;IACzB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;GACnB;EAEO,aAAa;IACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC;IAClD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MAC7D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;;;;;GAMF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;;GAEzE;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,IAAI;OAC7B,IAED,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP;GACH;;;;;;;AAGH;AACA,QAAQ,CAAC,iBAAgD,EAAE;EACzD,cAAc;EACd,eAAe;EACf,aAAa;CACd,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/algolia/algolia-pagination.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { IndexResult } from '../../interface';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\n\n/**\n * Displays results from Algolia searches.\n * TODO / WIP */\n@Component({\n  tag: 'nano-algolia-pagination',\n  shadow: true,\n})\nexport class AlgoliaPagination {\n  @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n  private outputEle: HTMLDivElement;\n  private outputSlot: HTMLElement;\n  private outputTo: HTMLElement;\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n\n  @State() currentPage: number = null;\n  @State() canGoPrev: boolean = false;\n  @State() canGoNext: boolean = false;\n  @State() show: boolean = true;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() indexResults: IndexResult = null;\n  @State() infiniteScroll: boolean = false;\n\n  /** Max number of page numbers to show */\n  @Prop() maxToShow: number = null;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n  @Watch('currentPage')\n  currentPageChange() {}\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.show = !this.infiniteScroll;\n  }\n\n  /** Go to next page from current */\n  @Method()\n  async nextPage() {}\n\n  /** Go to previous page from current */\n  @Method()\n  async prevPage() {}\n\n  /** Go to a particular page */\n  @Method()\n  async goToPage(page: number) {\n    console.log(page);\n  }\n\n  private updateContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n    if (!this.templateStr || !this.outputTo || !this.indexResults) {\n      this.show = false;\n      return;\n    }\n\n    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n    //   orig: { ...this.currentIndex.origFilters[this.filterName] },\n    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }\n    // });\n  }\n\n  componentWillLoad() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n    if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n    // this.boundChangeEvent = this.handleChangeEvent.bind(this);\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-pagination': this.show,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole(AlgoliaPagination as WormholeConsumerConstructor, [\n  'indexResults',\n  'filterChanged',\n  'tplRenderFn',\n]);\n"],"version":3}

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

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