@nanoporetech-digital/components 2.9.0 → 2.11.0

package/dist/collection/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,EACD,IAAI,GAEL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EACL,cAAc,GAEf,MAAM,mCAAmC,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;GAMG;AAMH,MAAM,OAAO,MAAM;EALnB;IAMU,gBAAW,GAAG,UAAU,EAAE,EAAE,EAAE,CAAC;IAG/B,aAAQ,GAAG,KAAK,CAAC;IACjB,aAAQ,GAAG,KAAK,CAAC;IAGjB,kBAAa,GAAG,KAAK,CAAC;IAGrB,cAAS,GAAG,KAAK,CAAC;IAClB,cAAS,GAAG,KAAK,CAAC;IAClB,cAAS,GAAG,KAAK,CAAC;IAE3B,mDAAmD;IAC3C,eAAU,GAAG,IAAI,CAAC;IAE1B,sGAAsG;IAC9D,SAAI,GAAG,KAAK,CAAC;IAMrD;gGAC4F;IACpF,aAAQ,GAAG,KAAK,CAAC;IAEzB;gGAC4F;IACpF,aAAQ,GAAG,KAAK,CAAC;IAEzB,2KAA2K;IACnK,kBAAa,GAAG,KAAK,CAAC;IAK9B,4GAA4G;IACpG,gBAAW,GAAmB,UAAU,CAAC;IAwFzC,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB;IACH,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MAC1B,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;MAExD,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QAC/D,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;WAAM;QACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;OAClD;IACH,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACvD,IACE,KAAK,CAAC,YAAY,KAAK,SAAS;QAChC,KAAK;WACF,YAAY,EAAE;WACd,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,EAC/D;QACA,6EAA6E;QAC7E,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;OACnE;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAChD,CAAC,CAAC;GAkIH;EAzPC,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC;EAqBD,uBAAuB;EAEvB,KAAK,CAAC,IAAI;IACR,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO;KACR;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACtC,IAAI,QAAQ,CAAC,gBAAgB,EAAE;MAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;IAED,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAA4B,CAAC;IAC7D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAEtB,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,4FAA4F;MAC5F,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,eAAe,EACf,GAAG,EAAE;QACH,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE;UACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;SAC3C;MACH,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;EACH,CAAC;EAED,uBAAuB;EAEvB,KAAK,CAAC,IAAI;IACR,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO;KACR;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACtC,IAAI,QAAQ,CAAC,gBAAgB,EAAE;MAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACxB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAI,CAAC,UAAU,EAAE,CAAC;IAElB,wCAAwC;IACxC,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;IACrC,IAAI,OAAO,IAAI,OAAO,OAAO,CAAC,KAAK,KAAK,UAAU,EAAE;MAClD,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;KACnC;EACH,CAAC;EAsCO,UAAU;IAChB,IAAI,MAAM,GAA6C,KAAK,CAAC,IAAI,CAC/D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAC3C,CAAC;IACF,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;MACvB,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO;QACxC,KAA0B,CAAC,KAAK,EAAE,CAAC;WACjC;QACH,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACtB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;OACjB;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACxE;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,uBAAuB;IACvB,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;MACd,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;EACxE,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACvB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACxE;EACH,CAAC;EAED,oBAAoB;IAClB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;EAC5E,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;MAC9C,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;UACL,MAAM,EAAE,IAAI;UACZ,cAAc,EAAE,IAAI,CAAC,IAAI;UACzB,iBAAiB,EAAE,IAAI,CAAC,SAAS;UACjC,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;UACpC,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;UACpC,mBAAmB,EAAE,IAAI,CAAC,SAAS;UACnC,qBAAqB,EAAE,IAAI,CAAC,UAAU;SACvC,EACD,SAAS,EAAE,IAAI,CAAC,aAAa;QAE7B,WACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;QAEF,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,gBACF,MAAM,iBACJ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,qBAE3C,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,QAAQ,CAAC,CAAC,CAAC,IAAI,EAErD,QAAQ,EAAE,CAAC;UAEX,WAAK,KAAK,EAAC,mBAAmB;YAC3B,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB;cACE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;gBAC1C,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,eAAe,EACrB,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,QAAQ;kBAE/B,YAAM,IAAI,EAAC,OAAO,IAEf,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CACpC,CACF;gBACN,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,wBACE,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAC,aAAa,GACtB,CACH,CACM,CACI,CAChB;YACD,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;cACnC,eAAQ,CACJ;YACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAC5D,oBAAc,QAAQ,EAAC,QAAQ;cAC7B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gBAAgB;gBAC1C,YAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI;gBAC1D,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,cACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,YAGnB,CACV,CACM,CACI,CAChB,CACG,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog 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  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    if (!this.panel) return;\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.js

