@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/nano-components/p-48e6bea3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","[object Object]","hostRef","this","addedTransEnd","goingToHide","goingToShow","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","show","nanoShow","raf","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"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","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// just testing - rm later\n.something {\n  color: black;\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"]}

package/dist/nano-components/p-4d62ec32.system.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-System.register([],(function(t){"use strict";return{execute:function(){t({a:r,c:e});function e(t,e){if(e===void 0){e=this}function n(e){if(!e||e===document||e===window)return null;if(e.assignedSlot)e=e.assignedSlot;var o=e.closest(t);return o?o:n(e.getRootNode().host)}return n(e)}var n=t("g",(function(t,e){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector}var n=[];Array.from(t.children).forEach((function(t){if(t instanceof Element&&t.matches(e))n.push(t)}));return n}));var o=t("b",(function(t,e){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector}var n=[];var o=t.parentNode.firstElementChild;do{if(!e||o!==t&&o.matches(e))n.push(o)}while(o=o.nextElementSibling);return n}));function r(t,e){if(!e||!t)return;return{top:t.getBoundingClientRect().top-e.getBoundingClientRect().top,left:t.getBoundingClientRect().left-e.getBoundingClientRect().left}}}}}));
-//# sourceMappingURL=p-4d62ec32.system.js.map

package/dist/nano-components/p-4d62ec32.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/dom.ts"],"names":["closestElement","selector","base","this","__closestFrom","el","document","window","assignedSlot","found","closest","getRootNode","host","getDirectChildren","exports","elm","sel","Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","ret","Array","from","children","forEach","push","getSiblings","siblings","firstChild","parentNode","firstElementChild","nextElementSibling","getOffset","element","parent","top","getBoundingClientRect","left"],"mappings":";;;6FAAgBA,EAAeC,EAAkBC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAAC,KAC/C,SAASC,EAAcC,GACrB,IAAKA,GAAMA,IAAOC,UAAYD,IAAOE,OAAQ,OAAO,KACpD,GAAKF,EAAuBG,aAC1BH,EAAMA,EAAuBG,aAC/B,IAAIC,EAASJ,EAAeK,QAAQT,GACpC,OAAOQ,EACHA,EACAL,EAAgBC,EAAeM,cAA6BC,MAElE,OAAOR,EAAcF,OAGVW,EAAiBC,EAAA,KAAG,SAC/BC,EACAC,GAEA,IAAKC,QAAQC,UAAUC,QAAS,CAC9BF,QAAQC,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,sBAEtB,IAAIC,EAA0B,GAC9BC,MAAMC,KAAKT,EAAIU,UAAUC,SAAQ,SAACrB,GAChC,GAAIA,aAAcY,SAAWZ,EAAGc,QAAQH,GAAMM,EAAIK,KAAKtB,MAEzD,OAAOiB,SAGIM,EAAWd,EAAA,KAAG,SAACT,EAAaW,GACvC,IAAKC,QAAQC,UAAUC,QAAS,CAC9BF,QAAQC,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,sBAEtB,IAAIQ,EAAW,GACf,IAAIC,EAAazB,EAAG0B,WAAWC,kBAC/B,EAAG,CACD,IAAKhB,GAAQc,IAAezB,GAAMyB,EAAWX,QAAQH,GACnDa,EAASF,KAAKG,SACRA,EAAaA,EAAWG,oBAClC,OAAOJ,cAGOK,EAAUC,EAAsBC,GAC9C,IAAKA,IAAWD,EAAS,OACzB,MAAO,CACLE,IACEF,EAAQG,wBAAwBD,IAAMD,EAAOE,wBAAwBD,IACvEE,KACEJ,EAAQG,wBAAwBC,KAChCH,EAAOE,wBAAwBC","sourcesContent":["export function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    let found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\nexport const getDirectChildren = (\n  elm: Element,\n  sel: string\n): Array<HTMLElement> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  let ret: Array<HTMLElement> = [];\n  Array.from(elm.children).forEach((el) => {\n    if (el instanceof Element && el.matches(sel)) ret.push(el as HTMLElement);\n  });\n  return ret;\n};\n\nexport const getSiblings = (el: Element, sel?: string): Array<Element> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  let siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return;\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"]}

package/dist/nano-components/p-4e451498.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as a,e as o,g as r}from"./p-ab5813a7.js";const e=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--active-bg-rgb:var(--bg-rgb);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);margin-top:var(--tab-indicator-size);border-right:solid var(--tab-divider-size) var(--tab-divider-color);font-weight:500}:host([direction=horizontal]) .nanotab.nanotab--active{margin-top:0;border-top:solid var(--tab-indicator-size) var(--tab-indicator-color);background:rgba(var(--active-bg-rgb), 1);color:var(--active-text-color)}.nanotab{margin-right:var(--tab-spacing);padding:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;width:auto;font-weight:500;background:rgba(var(--bg-rgb), 0.7);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanotab{margin-right:unset;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing)}}.nanotab ::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(:last-of-type) .nanotab{margin-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(:last-of-type) .nanotab{margin-right:unset;-webkit-margin-end:0;margin-inline-end:0}}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){-webkit-box-shadow:var(--focus-shadow) inset;box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgba(var(--disabled-bg-rgb), 1);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}";let i=0;let n=class{constructor(a){t(this,a);this.tabId=`nano-tab-${++i}`;this.panel="";this.active=false;this.disabled=false}async setFocus(){this.tab.focus({preventScroll:true})}async removeFocus(){this.tab.blur()}render(){return a(o,{id:this.host.id||this.tabId},a("div",{part:"base",ref:t=>this.tab=t,class:{nanotab:true,"nanotab--active":this.active,"nanotab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},a("slot",null)))}get host(){return r(this)}};n.style=e;export{n as nano_tab};
-//# sourceMappingURL=p-4e451498.entry.js.map

