@nanoporetech-digital/components 5.10.0 → 5.11.1

package/dist/nano-components/p-5fc3035d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","this","handleClick","ev","type","formEl","findForm","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","async","button","focus","form","host","closest","HTMLFormElement","el","getElementById","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","href","undefined","h","Host","disabled","onClick","part","ref","class","name","value","target","rel","label","iconName","src","iconSrc","lazy","render","showTooltip","tooltipCss","Tooltip","isVisible","handleBlur","hasTrigger","hide","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","getTarget","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","querySelectorAll","textContent","map","node","join","trim","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","syncOptions","setOptions","strategy","hoist","placement","distance","skidding","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","hidden","componentDidUpdate","destroy","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onSlotchange","role"],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@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 --color: defaults to #{map.get($colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get($colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{$spacing-small};\n    * @prop --box-shadow: defaults to none;\n    */\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{map.get($colors, darkblue--faded)};\n  --hover-color: #{map.get($colors, blue)};\n  --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{$spacing-small};\n  --box-shadow: none;\n\n  border-radius: var(--border-radius);\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: inherit;\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n  box-shadow: var(--box-shadow);\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__label {\n  @include visually-hide();\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 {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  Method,\n  Element,\n  Host,\n} 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 * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  @Element() host: HTMLNanoIconButtonElement;\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  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\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 the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n  @Prop() rel: 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  /** The HTML form element or form element id.\n   * Used to submit a form when the button is not a child of the form. */\n  @Prop() form: HTMLFormElement | string;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /**\n   * Finds the form element based on the provided `form` selector\n   * or element reference provided.\n   * @returns the found form element (if found)\n   */\n  private findForm(): HTMLFormElement | null {\n    const { form, host } = this;\n    if (!form) return host.closest('form');\n\n    if (form instanceof HTMLFormElement) {\n      return form;\n    }\n    if (typeof form === 'string') {\n      const el = document.getElementById(form);\n      if (el instanceof HTMLFormElement) {\n        return el;\n      }\n    }\n    return null;\n  }\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'button') return;\n    const formEl = this.findForm();\n\n    if (formEl) {\n      ev.preventDefault();\n\n      const fakeButton = document.createElement('button');\n      fakeButton.type = this.type;\n      fakeButton.style.display = 'none';\n      formEl.appendChild(fakeButton);\n      fakeButton.click();\n      fakeButton.remove();\n    }\n  };\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  private content() {\n    const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <TagType\n          onClick={this.handleClick}\n          part=\"base\"\n          ref={(el) => (this.button = el)}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          name={this.name}\n          value={this.value}\n          href={this.href || undefined}\n          target={this.href && this.target ? this.target : undefined}\n          rel={this.rel || undefined}\n          type={!this.href && this.type ? this.type : undefined}\n        >\n          <span class=\"icon-button__label\">{this.label}</span>\n          <nano-icon\n            name={this.iconName}\n            src={this.iconSrc}\n            aria-hidden=\"true\"\n            lazy={false}\n            part=\"icon\"\n          />\n        </TagType>\n      </Host>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n    }\n    return this.content();\n  }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-end: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-start: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    if (!this.target) {\n      this.target = this.getTarget();\n\n      if (!this.target) return;\n    }\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n              {this.content}\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-650aa197.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,w as s,h as e,a as h,g as n}from"./p-d6a04b3a.js";import{C as l}from"./p-dd5687db.js";import{W as r}from"./p-a26bdb65.js";import"./p-7bff5224.js";const o=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:none}:host ::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";const a=class{constructor(s){t(this,s);this.nanoFilterChanged=i(this,"nanoFilterChanged",7);this.nanoTplUpdated=i(this,"nanoTplUpdated",7);this.filterId=null;this.tplWillRnder=new Promise((t=>{this.tplDidRnder=t}));this.changeEvent=undefined;this.internalValue=[undefined];this.showFilter=false;this.indexResults=null;this.filterChanged=null;this.facets=undefined;this.tplRenderFn=undefined;this.globalStoreMethod=undefined;this.filterName=null;this.value="";this.operator="or";this.storeId=undefined;this.storeMethod="session"}valueSet(){const t=this.value;let i;if(typeof t==="string")i=t.length?t.split("|"):[];else i=this.value;if(this.didValueChange(i)){const t=this.setFieldValues(i);if(t&&t.length)this.internalValue=i;else{this.tplWillRnder.then((t=>{this.setFieldValues(i);this.internalValue=i}))}}}valueChanged(){this.value=this.internalValue;this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})}appliedFilterChanged(){if(this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||this.operator==="and")){this.updateContent()}}tplUpdate(){this.updateContent()}handleFilterChange(){if(this.indexResults&&this.indexResults.appliedFilters){const t=this.indexResults.appliedFilters.find((t=>t.name===this.filterName));if(!t)return;this.tplWillRnder.then((i=>{const s=this.setFieldValues(t.values);if(s&&s.length)this.value=s}))}this.updateContent()}handleChangeEvent(){const t=this.getFieldValues();if(this.didValueChange(t)){this.internalValue=t;return true}return false}updateContent(){const t=this.outputSlot||this.outputEle;if(!this.el)return;if(!this.templateStr)this.showFilter=true;else if(!this.filterName||!t||this.templateStr&&(!this.indexResults||!this.indexResults.origFilters[this.filterName])){this.showFilter=false}if(!t)return;if(!this.indexResults){if(this.templateStr){s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{},dyn:{},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});if(!this.value||!this.value.length)this.handleChangeEvent()}))}else if(!this.value||!this.value.length)this.handleChangeEvent();return}s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:Object.assign({},this.indexResults.origFilters[this.filterName]),dyn:Object.assign({},this.indexResults.dynFilters[this.filterName]),selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value});this.tplDidRnder();this.setFieldValues();if(!this.showFilter)this.showFilter=true;this.nanoTplUpdated.emit(this.el)}))}getFieldValues(){const t=[];const i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(let s=0;s<i.length;s++){const e=i[s];if(e.type==="select-multiple"){const i=e;for(let s=0;s<i.options.length;s++){if(!i.options[s].selected||!i.options[s].value.length)continue;t.push(i.options[s].value)}}else if(e.type!=="checkbox"&&e.type!=="radio"||e.checked&&e.value.length){t.push(e.value)}}return t}setFieldValues(t){t=t||this.internalValue;if(!t)return;const i=[];const s=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(let e=0;e<s.length;e++){const h=s[e];if(h.disabled||h.type==="file"||h.type==="reset"||h.type==="submit"||h.type==="button")continue;if(h.type==="select-multiple"||h.type==="select-one"){const s=h;for(let e=0;e<s.options.length;e++){if(!t.includes(s.options[e].value))s.options[e].selected=false;else{i.push(s.value);s.options[e].selected=true;if(h.type==="select-one")s.value=s.options[e].value}}}else if(["checkbox","radio","tag","segment","segment-pill"].includes(h.type)){if(t.includes(h.value)){i.push(h.value);h.checked=true}else if(!t.length&&!h.value.length){h.checked=true}else h.checked=false}}return i}didValueChange(t){if(!!this.internalValue&&!t)return true;if(!this.internalValue&&!t)return false;if(this.internalValue&&t.length!==this.internalValue.length)return true;let i=false;for(let s=0;s<t.length;s++){if(!i&&(!this.internalValue||!this.internalValue.includes(t[s])))i=true}return i}connectedCallback(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');this.filterId=this.filterName+"_"+f++;if(!!this.templateSlot){this.templateStr=this.templateSlot.innerHTML;this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>")}}componentWillLoad(){if(this.storeId)l.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)}componentDidLoad(){this.updateContent();if(this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName])this.showFilter=true}render(){return e(h,{class:{"show-filter":this.showFilter}},e("div",{ref:t=>this.outputEle=t},e("slot",{name:"output"})))}get el(){return n(this)}static get watchers(){return{value:["valueSet"],internalValue:["valueChanged"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}}};r(a,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);let f=0;a.style=o;export{a as nano_algolia_filter};
-//# sourceMappingURL=p-650aa197.entry.js.map

package/dist/nano-components/p-650aa197.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["algoliaFilterCss","AlgoliaFilter","this","filterId","tplWillRnder","Promise","resolve","tplDidRnder","undefined","valueSet","valStr","value","vals","length","split","didValueChange","foundVals","setFieldValues","internalValue","then","_","valueChanged","nanoFilterChanged","emit","facetName","filterName","operator","appliedFilterChanged","filterChanged","updateContent","tplUpdate","handleFilterChange","indexResults","appliedFilters","foundValue","find","filter","name","values","handleChangeEvent","getFieldValues","outputTo","outputSlot","outputEle","el","templateStr","showFilter","origFilters","writeTask","innerHTML","tplRenderFn","orig","dyn","selected","Object","assign","dynFilters","nanoTplUpdated","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","connectedCallback","templateSlot","querySelector","filterIds","replace","componentWillLoad","storeId","ComponentStore","init","storeMethod","globalStoreMethod","componentDidLoad","render","h","Host","class","ref","div","Wormhole"],"sources":["./src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","./src/components/algolia/algolia-filter.tsx"],"sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n  Listen,\n} from '@stencil/core';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport type {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop({ mutable: true }) value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    const valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      const foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        const foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  @Listen('nanoChange')\n  @Listen('change')\n  handleChangeEvent() {\n    const vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  private updateContent() {\n    const outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    const values = [];\n    const fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      const field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        const select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    const found = [];\n    const fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      const field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        const select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (let i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (!!this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"],"mappings":";;;uKAAA,MAAMA,EAAmB,gO,MCuCZC,EAAa,M,6HAOhBC,KAAAC,SAAmB,KAEnBD,KAAAE,aAAe,IAAIC,SAASC,IAClCJ,KAAKK,YAAcD,CAAO,I,8CAIY,CAACE,W,gBACV,M,kBACM,K,mBACJ,K,kGAQJ,K,WAK4B,G,cAKxB,K,wCAYK,S,CActCC,WACE,MAAMC,EAASR,KAAKS,MACpB,IAAIC,EAEJ,UAAWF,IAAW,SACpBE,EAAOF,EAAOG,OAASH,EAAOI,MAAM,KAAO,QACxCF,EAAOV,KAAKS,MAEjB,GAAIT,KAAKa,eAAeH,GAAO,CAC7B,MAAMI,EAAYd,KAAKe,eAAeL,GAEtC,GAAII,GAAaA,EAAUH,OAAQX,KAAKgB,cAAgBN,MAEnD,CACHV,KAAKE,aAAae,MAAMC,IACtBlB,KAAKe,eAAeL,GACpBV,KAAKgB,cAAgBN,CAAI,G,GAQjCS,eACEnB,KAAKS,MAAQT,KAAKgB,cAClBhB,KAAKoB,kBAAkBC,KAAK,CAC1BpB,SAAUD,KAAKC,SACfqB,UAAWtB,KAAKuB,WAChBd,MAAOT,KAAKgB,cACZQ,SAAUxB,KAAKwB,U,CAMnBC,uBACE,GACEzB,KAAKuB,YACLvB,KAAK0B,gBACJ1B,KAAK0B,gBAAkB1B,KAAKC,UAAYD,KAAKwB,WAAa,OAC3D,CACAxB,KAAK2B,e,EAKTC,YACE5B,KAAK2B,e,CAIPE,qBACE,GAAI7B,KAAK8B,cAAgB9B,KAAK8B,aAAaC,eAAgB,CACzD,MAAMC,EAAahC,KAAK8B,aAAaC,eAAeE,MACjDC,GAAWA,EAAOC,OAASnC,KAAKuB,aAEnC,IAAKS,EAAY,OAEjBhC,KAAKE,aAAae,MAAMC,IACtB,MAAMJ,EAAYd,KAAKe,eAAeiB,EAAWI,QACjD,GAAItB,GAAaA,EAAUH,OAAQX,KAAKS,MAAQK,CAAS,G,CAG7Dd,KAAK2B,e,CAKPU,oBACE,MAAM3B,EAAOV,KAAKsC,iBAClB,GAAItC,KAAKa,eAAeH,GAAO,CAC7BV,KAAKgB,cAAgBN,EACrB,OAAO,I,CAET,OAAO,K,CAGDiB,gBACN,MAAMY,EAAWvC,KAAKwC,YAAcxC,KAAKyC,UACzC,IAAKzC,KAAK0C,GAAI,OAGd,IAAK1C,KAAK2C,YAAa3C,KAAK4C,WAAa,UAEpC,IACF5C,KAAKuB,aACLgB,GACAvC,KAAK2C,eACF3C,KAAK8B,eAAiB9B,KAAK8B,aAAae,YAAY7C,KAAKuB,aAC7D,CACAvB,KAAK4C,WAAa,K,CAIpB,IAAKL,EAAU,OAGf,IAAKvC,KAAK8B,aAAc,CACtB,GAAI9B,KAAK2C,YAAa,CACpBG,GAAU,KACRP,EAASQ,UAAY/C,KAAKgD,YAAYhD,KAAK2C,YAAa,CACtDM,KAAM,GACNC,IAAK,GACLC,SACEnD,KAAKgB,eAAiBhB,KAAKgB,cAAcL,OACrCX,KAAKgB,cACLhB,KAAKS,QAEb,IAAKT,KAAKS,QAAUT,KAAKS,MAAME,OAAQX,KAAKqC,mBAAmB,G,MAE5D,IAAKrC,KAAKS,QAAUT,KAAKS,MAAME,OAAQX,KAAKqC,oBACnD,M,CAIFS,GAAU,KACRP,EAASQ,UAAY/C,KAAKgD,YAAYhD,KAAK2C,YAAa,CACtDM,KAAIG,OAAAC,OAAA,GAAOrD,KAAK8B,aAAae,YAAY7C,KAAKuB,aAC9C2B,IAAGE,OAAAC,OAAA,GAAOrD,KAAK8B,aAAawB,WAAWtD,KAAKuB,aAC5C4B,SACEnD,KAAKgB,eAAiBhB,KAAKgB,cAAcL,OACrCX,KAAKgB,cACLhB,KAAKS,QAEbT,KAAKK,cACLL,KAAKe,iBAEL,IAAKf,KAAK4C,WAAY5C,KAAK4C,WAAa,KACxC5C,KAAKuD,eAAelC,KAAKrB,KAAK0C,GAAG,G,CAK7BJ,iBACN,MAAMF,EAAS,GACf,MAAMoB,EAASxD,KAAKwC,WAAWiB,iBAC7B,uDAGF,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAO7C,OAAQ+C,IAAK,CACtC,MAAMC,EAAQH,EAAOE,GAGrB,GAAIC,EAAMC,OAAS,kBAAmB,CACpC,MAAMC,EAA4BF,EAClC,IAAK,IAAIG,EAAI,EAAGA,EAAID,EAAOE,QAAQpD,OAAQmD,IAAK,CAC9C,IAAKD,EAAOE,QAAQD,GAAGX,WAAaU,EAAOE,QAAQD,GAAGrD,MAAME,OAC1D,SACFyB,EAAO4B,KAAKH,EAAOE,QAAQD,GAAGrD,M,OAE3B,GACJkD,EAAMC,OAAS,YAAcD,EAAMC,OAAS,SAC5CD,EAAMM,SAAWN,EAAMlD,MAAME,OAC9B,CACAyB,EAAO4B,KAAKL,EAAMlD,M,EAGtB,OAAO2B,C,CAIDrB,eAAeL,GACrBA,EAAOA,GAAQV,KAAKgB,cACpB,IAAKN,EAAM,OAEX,MAAMwD,EAAQ,GACd,MAAMV,EAASxD,KAAKwC,WAAWiB,iBAC7B,mFAGF,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAO7C,OAAQ+C,IAAK,CACtC,MAAMC,EAAQH,EAAOE,GAErB,GACEC,EAAMQ,UACNR,EAAMC,OAAS,QACfD,EAAMC,OAAS,SACfD,EAAMC,OAAS,UACfD,EAAMC,OAAS,SAEf,SAEF,GAAID,EAAMC,OAAS,mBAAqBD,EAAMC,OAAS,aAAc,CACnE,MAAMC,EAA4BF,EAClC,IAAK,IAAIG,EAAI,EAAGA,EAAID,EAAOE,QAAQpD,OAAQmD,IAAK,CAC9C,IAAKpD,EAAK0D,SAASP,EAAOE,QAAQD,GAAGrD,OACnCoD,EAAOE,QAAQD,GAAGX,SAAW,UAC1B,CACHe,EAAMF,KAAKH,EAAOpD,OAClBoD,EAAOE,QAAQD,GAAGX,SAAW,KAC7B,GAAIQ,EAAMC,OAAS,aACjBC,EAAOpD,MAAQoD,EAAOE,QAAQD,GAAGrD,K,QAGlC,GACL,CAAC,WAAY,QAAS,MAAO,UAAW,gBAAgB2D,SACtDT,EAAMC,MAER,CACA,GAAIlD,EAAK0D,SAAST,EAAMlD,OAAQ,CAC9ByD,EAAMF,KAAKL,EAAMlD,OACjBkD,EAAMM,QAAU,I,MACX,IAAKvD,EAAKC,SAAWgD,EAAMlD,MAAME,OAAQ,CAC9CgD,EAAMM,QAAU,I,MACXN,EAAMM,QAAU,K,EAG3B,OAAOC,C,CAGDrD,eAAewD,GACrB,KAAMrE,KAAKgB,gBAAkBqD,EAAQ,OAAO,KAC5C,IAAKrE,KAAKgB,gBAAkBqD,EAAQ,OAAO,MAC3C,GAAIrE,KAAKgB,eAAiBqD,EAAO1D,SAAWX,KAAKgB,cAAcL,OAC7D,OAAO,KAET,IAAI2D,EAAa,MACjB,IAAK,IAAIZ,EAAI,EAAGA,EAAIW,EAAO1D,OAAQ+C,IAAK,CACtC,IACGY,KACCtE,KAAKgB,gBAAkBhB,KAAKgB,cAAcoD,SAASC,EAAOX,KAE5DY,EAAa,I,CAEjB,OAAOA,C,CAGTC,oBACEvE,KAAKwE,aAAexE,KAAK0C,GAAG+B,cAAc,4BAC1CzE,KAAKwC,WAAaxC,KAAK0C,GAAG+B,cAAc,mBACxCzE,KAAKC,SAAWD,KAAKuB,WAAa,IAAMmD,IAExC,KAAM1E,KAAKwE,aAAc,CACvBxE,KAAK2C,YAAc3C,KAAKwE,aAAazB,UACrC/C,KAAK2C,YAAc3C,KAAK2C,YAAYgC,QAAQ,UAAW,K,EAI3DC,oBACE,GAAI5E,KAAK6E,QACPC,EAAeC,KACb/E,KACA,CAAC,SACDA,KAAKgF,aAAehF,KAAKiF,kBACzBjF,KAAK6E,Q,CAIXK,mBACElF,KAAK2B,gBAEL,GACE3B,KAAK2C,aACL3C,KAAKuB,YACLvB,KAAK8B,cACL9B,KAAK8B,aAAae,YAAY7C,KAAKuB,YAEnCvB,KAAK4C,WAAa,I,CAGtBuC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,cAAetF,KAAK4C,aAGtBwC,EAAA,OAAKG,IAAMC,GAASxF,KAAKyC,UAAY+C,GACnCJ,EAAA,QAAMjD,KAAK,Y,yMAOrBsD,EAAS1F,EAA8C,CACrD,oBACA,eACA,gBACA,SACA,cACA,gBAEF,IAAI2E,EAAY,E"}