@@ -410,7 +410,7 @@ export class Dropdown {
         "references": {
           "PopoverPlacement": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/utils/popover.ts"
+            "path": "/builds/78sSozaT/0/Digital/nano-components/packages/components/src/utils/popover.ts"
           }
         }
       },

package/dist/collection/components/field-validator/field-validator.js

@@ -0,0 +1,579 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Component, Prop, h, Host, Element, State, Watch, Event, } from '@stencil/core';
+import { createStore } from '@stencil/store';
+/**
+ * A toolbox for `nano-...` form fields and form validation.
+ *
+ * - Easy to add validation accross field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+ * - Easy access to whole form and individual field validity states
+ * - Easy access to form data payload
+ * - Scroll to invalid field on submit
+ */
+export class FieldValidator {
+  constructor() {
+    this.submitted = false;
+    this.fields = [];
+    // annoyingly, whenever we attempt to checkValidty it fires `invalid` events.
+    // this is used to prevent infinite loops / multiple calls
+    this.internalValidate = false;
+    // Public API
+    /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */
+    this.validateOn = 'submitThenDirty';
+    /** Tries to scroll to the first invalid field on submit */
+    this.scrollToInvalid = true;
+    this._dirty = false;
+    // Event handlers
+    /** Fired whenever store values change and potentially checks validity */
+    this.handleStoreChange = async (_key, _newVal) => {
+      if (this.validateOn === 'dirty' && this.dirty) {
+        this.internalValidate = true;
+        await this.validateAllFields();
+        this._valid = this.activeForm.checkValidity();
+        this.internalValidate = false;
+      }
+      this.nanoPayloadChange.emit(this.store.state);
+    };
+    /** Handles field value changes and passes to store */
+    this.handleFieldChange = (ev) => {
+      this._dirty = true;
+      this.setFieldValue([ev.target]);
+    };
+    /** Handles default field validation events */
+    this.handleFormInvalid = async (ev) => {
+      ev.preventDefault();
+      this._valid = false;
+      if (this.internalValidate)
+        return;
+      if (this.validateOn === 'submitThenDirty')
+        this.validateOn = 'dirty';
+      this.submitted = true;
+      await this.validateAllFields();
+      // kinda insane...but if we're only validating on submit, then if the form is currently
+      // in an invalid state, when submitting, it will fire an invalid event and not
+      // submit the form. So let's test to make sure it is really invalid, and submit if not
+      if (this.validateOn === 'submit') {
+        this.internalValidate = true;
+        this._valid = this.activeForm.checkValidity();
+        this.internalValidate = false;
+        if (this._valid) {
+          this.submitForm();
+          return;
+        }
+      }
+      this.scrollToFirstInvalid();
+      this.nanoInvalid.emit();
+    };
+    /** stops default form submission, checks if valid, then submits manually  */
+    this.handleSubmit = async (e) => {
+      e.preventDefault();
+      if (this.validateOn === 'submitThenDirty')
+        this.validateOn = 'dirty';
+      this.submitted = true;
+      await this.validateAllFields();
+      this.internalValidate = true;
+      this._valid = this.activeForm.checkValidity();
+      this.internalValidate = false;
+      if (!this._valid) {
+        this.scrollToFirstInvalid();
+        return;
+      }
+      this.submitForm();
+    };
+  }
+  userFormChange() {
+    if (!!this.userForm)
+      this.activeForm = this.userForm;
+  }
+  get activeForm() {
+    return this._activeForm;
+  }
+  set activeForm(form) {
+    if (this._activeForm)
+      this._activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
+    if (form)
+      form.addEventListener('invalid', this.handleFormInvalid, true);
+    this._activeForm = form;
+  }
+  /** Sync up validateOn with all fields */
+  validateOnChange() {
+    this.fields.forEach((field) => {
+      if (field.tagName === 'NANO-CHECKBOX') {
+        const cbg = field.closest('nano-checkbox-group');
+        if (cbg)
+          cbg.validateOn = this.validateOn;
+      }
+      else {
+        field.validateOn =
+          this.validateOn;
+      }
+    });
+  }
+  /** Returns true if any nested fields have been changed @readonly */
+  get dirty() {
+    return this._dirty;
+  }
+  /** Returns true if all the nested fields are currently valid @readonly */
+  get valid() {
+    return this._valid;
+  }
+  /** The current form payload as a reactive store. @readonly */
+  get payload() {
+    return this.store.state;
+  }
+  /** Returns true if validation errors will be displayed to the user */
+  get showValidation() {
+    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;
+  }
+  /** Get the current validation state of all form fields. @readonly
+   * ```
+   {
+      fields: NanoFormEles[];
+      valid: boolean;
+      validityMessage: string;
+      dirty: boolean;
+      name: string | number;
+      value: any;
+    }[]
+  ```
+   */
+  get validationState() {
+    const validationState = [];
+    this.fields.forEach(async (field) => {
+      const found = validationState.find((v) => v.name === field.name);
+      if (found) {
+        found.validityMessage = field.validityMessage.length
+          ? field.validityMessage
+          : found.validityMessage;
+        if (!found.fields.find((f) => f === field))
+          found.fields.push(field);
+        if (found.valid && field.invalid)
+          found.valid = false;
+        return;
+      }
+      validationState.push({
+        fields: [field],
+        name: field.name,
+        valid: !field.invalid,
+        value: this.store.state[field.name],
+        dirty: false,
+        validityMessage: field.validityMessage,
+      });
+    });
+    return validationState;
+  }
+  // private methods
+  attachSlotObserver() {
+    if (!!this.mo)
+      return;
+    const mo = (this.mo = new MutationObserver((_entries) => {
+      const form = this.host.querySelector('form');
+      if (form !== this.activeForm)
+        this.activeForm = form;
+      this.setupFields();
+    }));
+    mo.observe(this.host, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ['name'],
+      subtree: true,
+    });
+  }
+  /** Checks for new `nano-...` fields and adds them to our watch array and value store */
+  setupFields() {
+    let fields = Array.from(this.host.querySelectorAll(`
+        nano-input,
+        nano-select,
+        nano-file-upload,
+        nano-date-input,
+        nano-checkbox
+      `));
+    fields = fields.filter((f) => !!f.name && !!f.name.length);
+    // do we have any currently un-watched fields?
+    if (!fields.filter((f) => !this.fields.includes(f)).length)
+      return;
+    // setup the initial store state / refresh on new fields
+    this.fields = fields;
+    this.validateOnChange();
+    this.setFieldValue(this.fields);
+    this.nanoPayloadChange.emit(this.store.state);
+  }
+  /** Loops through all `nano-...` fields and extracts their values into our store */
+  setFieldValue(fields) {
+    fields.forEach((field) => {
+      const fieldName = field.name;
+      if (!fieldName.length)
+        return;
+      switch (field.tagName) {
+        case 'NANO-CHECKBOX':
+          let cb = field;
+          if (cb.type === 'radio' ||
+            cb.type === 'segment' ||
+            cb.type === 'segment-pill') {
+            if (cb.checked)
+              this.store.state[fieldName] = cb.value;
+            else if (!cb.checked &&
+              (cb.value === this.store.state[fieldName] ||
+                !this.store.state[fieldName]))
+              this.store.state[fieldName] = '';
+          }
+          else if (this.fields.filter((f) => f.name === fieldName && f.tagName === 'NANO-CHECKBOX').length > 1) {
+            const currentArr = Array.isArray(this.store.state[fieldName])
+              ? this.store.state[fieldName]
+              : [];
+            if (cb.checked) {
+              if (!this.store.state[fieldName].includes(cb.value)) {
+                this.store.state[fieldName] = [...currentArr, cb.value];
+              }
+            }
+            else {
+              this.store.state[fieldName] = currentArr.filter((v) => v !== cb.value);
+            }
+          }
+          else
+            this.store.state[fieldName] = cb.value;
+          break;
+        case 'NANO-FILE-UPLOAD':
+          this.store.state[fieldName] = field.files;
+          break;
+        default:
+          this.store.state[fieldName] = field.value;
+          break;
+      }
+    });
+  }
+  /** Checks for user defined validations */
+  async validate(key, newVal) {
+    if (!this.validation)
+      return;
+    const res = this.validation(key, newVal, this.store.state);
+    // no nothing - return
+    if (!res)
+      return;
+    // stencil public methods are async
+    // so we must to coerce our validation
+    // collection loop into a promise
+    await Promise.all(Object.entries(res).map(async ([key, o]) => {
+      // switch on/off validation messages
+      const field = this.fields.find((f) => f.name === key);
+      let validityTarget = field;
+      if (field.tagName === 'NANO-CHECKBOX') {
+        const cbg = field.closest('nano-checkbox-group');
+        validityTarget = cbg || field;
+      }
+      // status is now valid - clear the error
+      if (validityTarget.validityMessage === o.msg && o.valid)
+        await this.setFieldError(validityTarget, '');
+      // status is invalid. Set the error
+      else if (!o.valid) {
+        await this.setFieldError(validityTarget, o.msg);
+      }
+    }));
+  }
+  /**
+   * Utility to smooth out setting error messages
+   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)
+   * @param field
+   * @param msg
+   */
+  async setFieldError(field, msg) {
+    if (field['showError'])
+      await field.showError(msg);
+    else
+      await field.setError(msg);
+  }
+  /** Loops through all store entries and checks field validity */
+  async validateAllFields() {
+    // This forces our loop to `await` and finish sequentially ... silly async stencil methods
+    await Object.entries(this.store.state).reduce(async (memo, [key, value]) => {
+      await memo;
+      await this.validate(key, value);
+    }, undefined);
+  }
+  scrollToFirstInvalid() {
+    if (!this.scrollToInvalid)
+      return;
+    setTimeout(() => {
+      const invalidField = this.validationState.find((f) => !f.valid);
+      if (!invalidField)
+        return;
+      invalidField.fields[0].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }, 200);
+  }
+  submitForm() {
+    const nanoSubmit = this.nanoSubmit.emit();
+    if (nanoSubmit.defaultPrevented)
+      return;
+    this.activeForm.submit();
+  }
+  connectedCallback() {
+    this.userForm = this.host.querySelector('form');
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      this.store = createStore({});
+      this.setupFields();
+      this.attachSlotObserver();
+      this.store.on('set', (key, value) => this.handleStoreChange(key, value));
+      this.host.addEventListener('nanoChange', this.handleFieldChange);
+      this.host.addEventListener('submit', this.handleSubmit);
+    });
+  }
+  disconnectedCallback() {
+    if (this.mo)
+      this.mo.disconnect();
+    this.store.dispose();
+    this.host.removeEventListener('nanoChange', this.handleFieldChange);
+    this.host.removeEventListener('submit', this.handleSubmit);
+    if (this.activeForm)
+      this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
+  }
+  render() {
+    return (h(Host, null,
+      this.userForm && h("slot", null),
+      !this.userForm && (h("form", { ref: (f) => (this.activeForm = f) },
+        h("slot", null)))));
+  }
+  static get is() { return "nano-field-validator"; }
+  static get properties() { return {
+    "validateOn": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'dirty' | 'submit' | 'submitThenDirty'",
+        "resolved": "\"dirty\" | \"submit\" | \"submitThenDirty\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When should the fields perform validation. Will override / sync all nested `nano-...` controls"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "validate-on",
+      "reflect": false,
+      "defaultValue": "'submitThenDirty'"
+    },
+    "scrollToInvalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tries to scroll to the first invalid field on submit"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "scroll-to-invalid",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "dirty": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Returns true if any nested fields have been changed @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "dirty",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "valid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Returns true if all the nested fields are currently valid @readonly"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "valid",
+      "reflect": true
+    },
+    "payload": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ValueStore",
+        "resolved": "ValueStore",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current form payload as a reactive store. @readonly"
+      },
+      "getter": true,
+      "setter": false
+    },
+    "showValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Returns true if validation errors will be displayed to the user"
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "show-validation",
+      "reflect": false
+    },
+    "validationState": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ValidationState[]",
+        "resolved": "ValidationState[]",
+        "references": {
+          "ValidationState": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Get the current validation state of all form fields. @readonly\n```\n{\nfields: NanoFormEles[];\nvalid: boolean;\nvalidityMessage: string;\ndirty: boolean;\nname: string | number;\nvalue: any;\n}[]\n```"
+      },
+      "getter": true,
+      "setter": false
+    },
+    "validation": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(\n    field: string,\n    value: string,\n    fields: ValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } }",
+        "resolved": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
+        "references": {
+          "ValueStore": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "field - The field name currently being evaluated"
+          }, {
+            "name": "param",
+            "text": "value - The value of the field currently being evaluated"
+          }, {
+            "name": "param",
+            "text": "fields - an array of all currently observered form fields and values"
+          }, {
+            "name": "returns",
+            "text": "field names mapped to an object of status message and validity e.g.\n```js\n{field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n```"
+          }],
+        "text": "A validation callback method."
+      },
+      "getter": false,
+      "setter": false
+    }
+  }; }
+  static get states() { return {
+    "store": {},
+    "userForm": {},
+    "submitted": {},
+    "_dirty": {},
+    "_valid": {}
+  }; }
+  static get events() { return [{
+      "method": "nanoPayloadChange",
+      "name": "nanoPayloadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired whenever the payload changes"
+      },
+      "complexType": {
+        "original": "ValueStore",
+        "resolved": "ValueStore",
+        "references": {
+          "ValueStore": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "nanoSubmit",
+      "name": "nanoSubmit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired on valid form submission.\nNote: if you wish to prevent a form from submitting, instead\nof using / preventing the native `submit` event, use this event\n```js\nele.addEventListener('nanoSubmit', (e) => {\n  e.preventDefault()\n})\n```"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "nanoInvalid",
+      "name": "nanoInvalid",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fire on invalid form submission attempt"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "userForm",
+      "methodName": "userFormChange"
+    }, {
+      "propName": "validateOn",
+      "methodName": "validateOnChange"
+    }]; }
+}
+//# sourceMappingURL=field-validator.js.map