package/dist/nano-components/p-4e451498.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"names":["tabCss","id","Tab","[object Object]","hostRef","this","tabId","panel","active","disabled","tab","focus","preventScroll","blur","h","Host","host","part","ref","el","class","nanotab","nanotab--active","nanotab--disabled","role","aria-disabled","aria-selected","tabindex"],"mappings":";;;yDAAA,MAAMA,EAAS,unFCUf,IAAIC,EAAK,MAWIC,EAAG,MALhBC,YAAAC,aAMUC,KAAAC,MAAQ,cAAcL,IAKLI,KAAAE,MAAQ,GAGRF,KAAAG,OAAS,MAGTH,KAAAI,SAAW,MAIpCN,iBACEE,KAAKK,IAAIC,MAAM,CAAEC,cAAe,OAKlCT,oBACEE,KAAKK,IAAIG,OAGXV,SACE,OACEW,EAACC,EAAI,CAACd,GAAII,KAAKW,KAAKf,IAAMI,KAAKC,OAC7BQ,EAAA,MAAA,CACEG,KAAK,OACLC,IAAMC,GAAQd,KAAKK,IAAMS,EACzBC,MAAO,CACLC,QAAS,KACTC,kBAAmBjB,KAAKG,OACxBe,oBAAqBlB,KAAKI,UAE5Be,KAAK,MAAKC,gBACKpB,KAAKI,SAAW,OAAS,QAAOiB,gBAChCrB,KAAKG,OAAS,OAAS,QACtCmB,SAAUtB,KAAKI,WAAaJ,KAAKG,OAAS,KAAO,KAEjDM,EAAA,OAAA","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n  * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n  * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n  * @prop --active-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n\n  * @prop --text-color: Defaults to #{$color-blue};\n  * @prop --disabled-text-color: Defaults to #{$color-darkgrey};\n  * @prop --active-text-color: Defaults to #{$color-darkblue};\n\n  * @prop --h-font-size: Defaults to .93em;\n  * @prop --v-font-size: Defaults to .875em;\n  * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n  * @prop --tab-divider-size: Defaults to 0;\n  * @prop --tab-divider-color: Defaults to #{$color-lightblue};\n  */\n\n:host {\n  --focus-shadow: #{$control-focus-style};\n  --padding: 0.75rem 1rem;\n  --bg-rgb: #{$layer-bg-color-rgb};\n  --active-bg-rgb: var(--bg-rgb);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{$color-blue};\n  --disabled-text-color: #{$color-darkgrey};\n  --active-text-color: #{$color-darkblue};\n  --h-font-size: 0.93em;\n  --v-font-size: 0.875em;\n  --tab-spacing: 0.5rem;\n  --tab-divider-size: 0;\n  --tab-divider-color: #{$color-lightblue};\n\n  display: inline-block;\n}\n\n:host([direction='vertical']) {\n  --padding: 1rem;\n\n  .nanotab {\n    font-size: var(--v-font-size);\n\n    &.nanotab--active {\n      font-weight: 600;\n      color: var(--active-text-color);\n    }\n  }\n}\n\n:host([direction='horizontal']) {\n  .nanotab {\n    font-size: var(--h-font-size);\n    margin-top: var(--tab-indicator-size);\n    border-right: solid var(--tab-divider-size) var(--tab-divider-color);\n    font-weight: 500;\n\n    &.nanotab--active {\n      margin-top: 0;\n      border-top: solid var(--tab-indicator-size) var(--tab-indicator-color);\n      background: rgba(var(--active-bg-rgb), 1);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include margin(null, var(--tab-spacing), null, null);\n\n  padding: var(--padding);\n  display: flex;\n  height: 100%;\n  width: auto;\n  font-weight: 500;\n  background: rgba(var(--bg-rgb), 0.7);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  user-select: none;\n  cursor: pointer;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  :host(:last-of-type) & {\n    @include margin(null, 0, null, null);\n  }\n\n  &:hover:not(.tab--disabled) {\n    text-shadow: 0 0 0.01px var(--text-color);\n  }\n\n  &:focus {\n    outline: none;\n    outline-style: none;\n    box-shadow: none;\n    border-color: transparent;\n  }\n\n  &:focus:not(.nanotab--disabled) {\n    box-shadow: var(--focus-shadow) inset;\n  }\n\n  &--disabled {\n    background: rgba(var(--disabled-bg-rgb), 1);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-51d9570d.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,h as n,e as a,g as e}from"./p-ab5813a7.js";import{c as o}from"./p-9bd73d1d.js";import{a as s}from"./p-1da5f8df.js";import{c as r}from"./p-d99437a6.js";const l='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;color:currentColor;display:inline-block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.7}label.sc-nano-input,.more.sc-nano-input,.error.sc-nano-input,.helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.more.visually-hide.sc-nano-input,.error.visually-hide.sc-nano-input,.helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-input{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.has-focus.sc-nano-input-h .placeholder-as-label.sc-nano-input{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.is-invalid.sc-nano-input-h .placeholder-as-label.sc-nano-input{color:var(--invalid-msg-color)}.has-value.sc-nano-input-h .placeholder-as-label.sc-nano-input{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.placeholder-as-label.sc-nano-input~.native-input-wrap.sc-nano-input{font-size:1.1em}.textarea.sc-nano-input .placeholder-as-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .textarea.sc-nano-input .placeholder-as-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .textarea.sc-nano-input .placeholder-as-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-input .label-placeholder.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-input .placeholder.sc-nano-input{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-input .placeholder.sc-nano-input{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-input .charcount.sc-nano-input{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-input .charcount.sc-nano-input{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-input-h .label.sc-nano-input .placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .label.sc-nano-input{color:var(--label-color--invalid)}.more.sc-nano-input{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-input{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-input,.error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-input{opacity:0}.error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .error.sc-nano-input{opacity:1}.input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-input-h .input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);z-index:1}.is-invalid.sc-nano-input-h .input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-input-h .input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.native-input.sc-nano-input{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-input:-webkit-autofill{background-color:transparent}.native-input.sc-nano-input::-webkit-search-decoration,.native-input.sc-nano-input::-webkit-search-cancel-button,.native-input.sc-nano-input::-webkit-search-results-button,.native-input.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-input::-ms-clear,.native-input.sc-nano-input::-ms-reveal{display:none}.native-input.resizable.sc-nano-input{resize:vertical;overflow:auto}.textarea.sc-nano-input .native-input.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-input .native-input.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-input .native-input.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .native-input.sc-nano-input{padding-top:1.4em}.has-float-label.textarea.sc-nano-input .native-input.sc-nano-input{padding-top:1.8em}.legacy.sc-nano-input .native-input.sc-nano-input{-webkit-box-sizing:content-box;box-sizing:content-box}.native-input[disabled].sc-nano-input{opacity:0.4}.input-clear-icon.sc-nano-input,.inline-button.sc-nano-input{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;font-size:1.4em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .input-clear-icon.sc-nano-input,.has-float-label.sc-nano-input .inline-button.sc-nano-input{right:0;position:absolute;top:0;height:100%;left:auto}.rtl.has-float-label.sc-nano-input .input-clear-icon.sc-nano-input,.rtl.has-float-label.sc-nano-input .inline-button.sc-nano-input{right:auto;left:0}.inline-button.sc-nano-input-s>*,.inline-button .sc-nano-input-s>*{font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.inline-button.sc-nano-input-s>*,.inline-button .sc-nano-input-s>*{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-input-h[disabled]:not([disabled=false]) .inline-button.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .inline-button .sc-nano-input-s>*{pointer-events:none}.input-clear-icon.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .input-clear-icon.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .input-clear-icon.sc-nano-input{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-input-h .input-clear-icon.sc-nano-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.has-inline-button.has-float-label.sc-nano-input .input-clear-icon.sc-nano-input{right:1.5em;position:absolute;top:0;height:100%;left:auto}.rtl.has-float-label.has-inline-button.sc-nano-input .input-clear-icon.sc-nano-input{right:auto;left:1.5em}';let p=class{constructor(n){t(this,n);this.nanoInput=i(this,"nanoInput",7);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoValidate=i(this,"nanoValidate",7);this.inputId=`nano-input-${h++}`;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.isLegacy=!document.head.attachShadow;this.hasLabelSlot=false;this.hasButtonSlot=false;this.hasHelperSlot=false;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError&&!!this.errorContainer){if(t)t.preventDefault();this.errorContainer.innerText=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:t})};this.onInput=t=>{const i=t.target;if(i)this.value=i.value||"";this.nanoInput.emit(t)};this.handleDocumentMouseDown=t=>{const i=t.target;if(o(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}};this.handleDocumentKeyDown=t=>{if(t.key!=="Tab")return;setTimeout((()=>{if(document.activeElement&&o(this.el.tagName.toLowerCase(),document.activeElement)!==this.el){this.onBlur();return}}))};this.onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();document.removeEventListener("keydown",this.handleDocumentKeyDown);document.removeEventListener("mousedown",this.handleDocumentMouseDown);this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.focusChanged();document.addEventListener("keydown",this.handleDocumentKeyDown);document.addEventListener("mousedown",this.handleDocumentMouseDown);this.nanoFocus.emit()};this.onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}this.value="";if(this.nativeInput){this.nativeInput.value=""}}}get invalid(){return this._invalid}shouldValidate(){if(!this.hasRendered)return;setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}debounceChanged(){this.nanoChange=s(this.nanoChange,this.debounce)}async reportValidity(t){if(t)this.validate();return{isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage}}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(t){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}}onReset(t){const i=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!i||t.target!==this.el.closest("form"))return;this.value=""}shouldClearOnEdit(){const{type:t,clearOnEdit:i}=this;return i===undefined?t==="password":i}getValue(){return this.value||""}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasButtonSlot=!!this.el.querySelector('[slot="inline-button"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');const t=!!this.el.querySelector('[slot="legacy"]');if(!t)return;let i=this.el.querySelector('input:not([class*="sc-nano-input"])');let n=this.el.querySelector('label:not([class*="sc-nano-input"])');if(n)this.label=this.label||n.innerHTML;if(i){Array.from(i.attributes).filter((t=>t.specified&&t.nodeName in this)).map((t=>this[t.nodeName]=t.nodeValue))}if(n||i){let t=this.el.querySelectorAll('[slot="legacy"]');if(t)t.forEach((t=>t.parentNode.removeChild(t)))}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((t=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}renderLabel(t,i){if(!this.label&&!this.hasLabelSlot)return;if(i==="float"){return n("label",{class:"placeholder-as-label",htmlFor:this.inputId,id:t},this.label&&this.label,!this.label&&this.hasLabelSlot&&n("slot",{name:"label"}))}else{return n("label",{class:{label:true,"visually-hide":this.hideLabel},htmlFor:this.inputId,id:t},n("div",{class:"label-placeholder"},this.placeholder&&this.hasValue()&&this.rtl&&n("span",{class:"placeholder"},this.placeholder," / "),n("span",{class:"labeltext"},this.label&&this.label,!this.label&&this.hasLabelSlot&&n("slot",{name:"label"})),this.placeholder&&this.hasValue()&&!this.rtl&&n("span",{class:"placeholder"}," / ",this.placeholder)),this.showCharCount&&n("span",{class:"charcount"},this.maxlength?this.maxlength-this.charCount+" left":this.charCount+" characters"))}}render(){const t=this.getValue();const i=this.inputId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";this.rtl=this.el.ownerDocument.dir==="rtl";return n(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},r(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},!this.floatLabel&&this.renderLabel(i),n("div",{class:{"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-inline-button":this.hasButtonSlot,legacy:this.isLegacy,input:true,textarea:this.type==="textarea"}},this.floatLabel&&this.renderLabel(i,"float"),n("div",{class:"native-input-wrap"},this.type!=="textarea"&&n("input",{id:this.inputId,class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":i+" "+e,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:t,onInput:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&n("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"native-input":true,resizable:this.resize==="true"},ref:t=>this.nativeInput=t,"aria-labelledby":i+" "+e,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:t,onInput:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.clearInput&&!this.readonly&&!this.disabled&&n("button",{type:"button",class:"icon input-clear-icon",tabindex:"-1",onTouchStart:this.clearTextInput,onMouseDown:this.clearTextInput},n("nano-icon",{name:"light/times"})),this.hasButtonSlot?n("span",{class:"inline-button"},n("slot",{name:"inline-button"})):"")),(this.showInlineError||this.hasHelperSlot)&&n("div",{class:"more",id:e},!!this.showInlineError?n("div",{class:"error",ref:t=>this.errorContainer=t}):"",n("div",{class:"helper"},n("slot",{name:"helper"}))),n("slot",null))}get el(){return e(this)}static get watchers(){return{minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};let h=0;p.style=l;export{p as nano_input};
-//# sourceMappingURL=p-51d9570d.entry.js.map

package/dist/nano-components/p-51d9570d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/input/input.scss?tag=nano-input&encapsulation=scoped","src/components/input/input.tsx"],"names":["inputCss","Input","[object Object]","hostRef","this","inputId","inputIds","didBlurAfterEdit","rtl","charCount","hasRendered","hasFocus","isLegacy","document","head","attachShadow","hasLabelSlot","hasButtonSlot","hasHelperSlot","_invalid","autocapitalise","autocomplete","autocorrect","autofocus","clearInput","debounce","disabled","validateOn","showInlineError","hideLabel","floatLabel","name","readonly","required","spellcheck","type","value","resize","rows","showCharCount","validate","ev","nativeInput","validity","valid","errorContainer","preventDefault","innerText","validationMessage","nanoValidate","emit","isValid","errorMessage","originalEvent","onInput","input","target","nanoInput","handleDocumentMouseDown","closestElement","el","tagName","toLowerCase","onBlur","handleDocumentKeyDown","key","setTimeout","activeElement","focusChanged","removeEventListener","nanoBlur","onFocus","addEventListener","nanoFocus","onKeydown","shouldClearOnEdit","hasValue","clearTextInput","stopPropagation","invalid","nanoChange","length","style","height","scrollHeight","debounceEvent","validateFirst","focus","Promise","resolve","message","setCustomValidity","e","form","querySelector","closest","clearOnEdit","undefined","getValue","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","hasLegacySlot","existingInput","existingLabel","label","innerHTML","Array","from","attributes","filter","attr","specified","nodeName","map","nodeValue","children","forEach","n","parentNode","removeChild","debounceChanged","dispatchEvent","CustomEvent","detail","slotChangeObserver","_","setFocus","labelId","position","h","class","htmlFor","id","visually-hide","placeholder","maxlength","moreId","ownerDocument","dir","Host","aria-disabled","Object","assign","createColorClasses","color","has-value","has-focus","is-invalid","renderLabel","has-label","has-float-label","has-inline-button","legacy","textarea","ref","aria-labelledby","accept","autoCapitalize","autoComplete","autoCorrect","autoFocus","inputMode","inputmode","min","max","minLength","minlength","maxLength","multiple","pattern","readOnly","step","size","onKeyDown","onInvalid","native-input","resizable","tabindex","onTouchStart","onMouseDown","div"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import './input.vars';\n\n:host {\n  @include inputVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  color: currentColor;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  color: current-color(base);\n\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n}\n\nlabel,\n.more,\n.error,\n.helper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &.visually-hide {\n    @include visually-hide;\n  }\n}\n\n.placeholder-as-label {\n  @include padding(0, 0, 0, var(--padding-start));\n\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.4em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  top: 50%;\n  transition: 0.125s ease-in;\n  opacity: 0.7;\n\n  :host(.has-focus) & {\n    transform: translateY(-120%);\n    font-size: 0.9em;\n  }\n\n  :host(.is-invalid) & {\n    color: var(--invalid-msg-color);\n  }\n\n  :host(.has-value) & {\n    transform: translateY(-120%);\n    font-size: 0.9em;\n  }\n\n  & ~ .native-input-wrap {\n    font-size: 1.1em;\n  }\n\n  .textarea & {\n    top: 50%;\n\n    :host(.has-focus) & {\n      top: 0;\n      transform: translateY(38%);\n    }\n\n    :host(.has-value) & {\n      top: 0;\n      transform: translateY(38%);\n    }\n  }\n}\n\n.label {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-bottom: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n\n  .label-placeholder {\n    flex: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .placeholder {\n    @include margin(0, 5px, 0, 0);\n\n    opacity: 0;\n    appearance: none;\n    transition: 0.3s ease opacity;\n    font-size: 0.9em;\n  }\n\n  .charcount {\n    @include margin(0, 0, 0, auto);\n\n    font-size: 0.9em;\n    opacity: 0.5;\n  }\n\n  :host(.has-value) & {\n    .placeholder {\n      opacity: 0.5;\n    }\n  }\n\n  :host(.has-focus) & {\n    color: var(--label-color--focus);\n  }\n\n  :host(.is-invalid) & {\n    color: var(--label-color--invalid);\n  }\n}\n\n.more {\n  height: 1em;\n\n  @include margin(4px, 0, var(--padding-bottom), 3px);\n\n  position: relative;\n}\n\n.helper,\n.error {\n  top: 0;\n  left: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.helper {\n  font-style: italic;\n  color: var(--help-msg-color);\n\n  :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n    opacity: 0;\n  }\n}\n\n.error {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n\n  :host(.is-invalid) & {\n    opacity: 1;\n  }\n}\n\n.input {\n  @include text-inherit();\n  @include border-radius(var(--input-border-radius));\n\n  width: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n\n  :host(.has-focus) & {\n    background: var(--input-bg-color--focus);\n    border: var(--input-border-style--focus);\n    border-width: var(--input-border-width);\n    z-index: 1;\n  }\n\n  :host(.is-invalid) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid.has-focus) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid-focus);\n    border-width: var(--input-border-width);\n  }\n}\n\n// Native Text Input\n// --------------------------------------------------\n\n.native-input-wrap {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n}\n\n.native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: 2.5em;\n    min-height: 2.5em;\n    // text-overflow: ellipsis;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .textarea & {\n    line-height: 1.5em;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label & {\n    padding-top: 1.4em;\n  }\n\n  .has-float-label.textarea & {\n    padding-top: 1.8em;\n  }\n\n  .legacy & {\n    box-sizing: content-box;\n  }\n}\n\n.native-input[disabled] {\n  opacity: 0.4;\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n\n.input-clear-icon,\n.inline-button {\n  @include margin(0);\n  @include background-position(center);\n\n  font-size: 1.4em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  width: auto;\n\n  .has-float-label & {\n    right: 0;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: auto;\n  }\n\n  .rtl.has-float-label & {\n    right: auto;\n    left: 0;\n  }\n}\n\n.inline-button::slotted(*),\n.inline-button ::slotted(*) {\n  font-size: 1em;\n\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n\n  align-items: center;\n  display: flex;\n  height: 100%;\n\n  :host([disabled]:not([disabled='false'])) & {\n    pointer-events: none;\n  }\n}\n\n.input-clear-icon {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  width: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.has-value) & {\n    @include padding(0, var(--padding-end), 0, var(--padding-start));\n\n    opacity: 1;\n    width: auto;\n  }\n\n  &:hover {\n    color: var(--clear-btn-color--hover);\n  }\n\n  .has-inline-button.has-float-label & {\n    right: 1.5em;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: auto;\n  }\n\n  .rtl.has-float-label.has-inline-button & {\n    right: auto;\n    left: 1.5em;\n  }\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  ControlValidity,\n  ControlValidityEventDetail,\n  InputChangeEventDetail,\n  TextFieldTypes,\n} from '../../interface';\nimport {\n  debounceEvent,\n  testLegacyStyle,\n  closestElement,\n  createColorClasses,\n} from '../../utils';\n\n/**\n * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\n * @slot inline-button - suitable for inline action buttons or icons that may add extra contextual information\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot legacy - you can use this slot to wrap any old inputs / labels. This will set appropriate defaults for the nano-input\n */\n@Component({\n  tag: 'nano-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class Input implements ComponentInterface {\n  private nativeInput?: HTMLInputElement | HTMLTextAreaElement;\n  private inputId = `nano-input-${inputIds++}`;\n  private didBlurAfterEdit = false;\n  private errorContainer?: HTMLDivElement;\n  private rtl: boolean = false;\n  private mo?: MutationObserver;\n  private charCount = 0;\n  private hasRendered = false;\n\n  @State() hasFocus = false;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() hasLabelSlot = false;\n  @State() hasButtonSlot = false;\n  @State() hasHelperSlot = false;\n\n  @Element() el!: HTMLNanoInputElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n   */\n  @Prop() accept?: string;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalise: 'none' | 'sentences' | 'words' | 'characters' =\n    'none';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: 'on' | 'off' = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n   */\n  @Prop() clearOnEdit?: boolean;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search';\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: TextFieldTypes = 'text';\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.\n   */\n  @Prop() resize: 'true' | 'false' | 'auto' = 'auto';\n\n  /**\n   * relevant to type=\"textarea\". Default number of rows to show\n   */\n  @Prop() rows = 2;\n\n  /**\n   * relevant to type=\"textarea\".\n   */\n  @Prop() showCharCount = false;\n\n  @Watch('minlength')\n  @Watch('maxlength')\n  @Watch('min')\n  @Watch('max')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('validateOn')\n  @Watch('readonly')\n  @Watch('pattern')\n  @Watch('inputmode')\n  protected shouldValidate() {\n    if (!this.hasRendered) return;\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.nanoChange.emit({ value: this.value });\n    this.charCount = this.value.length;\n\n    if (this.type === 'textarea' && this.resize === 'auto') {\n      this.nativeInput.style.height = 'auto';\n      if (this.value.length)\n        this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';\n    }\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() nanoInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.validate();\n    return {\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n    }\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.nativeInput);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeInput) {\n      this.nativeInput.setCustomValidity(message);\n      this.validate();\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.value = '';\n  }\n\n  private shouldClearOnEdit() {\n    const { type, clearOnEdit } = this;\n    return clearOnEdit === undefined ? type === 'password' : clearOnEdit;\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private validate = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    if (!this.nativeInput.validity.valid) {\n      if (this.showInlineError && !!this.errorContainer) {\n        if (ev) ev.preventDefault();\n        this.errorContainer.innerText = this.nativeInput.validationMessage;\n      }\n      this._invalid = true;\n    } else this._invalid = false;\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) this.value = input.value || '';\n    this.nanoInput.emit(ev as KeyboardEvent);\n  };\n\n  private handleDocumentMouseDown = (ev: MouseEvent) => {\n    const target = ev.target as HTMLElement;\n    if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n      this.onBlur();\n    }\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key !== 'Tab') return;\n    setTimeout(() => {\n      if (\n        document.activeElement &&\n        closestElement(\n          this.el.tagName.toLowerCase(),\n          document.activeElement\n        ) !== this.el\n      ) {\n        this.onBlur();\n        return;\n      }\n    });\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.focusChanged();\n    if (this.validateOn === 'dirty') this.validate();\n\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusChanged();\n\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n    this.nanoFocus.emit();\n  };\n\n  private onKeydown = () => {\n    if (this.shouldClearOnEdit()) {\n      // Did the input value change after it was blurred and edited?\n      if (this.didBlurAfterEdit && this.hasValue()) {\n        // Clear the input\n        this.clearTextInput();\n      }\n\n      // Reset the flag\n      this.didBlurAfterEdit = false;\n    }\n  };\n\n  private clearTextInput = (ev?: Event) => {\n    if (this.clearInput && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n    this.value = '';\n    /**\n     * This is needed for clearOnEdit\n     * Otherwise the value will not be cleared\n     * if user is inside the input\n     */\n    if (this.nativeInput) {\n      this.nativeInput.value = '';\n    }\n  };\n\n  private focusChanged() {\n    // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n    if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n      this.didBlurAfterEdit = true;\n    }\n  }\n\n  private hasValue(): boolean {\n    return this.getValue().length > 0;\n  }\n\n  private slotChangeObserver() {\n    if (!Build.isBrowser) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / button content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]');\n    this.hasButtonSlot = !!this.el.querySelector('[slot=\"inline-button\"]');\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n\n    const hasLegacySlot = !!this.el.querySelector('[slot=\"legacy\"]');\n    if (!hasLegacySlot) return;\n\n    let existingInput = this.el.querySelector(\n      'input:not([class*=\"sc-nano-input\"])'\n    );\n    let existingLabel = this.el.querySelector(\n      'label:not([class*=\"sc-nano-input\"])'\n    );\n\n    if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n    if (existingInput) {\n      Array.from(existingInput.attributes)\n        .filter((attr) => attr.specified && attr.nodeName in this)\n        .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n    }\n\n    if (existingLabel || existingInput) {\n      // empty all slotted stuff\n      let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n      if (children) children.forEach((n) => n.parentNode.removeChild(n));\n    }\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    if (Build.isBrowser) {\n      this.el.dispatchEvent(\n        new CustomEvent('nanoDidLoad', {\n          detail: this.el,\n        })\n      );\n    }\n    testLegacyStyle(this.el);\n  }\n\n  disconnectedCallback() {\n    if (Build.isBrowser) {\n      document.dispatchEvent(\n        new CustomEvent('nanoDidUnload', {\n          detail: this.el,\n        })\n      );\n    }\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.hasRendered = true;\n    if (this.autofocus) setTimeout((_) => this.setFocus(), 300);\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private renderLabel(labelId: string, position?: 'float'): VNode {\n    if (!this.label && !this.hasLabelSlot) return;\n    if (position === 'float') {\n      return (\n        <label class=\"placeholder-as-label\" htmlFor={this.inputId} id={labelId}>\n          {this.label && this.label}\n          {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n        </label>\n      );\n    } else {\n      return (\n        <label\n          class={{ label: true, 'visually-hide': this.hideLabel }}\n          htmlFor={this.inputId}\n          id={labelId}\n        >\n          <div class=\"label-placeholder\">\n            {this.placeholder && this.hasValue() && this.rtl && (\n              <span class=\"placeholder\">{this.placeholder} / </span>\n            )}\n            <span class=\"labeltext\">\n              {this.label && this.label}\n              {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n            </span>\n            {this.placeholder && this.hasValue() && !this.rtl && (\n              <span class=\"placeholder\"> / {this.placeholder}</span>\n            )}\n          </div>\n          {this.showCharCount && (\n            <span class=\"charcount\">\n              {this.maxlength\n                ? this.maxlength - this.charCount + ' left'\n                : this.charCount + ' characters'}\n            </span>\n          )}\n        </label>\n      );\n    }\n  }\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        dir={this.rtl ? 'rtl' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': this.hasValue(),\n          'has-focus': this.hasFocus,\n          'is-invalid': this._invalid,\n        }}\n      >\n        {!this.floatLabel && this.renderLabel(labelId)}\n        <div\n          class={{\n            'has-label': this.label !== null && !this.floatLabel,\n            'has-float-label': this.label !== null && this.floatLabel,\n            rtl: this.rtl,\n            'has-inline-button': this.hasButtonSlot,\n            legacy: this.isLegacy,\n            input: true,\n            textarea: this.type === 'textarea',\n          }}\n        >\n          {this.floatLabel && this.renderLabel(labelId, 'float')}\n          <div class=\"native-input-wrap\">\n            {this.type !== 'textarea' && (\n              <input\n                id={this.inputId}\n                class=\"native-input\"\n                ref={(input) => (this.nativeInput = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                accept={this.accept}\n                autoCapitalize={this.autocapitalise}\n                autoComplete={this.autocomplete}\n                autoCorrect={this.autocorrect}\n                autoFocus={this.autofocus}\n                inputMode={this.inputmode}\n                form={this.form}\n                min={this.min}\n                max={this.max}\n                minLength={this.minlength}\n                maxLength={this.maxlength}\n                multiple={this.multiple}\n                name={this.name}\n                pattern={this.pattern}\n                placeholder={\n                  !this.floatLabel && this.placeholder ? this.placeholder : ''\n                }\n                readOnly={this.readonly}\n                required={this.required}\n                spellcheck={this.spellcheck}\n                step={this.step}\n                size={this.size}\n                type={this.type}\n                value={value}\n                onInput={this.onInput}\n                onFocus={this.onFocus}\n                onKeyDown={this.onKeydown}\n                onInvalid={this.validate}\n              />\n            )}\n            {this.type === 'textarea' && (\n              <textarea\n                rows={this.floatLabel ? 1 : this.rows}\n                id={this.inputId}\n                class={{\n                  'native-input': true,\n                  resizable: this.resize === 'true',\n                }}\n                ref={(input) => (this.nativeInput = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                autoCapitalize={this.autocapitalise}\n                autoCorrect={this.autocorrect}\n                autoFocus={this.autofocus}\n                inputMode={this.inputmode}\n                form={this.form}\n                minLength={this.minlength}\n                maxLength={this.maxlength}\n                name={this.name}\n                placeholder={\n                  !this.floatLabel && this.placeholder ? this.placeholder : ''\n                }\n                readOnly={this.readonly}\n                required={this.required}\n                spellcheck={this.spellcheck}\n                value={value}\n                onInput={this.onInput}\n                onFocus={this.onFocus}\n                onKeyDown={this.onKeydown}\n                onInvalid={this.validate}\n              ></textarea>\n            )}\n            {this.clearInput && !this.readonly && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"icon input-clear-icon\"\n                tabindex=\"-1\"\n                onTouchStart={this.clearTextInput}\n                onMouseDown={this.clearTextInput}\n              >\n                <nano-icon name=\"light/times\"></nano-icon>\n              </button>\n            )}\n            {this.hasButtonSlot ? (\n              <span class=\"inline-button\">\n                <slot name=\"inline-button\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </div>\n        </div>\n        {(this.showInlineError || this.hasHelperSlot) && (\n          <div class=\"more\" id={moreId}>\n            {!!this.showInlineError ? (\n              <div class=\"error\" ref={(div) => (this.errorContainer = div)} />\n            ) : (\n              ''\n            )}\n            <div class=\"helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        )}\n        <slot />\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}

package/dist/nano-components/p-51fa04a6.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as o,c as n,j as t,h as r,e as i,g as e}from"./p-ab5813a7.js";import{d as a}from"./p-1da5f8df.js";import{g as s}from"./p-d99437a6.js";const c='.sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:8px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__legend.sc-nano-checkbox-group,.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';let h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this._invalid=false;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submit";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();setTimeout((n=>this.showInlineValidation(o)),20)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true;if(!!this.showInlineError){this.checkboxes[n].setFocus()}}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})}}get invalid(){return this._invalid}async reportValidity(o){return new Promise((n=>{if(o)this.showInlineValidation();setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),20)}))}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;let o=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!o||!o.length)return;let n=o.filter((o=>o.checked)).length;let t=false;this.checkboxes.forEach((o=>{if(o.required&&!o.checked){t=true}o.setError("");if(this.min&&n<this.min){o.setError(`You must select a minimum of ${this.min} values.`);t=true}if(this.max&&n>this.max){o.setError(`Only up to ${this.max} values are allowed.`);t=true}}));return t}handleComponentChange(){this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,20);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}render(){let o=this.host.ownerDocument.dir==="rtl";const n=this.grpId+"-lbl";const t=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return r(i,Object.assign({},this.checkboxTypes,{dir:o?"rtl":null}),r("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},r("legend",{class:"nanogroupcb__legend",id:n},this.legend),r("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":n+" "+t},r("slot",null)),(this.showInlineError||this.hasHelperSlot)&&r("div",{class:"nanogroupcb__more",id:t},!!this.showInlineError?r("div",{class:"nanogroupcb__error"},this.errorMessage):"",r("div",{class:"nanogroupcb__help"},r("slot",{name:"helper"})))))}get host(){return e(this)}static get watchers(){return{validateOn:["handleCbChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
-//# sourceMappingURL=p-51fa04a6.entry.js.map

package/dist/nano-components/p-51fa04a6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"names":["checkboxGroupCss","CheckboxGroup","[object Object]","hostRef","this","grpId","grpIds","_invalid","errorMessage","showErrorMsg","hasHelperSlot","validateOn","showInlineError","min","max","disabled","legend","handleInvalid","ev","customValidate","preventDefault","setTimeout","_","showInlineValidation","nativeCbs","length","forEach","cb","i","validity","valid","validationMessage","checkboxes","setFocus","nanoValidate","emit","isValid","invalid","originalEvent","validateFirst","Promise","resolve","onlyCbs","filter","type","checked","required","setError","checkboxTypes","getClassMap","map","mo","MutationObserver","handleSlotChange","observe","host","childList","forceUpdate","Array","from","querySelectorAll","querySelector","all","reduce","acc","push","getInputElement","addEventListener","debounce","bind","handleDisabledChange","attachSlotObserver","disconnect","isRtl","ownerDocument","dir","legendId","moreId","h","Host","Object","assign","class","nanogroupcb","show-error","id","role","aria-labelledby","name"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__legend,\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n\n    @include margin(\n      calc(var(--label-padding) - var(--control-margin-bottom)),\n      0,\n      var(--label-padding),\n      3px\n    );\n\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    top: 0;\n    left: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-left: var(--control-margin-start);\n      margin-top: var(--control-margin-top);\n      margin-right: var(--control-margin-end);\n      margin-bottom: var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-left: unset;\n      margin-right: unset;\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  forceUpdate,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport { debounce, getClassMap } from '../../utils';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n  private _invalid = false;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) this.showInlineValidation();\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 20);\n    });\n  }\n\n  // Events\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('validateOn')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    // we only care about checkbox controls.\n    let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    let checked = onlyCbs.filter((cb) => cb.checked).length;\n    let invalid = false;\n\n    this.checkboxes.forEach((cb) => {\n      if (cb.required && !cb.checked) {\n        invalid = true;\n      }\n\n      cb.setError('');\n\n      if (this.min && checked < this.min) {\n        cb.setError(`You must select a minimum of ${this.min} values.`);\n        invalid = true;\n      }\n      if (this.max && checked > this.max) {\n        cb.setError(`Only up to ${this.max} values are allowed.`);\n        invalid = true;\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + cb.type)\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private attachSlotObserver() {\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    forceUpdate(this.host);\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) =>\n      cb.addEventListener('invalid', this.handleInvalid)\n    );\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n        if (!!this.showInlineError) {\n          this.checkboxes[i].setFocus();\n        }\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 20);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  render() {\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes} dir={isRtl ? 'rtl' : null}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class=\"nanogroupcb__legend\" id={legendId}>\n            {this.legend}\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {!!this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"]}

