@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/components/nano-alert.js

@@ -0,0 +1,296 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { M as Modal } from './modal.js';
+import { r as raf } from './index2.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll.js';
+import { c as createColorClasses } from './theme.js';
+
+const alertCss = ":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{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";
+
+const toastStackTr = Object.assign(document.createElement('div'), {
+  className: 'nano-toast-stack nano-toast-stack--tr',
+});
+const toastStackTl = Object.assign(document.createElement('div'), {
+  className: 'nano-toast-stack nano-toast-stack--tl',
+});
+const toastStackBl = Object.assign(document.createElement('div'), {
+  className: 'nano-toast-stack nano-toast-stack--bl',
+});
+const toastStackBr = Object.assign(document.createElement('div'), {
+  className: 'nano-toast-stack nano-toast-stack--br',
+});
+let Alert = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoShow = createEvent(this, "nanoShow", 7);
+    this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
+    this.nanoHide = createEvent(this, "nanoHide", 7);
+    this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
+    this.addedTransEnd = false;
+    this.goingToHide = false;
+    this.goingToShow = false;
+    this.isModal = false;
+    this.isToast = false;
+    this.isShowing = false;
+    /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Set to true to make the alert closable. */
+    this.closable = false;
+    /**
+     * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the
+     * alert before it closes (e.g. moves the mouse over it), the timer will restart.
+     */
+    this.duration = Infinity;
+    this.handleMouseMove = () => {
+      this.restartAutoHide();
+    };
+    this.handleCloseClick = () => {
+      this.hide();
+    };
+    this.handleTransitionEnd = (event) => {
+      if (event.propertyName === 'opacity' &&
+        (event.target === this.panel || event.target === this.overlay)) {
+        this.host.hidden = !this.open;
+        this.isShowing = this.open;
+        this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();
+      }
+    };
+    this.handleButtonClick = (e) => {
+      if (e.defaultPrevented)
+        return;
+      if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')
+        this.hide();
+    };
+    this.restartAutoHide = () => {
+      clearTimeout(this.autoHideTimeout);
+      if (this.open && this.duration < Infinity) {
+        this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+      }
+    };
+    this.Panel = () => {
+      return (h("div", { ref: (el) => (this.panel = el), part: "panel", class: {
+          alert: true,
+          'alert--open': this.open,
+          'alert--toasty': this.isToast,
+          'alert--modal': !!this.isModal,
+          'alert--showing': this.isShowing,
+        }, role: !!this.isModal ? 'alertdialog' : 'alert', "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-modal": !!this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseMove: this.handleMouseMove, tabIndex: !!this.isModal ? 0 : undefined }, h("div", { class: "alert__content" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("div", { class: "alert__close" }, h("nano-icon-button", { class: "alert__close", iconName: "light/times", label: "close menu", onClick: this.handleCloseClick })))), h("div", { class: "alert__footer" }, h("slot", { name: "footer" }))));
+    };
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.goingToShow) {
+      return;
+    }
+    const nanoShow = this.nanoShow.emit();
+    if (nanoShow.defaultPrevented) {
+      this.open = false;
+      return false;
+    }
+    this.host.hidden = false;
+    this.goingToShow = true;
+    this.open = true;
+    raf(() => {
+      this.isShowing = true;
+      this.goingToShow = false;
+    });
+    if (this.duration < Infinity) {
+      clearTimeout(this.autoHideTimeout);
+      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  /** Hides the alert */
+  async hide() {
+    if (this.goingToHide) {
+      return;
+    }
+    const nanoHide = this.nanoHide.emit();
+    if (nanoHide.defaultPrevented) {
+      this.open = true;
+      return false;
+    }
+    this.goingToHide = true;
+    this.open = false;
+    raf(() => (this.goingToHide = false));
+    clearTimeout(this.autoHideTimeout);
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   *
+   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)
+   * @returns a promise which will resolve after the alert has hidden
+   */
+  async toast(position = 'tr') {
+    this.isToast = true;
+    return new Promise((resolve) => {
+      let toastStack;
+      switch (position) {
+        case 'tl':
+          toastStack = toastStackTl;
+          break;
+        case 'bl':
+          toastStack = toastStackBl;
+          break;
+        case 'br':
+          toastStack = toastStackBr;
+          break;
+        default:
+          toastStack = toastStackTr;
+          break;
+      }
+      if (!toastStack.parentElement) {
+        document.body.appendChild(toastStack);
+      }
+      toastStack.appendChild(this.host);
+      this.connectedCallback();
+      this.show();
+      const onClose = () => {
+        this.host.remove();
+        this.isToast = false;
+        resolve();
+        // Remove the toast stack from the DOM when there are no more alerts
+        if (!toastStack.querySelector('nano-alert')) {
+          toastStack.remove();
+        }
+      };
+      this.host.addEventListener('nanoAfterHide', onClose, { once: true });
+      this.host.addEventListener('nanoafterhide', onClose, { once: true });
+    });
+  }
+  /**
+   * Displays the alert as a dialog / modal - more akin to a traditional js alert().
+   * @param label a label for assistive technology
+   */
+  async alert(label) {
+    this.isModal = true;
+    this.label = label;
+    return new Promise((resolve) => {
+      if (!document.body.contains(this.host)) {
+        document.body.appendChild(this.host);
+      }
+      this.modal.activate();
+      lockBodyScrolling(this.host);
+      this.originalTrigger = document.activeElement;
+      raf(() => {
+        this.show();
+      });
+      const onOpen = () => raf(() => this.panel.focus({ preventScroll: true }));
+      const onClose = () => {
+        this.modal.deactivate();
+        this.host.remove();
+        this.label = undefined;
+        this.isModal = false;
+        resolve();
+        // Restore focus to the original trigger
+        if (this.originalTrigger &&
+          typeof this.originalTrigger.focus === 'function') {
+          setTimeout(() => this.originalTrigger.focus());
+        }
+      };
+      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });
+      this.host.addEventListener('nanoaftershow', onOpen, { once: true });
+      this.host.addEventListener('nanoAfterHide', onClose, {
+        once: true,
+      });
+      this.host.addEventListener('nanoafterhide', onClose, {
+        once: true,
+      });
+    });
+  }
+  connectedCallback() {
+    this.modal = new Modal(this.host);
+    this.host.addEventListener('click', this.handleButtonClick);
+    if (this.panel) {
+      this.addedTransEnd = true;
+      this.panel.addEventListener('transitionend', this.handleTransitionEnd);
+    }
+  }
+  disconnectedCallback() {
+    unlockBodyScrolling(this.host);
+    this.host.removeEventListener('click', this.handleButtonClick);
+    this.addedTransEnd = false;
+    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
+  }
+  componentDidLoad() {
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+    if (!this.addedTransEnd) {
+      this.panel.addEventListener('transitionend', this.handleTransitionEnd);
+    }
+  }
+  render() {
+    return (h(Host, { class: Object.assign({}, createColorClasses(this.color)), showing: this.isShowing }, this.isModal && [
+      h("div", { part: "overlay", class: {
+          alert__overlay: true,
+          'alert__overlay--open': this.open,
+        }, ref: (div) => (this.overlay = div) }),
+      h("div", { class: "alert__modal-wrap" }, h(this.Panel, null)),
+    ], !this.isModal && h(this.Panel, null)));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "open": ["handleOpenChange"],
+    "duration": ["handleDurationChange"]
+  }; }
+  static get style() { return alertCss; }
+};
+Alert = /*@__PURE__*/ proxyCustomElement(Alert, [1, "nano-alert", {
+    "open": [1540],
+    "closable": [516],
+    "color": [513],
+    "duration": [2],
+    "isModal": [32],
+    "isToast": [32],
+    "isShowing": [32],
+    "label": [32],
+    "show": [64],
+    "hide": [64],
+    "toast": [64],
+    "alert": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-alert", "nano-icon", "nano-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Alert);
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const NanoAlert = Alert;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAlert, defineCustomElement };
+
+//# sourceMappingURL=nano-alert.js.map

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

@@ -0,0 +1 @@
+{"file":"nano-alert.js","mappings":"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","names":[],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{$color-palegrey};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n\n  @include padding(0, #{$spacing-medium}, 0, 0);\n\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n  createColorClasses,\n  lockBodyScrolling,\n  raf,\n  unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    raf(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    raf(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n      });\n\n      const onOpen = () => raf(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,317 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, writeTask, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { W as Wormhole } from './algolia-data.js';
+import { C as ComponentStore } from './component-store.js';
+
+const algoliaFilterCss = ":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:none}:host ::slotted([slot=filter-template]),:host::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";
+
+let AlgoliaFilter = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoFilterChanged = createEvent(this, "nanoFilterChanged", 7);
+    this.nanoTplUpdated = createEvent(this, "nanoTplUpdated", 7);
+    this.filterId = null;
+    this.tplWillRnder = new Promise((resolve) => {
+      this.tplDidRnder = resolve;
+    });
+    this.internalValue = [undefined];
+    this.showFilter = false;
+    this.indexResults = null;
+    this.filterChanged = null;
+    /**
+     * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display
+     */
+    this.filterName = null;
+    /**
+     * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.
+     */
+    this.value = '';
+    /**
+     * The internal operator joining filter values.
+     */
+    this.operator = 'or';
+    /**
+     * The method of storage.
+     * Either session storage, url hash (after the '#') or url query (after the '?').
+     */
+    this.storeMethod = 'session';
+  }
+  // Public facing. When changed attempts to 'check' any relevant fields in the template.
+  valueSet() {
+    let valStr = this.value;
+    let vals;
+    if (typeof valStr === 'string')
+      vals = valStr.length ? valStr.split('|') : [];
+    else
+      vals = this.value;
+    if (this.didValueChange(vals)) {
+      let foundVals = this.setFieldValues(vals);
+      // found in template, set the internal state (this emits the changed event)
+      if (foundVals && foundVals.length)
+        this.internalValue = vals;
+      // not found in template, wait for it to render.
+      else {
+        this.tplWillRnder.then((_) => {
+          this.setFieldValues(vals);
+          this.internalValue = vals;
+        });
+      }
+    }
+  }
+  // Value has changed and is reflected in template. Emit event.
+  valueChanged() {
+    this.value = this.internalValue;
+    this.nanoFilterChanged.emit({
+      filterId: this.filterId,
+      facetName: this.filterName,
+      value: this.internalValue,
+      operator: this.operator,
+    });
+  }
+  // New facets from algolia. Update template
+  appliedFilterChanged() {
+    if (this.filterName &&
+      this.filterChanged &&
+      (this.filterChanged !== this.filterId || this.operator === 'and')) {
+      this.updateContent();
+    }
+  }
+  tplUpdate() {
+    this.updateContent();
+  }
+  handleFilterChange() {
+    if (this.indexResults && this.indexResults.appliedFilters) {
+      const foundValue = this.indexResults.appliedFilters.find((filter) => filter.name === this.filterName);
+      if (!foundValue)
+        return;
+      this.tplWillRnder.then((_) => {
+        let foundVals = this.setFieldValues(foundValue.values);
+        if (foundVals && foundVals.length)
+          this.value = foundVals;
+      });
+    }
+    this.updateContent();
+  }
+  handleChangeEvent() {
+    let vals = this.getFieldValues();
+    if (this.didValueChange(vals)) {
+      this.internalValue = vals;
+      return true;
+    }
+    return false;
+  }
+  updateContent() {
+    let outputTo = this.outputSlot || this.outputEle;
+    if (!this.el)
+      return;
+    // there's no template so show output right away
+    if (!this.templateStr)
+      this.showFilter = true;
+    // there's a template but no index set so hide filters atm
+    else if (!this.filterName ||
+      !outputTo ||
+      (this.templateStr &&
+        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))) {
+      this.showFilter = false;
+    }
+    // there's no output element so nothing else to do
+    if (!outputTo)
+      return;
+    // there's no index set atm but get any static filter values so we can apply them
+    if (!this.indexResults) {
+      if (this.templateStr) {
+        writeTask(() => {
+          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {
+            orig: {},
+            dyn: {},
+            selected: this.internalValue && this.internalValue.length
+              ? this.internalValue
+              : this.value,
+          });
+          if (!this.value || !this.value.length)
+            this.handleChangeEvent();
+        });
+      }
+      else if (!this.value || !this.value.length)
+        this.handleChangeEvent();
+      return;
+    }
+    // everything is in place - render as normal and set values
+    writeTask(() => {
+      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {
+        orig: Object.assign({}, this.indexResults.origFilters[this.filterName]),
+        dyn: Object.assign({}, this.indexResults.dynFilters[this.filterName]),
+        selected: this.internalValue && this.internalValue.length
+          ? this.internalValue
+          : this.value,
+      });
+      this.tplDidRnder();
+      this.setFieldValues();
+      if (!this.showFilter)
+        this.showFilter = true;
+      this.nanoTplUpdated.emit(this.el);
+    });
+  }
+  // go through form elements and extract their current value
+  getFieldValues() {
+    let values = [];
+    let fields = this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');
+    for (let i = 0; i < fields.length; i++) {
+      let field = fields[i];
+      // If a multi-select, get all selections
+      if (field.type === 'select-multiple') {
+        let select = field;
+        for (let n = 0; n < select.options.length; n++) {
+          if (!select.options[n].selected || !select.options[n].value.length)
+            continue;
+          values.push(select.options[n].value);
+        }
+      }
+      else if ((field.type !== 'checkbox' && field.type !== 'radio') ||
+        (field.checked && field.value.length)) {
+        values.push(field.value);
+      }
+    }
+    return values;
+  }
+  // go through form elements and select / check them as appropriate
+  setFieldValues(vals) {
+    vals = vals || this.internalValue;
+    if (!vals)
+      return;
+    let found = [];
+    let fields = this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');
+    for (let i = 0; i < fields.length; i++) {
+      let field = fields[i];
+      if (field.disabled ||
+        field.type === 'file' ||
+        field.type === 'reset' ||
+        field.type === 'submit' ||
+        field.type === 'button')
+        continue;
+      if (field.type === 'select-multiple' || field.type === 'select-one') {
+        let select = field;
+        for (let n = 0; n < select.options.length; n++) {
+          if (!vals.includes(select.options[n].value))
+            select.options[n].selected = false;
+          else {
+            found.push(select.value);
+            select.options[n].selected = true;
+            if (field.type === 'select-one')
+              select.value = select.options[n].value;
+          }
+        }
+      }
+      else if (['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(field.type)) {
+        if (vals.includes(field.value)) {
+          found.push(field.value);
+          field.checked = true;
+        }
+        else if (!vals.length && !field.value.length) {
+          field.checked = true;
+        }
+        else
+          field.checked = false;
+      }
+    }
+    return found;
+  }
+  didValueChange(newVal) {
+    if (!!this.internalValue && !newVal)
+      return true;
+    if (!this.internalValue && !newVal)
+      return false;
+    if (this.internalValue && newVal.length !== this.internalValue.length)
+      return true;
+    let hasChanged = false;
+    for (var i = 0; i < newVal.length; i++) {
+      if (!hasChanged &&
+        (!this.internalValue || !this.internalValue.includes(newVal[i])))
+        hasChanged = true;
+    }
+    return hasChanged;
+  }
+  connectedCallback() {
+    this.templateSlot = this.el.querySelector('[slot="filter-template"]');
+    this.outputSlot = this.el.querySelector('[slot="output"]');
+    this.filterId = this.filterName + '_' + filterIds++;
+    if (!!this.templateSlot) {
+      this.templateStr = this.templateSlot.innerHTML;
+      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');
+    }
+  }
+  componentWillLoad() {
+    if (this.storeId)
+      ComponentStore.init(this, ['value'], this.storeMethod || this.globalStoreMethod, this.storeId);
+  }
+  componentDidLoad() {
+    this.updateContent();
+    if (this.templateStr &&
+      this.filterName &&
+      this.indexResults &&
+      this.indexResults.origFilters[this.filterName])
+      this.showFilter = true;
+  }
+  render() {
+    return (h(Host, { class: {
+        'show-filter': this.showFilter,
+      } }, h("div", { ref: (div) => (this.outputEle = div) }, h("slot", { name: "output" }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["valueSet"],
+    "internalValue": ["valueChanged"],
+    "facets": ["appliedFilterChanged"],
+    "tplRenderFn": ["tplUpdate"],
+    "indexResults": ["handleFilterChange"]
+  }; }
+  static get style() { return algoliaFilterCss; }
+};
+Wormhole(AlgoliaFilter, [
+  'globalStoreMethod',
+  'indexResults',
+  'filterChanged',
+  'facets',
+  'tplRenderFn',
+  'changeEvent',
+]);
+let filterIds = 0;
+AlgoliaFilter = /*@__PURE__*/ proxyCustomElement(AlgoliaFilter, [1, "nano-algolia-filter", {
+    "filterName": [1, "filter-name"],
+    "value": [1025],
+    "operator": [1],
+    "storeId": [1, "store-id"],
+    "storeMethod": [1, "store-method"],
+    "changeEvent": [32],
+    "internalValue": [32],
+    "showFilter": [32],
+    "indexResults": [32],
+    "filterChanged": [32],
+    "facets": [32],
+    "tplRenderFn": [32],
+    "globalStoreMethod": [32]
+  }, [[0, "nanoChange", "handleChangeEvent"], [0, "change", "handleChangeEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-algolia-filter"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-algolia-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AlgoliaFilter);
+      }
+      break;
+  } });
+}
+
+const NanoAlgoliaFilter = AlgoliaFilter;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAlgoliaFilter, defineCustomElement };
+
+//# sourceMappingURL=nano-algolia-filter.js.map