package/dist/nano-components/p-67ab5a5f.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as s,h as i,a as e,g as n}from"./p-d6a04b3a.js";import{W as a}from"./p-a26bdb65.js";const h=class{constructor(i){t(this,i);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.currentPage=null;this.canGoPrev=false;this.canGoNext=false;this.show=true;this.tplRenderFn=undefined;this.indexResults=null;this.infiniteScroll=false;this.maxToShow=null}currentPageChange(){}infiniteScrollChange(){this.show=!this.infiniteScroll}async nextPage(){}async prevPage(){}async goToPage(t){console.info(t)}updateContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.templateStr||!this.outputTo||!this.indexResults){this.show=false;return}}componentWillLoad(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');if(!!this.templateSlot)this.templateStr=this.templateSlot.innerHTML}componentDidLoad(){this.updateContent()}render(){return i(e,{class:{"show-pagination":this.show}},i("div",{ref:t=>this.outputEle=t},i("slot",{name:"output"})))}get el(){return n(this)}static get watchers(){return{currentPage:["currentPageChange"],infiniteScroll:["infiniteScrollChange"]}}};a(h,["indexResults","filterChanged","tplRenderFn"]);export{h as nano_algolia_pagination};
-//# sourceMappingURL=p-67ab5a5f.entry.js.map

package/dist/nano-components/p-67ab5a5f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AlgoliaPagination","currentPageChange","infiniteScrollChange","this","show","infiniteScroll","async","page","console","info","updateContent","outputTo","outputSlot","outputEle","templateStr","indexResults","componentWillLoad","templateSlot","el","querySelector","innerHTML","componentDidLoad","render","h","Host","class","ref","div","name","Wormhole"],"sources":["./src/components/algolia/algolia-pagination.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\nimport type { IndexResult } from '../../interface';\n\n/**\n * Displays results from Algolia searches.\n * TODO / WIP */\n@Component({\n  tag: 'nano-algolia-pagination',\n  shadow: true,\n})\nexport class AlgoliaPagination {\n  @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n  private outputEle: HTMLDivElement;\n  private outputSlot: HTMLElement;\n  private outputTo: HTMLElement;\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n\n  @State() currentPage: number = null;\n  @State() canGoPrev: boolean = false;\n  @State() canGoNext: boolean = false;\n  @State() show: boolean = true;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() indexResults: IndexResult = null;\n  @State() infiniteScroll: boolean = false;\n\n  /** Max number of page numbers to show */\n  @Prop() maxToShow: number = null;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n  @Watch('currentPage')\n  currentPageChange() {}\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.show = !this.infiniteScroll;\n  }\n\n  /** Go to next page from current */\n  @Method()\n  async nextPage() {}\n\n  /** Go to previous page from current */\n  @Method()\n  async prevPage() {}\n\n  /** Go to a particular page */\n  @Method()\n  async goToPage(page: number) {\n    console.info(page);\n  }\n\n  private updateContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n    if (!this.templateStr || !this.outputTo || !this.indexResults) {\n      this.show = false;\n      return;\n    }\n\n    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n    //   orig: { ...this.currentIndex.origFilters[this.filterName] },\n    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }\n    // });\n  }\n\n  componentWillLoad() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n    if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n    // this.boundChangeEvent = this.handleChangeEvent.bind(this);\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-pagination': this.show,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole(AlgoliaPagination as WormholeConsumerConstructor, [\n  'indexResults',\n  'filterChanged',\n  'tplRenderFn',\n]);\n"],"mappings":";;;0GAsBaA,EAAiB,M,2FASG,K,eACD,M,eACA,M,UACL,K,6CAEY,K,oBACF,M,eAGP,I,CAQ5BC,oBAAiB,CAGjBC,uBACEC,KAAKC,MAAQD,KAAKE,c,CAKpBC,iBAAc,CAIdA,iBAAc,CAIdA,eAAeC,GACbC,QAAQC,KAAKF,E,CAGPG,gBACNP,KAAKQ,SAAWR,KAAKS,YAAcT,KAAKU,UACxC,IAAKV,KAAKW,cAAgBX,KAAKQ,WAAaR,KAAKY,aAAc,CAC7DZ,KAAKC,KAAO,MACZ,M,EASJY,oBACEb,KAAKc,aAAed,KAAKe,GAAGC,cAAc,4BAC1ChB,KAAKS,WAAaT,KAAKe,GAAGC,cAAc,mBAExC,KAAMhB,KAAKc,aAAcd,KAAKW,YAAcX,KAAKc,aAAaG,S,CAIhEC,mBACElB,KAAKO,e,CAGPY,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,kBAAmBtB,KAAKC,OAG1BmB,EAAA,OAAKG,IAAMC,GAASxB,KAAKU,UAAYc,GACnCJ,EAAA,QAAMK,KAAK,Y,mIAQrBC,EAAS7B,EAAkD,CACzD,eACA,gBACA,uB"}

package/dist/nano-components/p-688f1a55.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as i,c as t,h as s,g as e}from"./p-d6a04b3a.js";import{g as o}from"./p-74a7fc4f.js";import{P as n}from"./p-cd1fd454.js";import{a as r}from"./p-f88fa15c.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";let a=0;const d=class{constructor(s){i(this,s);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${a++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=i=>{if(["ArrowDown","ArrowUp"," "].includes(i.key)){this.show();i.preventDefault();i.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.containingElement=undefined;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=undefined;this.eventType=undefined}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=i.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();if(!i.target.parentElement)return;this.panel.style.minHeight=i.target.parentElement.scrollHeight+"px"}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){var i;this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof((i=this.positioner)===null||i===void 0?void 0:i.showPopover)==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{this.popover.show()}this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}setTimeout((()=>{var i;if(!this.open&&typeof((i=this.positioner)===null||i===void 0?void 0:i.hidePopover)==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(i){var t;const s=o();if(i&&((t=i.composedPath())===null||t===void 0?void 0:t.length)){const t=i.composedPath().includes(this.containingElement);return!i.composedPath().includes(this.accessibleTrigger)&&t}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let i;this.accessibleTrigger=null;if(!this.tetherTo){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));i=t.map(r)[0]}else{i=r(this.tetherTo)}if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=i}}handleDocumentKeyDown(i){if(i.key==="Escape"){this.hide();return}if(i.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(i.key)){if(!this.open||this.focusEleInDropDwn(i))return;i.preventDefault();this.menu.setFocus();return}const t=i.composedPath();if(this.menu&&t.length&&!t.find((i=>i!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(i.type,i));return}}handleDocumentMouseDown(i){if(!this.focusEleInDropDwn(i)){this.hide();return}}createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:i=>this.positioner=i,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},s("div",{ref:i=>this.panel=i,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("span",{id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=h;export{d as nano_dropdown};
-//# sourceMappingURL=p-688f1a55.entry.js.map

package/dist/nano-components/p-688f1a55.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","dropDownIds","Dropdown","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","togglePanel","autoOpen","open","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","skidding","distance","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","closeOnSelect","tagName","toLowerCase","async","nanoShow","emit","defaultPrevented","_a","positioner","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","containingElement","closest","tetherTo","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","ePath","find","el","dispatchEvent","KeyboardEvent","type","trigger","destroy","Popover","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","getAttribute","undefined","dialogTitle"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown 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    if (this.ignoreOpenWatcher) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    // @ts-ignore\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      // @ts-ignore\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      // @ts-ignore\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        // @ts-ignore\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div\n          ref={(el) => (this.positioner = el)}\n          class=\"dropdown__positioner\"\n          // @ts-ignore\n          popover=\"manual\"\n          id={this.dropdownId + '-positioner'}\n        >\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-6c4171fa.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as i,c as t,h as e,a as s,g as n}from"./p-d6a04b3a.js";import{d as r}from"./p-842cf127.js";import{c as o}from"./p-ee045579.js";import{d as a}from"./p-7bff5224.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical]):not([disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:flex;content:"";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}';const d=class{get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();r(this.host,{onMove:(i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}})};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);requestAnimationFrame((()=>this.shouldAnimate=true))}};this.positionInPixels=undefined;this.vertical=false;this.disabled=false;this.primary=undefined;this.snap=undefined;this.snapThreshold=12;this.animationDuration=.6;this.handlePositionChange=a(this.handlePositionChange.bind(this),100)}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let r=s;let o=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const h=()=>{o+=1/e;r=a(o,s,n,t);if(i>s&&r>=i||i<s&&r<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=r;requestAnimationFrame(h)};this.shouldAnimate=false;this.isAnimating=true;requestAnimationFrame(h)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){if(!window["ResizeObserver"])return;this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){requestAnimationFrame((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const r="auto";if(this.primary==="end"){i[t]=`${r} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${r}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};d.style=h;export{d as nano_split_pane};
-//# sourceMappingURL=p-6c4171fa.entry.js.map

package/dist/nano-components/p-70747f20.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{e as t,f as e}from"./p-d6a04b3a.js";const n=(t,e,n)=>{const s=t.get(e);if(!s){t.set(e,[n])}else if(!s.includes(n)){s.push(n)}};const s=(t,e)=>{let n;return(...s)=>{if(n){clearTimeout(n)}n=setTimeout((()=>{n=0;t(...s)}),e)}};const o=t=>!("isConnected"in t)||t.isConnected;const r=s((t=>{for(let e of t.keys()){t.set(e,t.get(e).filter(o))}}),2e3);const c=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:e=>{const o=t();if(o){n(s,e,o)}},set:t=>{const n=s.get(t);if(n){s.set(t,n.filter(e))}r(s)},reset:()=>{s.forEach((t=>t.forEach(e)));r(s)}}};const i=(t,e=((t,e)=>t!==e))=>{let n=new Map(Object.entries(t!==null&&t!==void 0?t:{}));const s={dispose:[],get:[],set:[],reset:[]};const o=()=>{n=new Map(Object.entries(t!==null&&t!==void 0?t:{}));s.reset.forEach((t=>t()))};const r=()=>{s.dispose.forEach((t=>t()));o()};const c=t=>{s.get.forEach((e=>e(t)));return n.get(t)};const i=(t,o)=>{const r=n.get(t);if(e(o,r,t)){n.set(t,o);s.set.forEach((e=>e(t,o,r)))}};const f=typeof Proxy==="undefined"?{}:new Proxy(t,{get(t,e){return c(e)},ownKeys(t){return Array.from(n.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,e){return n.has(e)},set(t,e,n){i(e,n);return true}});const a=(t,e)=>{s[t].push(e);return()=>{u(s[t],e)}};const p=(e,n)=>{const s=a("set",((t,s)=>{if(t===e){n(s)}}));const o=a("reset",(()=>n(t[e])));return()=>{s();o()}};const d=(...t)=>{const e=t.reduce(((t,e)=>{if(e.set){t.push(a("set",e.set))}if(e.get){t.push(a("get",e.get))}if(e.reset){t.push(a("reset",e.reset))}if(e.dispose){t.push(a("dispose",e.dispose))}return t}),[]);return()=>e.forEach((t=>t()))};const l=t=>{const e=n.get(t);s.set.forEach((n=>n(t,e,e)))};return{state:f,get:c,set:i,on:a,onChange:p,use:d,dispose:r,reset:o,forceUpdate:l}};const u=(t,e)=>{const n=t.indexOf(e);if(n>=0){t[n]=t[t.length-1];t.length--}};const f=(t,e)=>{const n=i(t,e);n.use(c());return n};export{f as c};
-//# sourceMappingURL=p-70747f20.js.map

package/dist/nano-components/p-7670058b.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as e,c as a,h as t,g as r}from"./p-d6a04b3a.js";import{M as i}from"./p-2234694a.js";import{l as n,u as s}from"./p-b27b56d3.js";import{h as o}from"./p-dc565459.js";import{w as d}from"./p-9bfdee71.js";import{C as l}from"./p-dd5687db.js";import"./p-f88fa15c.js";import"./p-cdfc507e.js";import"./p-7bff5224.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline-end:auto;inset-inline-start:0;width:100%;height:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline-end:auto;inset-inline-start:0;width:100%;height:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline-end:auto;inset-inline-start:0;width:var(--size);height:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline-end:0;inset-inline-start:auto;width:var(--size);height:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{-webkit-padding-before:var(--body-spacing);padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){-webkit-margin-end:var(--nano-spacing-xsmall, 4px);margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const c=class{constructor(t){e(this,t);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7);this.handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};this.handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.noDismiss=false;this.hasFooter=undefined;this.open=false;this.label=undefined;this.placement="end";this.contained=false;this.noHeader=false;this.storeId=undefined;this.storeMethod="url-hash";this.noUserDismiss=false;this.hoist=false}get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();n(this.host)}if(this.open&&this.contained){this.modal.deactivate();s(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();n(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();s(this.host)}const e=this.originalTrigger;if(typeof(e===null||e===void 0?void 0:e.focus)==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){s(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();n(this.host)}}}render(){return t("div",{ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":o(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{class:"drawer__main"},!this.noHeader&&t("nano-sticker",null,t("header",{part:"header",class:"drawer__header"},t("h2",{part:"title",class:"drawer__title",id:"title"},t("slot",{name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{part:"header-actions",class:"drawer__header-actions"},t("slot",{name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/times",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{part:"body",class:"drawer__body"},t("slot",null)),t("nano-sticker",{position:"bottom"},t("footer",{part:"footer",class:"drawer__footer"},t("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))))}get host(){return r(this)}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};c.style=h;export{c as nano_drawer};
-//# sourceMappingURL=p-7670058b.entry.js.map

package/dist/nano-components/p-7670058b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["drawerCss","Drawer","this","handleDocumentKeyDown","event","contained","key","modal","isActive","open","stopImmediatePropagation","requestClose","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","drawer","hidden","nanoAfterShow","emit","nanoAfterHide","handleSlotChange","hasFooter","hasSlot","host","_panel","ele","removeEventListener","addEventListener","handleHoistChange","hoist","Array","from","document","body","children","includes","prepend","async","undefined","waitForEvent","source","nanoRequestClose","nanoRquestClose","defaultPrevented","noUserDismiss","noDismiss","setTimeout","hide","handleNoModalChange","activate","lockBodyScrolling","deactivate","unlockBodyScrolling","nanoShow","addOpenListeners","originalTrigger","activeElement","autoFocusTarget","querySelector","removeAttribute","requestAnimationFrame","nanoInitialFocus","focus","preventScroll","setAttribute","nanoHide","removeOpenListeners","trigger","connectedCallback","Modal","disconnectedCallback","componentWillLoad","show","storeId","ComponentStore","init","storeMethod","componentDidLoad","render","h","ref","part","class","placement","noHeader","onClick","tabindex","role","label","id","name","length","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["./src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/base' as base;\n@use '../../global/style/utilities/globals' as global;\n@use '../../global/style/nano-theme/colours' as color;\n@use '../../global/style/nano-theme/layers' as layer;\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to #{layer.$layer-shadow-xlarge};\n  * @prop --scrim-color: overlay colour of alert display. Defaults to #{layer.$layer-overlay-dark};\n  * @prop --footer-background: Defaults to #{map.get(color.$colors, lightgrey)};\n  * @prop --header-spacing: The amount of padding to use for the header.\n  * @prop --body-spacing: The amount of padding to use for the body.\n  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{base.$spacing-medium} #{base.$spacing-large}\n  * @prop --header-button-color: defaults to #{map.get(color.$colors, palegrey)};\n  */\n\n  --size: 25rem;\n  --panel-background: white;\n  --panel-shadow: #{layer.$layer-shadow-xlarge};\n  --scrim-color: #{layer.$layer-overlay-dark};\n  --header-button-color: #{map.get(color.$colors, palegrey)};\n  --footer-background: #{map.get(color.$colors, lightgrey)};\n  --header-background: var(--panel-background);\n  --header-spacing: #{base.$spacing-large};\n  --body-spacing: #{base.$spacing-large};\n  --footer-spacing: #{base.$spacing-medium} #{base.$spacing-large};\n  --dir: 1;\n}\n\n@include mx.rtl-host() {\n  --dir: -1;\n}\n\n.drawer {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  &--fixed {\n    position: fixed;\n    z-index: #{layer.$layer-index-modal};\n  }\n}\n\n.drawer__panel {\n  position: absolute;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background);\n  box-shadow: var(--panel-shadow);\n  pointer-events: all;\n  transition: #{base.$transition-fast} opacity, #{base.$transition-fast} transform;\n  display: flex;\n  flex-direction: column;\n\n  @media (forced-colors: active) {\n    border: solid 1px #{map.get(color.$colors, black)};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  .drawer--nodismiss & {\n    animation: cannotClose 0.25s ease-in-out 1;\n\n    @keyframes cannotClose {\n      0% {\n        transform: scale(1);\n      }\n\n      50% {\n        transform: scale(1.08);\n      }\n\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n\n  .drawer--top & {\n    inset-block: 0 auto;\n    inset-inline-end: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--bottom & {\n    inset-block: auto 0;\n    inset-inline-end: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--top.drawer--open &,\n  .drawer--bottom.drawer--open & {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .drawer--start & {\n    inset-block: 0 auto;\n    inset-inline-end: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * -100%));\n  }\n\n  .drawer--end & {\n    inset-block: 0 auto;\n    inset-inline-end: 0;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * 100%));\n  }\n\n  .drawer--start.drawer--open &,\n  .drawer--end.drawer--open & {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.drawer__header {\n  inline-size: 100%;\n  display: flex;\n  background-color: var(--header-background);\n\n  [stuck] & {\n    box-shadow: #{layer.$layer-shadow-medium};\n  }\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: #{base.$fontsize-large};\n  line-height: 1.2;\n  padding: var(--header-spacing);\n  margin: 0;\n}\n\n.drawer__header-actions {\n  flex-shrink: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: #{base.$spacing-xsmall};\n  padding: 0 var(--header-spacing);\n\n  .drawer__close,\n  ::slotted(nano-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{base.$fontsize-xlarge};\n\n    --color: var(--header-button-color);\n  }\n}\n\n.drawer__main {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1 1 auto;\n}\n\n.drawer__body {\n  display: block;\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  padding-block: 0 var(--body-spacing);\n  padding-inline: var(--body-spacing);\n\n  .drawer:not(.drawer--has-header) & {\n    padding-block-start: var(--body-spacing);\n  }\n}\n\n.drawer__footer {\n  inline-size: 100%;\n  text-align: end;\n  padding: var(--footer-spacing);\n  background: var(--footer-background);\n  inset-block-start: 1px;\n  position: relative;\n\n  ::slotted(button:not(:last-of-type)) {\n    margin-inline-end: #{base.$spacing-xsmall};\n  }\n\n  .drawer:not(.drawer--has-footer) & {\n    display: none;\n  }\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  pointer-events: all;\n  backdrop-filter: blur(#{layer.$layer-overlay-blur});\n  opacity: 0;\n  transition: #{base.$transition-fast} opacity;\n\n  .drawer--open & {\n    opacity: 1;\n  }\n\n  .drawer--contained & {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n  Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n *\n * @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n */\n\n@Component({\n  tag: 'nano-drawer',\n  shadow: true,\n  styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n  // Private State\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  private originalTrigger: HTMLElement | null;\n  private drawer: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n\n  get panel() {\n    return this._panel;\n  }\n  set panel(ele: HTMLElement) {\n    if (this._panel) {\n      this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n    }\n    if (!ele) return;\n\n    ele.addEventListener('transitionend', this.handleTransitionEnd);\n    this._panel = ele;\n  }\n  private _panel: HTMLElement;\n\n  @State() noDismiss = false;\n  @State() hasFooter: boolean;\n\n  // Public API\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @Prop({ reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /** The direction from which the drawer will open. */\n  @Prop({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' =\n    'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @Prop({ reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop({ reflect: true }) noHeader = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || Array.from(document.body.children).includes(this.host))\n      return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the drawer opens. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted when the drawer closes. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the drawer closes and all animations are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted after the drawer opens and all animations are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer opens and is ready to receive focus. Calling\n   * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n   */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /**\n   * Emitted when the user attempts to\n   * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n   * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n   * destructive behavior such as data loss.\n   */\n  @Event() nanoRquestClose: EventEmitter<{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }>;\n\n  /** Shows the drawer. */\n  @Method()\n  async show() {\n    if (this.open) return undefined;\n\n    this.open = true;\n    return waitForEvent(this.host, 'nanoAfterShow');\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (!this.open) return undefined;\n\n    this.open = false;\n    return waitForEvent(this.host, 'nanoAfterHide');\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {\n      this.noDismiss = true;\n      setTimeout(() => (this.noDismiss = false), 250);\n      return;\n    }\n\n    this.hide();\n  }\n\n  // Prop Change Handlers\n\n  @Watch('contained')\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.nanoShow.emit();\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      const autoFocusTarget = this.host.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n        if (!nanoInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({\n              preventScroll: true,\n            });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      this.nanoAfterShow.emit();\n      return;\n    }\n\n    // Hide\n    this.nanoHide.emit();\n    this.removeOpenListeners();\n\n    if (!this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (typeof trigger?.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  // Event Handling\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      if (!this.open) {\n        this.drawer.hidden = true;\n        // Now that the dialog is hidden, restore the overlay and panel for next time\n        this.overlay.hidden = false;\n        this.panel.hidden = false;\n      }\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  // Component Lifecycle\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(ele) => (this.drawer = ele)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          [`drawer--${this.placement}`]: true,\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': hasSlot(this.host, 'footer'),\n          'drawer--has-header': !this.noHeader,\n          'drawer--nodismiss': this.noDismiss,\n        }}\n      >\n        <div\n          ref={(ele) => (this.overlay = ele)}\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          onClick={() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        />\n\n        <div\n          ref={(ele) => (this.panel = ele)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : undefined}\n          aria-labelledby={!this.noHeader ? 'title' : undefined}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer__main\">\n            {!this.noHeader && (\n              <nano-sticker>\n                <header part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    {/* If there's no label, use an invisible character to prevent the header from collapsing */}\n                    <slot name=\"label\">\n                      {this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\" />\n\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        part=\"close-button\"\n                        exportparts=\"base:close-button__base\"\n                        class=\"drawer__close\"\n                        iconName=\"light/times\"\n                        label=\"Close\"\n                        onClick={() => this.requestClose('close-button')}\n                      />\n                    )}\n                  </div>\n                </header>\n              </nano-sticker>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <nano-sticker position=\"bottom\">\n              <footer part=\"footer\" class=\"drawer__footer\">\n                <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n              </footer>\n            </nano-sticker>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-79fff4fd.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as i,c as a,h as o,a as t,g as s}from"./p-d6a04b3a.js";import{M as e}from"./p-2234694a.js";import{l as n,u as r}from"./p-b27b56d3.js";import{h as d}from"./p-dc565459.js";import{C as l}from"./p-dd5687db.js";import"./p-f88fa15c.js";import"./p-cdfc507e.js";import"./p-7bff5224.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{-webkit-border-before:5px solid var(--tint-color);border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{-webkit-padding-before:var(--body-padding-v);padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){-webkit-margin-end:var(--nano-spacing-small, 8px) !important;margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let c=0;const p=class{constructor(o){i(this,o);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(!this.open)this.dialog.hidden=true}};this.handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label=undefined;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeId=undefined;this.storeMethod="url-hash";this.hoist=false}get panel(){return this._panel}set panel(i){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}i.addEventListener("transitionend",this.handleTransitionEnd);this._panel=i}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.open=true;this.modal.activate();n(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){const i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const a=i.src;i.src=a}}))}connectedCallback(){this.handleHoistChange();this.modal=new e(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return o(t,null,o("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:i=>this.dialog=i},o("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),o("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},o("div",{class:"dialog__body-wrap"},!this.noHeader&&o("nano-sticker",null,o("header",{part:"header",class:"dialog__header"},o("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},o("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&o("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),o("div",{part:"body",class:"dialog__body"},o("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&o("nano-sticker",{position:"bottom"},o("footer",{part:"footer",class:"dialog__footer"},o("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&o("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};p.style=h;export{p as nano_dialog};
-//# sourceMappingURL=p-79fff4fd.entry.js.map

package/dist/nano-components/p-7c82af28.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{h as i,g as t,a as e,r as n,c as s}from"./p-d6a04b3a.js";const r=(()=>{try{return!!new CSSStyleSheet}catch(i){return false}})();const o=new WeakMap;function h(n={}){return(s,h)=>{if(!n.cacheKeyProperty){n.cacheKeyProperty=h}const{componentWillLoad:d,render:u,componentWillRender:g}=s;if(!d)console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${s.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);if(r){const i=i=>{if(!i[n.cacheKeyProperty]||o.get(i)&&o.get(i)===i[n.cacheKeyProperty])return;o.set(i,i[n.cacheKeyProperty]);const e=t(i);const r=typeof i[h]==="function"?i[h]():i[h];const a=e.shadowRoot||document;a.adoptedStyleSheets=[...a.adoptedStyleSheets||[],c(i,s,r,n)]};s.componentWillLoad=function(){const t=d&&d.call(this);i(this);return t};s.componentWillRender=function(){const t=g&&g.call(this);i(this);return t}}else{s.render=function(){const t=typeof this[h]==="function"?this[h]():this[h];let n=u.call(this);if(l(n)){a(n,s.constructor.name,t)}else{n=i(e,null,n);if(!("attachShadow"in HTMLElement.prototype)){a(n,s.constructor.name,t)}else{if(!s.__constructableStyle){const i=document.createElement("style");i.setAttribute("type","text/css");i.setAttribute("constructible-style",s.constructor.name);i.innerHTML=t;s.__constructableStyle=i;document.head.appendChild(i)}}}return n}}}}function a(t,e,n){(d(t)||[]).push(i("style",{type:"text/css","constructible-style":e},n))}function c(i,t,e,n){if(!t.__constructableStyle){t.__constructableStyle={}}const s=i[n.cacheKeyProperty];if(!t.__constructableStyle[s]){t.__constructableStyle[s]=new CSSStyleSheet;t.__constructableStyle[s].replace(e)}return t.__constructableStyle[s]}function l(i){for(const t in i){if(i.hasOwnProperty(t)){if(i[t]===e){return true}}}return false}function d(i){for(const t in i){if(i.hasOwnProperty(t)){if(Array.isArray(i[t])){return i[t]}}}}const u=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:"grid size: s";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{display:none;background:rgba(126, 195, 241, 0.25)}';var g=undefined&&undefined.__decorate||function(i,t,e,n){var s=arguments.length,r=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(i,t,e,n);else for(var h=i.length-1;h>=0;h--)if(o=i[h])r=(s<3?o(r):s>3?o(t,e,r):o(t,e))||r;return s>3&&r&&Object.defineProperty(t,e,r),r};var p=undefined&&undefined.__metadata||function(i,t){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(i,t)};const f=class{constructor(i){n(this,i);this.grids=[];this.styles=()=>{const i=`\n      ${this.grids.map((i=>`\n          @container (min-width: ${!!Number(i.breakpoint+1)?Number(i.breakpoint)+1+"px":i.breakpoint}) {\n            [cache-key="${this.cacheKey}"].grid {\n              --current-grid-size: "grid size: ${i.name}";\n              ${i.template?`grid-template: ${i.template};`:`grid-template-columns: repeat(${i.cols}, minmax(calc((100% / ${i.cols}) - var(--grid-col-gap)), 1fr));`}\n            }\n            ${[...Array(i.cols)].map(((t,e)=>{const n=e+1;return`\n                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-col-start-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-start-${n}"]) {\n                    grid-column-start: ${n} !important;\n                  }\n                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-col-span-${n}"],\n                  ::slotted([grid-states~="${i.name}-col-span-${n}"]) {\n                    grid-column-end: span ${n} !important;\n                  }\n              `})).join("")}\n              ${[...Array(24)].map(((t,e)=>{const n=e+1;return`\n                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-row-start-${n}"],\n                    ::slotted([grid-states~="${i.name}-row-start-${n}"]) {\n                      grid-row-start: ${n} !important;\n                    }\n                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${i.name}-row-span-${n}"],\n                    ::slotted([grid-states~="${i.name}-row-span-${n}"]) {\n                      grid-row-end: span ${n} !important;\n                    }\n                `})).join("")}\n            ${this.showHelper?`\n                [cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${i.cols}) {\n                  display: block !important;\n                }\n              `:""}\n          }\n        `)).join("")}\n    `;return i};this.cacheKey=undefined;this.sSize=300;this.mSize=550;this.lSize=800;this.xlSize=1e3;this.sCols=undefined;this.mCols=undefined;this.lCols=undefined;this.xlCols=undefined;this.xxlCols=undefined;this.sTpl=undefined;this.mTpl=undefined;this.lTpl=undefined;this.xlTpl=undefined;this.xxlTpl=undefined;this.showHelper=false}constructSizeArray(){this.grids=[];if(this.sCols)this.grids.push({cols:this.sCols,breakpoint:0,name:"s",template:this.sTpl});if(this.mCols)this.grids.push({cols:this.mCols,breakpoint:this.sSize,name:"m",template:this.mTpl});if(this.lCols)this.grids.push({cols:this.lCols,breakpoint:this.mSize,name:"l",template:this.lTpl});if(this.xlCols)this.grids.push({cols:this.xlCols,breakpoint:this.lSize,name:"xl",template:this.xlTpl});if(this.xxlCols)this.grids.push({cols:this.xxlCols,breakpoint:this.xlSize,name:"xxl",template:this.xxlTpl});this.cacheKey=this.grids.map((i=>`${i.cols}-${i.breakpoint}-${i.template||""}`)).join("")+"-helper-"+this.showHelper}componentWillLoad(){this.constructSizeArray()}render(){return i(e,null,i("div",{part:"grid",class:"grid","cache-key":this.cacheKey},i("slot",null)),this.showHelper&&i("div",{class:"grid grid--helper",part:"helper","cache-key":this.cacheKey},[...Array(24)].map((()=>i("div",{class:"grid__helper-item"})))))}static get watchers(){return{sTpl:["constructSizeArray"],mTpl:["constructSizeArray"],lTpl:["constructSizeArray"],xlTpl:["constructSizeArray"],xxlTpl:["constructSizeArray"],sSize:["constructSizeArray"],mSize:["constructSizeArray"],lSize:["constructSizeArray"],xlSize:["constructSizeArray"],sCols:["constructSizeArray"],mCols:["constructSizeArray"],lCols:["constructSizeArray"],xlCols:["constructSizeArray"],xxlCols:["constructSizeArray"],showHelper:["constructSizeArray"]}}};g([h({cacheKeyProperty:"cacheKey"}),p("design:type",Object)],f.prototype,"styles",void 0);f.style=u;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";const b=class{constructor(i){n(this,i);this.nanoImgWillLoad=s(this,"nanoImgWillLoad",7);this.nanoImgDidLoad=s(this,"nanoImgDidLoad",7);this.nanoImgError=s(this,"nanoImgError",7);this._srcSet={};this.onLoad=()=>{this.nanoImgDidLoad.emit();setTimeout((()=>this.hasLoaded=true),50)};this.onError=()=>{this.nanoImgError.emit()};this.onResize=i=>{Object.entries(i.detail).forEach((([i,t])=>{this._srcSet[i].active=t}));const t=[];Object.keys(this._srcSet).sort().forEach((i=>{if(this._srcSet[i].active)t.push(this._srcSet[i].src)}));if(t.length)this._src=t.slice(-1)[0];else this._src=this.src};this.loadSrc=undefined;this.loadError=undefined;this.hasLoaded=false;this.imgStates=null;this._src=undefined;this.alt=undefined;this.src=undefined;this.srcSet=undefined;this.lazy=true;this.background=undefined;this.autoHeight="content"}_srcChanged(){this.hasLoaded=false;this.addIO()}srcChanged(){this._src=this.src}srcSetChanged(){if(!this.srcSet)return;delete this._srcSet;this._srcSet={};this.imgStates=this.srcSet.split(",").map((i=>{const[t,e]=i.split(" ").filter((i=>i.length));this._srcSet[t]={src:e,active:false};return t})).join(", ")}lazyChanged(){if(!this.lazy)this.load()}addIO(){if(!this._src||this.hasLoaded)return;if(!this.lazy){this.load();return}if(typeof window!=="undefined"&&"IntersectionObserver"in window){this.removeIO();this.io=new IntersectionObserver((i=>{if(i[0].isIntersecting){this.load();this.removeIO()}}));this.io.observe(this.host)}else setTimeout((()=>this.load()),200)}load(){this.loadError=this.onError;this.loadSrc=this._src;this.nanoImgWillLoad.emit()}removeIO(){if(this.io){this.io.disconnect();this.io=undefined}}connectedCallback(){this.srcChanged();this.srcSetChanged();this.lazyChanged()}componentDidLoad(){this.addIO()}disconnectedCallback(){this.removeIO()}render(){const t=!!this.loadSrc?{"background-image":`url(${this.loadSrc})`}:{};return i("div",{class:"img"},i("nano-skeleton",{class:"img__loader"}),!!this.background&&i("div",{class:{loaded:this.hasLoaded,img__bg:true,"no-height":this.autoHeight==="image"},style:t},i("slot",null)),i("img",{class:{img__image:true,loaded:this.hasLoaded,hide:this.background,"no-height":this.autoHeight==="content"},decoding:"async",src:this.loadSrc,loading:undefined,alt:this.alt,onLoad:this.onLoad,onError:this.loadError}),i("nano-resize-observe",{class:"img__observer",onNanoResizeStateChange:this.onResize,states:this.imgStates}))}get host(){return t(this)}static get watchers(){return{_src:["_srcChanged"],src:["srcChanged"],srcSet:["srcSetChanged"],lazy:["lazyChanged"]}}};b.style=m;export{f as nano_grid,b as nano_img};
-//# sourceMappingURL=p-7c82af28.entry.js.map

package/dist/nano-components/p-87329424.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as o}from"./p-d6a04b3a.js";const e=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;inset-block-start:0 !important;inset-inline-start:0 !important;inline-size:100% !important;block-size:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){object-fit:contain !important}";const i=class{constructor(o){t(this,o);this.handleSlotChange=()=>{this.setAspectRatio()};this.aspectRatio="16:9";this.fit="cover"}handleAspectRatioChange(){this.setAspectRatio()}setAspectRatio(){if(typeof this.aspectRatio!=="string"){console.warn("aspectRatio should be a string.");return}else if(!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)){console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');return}const t=this.aspectRatio.split(":");const o=parseInt(t[0]);const e=parseInt(t[1]);this.base.style.paddingBottom=o&&e?`${e/o*100}%`:null}render(){return o("div",{ref:t=>this.base=t,part:"base",class:{"aspect-ratio":true,"aspect-ratio--cover":this.fit==="cover","aspect-ratio--contain":this.fit==="contain"}},o("slot",{onSlotchange:this.handleSlotChange}))}static get watchers(){return{aspectRatio:["handleAspectRatioChange"]}}};i.style=e;export{i as nano_aspect_ratio};
-//# sourceMappingURL=p-87329424.entry.js.map

package/dist/nano-components/p-8fe51abf.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-var e=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e["default"]:e}function o(e,n,o){return o={path:n,exports:{},require:function(e,n){return r()}},e(o,o.exports),o.exports}function r(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}export{e as a,o as c,n as g};
-//# sourceMappingURL=p-8fe51abf.js.map