package/dist/nano-components/p-55189485.system.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-System.register(["./p-59b3d24b.system.js","./p-0784f2ad.system.js"],(function(o){"use strict";var n,t,e;return{setters:[function(o){n=o.r;t=o.h},function(o){e=o.f}],execute:function(){var a=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent}.icon-button.sc-nano-icon-button{-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;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--nano-spacing-small, 8px);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";var i=o("nano_icon_button",function(){function o(o){n(this,o);this.type="button";this.disabled=false}o.prototype.componentDidLoad=function(){e.observe(this.button)};o.prototype.connectedCallback=function(){if(this.button)e.observe(this.button)};o.prototype.disconnectedCallback=function(){e.unobserve(this.button)};o.prototype.render=function(){var o=this;var n=this.href===undefined?"button":"a";return t(n,{ref:function(n){return o.button=n},class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},t("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))};return o}());i.style=a}}}));
-//# sourceMappingURL=p-55189485.system.entry.js.map

package/dist/nano-components/p-55189485.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","exports","class_1","hostRef","this","type","disabled","prototype","componentDidLoad","focusVisible","observe","button","connectedCallback","disconnectedCallback","unobserve","render","_this","TagType","href","undefined","h","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;wLAAA,IAAMA,EAAgB,u8DCUTC,EAAUC,EAAA,mBAAA,WALvB,SAAAC,EAAAC,aAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAUpCJ,EAAAK,UAAAC,iBAAA,WACEC,EAAaC,QAAQN,KAAKO,SAG5BT,EAAAK,UAAAK,kBAAA,WACE,GAAIR,KAAKO,OAAQF,EAAaC,QAAQN,KAAKO,SAG7CT,EAAAK,UAAAM,qBAAA,WACEJ,EAAaK,UAAUV,KAAKO,SAG9BT,EAAAK,UAAAQ,OAAA,WAAA,IAAAC,EAAAZ,KACE,IAAMa,EAAUb,KAAKc,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,IAAK,SAACC,GAAE,OAAMN,EAAKL,OAASW,GAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBrB,KAAKE,UAC/BoB,aACWtB,KAAKuB,MACjBC,KAAMxB,KAAKwB,KACXC,MAAOzB,KAAKyB,MACZX,KAAMd,KAAKc,MAAQC,UACnBW,OAAQ1B,KAAKc,MAAQd,KAAK0B,OAAS1B,KAAK0B,OAASX,UACjDd,MAAOD,KAAKc,MAAQd,KAAKC,KAAOD,KAAKC,KAAOc,WAE5CC,EAAA,YAAA,CAAWQ,KAAMxB,KAAK2B,SAAUC,IAAK5B,KAAK6B,QAAOC,cAAc,oBA9DhD","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --color: defaults to #{$color-palegrey};\n    * @prop --active-color: defaults to #{$color-darkblue--faded};\n    * @prop --hover-color: defaults to #{$color-blue};\n    * @prop --background: defaults to transparent;\n    */\n  display: inline-block;\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{$color-darkblue--faded};\n  --hover-color: #{$color-blue};\n  --nano-color-base: var(--color, #{$color-mediumgrey});\n  --background: transparent;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: #{$spacing-small};\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. */\n\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  render() {\n    const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n    return (\n      <TagType\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        aria-label={this.label}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n      </TagType>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-56113dd3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/tabbable.ts"],"names":["isTabbable","el","tag","tagName","toLowerCase","getAttribute","hasAttribute","offsetParent","window","getComputedStyle","visibility","includes","getTabbableElements","root","tabbableElements","HTMLElement","push","shadowRoot","mode","map","HTMLSlotElement","assignedElements","slottedEl","Array","from","querySelectorAll","getNearestTabbableElement","length"],"mappings":";;;AACA,SAASA,EAAWC,GAClB,MAAMC,EAAMD,EAAGE,QAAQC,cAGvB,GAAIH,EAAGI,aAAa,cAAgB,KAAM,CACxC,OAAO,MAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,MAIT,GACEL,EAAGK,aAAa,kBAChBL,EAAGI,aAAa,mBAAqB,QACrC,CACA,OAAO,MAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,KAIT,GACEL,EAAGK,aAAa,oBAChBL,EAAGI,aAAa,qBAAuB,QACvC,CACA,OAAO,KAIT,IAAKH,IAAQ,SAAWA,IAAQ,UAAYD,EAAGK,aAAa,YAAa,CACvE,OAAO,KAIT,GACEJ,IAAQ,SACRD,EAAGI,aAAa,UAAY,UAC3BJ,EAAGK,aAAa,WACjB,CACA,OAAO,MAIT,IAAKL,EAAGM,aAAc,CACpB,OAAO,MAIT,GAAIC,OAAOC,iBAAiBR,GAAIS,aAAe,SAAU,CACvD,OAAO,MAIT,MAAO,CACL,SACA,QACA,SACA,WACA,IACA,QACA,QACA,WACAC,SAAST,YAKGU,EAAoBC,GAClC,MAAMC,EAAkC,GAExC,GAAID,aAAgBE,YAAa,CAE/B,GAAIf,EAAWa,GAAO,CACpBC,EAAiBE,KAAKH,GAIxB,GAAIA,EAAKI,YAAcJ,EAAKI,WAAWC,OAAS,OAAQ,CACtDN,EAAoBC,EAAKI,YAAYE,KAAKlB,GACxCa,EAAiBE,KAAKf,KAK1B,GAAImB,iBAAmBP,aAAgBO,gBAAiB,CACtDP,EAAKQ,mBAAmBF,KAAKG,IAC3BV,EAAoBU,GAAWH,KAAKlB,GAAOa,EAAiBE,KAAKf,SAMvEsB,MAAMC,KAAKX,EAAKY,iBAAiB,MAAMN,KAAKlB,IAC1CW,EAAoBX,GAAIkB,KAAKlB,GAAOa,EAAiBE,KAAKf,QAG5D,OAAOa,WAGOY,EAA0BzB,GACxC,MAAMa,EAAmBF,EAAoBX,GAC7C,OAAOa,EAAiBa,OAASb,EAAiB,GAAK","sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot).map((el) =>\n        tabbableElements.push(el)\n      );\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl).map((el) => tabbableElements.push(el));\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el).map((el) => tabbableElements.push(el));\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"]}

package/dist/nano-components/p-5bbd6c81.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as e,e as n,g as i}from"./p-ab5813a7.js";import{i as a}from"./p-debd9efc.js";import{r as s}from"./p-621750cc.js";const r=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none}.main-search .icon-button{color:inherit;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:5px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:175px;max-width:200px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;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;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;overflow:auto;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:0.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - 0.8em);padding-right:calc(20px - 0.8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - 0.8em);padding-inline-start:calc(20px - 0.8em);-webkit-padding-end:calc(20px - 0.8em);padding-inline-end:calc(20px - 0.8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:"";border:1px solid #007495;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#007495;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #e4e6e8}.result *{word-wrap:break-word;word-break:break-word}.result__title{color:#007495;font-size:16px;line-height:1.43;margin:1em 0 0.5em 0;text-decoration:underline;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:500}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 768px){.result__title{width:100%}}.result__body{color:#455556;font-size:14px;line-height:1.67;width:70%}@media (max-width: 768px){.result__body{width:100%}}.result__date{font-size:10px;line-height:1.6;color:#455556;text-align:right;margin:auto 0;width:30%}@media (max-width: 768px){.result__date{width:100%;margin:0.8em 0 0 0}}';let l=class{constructor(e){t(this,e)}handleAlgoliaCredsChange(){if(!this.apiKey||!this.appId||!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId}handleAlgoliaIndexChange(){if(!this.index||!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index}handleGlobalNavReset(t){if(t.target.tagName!=="NANO-GLOBAL-NAV")return;this.algoliaResultsEle=null;this.goback()}handleGlobalNavSearch(t){if(t.target.tagName!=="NANO-GLOBAL-NAV")return;const{detail:{results:e,client:n}}=t;const i=e.find((t=>t.selected));this.apiKey=n.apiKey;this.appId=n.appId;this.index={name:i.indexName,index:i.index,domain:i.domain,filters:i.filters};this.algoliaEle.query=i.query}handleReorder(t){if(t.composedPath().find((t=>t.classList&&t.classList.contains("indexchange")))&&!!this.algoliaResultsEle){this.changeOrder(t)}}attachListeners(t){if(!t.composedPath().find((t=>t.id&&t.id==="main-search")))return;this.algoliaResultsEle=this.algoliaEle.querySelector("#main-search-results");this.attachResultListeners();this.algoliaEle.querySelectorAll(".filters-reset").forEach((t=>{t.addEventListener("click",(()=>{this.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((t=>{t.addEventListener("click",(()=>{this.closefilters()}))}));let e=this.algoliaEle.querySelector(".filters-wrap");if(e){e.addEventListener("click",(t=>{t.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters")}attachResultListeners(t){if(t&&t.composedPath().find((t=>t===this.algoliaEle))){this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results")}if(!this.algoliaResultsEle)return;let e=this.algoliaResultsEle;e.querySelectorAll(".remove-filter").forEach((t=>{t.addEventListener("click",(t=>{let e=t.target;this.removeFilter(e.dataset.filter,e.dataset.filterVal)}))}));e.querySelectorAll(".back-btn").forEach((t=>{t.addEventListener("click",(()=>{this.goback()}))}));e.querySelectorAll(".topbar__show-filters").forEach((t=>{this.openFilterBtn=t;t.addEventListener("click",(()=>{this.filtersDiv.tabIndex=-1;this.filtersDiv.classList.add("show");this.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((()=>this.filtersDiv.focus()),20)}))}))}changeOrder(t){this.algoliaEle.replicaIndex=t.detail.value}goback(){this.removeAllFilters();this.algoliaEle.showResults=false;this.algoliaEle.query=""}removeFilter(t,e){this.algoliaEle.removeFilters(t,e)}removeAllFilters(){this.algoliaEle.removeFilters()}closefilters(){if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((()=>this.openFilterBtn.focus()),20)}componentDidLoad(){this.ro=new a((t=>{for(const e of t){if(!e.contentRect.width)return;this.currentWidth=e.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=["created > "+Math.floor((Date.now()-631152e5)/1e3)]}render(){return e(n,{class:{small:this.currentWidth<577},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},e("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:t=>s((()=>this.algoliaEle=t)),id:"main-search"},e("script",{type:"text/template",slot:"template"},`<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="all_prod_en">Sort by: Most relevant</option>\n                          <option value="all_prod_en_date_desc">Sort by: Newest</option>\n                          <option value="all_prod_en_date_asc">Sort by: Oldest</option>\n                          <option value="all_prod_en_activity_date_desc">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="cws_english_en">Sort by: Most relevant</option>\n                          <option value="cws_english_en_date_desc">Sort by: Newest</option>\n                          <option value="cws_english_en_date_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="cws_english_resources_en">Sort by: Most relevant</option>\n                          <option value="cws_english_resources_en_featured_desc">Sort by: Newest</option>\n                          <option value="cws_english_resources_en_featured_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="store_prod">Sort by: Most relevant</option>\n                          <option value="store_prod_date_desc">Sort by: Newest</option>\n                          <option value="store_prod_date_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order" show-inline-error="false">\n                          <option value="community_prod">Sort by: Most relevant</option>\n                          <option value="community_prod_date_desc">Sort by: Newest</option>\n                          <option value="community_prod_date_asc">Sort by: Oldest</option>\n                          <option value="community_prod_activity_date_desc">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class="sc-nano-global-search-results">\n                        <a class="sc-nano-global-search-results result" href="{{ result.url | abs_url(it, result) }}">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            {{ @if (!it.legacy)  }}\n\n                              {{ @if (result.type === 'faq' || result.type === 'faqs') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/question-circle"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'comment') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comment"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'protocol') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/clipboard-list"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'publication') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-chart-line"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'poster' || result.type === 'lc_poster') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/presentation"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'post') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comments"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'news_item') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/newspaper"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'event') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/calendar"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'talk' || result.type === 'lc_lightning_talk' || result.type === 'ncm_plenary_talk' || result.type === 'ncm_lightning_talk') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/keynote"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'video') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/video"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'data_release') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/analytics"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'job_vacancy') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/ballot-check"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'tool') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/wrench"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'literature') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/book"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'community_info') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/users"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'article') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-alt"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'provider') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/handshake"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'apps') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/vials"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'white_paper') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-pdf"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'Nanopore Store') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/shopping-cart"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (!result.type || !iconSet) }}\n                                <nano-icon  class="sc-nano-global-search-results" name="light/file"></nano-icon>\n                              {{ /if }}\n                            {{ /if }}\n                            {{ result.title | safe }}\n                          </h4>\n                          {{ @if (result.body) }}\n                            <div class="sc-nano-global-search-results result__body">{{ result.body | safe | trim_to(200) }}</div>\n                          {{ /if }}\n                          {{ @if (result.updated) }}\n                            <div class="sc-nano-global-search-results result__date">Last Updated: {{ result.updated | date_short }}</div>\n                          {{ #else }}\n                            {{ @if (result.created) }}\n                              <div class="sc-nano-global-search-results result__date">Added: {{ result.created | date_short }}</div>\n                            {{ /if }}\n                          {{ /if }}\n                        </a>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`),e("div",{slot:"output"}),e("slot",null)))}get el(){return i(this)}static get watchers(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}}};l.style=r;export{l as nano_global_search_results};
-//# sourceMappingURL=p-5bbd6c81.entry.js.map