@nanoporetech-digital/components 4.10.0 → 5.0.0

package/dist/nano-components/p-ebb98a9e.entry.js.map

@@ -0,0 +1 @@
+{"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-fc585ea2.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{j as t,h as n,F as e,g as o,e as i,r,c as s,d as a,a as l}from"./p-f6a8467a.js";import{a as d}from"./p-ee045579.js";import{d as c}from"./p-9746b0a5.js";import{c as h}from"./p-9ebbb814.js";const b="nano-tbl";const p=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const f=t=>{if(t!=null){if(p(t,"ArrayBuffer")||p(t,"MessagePort")||p(t,"ImageBitmap")||p(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(f)}return f(t.buffer)}}return[]};let u=0;let _=0;const m=new Map;const g=new Map;const w=(n,e,o)=>{const i=new Worker(n,{name:e});i.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const i=n[1];const r=n[2];if(e===o){const e=n[3];const[o,s,a]=m.get(i);m.delete(i);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);s(n)}else{if(a){a.forEach((t=>g.delete(t)))}o(r)}}else if(e===o+".cb"){try{g.get(i)(...r)}catch(n){t(n)}}}}));return i};const v=(t,n,e)=>(...o)=>new Promise(((i,r)=>{let s=u++;let a=0;let l=o.length;let d=[i,r];m.set(s,d);for(;a<l;a++){if(typeof o[a]==="function"){const t=_++;g.set(t,o[a]);o[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,s,e,o],f(o));if(t.then){t.then(c)}else{c(t)}}));const y=import("./p-365c997a.js").then((t=>t.worker));const k=v(y,"stencil.table.worker","createWorkerStore");const x=v(y,"stencil.table.worker","syncConfigToWorker");const $=v(y,"stencil.table.worker","syncDataToWorker");const j=v(y,"stencil.table.worker","workerFilter");const O=v(y,"stencil.table.worker","workerSearch");const C=v(y,"stencil.table.worker","workerSort");function z(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!(t===null||t===void 0?void 0:t.sortCompareFn)){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const S=new WeakMap;async function I(t,n,e,o){const i={data:h({rows:[]}),config:h({columns:n}),general:h({workerId:null,scrollParent:e,host:t,isReady:o})};const r=await k(i.data.state.rows,z(i.config.state.columns));i.general.state.workerId=r;S.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)$(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)$(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)x(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)x(i.general.state.workerId,null)}});return i}function R(t){return S.get(t)}function T(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function M(t,n){const e=S.get(t);if(!e)return;const o=e.config.state.columns;const i=o.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const r=o.filter((t=>!t.type));n=n.map(((t,n)=>{if(r.length&&n===0){e.config.state.columns=o.map((n=>{if(r.includes(n)&&t[n.prop]&&!n.type){n.type=T(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{var e;const o=(e=new Date(t[n]))!==null&&e!==void 0?e:null;if(!!o&&Number(o))t[n]=Number(o)}));t["__index"]=n;t["__uuid"]=d(o.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return $(e.general.state.workerId,n)}function N(t,n){const e=S.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return x(e.general.state.workerId,z(n))}async function P(t,n){const e=S.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await O(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function B(t,n){const e=S.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await j(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function A(t,n,e){const o=S.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await C(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}function F(t,n){const e=H();const o=e.config.state.columns;const i=e.data.state.rows;const r=o[n];const s=r===null||r===void 0?void 0:r.prop;const a=i[t];const l=a?a[o[n].prop]:"";return{prop:s,cellModel:l,column:r,rowIndex:t,rowModel:a}}function D(t){const n=H();const e=n.data.state.rows;const o=e[t];return{rowModel:o,rowIndex:t}}function W(t,n){if(!n)return t;const e=Object.assign(Object.assign({},n),t);if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class=Object.assign(Object.assign({},n.class),e.class)}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"){e.class+=" "+n.class}}if(n.style){e.style=Object.assign(Object.assign({},n.style),e.style)}return e}function H(){return R(o(i()))}function E(t,n,e){var o;const i=Object.assign({},e);const r=(o=H().config.state.columns[n])===null||o===void 0?void 0:o.cellProperties;if(!r)return i;const s=F(t,n);const a=r(s);if(!a)return i;return W(i,a)}function J(t){const o=t===null||t===void 0?void 0:t.columnTemplate;return o?o(n,t):n(e,null,t.title)}const L=new WeakMap;const q=new WeakMap;function Z(t,n,e){if(L.get(t))return;const o=H();const i=o.general.state.scrollParent;const r=new IntersectionObserver((([t])=>{const o=t.rootBounds||document.scrollingElement.getBoundingClientRect();const r={};if(n==="start"){r.start=t.boundingClientRect.x-(o.x+i.scrollLeft)<0&&!t.isIntersecting}if(n==="end"){r.end=t.boundingClientRect.right>t.boundingClientRect.width&&!t.isIntersecting}if(!!e)e(r)}),{threshold:[1],rootMargin:"1px 0px 100px 0px",root:i===document.scrollingElement?null:i});L.set(t,r);if(o.general.state.isReady){r.observe(t)}else{o.general.state.host.addEventListener("nanoTblReady",(()=>{r.observe(t)}),{once:true})}}function U(t,n,e){if(q.get(t))return;const o=H();const i=o.general.state.scrollParent;const r=new IntersectionObserver((([t])=>{const o=t.rootBounds||document.scrollingElement.getBoundingClientRect();const r={};if(n==="top"){r.top=t.boundingClientRect.y-(o.y+i.scrollTop)<0&&!t.isIntersecting}if(n==="bottom"){const n=t.target.getBoundingClientRect();r.bottom=n.height+n.y>o.height&&!t.isIntersecting}if(!!e)e(r)}),{threshold:[1],rootMargin:"0px 100px 0px 100px",root:i===document.scrollingElement?null:i});q.set(t,r);if(o.general.state.isReady){r.observe(t)}else{o.general.state.host.addEventListener("nanoTblReady",(()=>{r.observe(t)}),{once:true})}}function Y(t,n,e=false){const o={[`${b}__${t}`]:true,[`${b}__pin`]:!!n,[`${b}__pin--top`]:n==="top",[`${b}__pin--bottom`]:n==="bottom"};if(e)return G(o);return o}function G(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function K(t){let n=getComputedStyle(t);const e=n.position==="absolute";const o=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let i=t;i=i.parentElement;){n=getComputedStyle(i);if(e&&n.position==="static"){continue}if(o.test(n.overflow+n.overflowY+n.overflowX))return i}return document.documentElement}function Q(t,n=100){const e=t.getBoundingClientRect();const o=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-o)/e.height*100)<n)}const V=({column:t,headRenderer:o,onColumnSortClick:i,onColumnPinned:r,defaults:s})=>{function a(n){let e;switch(t.order){case"asc":e="desc";break;case"desc":e=null;break;default:e="asc"}i(e,t.prop,n.target.closest("th"))}function l(){return!!s.sortable&&t.sortable!==false||!s.sortable&&t.sortable===true}let d={};if(t.columnProperties){d=t.columnProperties(t)||d}const c={class:Object.assign(Object.assign({},Y("th",o===null||o===void 0?void 0:o.pinned)),{[`${b}__pin--start`]:t.pinned==="start",[`${b}__pin--end`]:t.pinned==="end",[`${b}__ordered`]:!!t.order,[`${b}__filtered`]:t.filter!==undefined&&t.filter!==null})};let h=d?W(c,d):c;const p=J(t);if(!p)return n(e,null);h=Number(h.colSpan)>1?Object.assign(Object.assign({},h),{scope:"colgroup"}):Object.assign(Object.assign({},h),{scope:"col"});if(l()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";h=Object.assign(Object.assign({},h),{"aria-sort":n})}return n("th",Object.assign({},h,{ref:n=>{if(["end","start"].includes(t.pinned))Z(n,t.pinned,r);if(["top","bottom"].includes(o.pinned))U(n,o.pinned,r)},key:t.prop}),l()?n("button",{class:{[`${b}__order-btn`]:true,[`${b}__cell-content`]:true},onClick:a},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?n("nano-icon",{name:"solid/long-arrow-down"}):n("nano-icon",{name:"solid/long-arrow-up"})),n("div",{class:`${b}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))):n("div",{class:`${b}__cell-content`},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/bars-filter"})))};function X(t,o){var i,r;const s=H();const a=s.config.state.columns;const l=(i=a[o])===null||i===void 0?void 0:i.cellTemplate;const d=F(t,o);if(!!d.cellModel&&a[o].type==="date"){const t=new Date(d.cellModel);if(t instanceof Date&&!isNaN(t)){d.cellModel=!l?`${new Date(d.cellModel).toLocaleDateString()} ${new Date(d.cellModel).toLocaleTimeString()}`:t}}return l?l(n,d):d.cellModel!==undefined&&d.cellModel!==null?n(e,null,(r=d.cellModel)===null||r===void 0?void 0:r.toString()):""}const tt=(t,n=false)=>{const e=H();const o=e.config.state.columns[t];const i={[`${b}__td`]:true,[`${b}__ordered`]:!!o.order,[`${b}__pin`]:!!o.pinned,[`${b}__pin--start`]:o.pinned==="start",[`${b}__pin--end`]:o.pinned==="end"};if(n)return G(i);return i};const nt=({rowIndex:t,colIndex:e,nestedContent:o})=>{const i=()=>o?o():X(t,e)||n("span",{class:"placeholder"}," ");let r="td";const s=H();const a=s.config.state.columns[e];let l=E(t,e,{class:tt(e)});if(a.rowHeader){l=Number(l.rowSpan)>1?Object.assign(Object.assign({},l),{scope:"rowgroup"}):Object.assign(Object.assign({},l),{scope:"row"});r="th"}const d=t=>n("div",Object.assign({},t,{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:!!a.wrap}}),n(i,null));return n(r,Object.assign({},l),a.autoTooltip&&!a.wrap?n("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},n("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(r).style.zIndex="100",onNanoHide:t=>t.target.closest(r).style.zIndex=""},n(d,null),n("span",{slot:"content"},n(i,null)))):n(d,null))};const et=({header:t,wrap:e},o)=>{const i=n("div",{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:e}},o);return t?n("th",{scope:"row"},i):n("td",null,i)};const ot=({rowRenderer:t,rowIndex:e,rowModel:o,onColumnPinned:i},r,s)=>{let a={};if(!o){const t=D(e);o=t.rowModel}if(t===null||t===void 0?void 0:t.rowProperties){a=t.rowProperties({rowModel:o,rowIndex:e})||a}let l;if((t===null||t===void 0?void 0:t.pinned)&&typeof t.pinned==="function"){l=t.pinned()}const d={class:Y("tr",l)};const c=a?W(d,a):d;const h=t===null||t===void 0?void 0:t.template;if(h){let t=h(n,{renderedRow:n("tr",Object.assign({},c,{key:o.__uuid}),r),rowModel:o,rowIndex:e},et);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${o.__uuid}_${n}`;t.vattrs=W({class:Y("tr",l,true)},t.vattrs);if(!!t.vchildren){t.vchildren=s.map(t.vchildren,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Y(t.vtag.toString(),l,true)+tt(n,true),ref:t=>{if(!!t&&l==="top"||l==="bottom")U(t,l,i);if(!!t&&t.classList.contains("nano-tbl__pin--end"))Z(t,"end",i);if(!!t&&t.classList.contains("nano-tbl__pin--start"))Z(t,"start",i)}},t.vattrs)}return t}))}}return t}))}return t}return n("tr",Object.assign({},c,{key:o.__uuid}),r)};const it=({rowRenderer:t,onColumnPinned:e},o,i)=>{let r={};if(t.rowProperties){r=t.rowProperties()||{}}const s=({header:t,wrap:e},o)=>{const i=n("div",{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:e}},o);return t!==false?n("th",{scope:"col"},i):n("td",null,i)};const a=t.pinned||null;const l={class:Y("tr",null)};const d=r?W(l,r):l;const c=t===null||t===void 0?void 0:t.template;if(c){let t=c(n,{renderedRow:n("tr",Object.assign({},d),o)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:Y("tr",a,true)},t.vattrs);if(!!t.vchildren){t.vchildren=i.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Y(t.vtag.toString(),a,true),ref:t=>{if(!!t&&a==="top"||a==="bottom")U(t,a,e);if(!!t&&t.classList.contains("nano-tbl__pin--end"))Z(t,"end",e);if(!!t&&t.classList.contains("nano-tbl__pin--start"))Z(t,"start",e)}},t.vattrs)}return t}))}}return t}))}return t}return n("tr",Object.assign({},d),o)};const rt=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{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;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__order-btn:focus-visible{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))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform:scale(1);height:auto}.nano-tbl__caption--hide{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}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-before:var(--border-style);border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding);padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding);padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--td-padding-start) !important;padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/90%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;-webkit-border-before:none;border-block-start:none;background:rgb(var(--foot-bg-rgb)/90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky;transform:translateZ(0)}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{-webkit-border-before:none;border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{-webkit-border-before:var(--border-tint-style) !important;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{-webkit-border-after:none !important;border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}';let st=0;const at=class{constructor(t){r(this,t);this.nanoTblReady=s(this,"nanoTblReady",7);this.nanoTblBlockRendered=s(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=s(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=s(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=s(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=s(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=s(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=s(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=s(this,"nanoTblBeforeEdit",7);this.renderId="tbl-"+st++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.cacheScrollPosition=0;this.measureHeight=0;this.blockHeights=[];this.unitHeight=0;this._isReady=false;this.sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const o=this.nanoTblBeforeSort.emit({column:n,order:t});if(o.defaultPrevented)return;this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await A(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};this.scrollHandler=()=>{if(!this.store.general.state.isActive)return;a((()=>{this.cacheScrollPosition=this.scrollParent.scrollTop||window.scrollY;let t=this.host.offsetTop;let n=0;const e=this.blocks.length;while(n<e&&this.cacheScrollPosition>=t){t+=this.getBlockHeight(n);if(this.cacheScrollPosition<t){const t=[n,n+1,Math.max(0,n-1)];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t;this.setBlockHeight()}this.primaryBlockIndex=n}n++}}))};this.handleColumnPinned=t=>{Object.entries(t).forEach((([t,n])=>{this.tableEle.classList.toggle(`${b}__pinned--${t}`,n)}))};this.handleResizeChange=t=>{var n;this.tableWrapperEle.className="";let e=[`${b}__wrap`];if((n=t.target)===null||n===void 0?void 0:n.className)e=[...t.target.className.split(" "),...e];this.tableWrapperEle.classList.add(...e.filter((t=>!!t)))};this.type="table";this.caption=undefined;this.showCaption=false;this.loading=undefined;this.internalLoading=false;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=40;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.defaultSort=true;this.virtualTotalItems=0;this.blocks=[];this.activeBlocks=[0,1,2];this.debounceSetLoading=c(this.debounceSetLoading.bind(this),50)}get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await M(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false}))}async handleColsChange(){await N(this.host,this.columns);if(this.isReady)this.columnInit()}get blocksLength(){return this.blocks.length}handleSearchTermChange(){this.searchStart()}virtualTotalItemsChangeHandler(){this.setBlocks()}async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw"Cannot find column with "+t;return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}set measureEle(t){var n;if(!t)return;const e=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-e)<5?this.measureHeight:e;this.unitHeight=((n=t.querySelector("tr"))===null||n===void 0?void 0:n.getBoundingClientRect().height)||this.unitHeight}get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return Object.assign(Object.assign({},e),{order:t});return Object.assign(Object.assign({},e),{order:null})}));this.nanoTblAfterSort.emit({column:n,order:t})}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;this.scrollToTop();try{await P(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm})}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){this.filterComplete();this._loading=false}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false}return}try{await B(this.host,this.filters);this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n)t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined)t.filter=undefined;return t}));this.nanoTblAfterFilter.emit({filters:this.filters})}scrollToTop(t){var n;const e=(n=this.scrollParent.style)===null||n===void 0?void 0:n.scrollBehavior;const o=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!Q(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!Q(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(o)this.scrollParent.scrollLeft=o;if(e)this.scrollParent.style.scrollBehavior=e;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{a((()=>{this.measureEle=this.blockElements.find((t=>{var n;return!((n=t===null||t===void 0?void 0:t.classList)===null||n===void 0?void 0:n.contains(`${b}__inactive`))}));t()}))}))}setInitialBlockDimension(){var t;if(!((t=this.blockElements)===null||t===void 0?void 0:t.length))return;const n=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const e=new Promise((async t=>{if(await n())t();else{const e=new IntersectionObserver((async()=>{if(await n()){t();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}));e.then((()=>{requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{filter:n,prop:e}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];this.blockHeights=[];for(n;n<=e;n++){o.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:o,__uuid:d(o.map((t=>t.__uuid)).join())});o=[]}}if(o.length){i.push({rows:o,__uuid:d(o.map((t=>t.__uuid)).join())})}this.blocks=i}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:undefined}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;a((()=>{const e=n.getBoundingClientRect().height;const o=this.blockHeights.findIndex((n=>n.blockIndex===t));if(o>-1){this.blockHeights[o]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((async([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){this.store=await I(this.host,this.columns,this.scrollParent,this.isReady);await this.handleRowsChange();this.store.general.onChange("isActive",this.scrollHandler);this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=K(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=K(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension()}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){}componentDidRender(){this.setMeasureElement()}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}render(){this.blockElements=[];return n(l,null,n("div",{class:`${b}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("nano-resize-observe",{states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange}),n("div",{class:`${b}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},n("nano-progress-bar",{indeterminate:true,class:{[`${b}__progress-bar`]:true,[`${b}__progress-bar--show`]:this._loading}}),n("table",{role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${b}`,ref:t=>this.tableEle=t},n("caption",{class:{[`${b}__caption`]:true,[`${b}__caption--hide`]:!this.showCaption},id:"table-caption-"+this.renderId},n("slot",{name:"caption"},this.caption)),n("thead",null,n(it,{rowRenderer:this.headRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[n(V,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,onColumnPinned:this.handleColumnPinned,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&n("tbody",{class:`${b}__active`},[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((e,o)=>n(nt,{rowIndex:t,colIndex:o,nestedContent:()=>n("nano-skeleton",null)}))))))),n("tr",{hidden:!!this._loading||!!this.blocks.length},n("th",{class:`${b}__th`,colSpan:this.store.config.state.columns.length},n("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},n("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,e)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${e}`,ref:t=>{this.blockElements.push(t)},class:{[`${b}__inactive`]:!this.activeBlocks.includes(e),[`${b}__active`]:this.activeBlocks.includes(e)}},this.activeBlocks.includes(e)?t.rows.map(((t,o)=>{const i=e>0?e*this.perBlock+o:o;return n(ot,{rowRenderer:this.rowRender,rowModel:t,rowIndex:i},this.store.config.state.columns.map(((t,e)=>n(nt,{rowIndex:i,colIndex:e}))))})):n("tr",null,n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(e)+"px"}}))))),this.showFooter&&n("tfoot",null,n(it,{rowRenderer:this.footRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[n(V,{column:t,headRenderer:this.footRender,onColumnPinned:this.handleColumnPinned,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${b}__spinner`]:true,[`${b}__spinner--show`]:this._loading}})))}get host(){return o(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};at.style=rt;export{at as T,w as c};
+//# sourceMappingURL=p-fc585ea2.js.map

package/dist/nano-components/p-fc585ea2.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CSSNAMESPACE","isInstanceOf","value","className","C","globalThis","getTransferables","constructor","Object","values","Array","isArray","flatMap","buffer","pendingIds","callbackIds","pending","Map","callbacks","createWorker","workerPath","workerName","workerMsgId","worker","Worker","name","addEventListener","data","workerMsg","id","err","resolve","reject","get","delete","errObj","assign","Error","message","consoleError","forEach","e","createWorkerProxy","exportedMethod","args","Promise","pendingId","i","argLen","length","mainData","set","callbackId","push","postMessage","w","then","colsToWorker","columns","safeColumns","JSON","parse","stringify","c","sortCompareFn","safeCol","find","sc","prop","toString","stores","WeakMap","async","generateStore","host","scrollParent","isReady","store","createStore","rows","config","general","workerId","createWorkerStore","state","use","reset","syncDataToWorker","dispose","syncConfigToWorker","getStore","getDataType","Date","includes","storeSetData","cols","dateCols","filter","col","type","reduce","prev","curr","unknownCols","map","row","colName","coerceDate","_a","Number","cyrb53","join","storeSetConfig","storeSearch","term","workerSearch","console","warn","storeFilter","filters","workerFilter","storeSort","order","workerSort","colDataModel","rowIndex","colIndex","fetchStores","column","rowModel","cellModel","rowDataModel","mergeProperties","current","extra","props","class","style","getElement","getRenderingRef","mergeCellProperties","defaultProps","extraPropsFunc","cellProperties","colheadFootRender","tpl","columnTemplate","h","Fragment","title","stickyHIOs","stickyVIOs","addHObserver","el","pos","cb","root","observer","IntersectionObserver","rootBounds","document","scrollingElement","getBoundingClientRect","positions","start","boundingClientRect","x","scrollLeft","isIntersecting","end","right","width","threshold","rootMargin","observe","once","addVObserver","top","y","scrollTop","target","bottom","height","headerPinClasses","vPinned","classes","classListToStr","classString","entries","on","findScrollParent","element","getComputedStyle","excludeStaticParent","position","overflowRegex","documentElement","parent","parentElement","test","overflow","overflowY","overflowX","isInViewport","percentVisible","r","windowHeight","window","innerHeight","clientHeight","left","Math","floor","TableColHead","headRenderer","onColumnSortClick","onColumnPinned","defaults","handleColumnSortClick","closest","isSortable","sortable","extraProps","columnProperties","baseProps","pinned","undefined","content","colSpan","scope","sort","ref","th","key","onClick","cellRender","cellTemplate","model","d","isNaN","toLocaleDateString","toLocaleTimeString","_b","baseCellClasses","TableCell","nestedContent","Content","CellType","rowHeader","rowSpan","ContentWrap","wrap","autoTooltip","notifyContentFit","onNanoResizeContentFitChange","firstElementChild","disabled","detail","placement","onNanoShow","zIndex","onNanoHide","slot","header","children","cell","TableRow","rowRenderer","utils","rowProperties","template","toRender","renderedRow","__uuid","node","vtag","vkey","vattrs","vchildren","cNode","classList","contains","TableHeadFootRow","tableCss","Table","hostRef","this","renderId","currentFilters","currentSort","cacheScrollPosition","measureHeight","blockHeights","unitHeight","_isReady","sortStart","_loading","sortEvent","nanoTblBeforeSort","emit","defaultPrevented","scrollToTop","customSortFn","res","sortComplete","blocks","scrollHandler","isActive","readTask","scrollY","cumulativeHeight","offsetTop","blockIndex","blockLen","getBlockHeight","potentialBlocks","max","activeBlocks","setBlockHeight","primaryBlockIndex","handleColumnPinned","applied","tableEle","toggle","handleResizeChange","tableWrapperEle","split","add","cl","debounceSetLoading","debounce","bind","loading","internalLoading","l","handleRowsChange","columnInit","requestAnimationFrame","setInitialBlockDimension","blocksLength","handleSearchTermChange","searchStart","virtualTotalItemsChangeHandler","setBlocks","filterStart","additive","columnNames","f","splice","measureEle","potentialHeight","abs","querySelector","_scrollParent","ele","removeEventListener","_primaryBlockIndex","nanoTblBlockRendered","block","totalBlocks","blockElements","ready","handleReady","hash","location","idRow","scrollIntoView","nanoTblReady","nanoTblAfterSort","nanoTblBeforeSearch","searchTerm","nanoTblAfterSearch","ff","nanoTblBeforeFilter","customFilterFn","filterComplete","cFilter","nanoTblAfterFilter","scrollBehaviour","scrollBehavior","scrollX","topAnchorEle","setTimeout","setMeasureElement","b","testForDimensions","dimensionsReady","disconnect","dRows","virtualTotalItems","perBlock","cachedBlockHeight","bh","blockLength","fBhIdx","findIndex","processSlots","caption","error","setupActiveWatcher","activeWatcherIo","io","onChange","connectedCallback","componentDidLoad","componentShouldUpdate","_newVal","_oldVal","stateName","componentWillRender","componentDidRender","disconnectedCallback","render","Host","a","states","onNanoResizeStateChange","div","tabindex","indeterminate","role","tbl","showCaption","headRender","colModel","defaultSort","keys","_colModel","hidden","tb","rowRender","showFooter","footRender"],"sources":["./src/components/table/table.constants.ts","@worker-helper","./src/components/table/table.store.ts","./src/components/table/table.utils.tsx","./src/components/table/table.header.tsx","./src/components/table/table.cell.tsx","./src/components/table/table.row.tsx","./src/components/table/table.scss?tag=nano-table","./src/components/table/table.tsx"],"sourcesContent":["export const CSSNAMESPACE = 'nano-tbl';\n","\nimport { consoleError } from '@stencil/core/internal';\n\n\nconst isInstanceOf = (value, className) => {\n  const C = globalThis[className];\n  return C != null && value instanceof C;\n}\nconst getTransferables = (value) => {\n  if (value != null) {\n  if (\n    isInstanceOf(value, \"ArrayBuffer\") ||\n    isInstanceOf(value, \"MessagePort\") ||\n    isInstanceOf(value, \"ImageBitmap\") ||\n    isInstanceOf(value, \"OffscreenCanvas\")\n  ) {\n    return [value];\n  }\n  if (typeof value === \"object\") {\n    if (value.constructor === Object) {\n    value = Object.values(value);\n    }\n    if (Array.isArray(value)) {\n    return value.flatMap(getTransferables);\n    }\n    return getTransferables(value.buffer);\n  }\n  }\n  return [];\n};\n\nlet pendingIds = 0;\nlet callbackIds = 0;\nconst pending = new Map();\nconst callbacks = new Map();\n\nexport const createWorker = (workerPath, workerName, workerMsgId) => {\n  const worker = new Worker(workerPath, {name:workerName});\n\n  worker.addEventListener('message', ({data}) => {\n  if (data) {\n    const workerMsg = data[0];\n    const id = data[1];\n    const value = data[2];\n\n    if (workerMsg === workerMsgId) {\n    const err = data[3];\n    const [resolve, reject, callbackIds] = pending.get(id);\n    pending.delete(id);\n\n    if (err) {\n      const errObj = (err.isError)\n      ? Object.assign(new Error(err.value.message), err.value)\n      : err.value;\n\n      consoleError(errObj);\n      reject(errObj);\n    } else {\n      if (callbackIds) {\n      callbackIds.forEach(id => callbacks.delete(id));\n      }\n      resolve(value);\n    }\n    } else if (workerMsg === workerMsgId + '.cb') {\n    try {\n      callbacks.get(id)(...value);\n    } catch (e) {\n      consoleError(e);\n    }\n    }\n  }\n  });\n\n  return worker;\n};\n\nexport const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (\n  (...args) => new Promise((resolve, reject) => {\n  let pendingId = pendingIds++;\n  let i = 0;\n  let argLen = args.length;\n  let mainData = [resolve, reject];\n  pending.set(pendingId, mainData);\n\n  for (; i < argLen; i++) {\n    if (typeof args[i] === 'function') {\n    const callbackId = callbackIds++;\n    callbacks.set(callbackId, args[i]);\n    args[i] = [workerMsgId + '.cb', callbackId];\n    (mainData[2] = mainData[2] || []).push(callbackId);\n    }\n  }\n  const postMessage = (w) => (\n    w.postMessage(\n    [workerMsgId, pendingId, exportedMethod, args],\n    getTransferables(args)\n    )\n  );\n  if (worker.then) {\n    worker.then(postMessage);\n  } else {\n    postMessage(worker);\n  }\n  })\n);\n","import { createStore, ObservableMap } from '@stencil/store';\nimport { cyrb53 } from '../../utils/math';\nimport {\n  createWorkerStore,\n  syncConfigToWorker,\n  syncDataToWorker,\n  workerFilter,\n  workerSearch,\n  workerSort,\n} from './table.worker';\nimport type { TableTypes } from '../../interface';\n\nexport interface TableStores {\n  data: ObservableMap<{ rows: TableTypes.NanoTable['rows'] }>;\n  config: ObservableMap<{ columns: TableTypes.NanoTable['columns'] }>;\n  general: ObservableMap<{\n    workerId: string;\n    scrollParent: HTMLElement;\n    host: HTMLNanoTableElement;\n    isReady: boolean;\n    isActive?: boolean;\n  }>;\n}\n\nfunction colsToWorker(columns: TableTypes.NanoTable['columns']) {\n  const safeColumns: Partial<TableTypes.ColumnConfig>[] = JSON.parse(\n    JSON.stringify(columns)\n  );\n  columns.forEach((c) => {\n    if (!!c?.sortCompareFn) {\n      const safeCol = safeColumns.find((sc) => sc.prop === c.prop);\n      safeCol.sortCompareFn = c.sortCompareFn.toString();\n    }\n  });\n  return safeColumns;\n}\n\nconst stores: WeakMap<HTMLElement, TableStores> = new WeakMap();\n\nexport async function generateStore(\n  host: HTMLNanoTableElement,\n  columns: TableTypes.NanoTable['columns'],\n  scrollParent: HTMLElement,\n  isReady: boolean\n) {\n  const store: TableStores = {\n    data: createStore({ rows: [] }),\n    config: createStore({ columns }),\n    general: createStore({ workerId: null, scrollParent, host, isReady }),\n  };\n\n  const id = await createWorkerStore(\n    store.data.state.rows,\n    colsToWorker(store.config.state.columns)\n  );\n  store.general.state.workerId = id;\n  stores.set(host, store);\n\n  // sync data from our store to our worker\n\n  store.data.use({\n    reset: () => {\n      if (store.general.state.workerId)\n        syncDataToWorker(store.general.state.workerId, null);\n    },\n    dispose: () => {\n      if (store.general.state.workerId)\n        syncDataToWorker(store.general.state.workerId, null);\n    },\n  });\n  store.config.use({\n    reset: () => {\n      if (store.general.state.workerId)\n        syncConfigToWorker(store.general.state.workerId, null);\n    },\n    dispose: () => {\n      if (store.general.state.workerId)\n        syncConfigToWorker(store.general.state.workerId, null);\n    },\n  });\n  return store;\n}\n\nexport function getStore(host: HTMLElement) {\n  return stores.get(host);\n}\n\nfunction getDataType(value: any): TableTypes.ColumnType {\n  if (value instanceof Date) {\n    return 'date';\n  }\n  if (['number', 'string', 'boolean'].includes(typeof value)) {\n    return typeof value as 'string' | 'number' | 'boolean';\n  }\n  return 'unknown';\n}\n\nexport function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]) {\n  const store = stores.get(host);\n  if (!store) return;\n\n  const cols = store.config.state.columns;\n  const dateCols: (keyof TableTypes.RowData)[] = cols\n    .filter((col) => col.type === 'date')\n    .reduce((prev, curr) => {\n      return [...prev, curr.prop];\n    }, []);\n  const unknownCols: TableTypes.RowData[] = cols.filter((col) => !col.type);\n\n  // augments data with some internal props.\n  // discern unknown column types\n  // convert dates to numbers for worker\n  rows = rows.map((row, i) => {\n    // try our best to discern the column type (from first row) if unset\n    if (unknownCols.length && i === 0) {\n      store.config.state.columns = cols.map((col) => {\n        if (unknownCols.includes(col) && row[col.prop] && !col.type) {\n          col.type = getDataType(row[col.prop]);\n          if (col.type === 'date') dateCols.push(col.prop);\n        }\n        return col;\n      });\n    }\n\n    // convert date columns into numbers to send to our worker\n    dateCols.forEach((colName) => {\n      // coerce any date type;\n      // Date(), timestamp, valid date string\n      const coerceDate = new Date(row[colName]) ?? null;\n      if (!!coerceDate && Number(coerceDate)) row[colName] = Number(coerceDate);\n    });\n\n    row['__index'] = i;\n    row['__uuid'] = cyrb53(cols.map((c) => row[c.prop]).join());\n\n    return row;\n  });\n  store.data.state.rows = rows;\n\n  if (store.general.state.workerId)\n    return syncDataToWorker(store.general.state.workerId, rows);\n}\n\nexport function storeSetConfig(\n  host: HTMLElement,\n  columns: TableTypes.ColumnConfig[]\n) {\n  const store = stores.get(host);\n  if (!store) return;\n\n  store.config.state.columns = columns;\n\n  if (store.general.state.workerId)\n    return syncConfigToWorker(\n      store.general.state.workerId,\n      colsToWorker(columns)\n    );\n}\n\nexport async function storeSearch(host: HTMLElement, term: string) {\n  const store = stores.get(host);\n  if (!store || !store.general.state.workerId) return;\n\n  try {\n    store.data.state.rows = await workerSearch(\n      store.general.state.workerId,\n      term\n    );\n  } catch (e) {\n    console.warn(e);\n  }\n}\n\nexport async function storeFilter(\n  host: HTMLElement,\n  filters: TableTypes.Filter[]\n) {\n  const store = stores.get(host);\n  if (!store || !store.general.state.workerId) return;\n\n  try {\n    store.data.state.rows = await workerFilter(\n      store.general.state.workerId,\n      filters\n    );\n  } catch (e) {\n    console.warn(e);\n  }\n}\n\nexport async function storeSort(\n  host: HTMLNanoTableElement,\n  prop: TableTypes.Prop,\n  order: TableTypes.Order\n) {\n  const store = stores.get(host);\n  if (!store || !store.general.state.workerId) return;\n\n  try {\n    store.data.state.rows = await workerSort(\n      store.general.state.workerId,\n      prop,\n      order\n    );\n  } catch (e) {\n    console.warn(e);\n  }\n}\n","import { getRenderingRef, getElement, VNode, h, Fragment } from '@stencil/core';\nimport { getStore } from './table.store';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from '../../interface';\n\ntype ValidRenderTypes = 'tr' | 'th' | 'td';\n\n/**\n * Get a model object for custom cell / property renderers.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns a model object which will be passed to custom renderers\n */\nexport function colDataModel(\n  rowIndex: number,\n  colIndex: number\n): TableTypes.RenderModel {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const rows = store.data.state.rows;\n\n  const column = columns[colIndex];\n  const prop: TableTypes.ColumnProp | undefined = column?.prop;\n  const rowModel = rows[rowIndex];\n  const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';\n\n  return {\n    prop,\n    cellModel,\n    column,\n    rowIndex,\n    rowModel,\n  };\n}\n\n/**\n * Get a model object for custom row renderers.\n * @param rowIndex\n * @returns a model object passed to custom row renderers\n */\nexport function rowDataModel(rowIndex: number): TableTypes.RowDataSchemaModel {\n  const store = fetchStores();\n  const rows = store.data.state.rows;\n  const rowModel = rows[rowIndex];\n\n  return {\n    rowModel,\n    rowIndex,\n  };\n}\n\n/**\n * Merges 2 objects of properties together\n * @param current - property object\n * @param extra - additional object property\n * @returns - merged properties that can be applied to a node\n */\nexport function mergeProperties<\n  T extends TableTypes.CellProps | TableTypes.CellProps\n>(current: T, extra: T) {\n  if (!extra) return current;\n\n  // top level merge\n  const props: T = { ...extra, ...current };\n\n  // deeper merge\n  // merge classes maps or strings\n  if (extra.class) {\n    if (typeof extra.class === 'object' && typeof props.class === 'object') {\n      props.class = { ...extra.class, ...props.class };\n    } else if (\n      typeof extra.class === 'string' &&\n      typeof props.class === 'object'\n    ) {\n      props.class[extra.class] = true;\n    } else if (typeof props.class === 'string') {\n      props.class += ' ' + extra.class;\n    }\n  }\n  // merge style\n  if (extra.style) {\n    props.style = { ...extra.style, ...props.style };\n  }\n  return props;\n}\n\n/**\n * Returns the current nano-table's stores.\n * @returns the current nano-table stores\n */\nexport function fetchStores() {\n  return getStore(getElement(getRenderingRef()));\n}\n\n/**\n * Merges any defined cell properties with properties\n * required by `nano-table` functionality\n * @param rowIndex - the current row index being rendered\n * @param colIndex = the current column index being rendered\n * @param defaultProps - default properties required by `nano-table`\n * @returns - the merged properties that will be applied to a node\n */\nexport function mergeCellProperties(\n  rowIndex: number,\n  colIndex: number,\n  defaultProps: TableTypes.CellProps\n): TableTypes.CellProps {\n  const props: TableTypes.CellProps = { ...defaultProps };\n  const extraPropsFunc =\n    fetchStores().config.state.columns[colIndex]?.cellProperties;\n  if (!extraPropsFunc) return props;\n\n  const data = colDataModel(rowIndex, colIndex);\n  const extra = extraPropsFunc(data);\n  if (!extra) return props;\n\n  return mergeProperties(props, extra);\n}\n\n/**\n * Renders a table header (within a thead) using a custom template if set.\n * @param col - the current column config object\n * @returns - a JSX node\n */\nexport function colheadFootRender(col: TableTypes.ColumnConfig): VNode {\n  const tpl = col?.columnTemplate;\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, col)\n  ) : (\n    <Fragment>{col.title}</Fragment>\n  );\n}\n\nconst stickyHIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\nconst stickyVIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\n\n/**\n * Adds element to Intersection Observer. Fires when element changes on the x axis\n * @param el - an element to observe\n * @param pos - the edge to watch (start or end)\n * @param cb - callback when an intersection state changes.\n */\nexport function addHObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: TableTypes.PinnedCb\n) {\n  if (stickyHIOs.get(el)) return;\n\n  const store = fetchStores();\n  const root = store.general.state.scrollParent;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const rootBounds =\n        e.rootBounds || document.scrollingElement.getBoundingClientRect();\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'start') {\n        positions.start =\n          e.boundingClientRect.x - (rootBounds.x + root.scrollLeft) < 0 &&\n          !e.isIntersecting;\n      }\n      if (pos === 'end') {\n        // TODO - sort these out for RtL\n        positions.end =\n          e.boundingClientRect.right > e.boundingClientRect.width &&\n          !e.isIntersecting;\n      }\n      if (!!cb) cb(positions);\n    },\n    {\n      threshold: [1],\n      rootMargin: '1px 0px 100px 0px',\n      root: root === document.scrollingElement ? null : root,\n    }\n  );\n  stickyHIOs.set(el, observer);\n\n  if (store.general.state.isReady) {\n    observer.observe(el);\n  } else {\n    store.general.state.host.addEventListener(\n      'nanoTblReady',\n      () => {\n        observer.observe(el);\n      },\n      { once: true }\n    );\n  }\n}\n\n/**\n * Adds element to Intersection Observer. Fires when element changes on the y axis\n * @param el - an element to observe\n * @param pos - the edge to watch (start or end)\n * @param cb - callback when an intersection state changes.\n */\nexport function addVObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: TableTypes.PinnedCb\n) {\n  if (stickyVIOs.get(el)) return;\n\n  const store = fetchStores();\n  const root = store.general.state.scrollParent;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const rootBounds =\n        e.rootBounds || document.scrollingElement.getBoundingClientRect();\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'top') {\n        positions.top =\n          e.boundingClientRect.y - (rootBounds.y + root.scrollTop) < 0 &&\n          !e.isIntersecting;\n      }\n      if (pos === 'bottom') {\n        const boundingClientRect = e.target.getBoundingClientRect();\n        positions.bottom =\n          boundingClientRect.height + boundingClientRect.y >\n            rootBounds.height && !e.isIntersecting;\n      }\n      if (!!cb) cb(positions);\n    },\n    {\n      threshold: [1],\n      rootMargin: '0px 100px 0px 100px',\n      root: root === document.scrollingElement ? null : root,\n    }\n  );\n  stickyVIOs.set(el, observer);\n\n  if (store.general.state.isReady) {\n    observer.observe(el);\n  } else {\n    store.general.state.host.addEventListener(\n      'nanoTblReady',\n      () => {\n        observer.observe(el);\n      },\n      { once: true }\n    );\n  }\n}\n\n/**\n * Renders a class string or map for pinned classes on the v axis.\n * @param type - element tagName\n * @param vPinned - whether element is currently pinned vertically to top or bottom\n * @param toString - render as a string (defaults to class map)\n * @returns a class string or class map\n */\nexport function headerPinClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: false\n): { [key: string]: boolean };\nexport function headerPinClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: true\n): string;\nexport function headerPinClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString = false\n): { [key: string]: boolean } | string {\n  const classes = {\n    [`${CSSNAMESPACE}__${type}`]: true,\n    [`${CSSNAMESPACE}__pin`]: !!vPinned,\n    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',\n    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',\n  };\n\n  if (toString) return classListToStr(classes);\n  return classes;\n}\n\n/**\n * Turns a class map {'string': boolean} to class string\n * @param classes - the class map to convert\n * @returns a class string\n */\nexport function classListToStr(classes: { [key: string]: boolean }): string {\n  let classString = '';\n  Object.entries(classes).forEach(([className, on]) => {\n    if (on) classString += className + ' ';\n  });\n  return classString;\n}\n\n/**\n * Detects the current scroll speed as a number.\n * Use within a scroll listener\n */\nexport const detectScrollSpeed = (() => {\n  let lastPos: number;\n  let newPos: number;\n  let timer: number;\n  let delta: number;\n  const delay = 60; // in \"ms\" (higher means lower fidelity )\n\n  const clear = () => {\n    lastPos = null;\n    delta = 0;\n  };\n  clear();\n\n  return () => {\n    newPos = window.scrollY;\n    if (lastPos != null) delta = newPos - lastPos;\n    lastPos = newPos;\n    window.clearTimeout(timer);\n    timer = window.setTimeout(clear, delay);\n    return delta;\n  };\n})();\n\n/**\n * Attempts to find the closes scrolling parental element\n * @param element - the element from which to traverse up the DOM\n * @returns - the closest scrolling parental element\n */\nexport function findScrollParent(element: HTMLElement) {\n  let style = getComputedStyle(element);\n  const excludeStaticParent = style.position === 'absolute';\n  const overflowRegex = /(auto|scroll)/;\n\n  if (style.position === 'fixed') return document.documentElement;\n  for (let parent = element; (parent = parent.parentElement); ) {\n    style = getComputedStyle(parent);\n    if (excludeStaticParent && style.position === 'static') {\n      continue;\n    }\n    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))\n      return parent;\n  }\n  return document.documentElement;\n}\n\n/**\n * Checks whether an element is currently viewable within the viewport\n * @param el - element to check\n * @param percentVisible - the percentage of the element that should be within the viewport\n * @returns true if the element's area percentage is visible\n */\nexport function isInViewport(el: Element, percentVisible = 100) {\n  const r = el.getBoundingClientRect();\n  const windowHeight =\n    window.innerHeight || document.documentElement.clientHeight;\n\n  if (\n    !r.bottom &&\n    !r.top &&\n    !r.left &&\n    !r.right &&\n    !r.height &&\n    !r.width &&\n    !r.x &&\n    !r.y\n  )\n    return false;\n\n  return !(\n    Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <\n      percentVisible ||\n    Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <\n      percentVisible\n  );\n}\n\n/**\n * Immutable array re-order\n * @param from - the index to move from\n * @param to - the index to move to\n * @param arr - the array to re-order\n * @returns - a new, re-orderd array\n */\nexport function arrMove(from: number, to: number, arr: any[]) {\n  const newArr = [...arr];\n  const item = newArr.splice(from, 1)[0];\n  newArr.splice(to, 0, item);\n  return newArr;\n}\n","import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  addHObserver,\n  addVObserver,\n  colheadFootRender,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  onColumnPinned?: TableTypes.PinnedCb;\n  defaults: { sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnSortClick,\n  onColumnPinned,\n  defaults,\n}) => {\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]:\n        column.filter !== undefined && column.filter !== null,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n      key={column.prop}\n    >\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/filter\" />\n          )}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/bars-filter\" />\n          )}\n        </div>\n      )}\n    </th>\n  );\n};\n","import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  classListToStr,\n  colDataModel,\n  fetchStores,\n  mergeCellProperties,\n} from './table.utils';\nimport type { NanoResizeObserveCustomEvent, TableTypes } from '../../interface';\n\n// TABLE CELL\n// (tbody > tr > td, tbody > tr > th)\n\n/**\n * Renders a cell using a custom renderer if set.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns - a JSX node\n */\nexport function cellRender(rowIndex: number, colIndex: number): VNode {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const tpl = columns[colIndex]?.cellTemplate;\n  const model = colDataModel(rowIndex, colIndex);\n\n  if (!!model.cellModel && columns[colIndex].type === 'date') {\n    const d = new Date(model.cellModel);\n    if (d instanceof Date && !isNaN(d as any)) {\n      model.cellModel = !tpl\n        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(\n            model.cellModel\n          ).toLocaleTimeString()}`\n        : d;\n    }\n  }\n\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, model)\n  ) : model.cellModel !== undefined && model.cellModel !== null ? (\n    <Fragment>{model.cellModel?.toString()}</Fragment>\n  ) : (\n    ''\n  );\n}\n\nexport const baseCellClasses = (\n  colIndex: number,\n  toString: boolean = false\n) => {\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n\n  const classes = {\n    [`${CSSNAMESPACE}__td`]: true,\n    [`${CSSNAMESPACE}__ordered`]: !!column.order,\n    [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n  };\n\n  if (toString) return classListToStr(classes);\n  return classes;\n};\n\ntype TableCellProps = {\n  rowIndex: number;\n  colIndex: number;\n  nestedContent?: () => VNode;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n  rowIndex,\n  colIndex,\n  nestedContent,\n}) => {\n  const Content = () =>\n    nestedContent\n      ? nestedContent()\n      : cellRender(rowIndex, colIndex) || (\n          <span class=\"placeholder\">&nbsp;</span>\n        );\n\n  let CellType = 'td';\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: baseCellClasses(colIndex),\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.CellProps).rowSpan) > 1\n        ? { ...props, scope: 'rowgroup' }\n        : { ...props, scope: 'row' };\n    CellType = 'th';\n  }\n\n  const ContentWrap = (props) => (\n    <div\n      {...props}\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,\n      }}\n    >\n      <Content />\n    </div>\n  );\n\n  return (\n    <CellType\n      // role=\"gridcell\"\n      {...props}\n    >\n      {column.autoTooltip && !column.wrap ? (\n        <nano-resize-observe\n          notifyContentFit=\"x\"\n          onNanoResizeContentFitChange={(\n            e: NanoResizeObserveCustomEvent<{ x: boolean }>\n          ) =>\n            ((e.target.firstElementChild as HTMLNanoTooltipElement).disabled =\n              e.detail.x)\n          }\n        >\n          <nano-tooltip\n            disabled\n            placement=\"top\"\n            onNanoShow={(e) =>\n              ((e.target.closest(CellType) as HTMLElement).style.zIndex = '100')\n            }\n            onNanoHide={(e) =>\n              ((e.target.closest(CellType) as HTMLElement).style.zIndex = '')\n            }\n          >\n            <ContentWrap />\n            <span slot=\"content\">\n              <Content />\n            </span>\n          </nano-tooltip>\n        </nano-resize-observe>\n      ) : (\n        <ContentWrap />\n      )}\n    </CellType>\n  );\n};\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport {\n  addHObserver,\n  addVObserver,\n  headerPinClasses,\n  mergeProperties,\n  rowDataModel,\n} from './table.utils';\nimport { baseCellClasses } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from '../../interface';\n\n// TABLE ROWS\n// (thead > tr, tfoot > tr, tr)\n\ntype TableRowCellHelperProps = { header: boolean; wrap: boolean };\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex: number;\n  rowModel: TableTypes.RowData;\n  onColumnPinned?: TableTypes.PinnedCb;\n};\n\nconst TableCell: FunctionalComponent<TableRowCellHelperProps> = (\n  { header, wrap },\n  children\n): VNode => {\n  const cell = (\n    <div\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,\n      }}\n    >\n      {children}\n    </div>\n  );\n  return header ? <th scope=\"row\">{cell}</th> : <td>{cell}</td>;\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, rowModel, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n\n  if (!rowModel) {\n    const model = rowDataModel(rowIndex);\n    rowModel = model.rowModel;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;\n  }\n\n  let pinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    pinned = rowRenderer.pinned();\n  }\n\n  const baseProps = { class: headerPinClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: (\n          <tr {...props} key={rowModel.__uuid}>\n            {children}\n          </tr>\n        ),\n        rowModel,\n        rowIndex,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node, i) => {\n        if (node.vtag === 'tr') {\n          if (!node.vkey) node.vkey = `${rowModel.__uuid}_${i}`;\n\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode, i) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class:\n                      headerPinClasses(\n                        cNode.vtag.toString() as 'th' | 'td',\n                        pinned,\n                        true\n                      ) + baseCellClasses(i, true),\n                    ref: (th: HTMLTableCellElement) => {\n                      if ((!!th && pinned === 'top') || pinned === 'bottom')\n                        addVObserver(th, pinned, onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--end'))\n                        addHObserver(th, 'end', onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--start'))\n                        addHObserver(th, 'start', onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return (\n    <tr {...props} key={rowModel.__uuid}>\n      {children}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onColumnPinned?: TableTypes.PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const TableCell: FunctionalComponent<TableRowCellHelperProps> = (\n    { header, wrap },\n    children\n  ): VNode => {\n    const cell = (\n      <div\n        class={{\n          [`${CSSNAMESPACE}__cell-content`]: true,\n          [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,\n        }}\n      >\n        {children}\n      </div>\n    );\n    return header !== false ? <th scope=\"col\">{cell}</th> : <td>{cell}</td>;\n  };\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: headerPinClasses('tr', null) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: <tr {...props}>{children}</tr>,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: headerPinClasses(\n                      cNode.vtag.toString() as 'th' | 'td',\n                      pinned,\n                      true\n                    ),\n                    ref: (th) => {\n                      if ((!!th && pinned === 'top') || pinned === 'bottom')\n                        addVObserver(th, pinned, onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--end'))\n                        addHObserver(th, 'end', onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--start'))\n                        addHObserver(th, 'start', onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n","@use '../../global/style/utilities/globals' as t;\n@use '../../global/style/nano-theme/form' as f;\n\nnano-table {\n  /**\n   * @prop --max-col-width: Default 200px;\n\n   * @prop --color: Deafults to var(--nano-color-mediumgrey, #68767e);\n   * @prop --font-size: Deafults to 0.87rem;\n   * @prop --cell-line-height: Deafults to 1.5;\n\n   * @prop --border-color: Deafults to var(--nano-color-palegrey, #b5aea7);\n   * @prop --border-style: Deafults to thin solid var(--border-color);\n   * @prop --border-tint-color: Deafults to var(--nano-color-blue, #90c6e7);\n   * @prop --border-tint-style: Deafults to 2px solid var(--border-tint-color);\n\n   * @prop --cell-bg-rgb: Deafults to var(--nano-color-white-rgb, 255 255 255);\n   * @prop --head-bg-rgb: Deafults to var(--cell-bg-rgb);\n   * @prop --foot-bg-rgb: Deafults to var(--cell-bg-rgb);\n   * @prop --th-row-bg-rgb: Deafults to var(--cell-bg-rgb);\n   * @prop --ordered-bg-rgb: Deafults to var(--nano-color-offwhite-rgb, 249 249 251);\n\n   * @prop --td-padding-start: Deafults to 0.625rem;\n   * @prop --td-padding-end: Deafults to 0.625rem;\n   * @prop --td-padding-top: Deafults to 0.5rem;\n   * @prop --td-padding-bottom: Deafults to 0.4125rem;\n\n   * @prop --th-padding-start: Deafults to 0.625rem;\n   * @prop --th-padding-end: Deafults to 0.625rem;\n   * @prop --th-padding-top: Deafults to 0.875rem;\n   * @prop --th-padding-bottom: Deafults to 0.6875rem;\n\n   * @prop --td-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);\n   * @prop --td-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);\n\n   * @prop --th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);\n   * @prop --th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);\n\n   * @prop --foot-th-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);\n   * @prop --foot-th-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);\n\n   * @prop --head-th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);\n   * @prop --head-th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);\n\n   * @prop --bookend-col-padding: Deafults to 2rem;\n  */\n\n  display: block;\n  width: 100%;\n\n  // general\n  --max-col-width: clamp(200px, 500px, 50vw);\n\n  // text\n  --color: var(--nano-color-mediumgrey, #68767e);\n  --font-size: 0.87rem;\n  --cell-line-height: 1.5;\n  --thead-font-size: 0.95rem;\n  --thead-color: #455560;\n  --tfoot-color: #455560;\n\n  // borders\n  --border-color: #dddbda;\n  --border-style: thin solid var(--border-color);\n  --border-tint-color: #0084a9;\n  --border-tint-style: 3px solid var(--border-tint-color);\n\n  // backgrounds\n  --cell-bg-rgb: var(--nano-color-white-rgb, 255 255 255);\n  --head-bg-rgb: 250 250 249;\n  --foot-bg-rgb: var(--head-bg-rgb);\n  --th-row-bg-rgb: var(--cell-bg-rgb);\n  --ordered-bg-rgb: var(--nano-color-offwhite-rgb, 249 249 251);\n\n  // spacing\n  --td-padding-start: 0.625rem;\n  --td-padding-end: 0.625rem;\n  --td-padding-top: 0.5rem;\n  --td-padding-bottom: 0.4125rem;\n  --th-padding-start: 0.625rem;\n  --th-padding-end: 0.625rem;\n  --th-padding-top: 0.875rem;\n  --th-padding-bottom: 0.6875rem;\n  --td-padding-v: var(--td-padding-top) var(--td-padding-bottom);\n  --td-padding-h: var(--td-padding-start) var(--td-padding-end);\n  --th-padding-v: var(--th-padding-top) var(--th-padding-bottom);\n  --th-padding-h: var(--th-padding-start) var(--th-padding-end);\n  --foot-th-padding-v: var(--td-padding-top) var(--td-padding-bottom);\n  --foot-th-padding-h: var(--td-padding-start) var(--td-padding-end);\n  --head-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);\n  --head-th-padding-h: var(--th-padding-start) var(--th-padding-end);\n  --bookend-col-padding: 2rem;\n}\n\n.nano-tbl {\n  $base: &;\n\n  color: var(--color);\n  text-align: start;\n  width: 100%;\n  font-size: var(--font-size);\n  border-spacing: 0 0;\n  border-collapse: separate;\n  background: rgb(var(--cell-bg-rgb));\n  border-inline-end: 1px solid transparent;\n  border-block-start: 1px solid transparent;\n  position: relative;\n  z-index: 1;\n\n  &__wrap {\n    display: table;\n    min-width: 100%;\n    // container-type: inline-size;\n  }\n\n  &__top-anchor {\n    @include t.visually-hide;\n\n    position: relative;\n  }\n\n  &__ordered {\n    background-color: var(--ordered-bg);\n    border-inline-start: var(--border-style);\n    border-inline-end: var(--border-style);\n  }\n\n  &__order-btn {\n    padding: 0;\n    border: none;\n    outline: none;\n    font: inherit;\n    background: none;\n    appearance: none;\n    color: inherit;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: #{f.$control-focus-style} inset;\n    }\n  }\n\n  &__status-icons {\n    margin-inline: auto 10px;\n    display: flex;\n    gap: 10px;\n  }\n\n  &__progress-bar {\n    font-size: 0.2rem;\n    position: sticky;\n    inset-block-start: 0;\n    inset-inline: 0;\n    z-index: 10;\n    transition: scale 0.25s;\n    transform: scale(0);\n    width: 100%;\n    height: 0;\n\n    &--show {\n      transform: scale(1);\n      height: auto;\n    }\n  }\n\n  &__caption {\n    &--hide {\n      @include t.visually-hide;\n    }\n  }\n\n  // Shared styles in th, td across thead / tbody / tfoot\n\n  &__td,\n  &__th {\n    line-height: var(--cell-line-height);\n    text-align: start;\n    border-block-start: var(--border-style);\n    max-width: var(--max-col-width);\n    background-color: rgb(var(--cell-bg-rgb));\n\n    // @container (min-width: 700px) {\n    //   color: red !important;\n    // }\n\n    tbody:first-of-type tr:first-child & {\n      border-block-start: none;\n    }\n\n    tbody:last-of-type tr:last-child & {\n      border-block-end: var(--border-style);\n    }\n\n    // 'bookend' (larger) padding on larger screens\n    .md & {\n      &:first-child #{$base}__cell-content {\n        padding-inline-start: var(--bookend-col-padding);\n      }\n\n      &:last-child #{$base}__cell-content {\n        padding-inline-end: var(--bookend-col-padding);\n      }\n    }\n\n    // force override of bookend on small screens css media\n    // queries are faster than the breakpoints from `nano-resize-observer`\n    @include t.media-breakpoint-down('md') {\n      &:first-child #{$base}__cell-content {\n        padding-inline-start: var(--td-padding-start) !important;\n      }\n\n      &:last-child #{$base}__cell-content {\n        padding-inline-end: var(--td-padding-end) !important;\n      }\n    }\n\n    thead & {\n      color: var(--thead-color);\n      font-weight: 800;\n      background: rgb(var(--head-bg-rgb) / 90%);\n      font-size: var(--thead-font-size);\n      border-block-start: none !important;\n\n      #{$base}__cell-content {\n        padding-block: var(--head-th-padding-v);\n        padding-inline: var(--head-th-padding-h);\n      }\n\n      .nano-sortable__keyboard-handle {\n        position: absolute;\n        inset-inline-end: 5px;\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n        background: white;\n        z-index: 10;\n      }\n    }\n\n    tfoot & {\n      color: var(--tfoot-color);\n      font-weight: 800;\n      border-block-start: none;\n      background: rgb(var(--foot-bg-rgb) / 90%);\n      font-size: var(--thead-font-size);\n\n      #{$base}__cell-content {\n        padding-block: var(--foot-th-padding-v);\n        padding-inline: var(--foot-th-padding-h);\n      }\n    }\n\n    &.nano-tbl__ordered {\n      background-color: rgb(var(--ordered-bg-rgb) / 80%) !important;\n    }\n  }\n\n  &__cell-content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    padding-block: var(--td-padding-v);\n    padding-inline: var(--td-padding-h);\n\n    &--no-result {\n      padding-block: 2rem;\n    }\n\n    &--wrap {\n      white-space: normal;\n      overflow: visible;\n    }\n  }\n\n  tbody {\n    will-change: scroll-position;\n    opacity: 1;\n    transition: 0.1s ease opacity;\n    transform: translateZ(0);\n\n    &#{$base}__inactive {\n      opacity: 0;\n    }\n    #{$base}__tr:has(~ #{$base}__tr--placeholder) {\n      display: none;\n    }\n    #{$base}__tr--placeholder ~ #{$base}__tr {\n      display: none;\n    }\n  }\n\n  // tbody th\n\n  th[scope='row'] {\n    font-weight: 800;\n    margin: 0;\n  }\n\n  // .sm & th[scope='row'] {\n  //   max-width: 65vw !important;\n  // }\n\n  // pinned styles\n\n  &__pin {\n    position: sticky;\n    transform: translateZ(0);\n\n    &--start {\n      inset-inline: -1px auto;\n      transition: max-width 0.25s ease;\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        box-shadow: 5px 1px 4px 0 rgb(0 0 0 / 20%);\n        opacity: 0;\n        z-index: -1;\n      }\n\n      #{$base}__pinned--start & {\n        z-index: 2;\n        max-width: 125px !important;\n\n        .sm & {\n          max-width: var(--max-col-width) !important;\n        }\n\n        &::after {\n          opacity: 1;\n        }\n      }\n    }\n\n    &--end {\n      /*\n        I cannot think of a nice way to make stuck-end columns play nice on small screens :(\n        Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.\n        This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ad-infinitum\n      */\n      #{$base}__pin--start + & {\n        inset-inline: auto auto;\n\n        &::after {\n          display: none;\n        }\n      }\n\n      .sm & {\n        inset-inline: auto -1px !important;\n        max-width: min(50vw, 200px);\n\n        &::after {\n          display: block !important;\n          content: '';\n          position: absolute;\n          inset: 0;\n          box-shadow: -5px 1px 4px 0 rgb(0 0 0 / 20%);\n          opacity: 0;\n          z-index: -1;\n        }\n      }\n\n      #{$base}__pinned--end & {\n        .sm & {\n          &::after {\n            opacity: 1;\n          }\n        }\n      }\n    }\n\n    &--top {\n      inset-block: -1px auto;\n\n      #{$base}__pinned--top & {\n        z-index: 4 !important;\n      }\n    }\n\n    &--bottom {\n      inset-block: auto -1px;\n\n      #{$base}__pinned--bottom & {\n        z-index: 5 !important;\n      }\n    }\n\n    &--top#{&}--start {\n      #{$base}__pinned--start & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--top#{$base}__pinned--start & {\n        z-index: 6 !important;\n      }\n    }\n\n    &--top#{&}--end {\n      #{$base}__pinned--end & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--top#{$base}__pinned--end & {\n        z-index: 6 !important;\n      }\n    }\n\n    &--bottom#{&}--start {\n      #{$base}__pinned--start & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--bottom#{$base}__pinned--start & {\n        z-index: 6 !important;\n      }\n    }\n\n    &--bottom#{&}--end {\n      #{$base}__pinned--end & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--bottom#{$base}__pinned--end & {\n        z-index: 6 !important;\n      }\n    }\n  }\n\n  thead tr:last-of-type {\n    td,\n    th {\n      border-block-end: var(--border-tint-style);\n    }\n  }\n\n  tfoot tr:first-of-type {\n    td,\n    th {\n      border-block-start: none;\n    }\n  }\n\n  tfoot tr:last-of-type {\n    td,\n    th {\n      border-block-end: var(--border-tint-style);\n    }\n  }\n\n  tfoot tr.nano-tbl__pin--bottom {\n    &:first-of-type {\n      .nano-tbl__pinned--bottom & {\n        td,\n        th {\n          border-block-start: var(--border-tint-style) !important;\n        }\n      }\n    }\n\n    &:last-of-type {\n      .nano-tbl__pinned--bottom & {\n        td,\n        th {\n          border-block-end: none !important;\n        }\n      }\n    }\n  }\n\n  .unlimited-width {\n    max-width: none;\n  }\n\n  &__spinner {\n    font-size: 1.5rem;\n    transition: scale 0.25s;\n    scale: 0;\n    padding: 0.5rem;\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline-start: calc(50% - 0.75rem);\n    z-index: 0;\n\n    &--show {\n      scale: 1;\n      position: sticky;\n    }\n  }\n\n  nano-skeleton {\n    line-height: var(--cell-line-height);\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  Element,\n  Host,\n  Watch,\n  State,\n  readTask,\n  Event,\n  EventEmitter,\n  Method,\n  Build,\n} from '@stencil/core';\nimport { cyrb53 } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\nimport {\n  NanoResizeObserveCustomEvent,\n  ResizeStateChangeEventDetail,\n  TableTypes,\n} from '../../interface';\nimport { TableColHead } from './table.header';\nimport { TableRow, TableHeadFootRow } from './table.row';\nimport { TableCell } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  generateStore,\n  storeSearch,\n  storeSetConfig,\n  storeSetData,\n  storeSort,\n  storeFilter,\n  TableStores,\n} from './table.store';\nimport { findScrollParent, isInViewport } from './table.utils';\n\nconst measurePerf = false;\n\nfunction perMark(name: string, end: boolean = false) {\n  if (!Build.isDev || Build.isTesting || !performance || !measurePerf) return;\n  if (end) {\n    performance?.mark('end' + name);\n    performance?.measure(name, 'start' + name, 'end' + name);\n    const entries = performance?.getEntriesByName(name);\n    console.log(entries[entries.length ? entries.length - 1 : 0]);\n  } else {\n    performance?.mark('start' + name);\n  }\n}\n\nlet id = 0;\n/**\n * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n *\n *- Built-in search\n *- Built-in column filter\n *- Built-in column sort\n *- Easily swap in API / async based search / filter & sort\n *- Pin headers, footers, rows, columns\n *- Add custom rendering at every level\n *- Add custom properties at every level\n *\n * @slot caption - The table's caption. You must either use this or the `caption` attribute.\n * @slot no-results - text to display when search or filtering yields no results\n */\n@Component({\n  tag: 'nano-table',\n  styleUrl: 'table.scss',\n})\nexport class Table implements ComponentInterface {\n  constructor() {\n    this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);\n  }\n  // Public API\n\n  // Props\n\n  /** The type of table. Grid type will make cells navigable by keyboard */\n  @Prop() type: 'grid' | 'table' = 'table';\n\n  /** A descriptive title of the table.\n   * You must use this or the `slot=\"caption\"` for accessibility */\n  @Prop() caption: string;\n\n  /** Show the caption on-screen */\n  @Prop() showCaption: boolean = false;\n\n  /** Will show a loading state when set to true.\n   * By default, will be shown automatically if `rows` is a promise waiting to resolve\n   * or when performing custom filtering or sorting.\n   * *Note* when set manually, will overwrite any internal loading state.\n   * Set to 'undefined' to revert to default behaviour. */\n  @Prop() loading: boolean = undefined;\n\n  get _loading() {\n    return this.loading !== undefined ? this.loading : this.internalLoading;\n  }\n  set _loading(l: boolean) {\n    if (this.loading !== undefined) return;\n    this.debounceSetLoading(l);\n  }\n  private debounceSetLoading(l: boolean) {\n    this.internalLoading = l;\n  }\n  @State() internalLoading = false;\n\n  /** When loading rows asynchronously, this will render this number of placeholder rows */\n  @Prop() placeholderSize = 5;\n\n  /** The data to place in the table */\n  @Prop({ mutable: true }) rows:\n    | TableTypes.NanoTable['rows']\n    | Promise<TableTypes.NanoTable['rows']>;\n\n  @Watch('rows')\n  handleRowsChange() {\n    if (!this.rows) {\n      this._loading = true;\n      return;\n    }\n\n    this._loading = true;\n    Promise.resolve(this.rows).then(async (rows) => {\n      await storeSetData(this.host, rows);\n\n      // reset everything\n      this.currentFilters = '';\n      this.currentSort = '';\n      await this.columnInit();\n\n      if (!this.isReady)\n        requestAnimationFrame(() => this.setInitialBlockDimension());\n      this._loading = false;\n    });\n  }\n\n  /** The column config used to present the rows of data */\n  @Prop({ mutable: true }) columns: TableTypes.NanoTable<any>['columns'] = [];\n\n  @Watch('columns')\n  async handleColsChange() {\n    await storeSetConfig(this.host, this.columns);\n    if (this.isReady) this.columnInit();\n  }\n\n  /** Used for custom thead row rendering */\n  @Prop() headRender: TableTypes.HeadFootRenderer = { pinned: 'top' };\n\n  /** Used for custom row rendering */\n  @Prop() rowRender: TableTypes.RowRenderer;\n\n  /** Used for custom tfoot row rendering */\n  @Prop() footRender: TableTypes.HeadFootRenderer = { pinned: 'bottom' };\n\n  /** Whether to show a `<tfoot>` component */\n  @Prop() showFooter = false;\n\n  /** To improve performance, data is split into blocks\n   * which are shown / hidden and rendered as they become visible.\n   * Use this to control the number of hits within a block -\n   * A block should fill a scrolling viewport.\n   * The less perBlock the better for performance */\n  @Prop() perBlock = 40;\n\n  /** The number of total blocks currently rendered in the table. @readonly */\n  @Prop()\n  get blocksLength() {\n    return this.blocks.length;\n  }\n\n  /** Term to search for in the data */\n  @Prop() searchTerm: string;\n\n  /** A custom filtering function. Should return a promise.\n   * If the promise resolves as `true` the column UI will be updated.\n   * If the promise resolves as falsey, the sort will be performed by the component.\n   * A good use-case would be performing the filter on a server / via fetch.\n   * Then on success, updating the table's data via the `rows` property */\n  @Prop() customFilterFn?: (\n    filters: TableTypes.Filter[]\n  ) => Promise<true | TableTypes.Falsy>;\n\n  /** A custom sorting function. Should return a promise.\n   * If the promise resolves as `true` the column UI will be updated.\n   * If the promise resolves as falsey, the sort will be performed by the component.\n   * A good use-case would be performing the sort on a server / via fetch.\n   * Then on success, updating the table's data via the `rows` property */\n  @Prop() customSortFn?: (\n    property: TableTypes.Prop,\n    order: TableTypes.Order\n  ) => Promise<true | TableTypes.Falsy>;\n\n  /**\n   * The default sortable option for all columns.\n   * `true` will enable column sorting unless you set `sortable: false` on a column\n   * `false` will disable column sorting unless you set `sortable: true` on a column\n   */\n  @Prop() defaultSort = true;\n\n  @Watch('searchTerm')\n  handleSearchTermChange() {\n    this.searchStart();\n  }\n\n  /** Use this to render the table with roughly the correct dimensions.\n   * a use-case might be; fetch a small initial dataset to minimise load-time,\n   * render the table with the correct dimensions, the table becomes interactive,\n   * load the rest of the data\n   */\n  @Prop() virtualTotalItems: number = 0;\n\n  @Watch('virtualTotalItems')\n  virtualTotalItemsChangeHandler() {\n    this.setBlocks();\n  }\n\n  /** Fired when the table has done it's first complete render */\n  @Event() nanoTblReady: EventEmitter;\n\n  /** Fired whenever a block is activated by scrolling into view / becoming visible\n   * This could be leveraged for infinite scrolling / to fetch more data.\n   */\n  @Event() nanoTblBlockRendered: EventEmitter<{\n    block: number;\n    totalBlocks: number;\n  }>;\n\n  /** Fired before a column is sorted.\n   * `event.preventDefault()` to stop sorting.  */\n  @Event() nanoTblBeforeSort: EventEmitter<{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }>;\n\n  /** Fired after a column is sorted */\n  @Event() nanoTblAfterSort: EventEmitter<{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }>;\n\n  /** Fired before a column is filtered.\n   * `event.preventDefault()` to stop filtering. */\n  @Event() nanoTblBeforeFilter: EventEmitter<{ filters: TableTypes.Filter[] }>;\n\n  /** Fired after a column is sorted */\n  @Event() nanoTblAfterFilter: EventEmitter<{ filters: TableTypes.Filter[] }>;\n\n  /** Fired before a general search.\n   * `event.preventDefault()` to stop searching.  */\n  @Event() nanoTblBeforeSearch: EventEmitter<{ term: string }>;\n\n  /** Fired after a general / cross column search */\n  @Event() nanoTblAfterSearch: EventEmitter<{ term: string }>;\n\n  /** Fired before a general search.\n   * `event.preventDefault()` to stop searching.  */\n  @Event() nanoTblBeforeEdit: EventEmitter<{ term: string }>;\n\n  /** Remove any column sorts currently applied\n   * @returns a promise which resolves when complete */\n  @Method()\n  async resetSorting() {\n    const col = (this.columns as TableTypes.NanoTable['columns']).find(\n      (c) => !!c.order\n    );\n    if (!col) return;\n    return this.sortStart(null, col.prop);\n  }\n\n  /** Apply a sort on a column\n   * @returns a promise which resolves when complete */\n  @Method()\n  async addSort(column: TableTypes.Prop, order: TableTypes.Order) {\n    const col = (this.columns as TableTypes.NanoTable['columns']).find(\n      (c) => c.prop === column\n    );\n    if (!col) throw 'Cannot find column with ' + column;\n    return this.sortStart(order, col.prop);\n  }\n\n  /** Remove any column filters currently applied\n   * @returns a promise which resolves when complete */\n  @Method()\n  async resetFilters() {\n    this.filters = [];\n    return this.filterStart();\n  }\n\n  /** Apply a filter on a column\n   * @param filters - the filters to apply\n   * @param additive - if true, will add the filters to any currently applied\n   * @returns a promise which resolves when complete\n   */\n  @Method()\n  async addFilters(filters: TableTypes.Filter[], additive: boolean = true) {\n    if (!additive) this.filters = [];\n    return this.filterStart(filters, additive);\n  }\n\n  /** Remove filters from a column\n   * @param columnNames - the filters to apply\n   * @returns a promise which resolves when complete\n   */\n  @Method()\n  async removeFilters(columnNames: TableTypes.Prop[]) {\n    this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));\n    return this.filterStart();\n  }\n\n  /** Updates a row model at a given index\n   * @param row - the row to update.\n   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property\n   * - rows are augmented with certain properties to aid with efficient rendering\n   * @param rowIndex - the row index to insert this row\n   */\n  @Method()\n  async updateRow(row: TableTypes.RowData, rowIndex: number) {\n    (this.rows as TableTypes.NanoTable['rows']).splice(rowIndex, 1, row);\n    this.handleRowsChange();\n  }\n\n  // TODO.\n  // change this.rows to be a Map instead?\n  // this will allow 'padding' < inserting row data at a non-adjacent index\n\n  // /**\n  //  * During pagination or infinite scroll\n  //  * you may not always want to load data in serial order.\n  //  * This method allows you to insert a block of results at a particular index.\n  //  * Use in-conjunction with `virtualTotalItems`\n  //  * @param blockIndex - where to insert\n  //  * @param rows - what to insert\n  //  */\n  //  @Method()\n  //  async insertBlock(blockIndex: number, rows: TableTypes.NanoTable['rows']) {\n  //    this.pauseAutoBlockAssign = true;\n  //    const cRows = (this.rows as TableTypes.NanoTable['rows']);\n\n  //    if (cRows.length < (blockIndex * this.perBlock)) {\n  //      (this.rows as TableTypes.NanoTable['rows'])\n  //    }\n\n  //    (this.rows as TableTypes.NanoTable['rows']).splice((blockIndex * this.perBlock)-1, 0, ...rows);\n\n  //    console.log(this.rows)\n  //    debugger;\n\n  //    await this.handleRowsChange(this.rows);\n  //    this.blocks[blockIndex] = {rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join())};\n  //    this.blocks = this.blocks;\n  //    this.pauseAutoBlockAssign = true;\n\n  //    console.log(this.rows, this.blocks)\n  //  }\n\n  // Private State\n\n  @Element() host: HTMLNanoTableElement;\n  private renderId = 'tbl-' + id++;\n  private store: TableStores;\n  private filters: TableTypes.Filter[] = [];\n  private currentFilters = '[]';\n  private currentSort = '';\n  private tableEle: HTMLTableElement;\n  private topAnchorEle: HTMLElement;\n  private tableWrapperEle: HTMLElement;\n  private cacheScrollPosition: number = 0;\n  private activeWatcherIo: IntersectionObserver;\n\n  // Block view management\n\n  /** `tr` elements split into units - defined by `perBlock`\n    These are show / hidden for perf */\n  @State() blocks: TableTypes.TBody[] = [];\n  @State() activeBlocks: number[] = [0, 1, 2];\n\n  private measureHeight = 0;\n  private blockElements: HTMLTableSectionElement[];\n  private blockHeights: { blockIndex: number; height: number }[] = [];\n\n  // uses the first 'tr' of an active block as our yard stick\n  private set measureEle(el: HTMLTableSectionElement) {\n    if (!el) return;\n    const potentialHeight = el.getBoundingClientRect().height;\n    this.measureHeight =\n      Math.abs(this.measureHeight - potentialHeight) < 5\n        ? this.measureHeight\n        : potentialHeight;\n    this.unitHeight =\n      el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;\n  }\n\n  private unitHeight = 0;\n\n  private get scrollParent() {\n    return this._scrollParent;\n  }\n\n  private set scrollParent(ele: HTMLElement) {\n    if (ele === this._scrollParent) return;\n\n    if (this._scrollParent) {\n      (this._scrollParent === document.documentElement\n        ? document\n        : this._scrollParent\n      ).removeEventListener('scroll', this.scrollHandler);\n    }\n    (ele === document.documentElement ? document : ele).addEventListener(\n      'scroll',\n      this.scrollHandler\n    );\n    this._scrollParent = ele;\n  }\n\n  private _scrollParent: HTMLElement;\n\n  // used to fire `nanoTblBlockRendered` on block render change\n  private get primaryBlockIndex() {\n    return this._primaryBlockIndex;\n  }\n\n  private set primaryBlockIndex(blockIndex) {\n    if (this._primaryBlockIndex === blockIndex) return;\n\n    this._primaryBlockIndex = blockIndex;\n\n    // fire block change event\n    this.nanoTblBlockRendered.emit({\n      block: blockIndex,\n      totalBlocks: this.blockElements.length,\n    });\n  }\n\n  private _primaryBlockIndex;\n\n  // Misc.\n\n  private get isReady() {\n    return this._isReady;\n  }\n  private set isReady(ready: boolean) {\n    if (ready === this._isReady) return;\n    this._isReady = ready;\n    if (this.isReady) requestAnimationFrame(() => this.handleReady());\n  }\n  private _isReady = false;\n\n  // Private Logic\n\n  // Listeners\n\n  private handleReady() {\n    const hash = window.location.hash;\n    if (hash.length > 1) {\n      try {\n        const idRow = document.querySelector(hash);\n        if (idRow) idRow.scrollIntoView();\n      } catch (e) {}\n    }\n    this.nanoTblReady.emit();\n  }\n\n  /**\n   * Start a sort - can be cancelled by `preventDefault`\n   * @param order - column order\n   * @param column - column config object\n   * @returns A promise\n   */\n  private sortStart = async (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    element?: HTMLElement\n  ) => {\n    // did order change?\n    if (this.currentSort === order + ':' + column) return;\n\n    this._loading = true;\n    const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });\n    if (sortEvent.defaultPrevented) return;\n    perMark('sort');\n    this.currentSort = order + ':' + column;\n\n    // doesn't make sense to leave user in place for a sort\n    this.scrollToTop(element);\n\n    if (this.customSortFn) {\n      try {\n        const res = await this.customSortFn(column, order);\n\n        // if the response is 'true', the custom sort did it's thing\n        // handover to finish and stop loading state.\n        // if response is falsey, carry on to do a FE sort\n        if (res === true) {\n          this.sortComplete(order, column);\n          this._loading = false;\n          return;\n        }\n      } catch (e) {\n        // if response errored, stop loading state\n        // clear current sort cache\n        console.warn('custom sort failed', e);\n        this.currentSort = '';\n        this._loading = false;\n        return;\n      }\n    }\n\n    try {\n      await storeSort(this.host, column, order);\n      this.sortComplete(order, column);\n    } catch (e) {\n      console.warn('sort failed', e);\n      this.currentSort = '';\n    } finally {\n      if (this.blocks.length) this._loading = false;\n    }\n  };\n\n  /**\n   * Complete a sort. Reflects the order to ui.\n   * @param order - column order\n   * @param column - column config object\n   */\n  private sortComplete(order: TableTypes.Order, column: TableTypes.Prop) {\n    this.columns = this.columns.map((c) => {\n      if (c.prop === column) return { ...c, order };\n      return { ...c, order: null };\n    });\n    this.nanoTblAfterSort.emit({ column: column, order });\n    perMark('sort', true);\n  }\n\n  private async searchStart() {\n    this._loading = true;\n    const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });\n    if (sortEvent.defaultPrevented) return;\n    perMark('search');\n\n    // doesn't make sense to leave user in place for a search\n    this.scrollToTop();\n\n    try {\n      await storeSearch(this.host, this.searchTerm);\n      this.nanoTblAfterSearch.emit({ term: this.searchTerm });\n      perMark('search', true);\n    } catch (e) {\n      console.warn('search failed', e);\n    } finally {\n      this._loading = false;\n    }\n  }\n\n  private async filterStart(\n    filters?: TableTypes.Filter[],\n    additive: boolean = true\n  ) {\n    if (filters) {\n      if (additive) {\n        this.filters = [\n          ...this.filters.filter(\n            (f) => !filters.find((ff) => ff.prop === f.prop)\n          ),\n          ...filters,\n        ];\n      } else {\n        this.filters = filters;\n      }\n    }\n\n    if (this.currentFilters === JSON.stringify(this.filters)) return;\n\n    this._loading = true;\n    const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });\n    if (sortEvent.defaultPrevented) return;\n    perMark('filter');\n    this.currentFilters = JSON.stringify(this.filters);\n\n    // doesn't make sense to leave user in place for a search\n    this.scrollToTop();\n\n    if (this.customFilterFn) {\n      try {\n        const res = await this.customFilterFn(this.filters);\n\n        // if the response is 'true', the custom filter did it's thing\n        // handover to finish and stop loading state.\n        // if response is falsey, carry on to do a FE filter\n        if (res === true) {\n          this.filterComplete();\n          this._loading = false;\n        }\n      } catch (e) {\n        // if response errored, stop loading state\n        // clear current sort cache\n        console.warn('custom filter failed', e);\n        this.currentFilters = '';\n        this._loading = false;\n      }\n      return;\n    }\n\n    try {\n      await storeFilter(this.host, this.filters);\n      this.filterComplete();\n    } catch (e) {\n      console.warn('filter failed', e);\n    } finally {\n      this._loading = false;\n    }\n  }\n\n  private filterComplete() {\n    this.columns = this.columns.map((c) => {\n      const cFilter = this.filters.find((f) => f.prop === c.prop);\n      if (cFilter) c.filter = cFilter.filter;\n      else if (c.filter !== null && c.filter !== undefined)\n        c.filter = undefined;\n\n      return c;\n    });\n    this.nanoTblAfterFilter.emit({ filters: this.filters });\n    perMark('filter', true);\n  }\n\n  /** Scrolls to the top immediately - used whilst sorting / filtering */\n  private scrollToTop(element?: HTMLElement) {\n    const scrollBehaviour = this.scrollParent.style?.scrollBehavior;\n    const scrollX = this.scrollParent.scrollLeft;\n    this.scrollParent.style.scrollBehavior = 'auto';\n\n    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {\n      this.host.scrollIntoView();\n    }\n    if (element && !isInViewport(element, 1))\n      setTimeout(() => element.scrollIntoView({ block: 'start' }), 500);\n\n    if (scrollX) this.scrollParent.scrollLeft = scrollX;\n\n    if (scrollBehaviour)\n      this.scrollParent.style.scrollBehavior = scrollBehaviour;\n\n    this.scrollHandler();\n  }\n\n  private setMeasureElement(): Promise<void> {\n    return new Promise((resolve) => {\n      readTask(() => {\n        this.measureEle = this.blockElements.find(\n          (b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`)\n        );\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Makes sure we have dimensions on at least one, active tbody element.\n   * We'll use this is a yard stick for inactive tbody elements in future.\n   * These elements have no natural height (on account of all their rows being hidden)\n   */\n  private setInitialBlockDimension() {\n    if (!this.blockElements?.length) return;\n    perMark('blockDims');\n\n    const testForDimensions = async () => {\n      await this.setMeasureElement();\n      if (this.unitHeight) return true;\n      return false;\n    };\n\n    const dimensionsReady: Promise<void> = new Promise(async (resolve) => {\n      if (await testForDimensions()) resolve();\n      else {\n        // it's likely this table is hidden in the dom.\n        // we need to wait until it's visible\n        const observer = new IntersectionObserver(\n          async () => {\n            if (await testForDimensions()) {\n              resolve();\n              observer.disconnect();\n            }\n          },\n          { root: this.scrollParent }\n        );\n        observer.observe(this.tableEle);\n      }\n    });\n\n    // we're all finished.\n    dimensionsReady.then(() => {\n      perMark('blockDims', true);\n      perMark('init', true);\n      requestAnimationFrame(() => (this.isReady = true));\n    });\n  }\n\n  /** Apply initial columns settings */\n  private async columnInit() {\n    this.filters = (this.columns as TableTypes.NanoTable['columns'])\n      .filter((c) => c.filter !== undefined && c.filter !== null)\n      .map((c) => {\n        const { filter, prop } = c;\n        return { filter, prop };\n      });\n\n    if (this.searchTerm) {\n      await this.searchStart();\n    }\n\n    if (this.filters.length) {\n      await this.filterStart();\n    }\n    // apply sort\n    const col = (this.columns as TableTypes.NanoTable['columns']).find(\n      (c) => !!c.order\n    );\n    if (!!col) {\n      await this.sortStart(col.order, col.prop);\n    }\n  }\n\n  /** Split up all incoming rows into 'blocks' split amongst tbody elements.\n   * These can then be hidden / shown to improve performance.\n   */\n  private setBlocks() {\n    const dRows = this.store.data.state.rows;\n    if (!dRows.length) {\n      this.blocks = [];\n      return;\n    }\n\n    perMark('setBlocks');\n    // this.ignoreIO = true;\n    let i = 1;\n    const l =\n      this.virtualTotalItems > dRows.length\n        ? this.virtualTotalItems\n        : dRows.length;\n    let rows: TableTypes.RowData[] = [];\n    const blocks: TableTypes.TBody[] = [];\n    this.blockHeights = [];\n\n    // old skool loop for perf\n    for (i; i <= l; i++) {\n      rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });\n\n      if (i % this.perBlock === 0) {\n        // assign a UUID for the whole block\n        // for block diffing\n        blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });\n        rows = [];\n      }\n    }\n\n    // any leftover rows\n    if (rows.length) {\n      blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });\n    }\n\n    this.blocks = blocks;\n    perMark('setBlocks', true);\n  }\n\n  /**\n   * Returns a block render height.\n   * If it's currently active - let auto do it's thing\n   * If we've rendered it before - return that\n   * If all else fails, let's guess it\n   * @param blockIndex\n   * @returns a height string (incl px)\n   */\n  private getBlockHeight(blockIndex: number): number {\n    if (this.blockHeights.length) {\n      const cachedBlockHeight = this.blockHeights.find(\n        (bh) => bh.blockIndex === blockIndex\n      );\n      if (cachedBlockHeight) return cachedBlockHeight.height;\n    }\n    const blockLength = this.blocks[blockIndex].rows.length;\n    if (blockLength === this.perBlock && this.measureHeight) {\n      return this.measureHeight;\n    }\n    return this.unitHeight ? this.unitHeight * blockLength : undefined;\n  }\n\n  /** cache the height for all active blocks for later renders */\n  private setBlockHeight() {\n    this.activeBlocks.forEach((blockIndex) => {\n      const el = this.blockElements[blockIndex];\n      if (!el) return;\n      readTask(() => {\n        const height = el.getBoundingClientRect().height;\n        // cache height to our block heights array\n        // for subsequent renders\n        const fBhIdx = this.blockHeights.findIndex(\n          (bh) => bh.blockIndex === blockIndex\n        );\n        if (fBhIdx > -1) {\n          this.blockHeights[fBhIdx] = { height, blockIndex };\n        } else this.blockHeights.push({ height, blockIndex });\n      });\n    });\n  }\n\n  /**\n   * On scroll, loop through all blocks' heights and cumulatively, add them together.\n   * When we find that the scroll position is less than this cumulative block height -\n   * stop loop - it's on the current active block.\n   */\n  private scrollHandler = () => {\n    // don't listen if this table isn't in the viewport\n    if (!this.store.general.state.isActive) return;\n\n    readTask(() => {\n      this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;\n      let cumulativeHeight = this.host.offsetTop;\n      let blockIndex = 0;\n      const blockLen = this.blocks.length;\n\n      while (\n        blockIndex < blockLen &&\n        this.cacheScrollPosition >= cumulativeHeight\n      ) {\n        cumulativeHeight += this.getBlockHeight(blockIndex);\n\n        if (this.cacheScrollPosition < cumulativeHeight) {\n          const potentialBlocks = [\n            blockIndex,\n            blockIndex + 1,\n            Math.max(0, blockIndex - 1),\n          ];\n          if (potentialBlocks.toString() !== this.activeBlocks.toString()) {\n            this.activeBlocks = potentialBlocks;\n            this.setBlockHeight();\n          }\n          this.primaryBlockIndex = blockIndex;\n        }\n        blockIndex++;\n      }\n    });\n  };\n\n  /** Process slotted content */\n  private processSlots() {\n    // see if we have slot content\n    if (!this.caption && !this.host.querySelector('[slot=\"caption\"]')) {\n      console.error(\n        'For accessibility you must set a `caption` prop or use the `caption` slot'\n      );\n    }\n  }\n\n  private handleColumnPinned = (positions: {\n    [key in TableTypes.Position]: boolean;\n  }) => {\n    Object.entries(positions).forEach(([key, applied]) => {\n      this.tableEle.classList.toggle(\n        `${CSSNAMESPACE}__pinned--${key}`,\n        applied\n      );\n    });\n  };\n\n  private handleResizeChange = (\n    e: NanoResizeObserveCustomEvent<ResizeStateChangeEventDetail>\n  ) => {\n    this.tableWrapperEle.className = '';\n\n    let classes: string[] = [`${CSSNAMESPACE}__wrap`];\n    if (e.target?.className)\n      classes = [...e.target.className.split(' '), ...classes];\n\n    this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));\n  };\n\n  /** Adds an IO. Makes sure our scroll listener is only active when\n   * the table is in viewport */\n  private setupActiveWatcher() {\n    if (!this.host || !this.scrollParent || !this.store) return;\n\n    if (this.activeWatcherIo) {\n      this.activeWatcherIo.disconnect();\n      this.activeWatcherIo = undefined;\n    }\n    const io = (this.activeWatcherIo = new IntersectionObserver(\n      async ([e]) => {\n        if (e.isIntersecting) this.store.general.state.isActive = true;\n        else this.store.general.state.isActive = false;\n      },\n      { root: this.scrollParent, threshold: 0 }\n    ));\n    io.observe(this.host);\n  }\n\n  // Component lifecycle\n\n  async componentWillLoad() {\n    perMark('init');\n    // setup stores\n    this.store = await generateStore(\n      this.host,\n      this.columns,\n      this.scrollParent,\n      this.isReady\n    );\n    await this.handleRowsChange();\n    this.store.general.onChange('isActive', this.scrollHandler);\n    this.store.data.onChange('rows', () => this.setBlocks());\n\n    // setup dom and attach listeners\n    this.processSlots();\n    this.setBlocks();\n    this.scrollParent = findScrollParent(this.host);\n    this.setupActiveWatcher();\n  }\n\n  connectedCallback(): void {\n    this.scrollParent = findScrollParent(this.host);\n    this.setupActiveWatcher();\n  }\n\n  componentDidLoad(): void {\n    this.setInitialBlockDimension();\n  }\n\n  componentShouldUpdate(_newVal, _oldVal, stateName: keyof Table) {\n    // stop double rendering - we use the store for rendering internally\n    // the public facing props are kept in-sync with the store\n    // but we don't want it to cause renders\n    if (['rows', 'columns'].includes(stateName)) return false;\n\n    if (Build.isDev && !Build.isTesting && measurePerf)\n      console.log(stateName, _newVal, _oldVal);\n  }\n\n  componentWillRender(): void | Promise<void> {\n    perMark('render');\n  }\n\n  componentDidRender(): void {\n    this.setMeasureElement();\n    perMark('render', true);\n  }\n\n  disconnectedCallback(): void {\n    if (!this.activeWatcherIo) return;\n    this.activeWatcherIo.disconnect();\n    this.activeWatcherIo = undefined;\n  }\n\n  render() {\n    this.blockElements = [];\n\n    return (\n      <Host>\n        <div\n          class={`${CSSNAMESPACE}__top-anchor`}\n          ref={(a) => (this.topAnchorEle = a)}\n        >\n          &nbsp;\n        </div>\n\n        <nano-resize-observe\n          states=\"576w sm, 768w md\"\n          class=\"sm md\"\n          onNanoResizeStateChange={this.handleResizeChange}\n        ></nano-resize-observe>\n\n        <div\n          class={`${CSSNAMESPACE}__wrap sm md`}\n          ref={(div) => (this.tableWrapperEle = div)}\n          aria-labelledby={'table-caption-' + this.renderId}\n          tabindex={this.type === 'grid' ? '0' : undefined}\n        >\n          <nano-progress-bar\n            indeterminate\n            class={{\n              [`${CSSNAMESPACE}__progress-bar`]: true,\n              [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,\n            }}\n          />\n          <table\n            role={this.type === 'grid' ? 'grid' : undefined}\n            aria-rowcount={this.store.data.state.rows.length}\n            aria-colcount={this.store.config.state.columns.length}\n            class={`${CSSNAMESPACE}`}\n            ref={(tbl) => (this.tableEle = tbl)}\n          >\n            <caption\n              class={{\n                [`${CSSNAMESPACE}__caption`]: true,\n                [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,\n              }}\n              id={'table-caption-' + this.renderId}\n            >\n              <slot name=\"caption\">{this.caption}</slot>\n            </caption>\n\n            {/* Header */}\n            <thead>\n              <TableHeadFootRow\n                rowRenderer={this.headRender}\n                onColumnPinned={this.handleColumnPinned}\n              >\n                {this.store.config.state.columns.map((colModel) => [\n                  <TableColHead\n                    column={colModel}\n                    headRenderer={this.headRender}\n                    onColumnSortClick={this.sortStart}\n                    onColumnPinned={this.handleColumnPinned}\n                    defaults={{\n                      sortable: this.defaultSort,\n                    }}\n                  />,\n                ])}\n              </TableHeadFootRow>\n            </thead>\n\n            {this._loading && !this.blocks.length && (\n              <tbody class={`${CSSNAMESPACE}__active`}>\n                {[...Array(10).keys()].map((rowIndex) => (\n                  <tr>\n                    {this.store.config.state.columns.map(\n                      (_colModel, colIndex) => (\n                        <TableCell\n                          rowIndex={rowIndex}\n                          colIndex={colIndex}\n                          nestedContent={() => <nano-skeleton />}\n                        />\n                      )\n                    )}\n                  </tr>\n                ))}\n              </tbody>\n            )}\n\n            <tr hidden={!!this._loading || !!this.blocks.length}>\n              <th\n                class={`${CSSNAMESPACE}__th`}\n                colSpan={this.store.config.state.columns.length}\n              >\n                <div class=\"nano-tbl__cell-content nano-tbl__cell-content--no-result\">\n                  <slot name=\"no-results\">No results found</slot>\n                </div>\n              </th>\n            </tr>\n\n            {/* Body */}\n            {this.blocks.map((block, blockIndex) => (\n              <tbody\n                key={block.__uuid}\n                id={`tbody-${this.renderId}-${blockIndex}`}\n                ref={(tb) => {\n                  this.blockElements.push(tb);\n                }}\n                class={{\n                  [`${CSSNAMESPACE}__inactive`]:\n                    !this.activeBlocks.includes(blockIndex),\n                  [`${CSSNAMESPACE}__active`]:\n                    this.activeBlocks.includes(blockIndex),\n                }}\n              >\n                {this.activeBlocks.includes(blockIndex) ? (\n                  block.rows.map((row, i) => {\n                    const rowIndex =\n                      blockIndex > 0 ? blockIndex * this.perBlock + i : i;\n                    return (\n                      <TableRow\n                        rowRenderer={this.rowRender}\n                        rowModel={row}\n                        rowIndex={rowIndex}\n                      >\n                        {this.store.config.state.columns.map(\n                          (_colModel, colIndex) => (\n                            <TableCell\n                              rowIndex={rowIndex}\n                              colIndex={colIndex}\n                            />\n                          )\n                        )}\n                      </TableRow>\n                    );\n                  })\n                ) : (\n                  <tr>\n                    <td\n                      colSpan={this.store.config.state.columns.length}\n                      style={{\n                        height: this.getBlockHeight(blockIndex) + 'px',\n                      }}\n                    />\n                  </tr>\n                )}\n              </tbody>\n            ))}\n\n            {/* Footer */}\n            {this.showFooter && (\n              <tfoot>\n                <TableHeadFootRow\n                  rowRenderer={this.footRender}\n                  onColumnPinned={this.handleColumnPinned}\n                >\n                  {this.store.config.state.columns.map((colModel) => [\n                    <TableColHead\n                      column={colModel}\n                      headRenderer={this.footRender}\n                      onColumnPinned={this.handleColumnPinned}\n                      onColumnSortClick={this.sortStart}\n                      defaults={{\n                        sortable: this.defaultSort,\n                      }}\n                    />,\n                  ])}\n                </TableHeadFootRow>\n              </tfoot>\n            )}\n          </table>\n\n          {!!this.blocks.length && (\n            <nano-spinner\n              type=\"circle\"\n              class={{\n                [`${CSSNAMESPACE}__spinner`]: true,\n                [`${CSSNAMESPACE}__spinner--show`]: this._loading,\n              }}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;mMAAO,MAAMA,EAAe,WCI5B,MAAMC,EAAe,CAACC,EAAOC,KAC3B,MAAMC,EAAIC,WAAWF,GACrB,OAAOC,GAAK,MAAQF,aAAiBE,CAAC,EAExC,MAAME,EAAoBJ,IACxB,GAAIA,GAAS,KAAM,CACnB,GACED,EAAaC,EAAO,gBACpBD,EAAaC,EAAO,gBACpBD,EAAaC,EAAO,gBACpBD,EAAaC,EAAO,mBACpB,CACA,MAAO,CAACA,EACZ,CACE,UAAWA,IAAU,SAAU,CAC7B,GAAIA,EAAMK,cAAgBC,OAAQ,CAClCN,EAAQM,OAAOC,OAAOP,EAC1B,CACI,GAAIQ,MAAMC,QAAQT,GAAQ,CAC1B,OAAOA,EAAMU,QAAQN,EACzB,CACI,OAAOA,EAAiBJ,EAAMW,OAClC,CACA,CACE,MAAO,EAAE,EAGX,IAAIC,EAAa,EACjB,IAAIC,EAAc,EAClB,MAAMC,EAAU,IAAIC,IACpB,MAAMC,EAAY,IAAID,IAEV,MAACE,EAAe,CAACC,EAAYC,EAAYC,KACnD,MAAMC,EAAS,IAAIC,OAAOJ,EAAY,CAACK,KAAKJ,IAE5CE,EAAOG,iBAAiB,WAAW,EAAEC,WACrC,GAAIA,EAAM,CACR,MAAMC,EAAYD,EAAK,GACvB,MAAME,EAAKF,EAAK,GAChB,MAAMzB,EAAQyB,EAAK,GAEnB,GAAIC,IAAcN,EAAa,CAC/B,MAAMQ,EAAMH,EAAK,GACjB,MAAOI,EAASC,EAAQjB,GAAeC,EAAQiB,IAAIJ,GACnDb,EAAQkB,OAAOL,GAEf,GAAIC,EAAK,CACP,MAAMK,EAAUL,EAAW,QACzBtB,OAAO4B,OAAO,IAAIC,MAAMP,EAAI5B,MAAMoC,SAAUR,EAAI5B,OAChD4B,EAAI5B,MAENqC,EAAaJ,GACbH,EAAOG,EACb,KAAW,CACL,GAAIpB,EAAa,CACjBA,EAAYyB,SAAQX,GAAMX,EAAUgB,OAAOL,IACjD,CACME,EAAQ7B,EACd,CACA,MAAW,GAAI0B,IAAcN,EAAc,MAAO,CAC9C,IACEJ,EAAUe,IAAIJ,EAAdX,IAAqBhB,EAG3B,CAFM,MAAOuC,GACPF,EAAaE,EACnB,CACA,CACA,KAGE,OAAOlB,CAAM,EAGR,MAAMmB,EAAoB,CAACnB,EAAQD,EAAaqB,IAAc,IAC/DC,IAAS,IAAIC,SAAQ,CAACd,EAASC,KACnC,IAAIc,EAAYhC,IAChB,IAAIiC,EAAI,EACR,IAAIC,EAASJ,EAAKK,OAClB,IAAIC,EAAW,CAACnB,EAASC,GACzBhB,EAAQmC,IAAIL,EAAWI,GAEvB,KAAOH,EAAIC,EAAQD,IAAK,CACtB,UAAWH,EAAKG,KAAO,WAAY,CACnC,MAAMK,EAAarC,IACnBG,EAAUiC,IAAIC,EAAYR,EAAKG,IAC/BH,EAAKG,GAAK,CAACzB,EAAc,MAAO8B,IAC/BF,EAAS,GAAKA,EAAS,IAAM,IAAIG,KAAKD,EAC3C,CACA,CACE,MAAME,EAAeC,GACnBA,EAAED,YACF,CAAChC,EAAawB,EAAWH,EAAgBC,GACzCtC,EAAiBsC,IAGnB,GAAIrB,EAAOiC,KAAM,CACfjC,EAAOiC,KAAKF,EAChB,KAAS,CACLA,EAAY/B,EAChB,K,qXC9EA,SAASkC,EAAaC,GACpB,MAAMC,EAAkDC,KAAKC,MAC3DD,KAAKE,UAAUJ,IAEjBA,EAAQlB,SAASuB,IACf,MAAMA,IAAC,MAADA,SAAC,SAADA,EAAGC,eAAe,CACtB,MAAMC,EAAUN,EAAYO,MAAMC,GAAOA,EAAGC,OAASL,EAAEK,OACvDH,EAAQD,cAAgBD,EAAEC,cAAcK,U,KAG5C,OAAOV,CACT,CAEA,MAAMW,EAA4C,IAAIC,QAE/CC,eAAeC,EACpBC,EACAhB,EACAiB,EACAC,GAEA,MAAMC,EAAqB,CACzBlD,KAAMmD,EAAY,CAAEC,KAAM,KAC1BC,OAAQF,EAAY,CAAEpB,YACtBuB,QAASH,EAAY,CAAEI,SAAU,KAAMP,eAAcD,OAAME,aAG7D,MAAM/C,QAAWsD,EACfN,EAAMlD,KAAKyD,MAAML,KACjBtB,EAAaoB,EAAMG,OAAOI,MAAM1B,UAElCmB,EAAMI,QAAQG,MAAMF,SAAWrD,EAC/ByC,EAAOnB,IAAIuB,EAAMG,GAIjBA,EAAMlD,KAAK0D,IAAI,CACbC,MAAO,KACL,GAAIT,EAAMI,QAAQG,MAAMF,SACtBK,EAAiBV,EAAMI,QAAQG,MAAMF,SAAU,KAAK,EAExDM,QAAS,KACP,GAAIX,EAAMI,QAAQG,MAAMF,SACtBK,EAAiBV,EAAMI,QAAQG,MAAMF,SAAU,KAAK,IAG1DL,EAAMG,OAAOK,IAAI,CACfC,MAAO,KACL,GAAIT,EAAMI,QAAQG,MAAMF,SACtBO,EAAmBZ,EAAMI,QAAQG,MAAMF,SAAU,KAAK,EAE1DM,QAAS,KACP,GAAIX,EAAMI,QAAQG,MAAMF,SACtBO,EAAmBZ,EAAMI,QAAQG,MAAMF,SAAU,KAAK,IAG5D,OAAOL,CACT,C,SAEgBa,EAAShB,GACvB,OAAOJ,EAAOrC,IAAIyC,EACpB,CAEA,SAASiB,EAAYzF,GACnB,GAAIA,aAAiB0F,KAAM,CACzB,MAAO,M,CAET,GAAI,CAAC,SAAU,SAAU,WAAWC,gBAAgB3F,GAAQ,CAC1D,cAAcA,C,CAEhB,MAAO,SACT,C,SAEgB4F,EAAapB,EAAmBK,GAC9C,MAAMF,EAAQP,EAAOrC,IAAIyC,GACzB,IAAKG,EAAO,OAEZ,MAAMkB,EAAOlB,EAAMG,OAAOI,MAAM1B,QAChC,MAAMsC,EAAyCD,EAC5CE,QAAQC,GAAQA,EAAIC,OAAS,SAC7BC,QAAO,CAACC,EAAMC,IACN,IAAID,EAAMC,EAAKlC,OACrB,IACL,MAAMmC,EAAoCR,EAAKE,QAAQC,IAASA,EAAIC,OAKpEpB,EAAOA,EAAKyB,KAAI,CAACC,EAAK1D,KAEpB,GAAIwD,EAAYtD,QAAUF,IAAM,EAAG,CACjC8B,EAAMG,OAAOI,MAAM1B,QAAUqC,EAAKS,KAAKN,IACrC,GAAIK,EAAYV,SAASK,IAAQO,EAAIP,EAAI9B,QAAU8B,EAAIC,KAAM,CAC3DD,EAAIC,KAAOR,EAAYc,EAAIP,EAAI9B,OAC/B,GAAI8B,EAAIC,OAAS,OAAQH,EAAS3C,KAAK6C,EAAI9B,K,CAE7C,OAAO8B,CAAG,G,CAKdF,EAASxD,SAASkE,I,MAGhB,MAAMC,GAAaC,EAAA,IAAIhB,KAAKa,EAAIC,OAAS,MAAAE,SAAA,EAAAA,EAAI,KAC7C,KAAMD,GAAcE,OAAOF,GAAaF,EAAIC,GAAWG,OAAOF,EAAW,IAG3EF,EAAI,WAAa1D,EACjB0D,EAAI,UAAYK,EAAOf,EAAKS,KAAKzC,GAAM0C,EAAI1C,EAAEK,QAAO2C,QAEpD,OAAON,CAAG,IAEZ5B,EAAMlD,KAAKyD,MAAML,KAAOA,EAExB,GAAIF,EAAMI,QAAQG,MAAMF,SACtB,OAAOK,EAAiBV,EAAMI,QAAQG,MAAMF,SAAUH,EAC1D,C,SAEgBiC,EACdtC,EACAhB,GAEA,MAAMmB,EAAQP,EAAOrC,IAAIyC,GACzB,IAAKG,EAAO,OAEZA,EAAMG,OAAOI,MAAM1B,QAAUA,EAE7B,GAAImB,EAAMI,QAAQG,MAAMF,SACtB,OAAOO,EACLZ,EAAMI,QAAQG,MAAMF,SACpBzB,EAAaC,GAEnB,CAEOc,eAAeyC,EAAYvC,EAAmBwC,GACnD,MAAMrC,EAAQP,EAAOrC,IAAIyC,GACzB,IAAKG,IAAUA,EAAMI,QAAQG,MAAMF,SAAU,OAE7C,IACEL,EAAMlD,KAAKyD,MAAML,WAAaoC,EAC5BtC,EAAMI,QAAQG,MAAMF,SACpBgC,E,CAEF,MAAOzE,GACP2E,QAAQC,KAAK5E,E,CAEjB,CAEO+B,eAAe8C,EACpB5C,EACA6C,GAEA,MAAM1C,EAAQP,EAAOrC,IAAIyC,GACzB,IAAKG,IAAUA,EAAMI,QAAQG,MAAMF,SAAU,OAE7C,IACEL,EAAMlD,KAAKyD,MAAML,WAAayC,EAC5B3C,EAAMI,QAAQG,MAAMF,SACpBqC,E,CAEF,MAAO9E,GACP2E,QAAQC,KAAK5E,E,CAEjB,CAEO+B,eAAeiD,EACpB/C,EACAN,EACAsD,GAEA,MAAM7C,EAAQP,EAAOrC,IAAIyC,GACzB,IAAKG,IAAUA,EAAMI,QAAQG,MAAMF,SAAU,OAE7C,IACEL,EAAMlD,KAAKyD,MAAML,WAAa4C,EAC5B9C,EAAMI,QAAQG,MAAMF,SACpBd,EACAsD,E,CAEF,MAAOjF,GACP2E,QAAQC,KAAK5E,E,CAEjB,C,SClMgBmF,EACdC,EACAC,GAEA,MAAMjD,EAAQkD,IACd,MAAMrE,EAAUmB,EAAMG,OAAOI,MAAM1B,QACnC,MAAMqB,EAAOF,EAAMlD,KAAKyD,MAAML,KAE9B,MAAMiD,EAAStE,EAAQoE,GACvB,MAAM1D,EAA0C4D,IAAM,MAANA,SAAM,SAANA,EAAQ5D,KACxD,MAAM6D,EAAWlD,EAAK8C,GACtB,MAAMK,EAAYD,EAAWA,EAASvE,EAAQoE,GAAU1D,MAAQ,GAEhE,MAAO,CACLA,OACA8D,YACAF,SACAH,WACAI,WAEJ,C,SAOgBE,EAAaN,GAC3B,MAAMhD,EAAQkD,IACd,MAAMhD,EAAOF,EAAMlD,KAAKyD,MAAML,KAC9B,MAAMkD,EAAWlD,EAAK8C,GAEtB,MAAO,CACLI,WACAJ,WAEJ,C,SAQgBO,EAEdC,EAAYC,GACZ,IAAKA,EAAO,OAAOD,EAGnB,MAAME,EAAK/H,OAAA4B,OAAA5B,OAAA4B,OAAA,GAAWkG,GAAUD,GAIhC,GAAIC,EAAME,MAAO,CACf,UAAWF,EAAME,QAAU,iBAAmBD,EAAMC,QAAU,SAAU,CACtED,EAAMC,MAAKhI,OAAA4B,OAAA5B,OAAA4B,OAAA,GAAQkG,EAAME,OAAUD,EAAMC,M,MACpC,UACEF,EAAME,QAAU,iBAChBD,EAAMC,QAAU,SACvB,CACAD,EAAMC,MAAMF,EAAME,OAAS,I,MACtB,UAAWD,EAAMC,QAAU,SAAU,CAC1CD,EAAMC,OAAS,IAAMF,EAAME,K,EAI/B,GAAIF,EAAMG,MAAO,CACfF,EAAME,MAAKjI,OAAA4B,OAAA5B,OAAA4B,OAAA,GAAQkG,EAAMG,OAAUF,EAAME,M,CAE3C,OAAOF,CACT,C,SAMgBR,IACd,OAAOrC,EAASgD,EAAWC,KAC7B,C,SAUgBC,EACdf,EACAC,EACAe,G,MAEA,MAAMN,EAAK/H,OAAA4B,OAAA,GAA8ByG,GACzC,MAAMC,GACJlC,EAAAmB,IAAc/C,OAAOI,MAAM1B,QAAQoE,MAAS,MAAAlB,SAAA,SAAAA,EAAEmC,eAChD,IAAKD,EAAgB,OAAOP,EAE5B,MAAM5G,EAAOiG,EAAaC,EAAUC,GACpC,MAAMQ,EAAQQ,EAAenH,GAC7B,IAAK2G,EAAO,OAAOC,EAEnB,OAAOH,EAAgBG,EAAOD,EAChC,C,SAOgBU,EAAkB9C,GAChC,MAAM+C,EAAM/C,IAAG,MAAHA,SAAG,SAAHA,EAAKgD,eACjB,OAAOD,EACLA,EAAIE,EAAyCjD,GAE7CiD,EAACC,EAAQ,KAAElD,EAAImD,MAEnB,CAEA,MAAMC,EACJ,IAAI/E,QACN,MAAMgF,EACJ,IAAIhF,Q,SAQUiF,EACdC,EACAC,EACAC,GAEA,GAAIL,EAAWrH,IAAIwH,GAAK,OAExB,MAAM5E,EAAQkD,IACd,MAAM6B,EAAO/E,EAAMI,QAAQG,MAAMT,aAEjC,MAAMkF,EAAW,IAAIC,sBACnB,EAAErH,MACA,MAAMsH,EACJtH,EAAEsH,YAAcC,SAASC,iBAAiBC,wBAC5C,MAAMC,EAAwD,GAC9D,GAAIT,IAAQ,QAAS,CACnBS,EAAUC,MACR3H,EAAE4H,mBAAmBC,GAAKP,EAAWO,EAAIV,EAAKW,YAAc,IAC3D9H,EAAE+H,c,CAEP,GAAId,IAAQ,MAAO,CAEjBS,EAAUM,IACRhI,EAAE4H,mBAAmBK,MAAQjI,EAAE4H,mBAAmBM,QACjDlI,EAAE+H,c,CAEP,KAAMb,EAAIA,EAAGQ,EAAU,GAEzB,CACES,UAAW,CAAC,GACZC,WAAY,oBACZjB,KAAMA,IAASI,SAASC,iBAAmB,KAAOL,IAGtDN,EAAWnG,IAAIsG,EAAII,GAEnB,GAAIhF,EAAMI,QAAQG,MAAMR,QAAS,CAC/BiF,EAASiB,QAAQrB,E,KACZ,CACL5E,EAAMI,QAAQG,MAAMV,KAAKhD,iBACvB,gBACA,KACEmI,EAASiB,QAAQrB,EAAG,GAEtB,CAAEsB,KAAM,M,CAGd,C,SAQgBC,EACdvB,EACAC,EACAC,GAEA,GAAIJ,EAAWtH,IAAIwH,GAAK,OAExB,MAAM5E,EAAQkD,IACd,MAAM6B,EAAO/E,EAAMI,QAAQG,MAAMT,aAEjC,MAAMkF,EAAW,IAAIC,sBACnB,EAAErH,MACA,MAAMsH,EACJtH,EAAEsH,YAAcC,SAASC,iBAAiBC,wBAC5C,MAAMC,EAAwD,GAC9D,GAAIT,IAAQ,MAAO,CACjBS,EAAUc,IACRxI,EAAE4H,mBAAmBa,GAAKnB,EAAWmB,EAAItB,EAAKuB,WAAa,IAC1D1I,EAAE+H,c,CAEP,GAAId,IAAQ,SAAU,CACpB,MAAMW,EAAqB5H,EAAE2I,OAAOlB,wBACpCC,EAAUkB,OACRhB,EAAmBiB,OAASjB,EAAmBa,EAC7CnB,EAAWuB,SAAW7I,EAAE+H,c,CAE9B,KAAMb,EAAIA,EAAGQ,EAAU,GAEzB,CACES,UAAW,CAAC,GACZC,WAAY,sBACZjB,KAAMA,IAASI,SAASC,iBAAmB,KAAOL,IAGtDL,EAAWpG,IAAIsG,EAAII,GAEnB,GAAIhF,EAAMI,QAAQG,MAAMR,QAAS,CAC/BiF,EAASiB,QAAQrB,E,KACZ,CACL5E,EAAMI,QAAQG,MAAMV,KAAKhD,iBACvB,gBACA,KACEmI,EAASiB,QAAQrB,EAAG,GAEtB,CAAEsB,KAAM,M,CAGd,C,SAmBgBQ,EACdpF,EACAqF,EACAnH,EAAW,OAEX,MAAMoH,EAAU,CACd,CAAC,GAAGzL,MAAiBmG,KAAS,KAC9B,CAAC,GAAGnG,YAAwBwL,EAC5B,CAAC,GAAGxL,eAA2BwL,IAAY,MAC3C,CAAC,GAAGxL,kBAA8BwL,IAAY,UAGhD,GAAInH,EAAU,OAAOqH,EAAeD,GACpC,OAAOA,CACT,C,SAOgBC,EAAeD,GAC7B,IAAIE,EAAc,GAClBnL,OAAOoL,QAAQH,GAASjJ,SAAQ,EAAErC,EAAW0L,MAC3C,GAAIA,EAAIF,GAAexL,EAAY,GAAG,IAExC,OAAOwL,CACT,C,SAkCgBG,EAAiBC,GAC/B,IAAItD,EAAQuD,iBAAiBD,GAC7B,MAAME,EAAsBxD,EAAMyD,WAAa,WAC/C,MAAMC,EAAgB,gBAEtB,GAAI1D,EAAMyD,WAAa,QAAS,OAAOlC,SAASoC,gBAChD,IAAK,IAAIC,EAASN,EAAUM,EAASA,EAAOC,eAAkB,CAC5D7D,EAAQuD,iBAAiBK,GACzB,GAAIJ,GAAuBxD,EAAMyD,WAAa,SAAU,CACtD,Q,CAEF,GAAIC,EAAcI,KAAK9D,EAAM+D,SAAW/D,EAAMgE,UAAYhE,EAAMiE,WAC9D,OAAOL,C,CAEX,OAAOrC,SAASoC,eAClB,C,SAQgBO,EAAalD,EAAamD,EAAiB,KACzD,MAAMC,EAAIpD,EAAGS,wBACb,MAAM4C,EACJC,OAAOC,aAAehD,SAASoC,gBAAgBa,aAEjD,IACGJ,EAAExB,SACFwB,EAAE5B,MACF4B,EAAEK,OACFL,EAAEnC,QACFmC,EAAEvB,SACFuB,EAAElC,QACFkC,EAAEvC,IACFuC,EAAE3B,EAEH,OAAO,MAET,QACEiC,KAAKC,MAAM,KAAQP,EAAE5B,KAAO,EAAI,EAAI4B,EAAE5B,OAAS4B,EAAEvB,OAAU,KACzDsB,GACFO,KAAKC,MAAM,KAAQP,EAAExB,OAASyB,GAAgBD,EAAEvB,OAAU,KACxDsB,EAEN,CC1VO,MAAMS,EAAuD,EAClErF,SACAsF,eACAC,oBACAC,iBACAC,eAIA,SAASC,EAAsBjL,GAC7B,IAAIiF,EACJ,OAAQM,EAAON,OACb,IAAK,MACHA,EAAQ,OACR,MACF,IAAK,OACHA,EAAQ,KACR,MACF,QACEA,EAAQ,MAEZ6F,EAAkB7F,EAAOM,EAAO5D,KAAM3B,EAAE2I,OAAOuC,QAAQ,M,CAGzD,SAASC,IACP,QACKH,EAASI,UAAY7F,EAAO6F,WAAa,QAC1CJ,EAASI,UAAY7F,EAAO6F,WAAa,I,CAI/C,IAAIC,EAAa,GACjB,GAAI9F,EAAO+F,iBAAkB,CAC3BD,EAAa9F,EAAO+F,iBAAiB/F,IAAW8F,C,CAGlD,MAAME,EAAY,CAChBxF,MAAKhI,OAAA4B,OAAA5B,OAAA4B,OAAA,GACAmJ,EAAiB,KAAM+B,IAAY,MAAZA,SAAY,SAAZA,EAAcW,SAAO,CAC/C,CAAC,GAAGjO,iBAA6BgI,EAAOiG,SAAW,QACnD,CAAC,GAAGjO,eAA2BgI,EAAOiG,SAAW,MACjD,CAAC,GAAGjO,gBAA4BgI,EAAON,MACvC,CAAC,GAAG1H,eACFgI,EAAO/B,SAAWiI,WAAalG,EAAO/B,SAAW,QAGvD,IAAIsC,EAAQuF,EAAa1F,EAAgB4F,EAAWF,GAAcE,EAClE,MAAMG,EAAUnF,EAAkBhB,GAElC,IAAKmG,EAAS,OAAOhF,EAACC,EAAQ,MAE9Bb,EACE1B,OAAQ0B,EAA+B6F,SAAW,E,+BACzC7F,GAAK,CAAE8F,MAAO,aAAU7N,OAAA4B,OAAA5B,OAAA4B,OAAA,GACxBmG,GAAK,CAAE8F,MAAO,QAEzB,GAAIT,IAAc,CAChB,MAAMU,EAAOtG,EAAON,MAChBM,EAAON,QAAU,MACf,YACA,aACF,OAEJa,EAAK/H,OAAA4B,OAAA5B,OAAA4B,OAAA,GAAQmG,GAAK,CAAE,YAAa+F,G,CAGnC,OACEnF,EAAA,KAAA3I,OAAA4B,OAAA,GACMmG,EAAK,CACTgG,IAAMC,IACJ,GAAI,CAAC,MAAO,SAAS3I,SAASmC,EAAOiG,QACnCzE,EAAagF,EAAIxG,EAAOiG,OAAQT,GAClC,GAAI,CAAC,MAAO,UAAU3H,SAASyH,EAAaW,QAC1CjD,EAAawD,EAAIlB,EAAaW,OAAQT,EAAe,EAEzDiB,IAAKzG,EAAO5D,OAEXwJ,IACCzE,EAAA,UACEX,MAAO,CACL,CAAC,GAAGxI,gBAA4B,KAChC,CAAC,GAAGA,mBAA+B,MAErC0O,QAAShB,GAER1E,EAAkBhB,GAClBA,EAAO/B,SAAWiI,WAAalG,EAAO/B,SAAW,MAChDkD,EAAA,aAAW1H,KAAK,mBAEfuG,EAAON,QACPM,EAAON,QAAU,OAChByB,EAAA,aAAW1H,KAAK,0BAEhB0H,EAAA,aAAW1H,KAAK,yBAEpB0H,EAAA,OAAKX,MAAO,GAAGxI,mBACbmJ,EAAA,aAAW1H,KAAK,yBAIpB0H,EAAA,OAAKX,MAAO,GAAGxI,mBACZgJ,EAAkBhB,GAClBA,EAAO/B,SAAWiI,WAAalG,EAAO/B,SAAW,MAChDkD,EAAA,aAAW1H,KAAK,uBAInB,E,SClHOkN,EAAW9G,EAAkBC,G,QAC3C,MAAMjD,EAAQkD,IACd,MAAMrE,EAAUmB,EAAMG,OAAOI,MAAM1B,QACnC,MAAMuF,GAAMrC,EAAAlD,EAAQoE,MAAS,MAAAlB,SAAA,SAAAA,EAAEgI,aAC/B,MAAMC,EAAQjH,EAAaC,EAAUC,GAErC,KAAM+G,EAAM3G,WAAaxE,EAAQoE,GAAU3B,OAAS,OAAQ,CAC1D,MAAM2I,EAAI,IAAIlJ,KAAKiJ,EAAM3G,WACzB,GAAI4G,aAAalJ,OAASmJ,MAAMD,GAAW,CACzCD,EAAM3G,WAAae,EACf,GAAG,IAAIrD,KAAKiJ,EAAM3G,WAAW8G,wBAAwB,IAAIpJ,KACvDiJ,EAAM3G,WACN+G,uBACFH,C,EAIR,OAAO7F,EACLA,EAAIE,EAAyC0F,GAC3CA,EAAM3G,YAAcgG,WAAaW,EAAM3G,YAAc,KACvDiB,EAACC,EAAQ,MAAE8F,EAAAL,EAAM3G,aAAS,MAAAgH,SAAA,SAAAA,EAAE7K,YAAsB,EAItD,CAEO,MAAM8K,GAAkB,CAC7BrH,EACAzD,EAAoB,SAEpB,MAAMQ,EAAQkD,IACd,MAAMC,EAASnD,EAAMG,OAAOI,MAAM1B,QAAQoE,GAE1C,MAAM2D,EAAU,CACd,CAAC,GAAGzL,SAAqB,KACzB,CAAC,GAAGA,gBAA4BgI,EAAON,MACvC,CAAC,GAAG1H,YAAwBgI,EAAOiG,OACnC,CAAC,GAAGjO,iBAA6BgI,EAAOiG,SAAW,QACnD,CAAC,GAAGjO,eAA2BgI,EAAOiG,SAAW,OAGnD,GAAI5J,EAAU,OAAOqH,EAAeD,GACpC,OAAOA,CAAO,EAST,MAAM2D,GAAiD,EAC5DvH,WACAC,WACAuH,oBAEA,MAAMC,EAAU,IACdD,EACIA,IACAV,EAAW9G,EAAUC,IACnBqB,EAAA,QAAMX,MAAM,eAAa,KAGjC,IAAI+G,EAAW,KACf,MAAM1K,EAAQkD,IACd,MAAMC,EAASnD,EAAMG,OAAOI,MAAM1B,QAAQoE,GAC1C,IAAIS,EAAQK,EAAoBf,EAAUC,EAAU,CAClDU,MAAO2G,GAAgBrH,KAGzB,GAAIE,EAAOwH,UAAW,CACpBjH,EACE1B,OAAQ0B,EAA+BkH,SAAW,E,+BACzClH,GAAK,CAAE8F,MAAO,aAAU7N,OAAA4B,OAAA5B,OAAA4B,OAAA,GACxBmG,GAAK,CAAE8F,MAAO,QACzBkB,EAAW,I,CAGb,MAAMG,EAAenH,GACnBY,EAAA,MAAA3I,OAAA4B,OAAA,GACMmG,EAAK,CACTC,MAAO,CACL,CAAC,GAAGxI,mBAA+B,KACnC,CAAC,GAAGA,2BAAuCgI,EAAO2H,QAGpDxG,EAACmG,EAAO,OAIZ,OACEnG,EAACoG,E,iBAEKhH,GAEHP,EAAO4H,cAAgB5H,EAAO2H,KAC7BxG,EAAA,uBACE0G,iBAAiB,IACjBC,6BACErN,GAEEA,EAAE2I,OAAO2E,kBAA6CC,SACtDvN,EAAEwN,OAAO3F,GAGbnB,EAAA,gBACE6G,SAAQ,KACRE,UAAU,MACVC,WAAa1N,GACTA,EAAE2I,OAAOuC,QAAQ4B,GAA0B9G,MAAM2H,OAAS,MAE9DC,WAAa5N,GACTA,EAAE2I,OAAOuC,QAAQ4B,GAA0B9G,MAAM2H,OAAS,IAG9DjH,EAACuG,EAAW,MACZvG,EAAA,QAAMmH,KAAK,WACTnH,EAACmG,EAAO,SAKdnG,EAACuG,EAAW,MAEL,ECvHf,MAAMN,GAA0D,EAC5DmB,SAAQZ,QACVa,KAEA,MAAMC,EACJtH,EAAA,OACEX,MAAO,CACL,CAAC,GAAGxI,mBAA+B,KACnC,CAAC,GAAGA,yBAAqC2P,IAG1Ca,GAGL,OAAOD,EAASpH,EAAA,MAAIkF,MAAM,OAAOoC,GAAatH,EAAA,UAAKsH,EAAU,EAGxD,MAAMC,GAA+C,EACxDC,cAAa9I,WAAUI,WAAUuF,kBACnCgD,EACAI,KAEA,IAAI9C,EAAa,GAEjB,IAAK7F,EAAU,CACb,MAAM4G,EAAQ1G,EAAaN,GAC3BI,EAAW4G,EAAM5G,Q,CAGnB,GAAI0I,IAAW,MAAXA,SAAW,SAAXA,EAAaE,cAAe,CAC9B/C,EACE6C,EAAYE,cAAc,CAAE5I,WAAUJ,cAAeiG,C,CAGzD,IAAIG,EACJ,IAAI0C,IAAW,MAAXA,SAAW,SAAXA,EAAa1C,gBAAiB0C,EAAY1C,SAAW,WAAY,CACnEA,EAAS0C,EAAY1C,Q,CAGvB,MAAMD,EAAY,CAAExF,MAAO+C,EAAiB,KAAM0C,IAClD,MAAM1F,EAAQuF,EAAa1F,EAAgB4F,EAAWF,GAAcE,EACpE,MAAM/E,EAAM0H,IAAW,MAAXA,SAAW,SAAXA,EAAaG,SAEzB,GAAI7H,EAAK,CACP,IAAI8H,EAAW9H,EACbE,EACA,CACE6H,YACE7H,EAAA,KAAA3I,OAAA4B,OAAA,GAAQmG,EAAK,CAAEkG,IAAKxG,EAASgJ,SAC1BT,GAGLvI,WACAJ,YAEFuH,IAGF,GAAI1O,MAAMC,QAAQoQ,GAAW,CAC3BA,EAAWH,EAAMpK,IAAIuK,GAAU,CAACG,EAAMnO,KACpC,GAAImO,EAAKC,OAAS,KAAM,CACtB,IAAKD,EAAKE,KAAMF,EAAKE,KAAO,GAAGnJ,EAASgJ,UAAUlO,IAElDmO,EAAKG,OAASjJ,EACZ,CAAEI,MAAO+C,EAAiB,KAAM0C,EAAQ,OACxCiD,EAAKG,QAGP,KAAMH,EAAKI,UAAW,CACpBJ,EAAKI,UAAYV,EAAMpK,IAAI0K,EAAKI,WAAW,CAACC,EAAOxO,KACjD,GAAI,CAAC,KAAM,MAAM8C,SAAS0L,EAAMJ,KAAK9M,YAAa,CAChDkN,EAAMF,OAASjJ,EACb,CACEI,MACE+C,EACEgG,EAAMJ,KAAK9M,WACX4J,EACA,MACEkB,GAAgBpM,EAAG,MACzBwL,IAAMC,IACJ,KAAOA,GAAMP,IAAW,OAAUA,IAAW,SAC3CjD,EAAawD,EAAIP,EAAQT,GAC3B,KAAMgB,GAAMA,EAAGgD,UAAUC,SAAS,sBAChCjI,EAAagF,EAAI,MAAOhB,GAC1B,KAAMgB,GAAMA,EAAGgD,UAAUC,SAAS,wBAChCjI,EAAagF,EAAI,QAAShB,EAAe,GAG/C+D,EAAMF,O,CAGV,OAAOE,CAAK,G,EAIlB,OAAOL,CAAI,G,CAGf,OAAOH,C,CAGT,OACE5H,EAAA,KAAA3I,OAAA4B,OAAA,GAAQmG,EAAK,CAAEkG,IAAKxG,EAASgJ,SAC1BT,EACE,EASF,MAAMkB,GAA4D,EACrEf,cAAanD,kBACfgD,EACAI,KAEA,IAAI9C,EAAa,GACjB,GAAI6C,EAAYE,cAAe,CAC7B/C,EAAa6C,EAAYE,iBAAmB,E,CAG9C,MAAMzB,EAA0D,EAC5DmB,SAAQZ,QACVa,KAEA,MAAMC,EACJtH,EAAA,OACEX,MAAO,CACL,CAAC,GAAGxI,mBAA+B,KACnC,CAAC,GAAGA,yBAAqC2P,IAG1Ca,GAGL,OAAOD,IAAW,MAAQpH,EAAA,MAAIkF,MAAM,OAAOoC,GAAatH,EAAA,UAAKsH,EAAU,EAGzE,MAAMxC,EAAS0C,EAAY1C,QAAU,KACrC,MAAMD,EAAY,CAAExF,MAAO+C,EAAiB,KAAM,OAClD,MAAMhD,EAAQuF,EAAa1F,EAAgB4F,EAAWF,GAAcE,EACpE,MAAM/E,EAAM0H,IAAW,MAAXA,SAAW,SAAXA,EAAaG,SAEzB,GAAI7H,EAAK,CACP,IAAI8H,EAAW9H,EACbE,EACA,CACE6H,YAAa7H,EAAA,KAAA3I,OAAA4B,OAAA,GAAQmG,GAAQiI,IAE/BpB,GAGF,GAAI1O,MAAMC,QAAQoQ,GAAW,CAC3BA,EAAWH,EAAMpK,IAAIuK,GAAWG,IAC9B,GAAIA,EAAKC,OAAS,KAAM,CACtBD,EAAKG,OAASjJ,EACZ,CAAEI,MAAO+C,EAAiB,KAAM0C,EAAQ,OACxCiD,EAAKG,QAGP,KAAMH,EAAKI,UAAW,CACpBJ,EAAKI,UAAYV,EAAMpK,IAAI0K,EAAKI,WAAYC,IAC1C,GAAI,CAAC,KAAM,MAAM1L,SAAS0L,EAAMJ,KAAK9M,YAAa,CAChDkN,EAAMF,OAASjJ,EACb,CACEI,MAAO+C,EACLgG,EAAMJ,KAAK9M,WACX4J,EACA,MAEFM,IAAMC,IACJ,KAAOA,GAAMP,IAAW,OAAUA,IAAW,SAC3CjD,EAAawD,EAAIP,EAAQT,GAC3B,KAAMgB,GAAMA,EAAGgD,UAAUC,SAAS,sBAChCjI,EAAagF,EAAI,MAAOhB,GAC1B,KAAMgB,GAAMA,EAAGgD,UAAUC,SAAS,wBAChCjI,EAAagF,EAAI,QAAShB,EAAe,GAG/C+D,EAAMF,O,CAGV,OAAOE,CAAK,G,EAIlB,OAAOL,CAAI,G,CAGf,OAAOH,C,CAGT,OAAO5H,EAAA,KAAA3I,OAAA4B,OAAA,GAAQmG,GAAQiI,EAAc,EC1NvC,MAAMmB,GAAW,iySCmDjB,IAAI9P,GAAK,E,MAmBI+P,GAAK,MAChBrR,YAAAsR,G,6eAgSQC,KAAAC,SAAW,OAASlQ,KAEpBiQ,KAAAvK,QAA+B,GAC/BuK,KAAAE,eAAiB,KACjBF,KAAAG,YAAc,GAIdH,KAAAI,oBAA8B,EAU9BJ,KAAAK,cAAgB,EAEhBL,KAAAM,aAAyD,GAczDN,KAAAO,WAAa,EAqDbP,KAAAQ,SAAW,MAuBXR,KAAAS,UAAY/N,MAClBkD,EACAM,EACA+D,KAGA,GAAI+F,KAAKG,cAAgBvK,EAAQ,IAAMM,EAAQ,OAE/C8J,KAAKU,SAAW,KAChB,MAAMC,EAAYX,KAAKY,kBAAkBC,KAAK,CAAE3K,OAAQA,EAAQN,UAChE,GAAI+K,EAAUG,iBAAkB,OAEhCd,KAAKG,YAAcvK,EAAQ,IAAMM,EAGjC8J,KAAKe,YAAY9G,GAEjB,GAAI+F,KAAKgB,aAAc,CACrB,IACE,MAAMC,QAAYjB,KAAKgB,aAAa9K,EAAQN,GAK5C,GAAIqL,IAAQ,KAAM,CAChBjB,KAAKkB,aAAatL,EAAOM,GACzB8J,KAAKU,SAAW,MAChB,M,EAEF,MAAO/P,GAGP2E,QAAQC,KAAK,qBAAsB5E,GACnCqP,KAAKG,YAAc,GACnBH,KAAKU,SAAW,MAChB,M,EAIJ,UACQ/K,EAAUqK,KAAKpN,KAAMsD,EAAQN,GACnCoK,KAAKkB,aAAatL,EAAOM,E,CACzB,MAAOvF,GACP2E,QAAQC,KAAK,cAAe5E,GAC5BqP,KAAKG,YAAc,E,SAEnB,GAAIH,KAAKmB,OAAOhQ,OAAQ6O,KAAKU,SAAW,K,GAuSpCV,KAAAoB,cAAgB,KAEtB,IAAKpB,KAAKjN,MAAMI,QAAQG,MAAM+N,SAAU,OAExCC,GAAS,KACPtB,KAAKI,oBAAsBJ,KAAKnN,aAAawG,WAAa4B,OAAOsG,QACjE,IAAIC,EAAmBxB,KAAKpN,KAAK6O,UACjC,IAAIC,EAAa,EACjB,MAAMC,EAAW3B,KAAKmB,OAAOhQ,OAE7B,MACEuQ,EAAaC,GACb3B,KAAKI,qBAAuBoB,EAC5B,CACAA,GAAoBxB,KAAK4B,eAAeF,GAExC,GAAI1B,KAAKI,oBAAsBoB,EAAkB,CAC/C,MAAMK,EAAkB,CACtBH,EACAA,EAAa,EACbrG,KAAKyG,IAAI,EAAGJ,EAAa,IAE3B,GAAIG,EAAgBtP,aAAeyN,KAAK+B,aAAaxP,WAAY,CAC/DyN,KAAK+B,aAAeF,EACpB7B,KAAKgC,gB,CAEPhC,KAAKiC,kBAAoBP,C,CAE3BA,G,IAEF,EAaI1B,KAAAkC,mBAAsB7J,IAG5B3J,OAAOoL,QAAQzB,GAAW3H,SAAQ,EAAEiM,EAAKwF,MACvCnC,KAAKoC,SAAS1C,UAAU2C,OACtB,GAAGnU,cAAyByO,IAC5BwF,EACD,GACD,EAGInC,KAAAsC,mBACN3R,I,MAEAqP,KAAKuC,gBAAgBlU,UAAY,GAEjC,IAAIsL,EAAoB,CAAC,GAAGzL,WAC5B,IAAI4G,EAAAnE,EAAE2I,UAAM,MAAAxE,SAAA,SAAAA,EAAEzG,UACZsL,EAAU,IAAIhJ,EAAE2I,OAAOjL,UAAUmU,MAAM,QAAS7I,GAElDqG,KAAKuC,gBAAgB7C,UAAU+C,OAAO9I,EAAQxF,QAAQuO,KAASA,IAAI,E,UA1xBpC,Q,wCAOF,M,aAOJtG,U,qBAYA,M,qBAGD,E,iCA8B+C,G,gBASvB,CAAED,OAAQ,O,yCAMV,CAAEA,OAAQ,U,gBAGvC,M,cAOF,G,qGAmCG,K,uBAYc,E,YAoKE,G,kBACJ,CAAC,EAAG,EAAG,GA/SvC6D,KAAK2C,mBAAqBC,EAAS5C,KAAK2C,mBAAmBE,KAAK7C,MAAO,G,CAuBrEU,eACF,OAAOV,KAAK8C,UAAY1G,UAAY4D,KAAK8C,QAAU9C,KAAK+C,e,CAEtDrC,aAASsC,GACX,GAAIhD,KAAK8C,UAAY1G,UAAW,OAChC4D,KAAK2C,mBAAmBK,E,CAElBL,mBAAmBK,GACzBhD,KAAK+C,gBAAkBC,C,CAazBC,mBACE,IAAKjD,KAAK/M,KAAM,CACd+M,KAAKU,SAAW,KAChB,M,CAGFV,KAAKU,SAAW,KAChB3P,QAAQd,QAAQ+P,KAAK/M,MAAMvB,MAAKgB,MAAOO,UAC/Be,EAAagM,KAAKpN,KAAMK,GAG9B+M,KAAKE,eAAiB,GACtBF,KAAKG,YAAc,SACbH,KAAKkD,aAEX,IAAKlD,KAAKlN,QACRqQ,uBAAsB,IAAMnD,KAAKoD,6BACnCpD,KAAKU,SAAW,KAAK,G,CAQzBhO,+BACQwC,EAAe8K,KAAKpN,KAAMoN,KAAKpO,SACrC,GAAIoO,KAAKlN,QAASkN,KAAKkD,Y,CAwBrBG,mBACF,OAAOrD,KAAKmB,OAAOhQ,M,CAiCrBmS,yBACEtD,KAAKuD,a,CAWPC,iCACExD,KAAKyD,W,CAgDP/Q,qBACE,MAAM0B,EAAO4L,KAAKpO,QAA4CQ,MAC3DH,KAAQA,EAAE2D,QAEb,IAAKxB,EAAK,OACV,OAAO4L,KAAKS,UAAU,KAAMrM,EAAI9B,K,CAMlCI,cAAcwD,EAAyBN,GACrC,MAAMxB,EAAO4L,KAAKpO,QAA4CQ,MAC3DH,GAAMA,EAAEK,OAAS4D,IAEpB,IAAK9B,EAAK,KAAM,2BAA6B8B,EAC7C,OAAO8J,KAAKS,UAAU7K,EAAOxB,EAAI9B,K,CAMnCI,qBACEsN,KAAKvK,QAAU,GACf,OAAOuK,KAAK0D,a,CASdhR,iBAAiB+C,EAA8BkO,EAAoB,MACjE,IAAKA,EAAU3D,KAAKvK,QAAU,GAC9B,OAAOuK,KAAK0D,YAAYjO,EAASkO,E,CAQnCjR,oBAAoBkR,GAClB5D,KAAKvK,QAAUuK,KAAKvK,QAAQtB,QAAQ0P,IAAOD,EAAY7P,SAAS8P,EAAEvR,QAClE,OAAO0N,KAAK0D,a,CAUdhR,gBAAgBiC,EAAyBoB,GACtCiK,KAAK/M,KAAsC6Q,OAAO/N,EAAU,EAAGpB,GAChEqL,KAAKiD,kB,CA+DKc,eAAWpM,G,MACrB,IAAKA,EAAI,OACT,MAAMqM,EAAkBrM,EAAGS,wBAAwBoB,OACnDwG,KAAKK,cACHhF,KAAK4I,IAAIjE,KAAKK,cAAgB2D,GAAmB,EAC7ChE,KAAKK,cACL2D,EACNhE,KAAKO,aACHzL,EAAA6C,EAAGuM,cAAc,SAAK,MAAApP,SAAA,SAAAA,EAAEsD,wBAAwBoB,SAAUwG,KAAKO,U,CAKvD1N,mBACV,OAAOmN,KAAKmE,a,CAGFtR,iBAAauR,GACvB,GAAIA,IAAQpE,KAAKmE,cAAe,OAEhC,GAAInE,KAAKmE,cAAe,EACrBnE,KAAKmE,gBAAkBjM,SAASoC,gBAC7BpC,SACA8H,KAAKmE,eACPE,oBAAoB,SAAUrE,KAAKoB,c,EAEtCgD,IAAQlM,SAASoC,gBAAkBpC,SAAWkM,GAAKxU,iBAClD,SACAoQ,KAAKoB,eAEPpB,KAAKmE,cAAgBC,C,CAMXnC,wBACV,OAAOjC,KAAKsE,kB,CAGFrC,sBAAkBP,GAC5B,GAAI1B,KAAKsE,qBAAuB5C,EAAY,OAE5C1B,KAAKsE,mBAAqB5C,EAG1B1B,KAAKuE,qBAAqB1D,KAAK,CAC7B2D,MAAO9C,EACP+C,YAAazE,KAAK0E,cAAcvT,Q,CAQxB2B,cACV,OAAOkN,KAAKQ,Q,CAEF1N,YAAQ6R,GAClB,GAAIA,IAAU3E,KAAKQ,SAAU,OAC7BR,KAAKQ,SAAWmE,EAChB,GAAI3E,KAAKlN,QAASqQ,uBAAsB,IAAMnD,KAAK4E,e,CAQ7CA,cACN,MAAMC,EAAO5J,OAAO6J,SAASD,KAC7B,GAAIA,EAAK1T,OAAS,EAAG,CACnB,IACE,MAAM4T,EAAQ7M,SAASgM,cAAcW,GACrC,GAAIE,EAAOA,EAAMC,gBACP,CAAV,MAAOrU,GAAG,C,CAEdqP,KAAKiF,aAAapE,M,CAgEZK,aAAatL,EAAyBM,GAC5C8J,KAAKpO,QAAUoO,KAAKpO,QAAQ8C,KAAKzC,IAC/B,GAAIA,EAAEK,OAAS4D,EAAQ,OAAAxH,OAAA4B,OAAA5B,OAAA4B,OAAA,GAAY2B,GAAC,CAAE2D,UACtC,OAAAlH,OAAA4B,OAAA5B,OAAA4B,OAAA,GAAY2B,GAAC,CAAE2D,MAAO,MAAI,IAE5BoK,KAAKkF,iBAAiBrE,KAAK,CAAE3K,OAAQA,EAAQN,S,CAIvClD,oBACNsN,KAAKU,SAAW,KAChB,MAAMC,EAAYX,KAAKmF,oBAAoBtE,KAAK,CAAEzL,KAAM4K,KAAKoF,aAC7D,GAAIzE,EAAUG,iBAAkB,OAIhCd,KAAKe,cAEL,UACQ5L,EAAY6K,KAAKpN,KAAMoN,KAAKoF,YAClCpF,KAAKqF,mBAAmBxE,KAAK,CAAEzL,KAAM4K,KAAKoF,Y,CAE1C,MAAOzU,GACP2E,QAAQC,KAAK,gBAAiB5E,E,SAE9BqP,KAAKU,SAAW,K,EAIZhO,kBACN+C,EACAkO,EAAoB,MAEpB,GAAIlO,EAAS,CACX,GAAIkO,EAAU,CACZ3D,KAAKvK,QAAU,IACVuK,KAAKvK,QAAQtB,QACb0P,IAAOpO,EAAQrD,MAAMkT,GAAOA,EAAGhT,OAASuR,EAAEvR,YAE1CmD,E,KAEA,CACLuK,KAAKvK,QAAUA,C,EAInB,GAAIuK,KAAKE,iBAAmBpO,KAAKE,UAAUgO,KAAKvK,SAAU,OAE1DuK,KAAKU,SAAW,KAChB,MAAMC,EAAYX,KAAKuF,oBAAoB1E,KAAK,CAAEpL,QAASuK,KAAKvK,UAChE,GAAIkL,EAAUG,iBAAkB,OAEhCd,KAAKE,eAAiBpO,KAAKE,UAAUgO,KAAKvK,SAG1CuK,KAAKe,cAEL,GAAIf,KAAKwF,eAAgB,CACvB,IACE,MAAMvE,QAAYjB,KAAKwF,eAAexF,KAAKvK,SAK3C,GAAIwL,IAAQ,KAAM,CAChBjB,KAAKyF,iBACLzF,KAAKU,SAAW,K,EAElB,MAAO/P,GAGP2E,QAAQC,KAAK,uBAAwB5E,GACrCqP,KAAKE,eAAiB,GACtBF,KAAKU,SAAW,K,CAElB,M,CAGF,UACQlL,EAAYwK,KAAKpN,KAAMoN,KAAKvK,SAClCuK,KAAKyF,gB,CACL,MAAO9U,GACP2E,QAAQC,KAAK,gBAAiB5E,E,SAE9BqP,KAAKU,SAAW,K,EAIZ+E,iBACNzF,KAAKpO,QAAUoO,KAAKpO,QAAQ8C,KAAKzC,IAC/B,MAAMyT,EAAU1F,KAAKvK,QAAQrD,MAAMyR,GAAMA,EAAEvR,OAASL,EAAEK,OACtD,GAAIoT,EAASzT,EAAEkC,OAASuR,EAAQvR,YAC3B,GAAIlC,EAAEkC,SAAW,MAAQlC,EAAEkC,SAAWiI,UACzCnK,EAAEkC,OAASiI,UAEb,OAAOnK,CAAC,IAEV+N,KAAK2F,mBAAmB9E,KAAK,CAAEpL,QAASuK,KAAKvK,S,CAKvCsL,YAAY9G,G,MAClB,MAAM2L,GAAkB9Q,EAAAkL,KAAKnN,aAAa8D,SAAK,MAAA7B,SAAA,SAAAA,EAAE+Q,eACjD,MAAMC,EAAU9F,KAAKnN,aAAa4F,WAClCuH,KAAKnN,aAAa8D,MAAMkP,eAAiB,OAEzC,GAAI7F,KAAK+F,eAAiBlL,EAAamF,KAAK+F,aAAc,IAAM,CAC9D/F,KAAKpN,KAAKoS,gB,CAEZ,GAAI/K,IAAYY,EAAaZ,EAAS,GACpC+L,YAAW,IAAM/L,EAAQ+K,eAAe,CAAER,MAAO,WAAY,KAE/D,GAAIsB,EAAS9F,KAAKnN,aAAa4F,WAAaqN,EAE5C,GAAIF,EACF5F,KAAKnN,aAAa8D,MAAMkP,eAAiBD,EAE3C5F,KAAKoB,e,CAGC6E,oBACN,OAAO,IAAIlV,SAASd,IAClBqR,GAAS,KACPtB,KAAK+D,WAAa/D,KAAK0E,cAActS,MAClC8T,IAAC,IAAApR,EAAK,SAACA,EAAAoR,IAAC,MAADA,SAAC,SAADA,EAAGxG,aAAS,MAAA5K,SAAA,SAAAA,EAAE6K,SAAS,GAAGzR,eAAyB,IAE7D+B,GAAS,GACT,G,CASEmT,2B,MACN,MAAKtO,EAAAkL,KAAK0E,iBAAa,MAAA5P,SAAA,SAAAA,EAAE3D,QAAQ,OAGjC,MAAMgV,EAAoBzT,gBAClBsN,KAAKiG,oBACX,GAAIjG,KAAKO,WAAY,OAAO,KAC5B,OAAO,KAAK,EAGd,MAAM6F,EAAiC,IAAIrV,SAAQ2B,MAAOzC,IACxD,SAAUkW,IAAqBlW,QAC1B,CAGH,MAAM8H,EAAW,IAAIC,sBACnBtF,UACE,SAAUyT,IAAqB,CAC7BlW,IACA8H,EAASsO,Y,IAGb,CAAEvO,KAAMkI,KAAKnN,eAEfkF,EAASiB,QAAQgH,KAAKoC,S,KAK1BgE,EAAgB1U,MAAK,KAGnByR,uBAAsB,IAAOnD,KAAKlN,QAAU,MAAM,G,CAK9CJ,mBACNsN,KAAKvK,QAAWuK,KAAKpO,QAClBuC,QAAQlC,GAAMA,EAAEkC,SAAWiI,WAAanK,EAAEkC,SAAW,OACrDO,KAAKzC,IACJ,MAAMkC,OAAEA,EAAM7B,KAAEA,GAASL,EACzB,MAAO,CAAEkC,SAAQ7B,OAAM,IAG3B,GAAI0N,KAAKoF,WAAY,OACbpF,KAAKuD,a,CAGb,GAAIvD,KAAKvK,QAAQtE,OAAQ,OACjB6O,KAAK0D,a,CAGb,MAAMtP,EAAO4L,KAAKpO,QAA4CQ,MAC3DH,KAAQA,EAAE2D,QAEb,KAAMxB,EAAK,OACH4L,KAAKS,UAAUrM,EAAIwB,MAAOxB,EAAI9B,K,EAOhCmR,YACN,MAAM6C,EAAQtG,KAAKjN,MAAMlD,KAAKyD,MAAML,KACpC,IAAKqT,EAAMnV,OAAQ,CACjB6O,KAAKmB,OAAS,GACd,M,CAKF,IAAIlQ,EAAI,EACR,MAAM+R,EACJhD,KAAKuG,kBAAoBD,EAAMnV,OAC3B6O,KAAKuG,kBACLD,EAAMnV,OACZ,IAAI8B,EAA6B,GACjC,MAAMkO,EAA6B,GACnCnB,KAAKM,aAAe,GAGpB,IAAKrP,EAAGA,GAAK+R,EAAG/R,IAAK,CACnBgC,EAAK1B,KAAKyO,KAAKjN,MAAMlD,KAAKyD,MAAML,KAAKhC,EAAI,IAAM,CAAEkO,OAAQ,KAEzD,GAAIlO,EAAI+O,KAAKwG,WAAa,EAAG,CAG3BrF,EAAO5P,KAAK,CAAE0B,OAAMkM,OAAQnK,EAAO/B,EAAKyB,KAAKwR,GAAMA,EAAE/G,SAAQlK,UAC7DhC,EAAO,E,EAKX,GAAIA,EAAK9B,OAAQ,CACfgQ,EAAO5P,KAAK,CAAE0B,OAAMkM,OAAQnK,EAAO/B,EAAKyB,KAAKwR,GAAMA,EAAE/G,SAAQlK,S,CAG/D+K,KAAKmB,OAASA,C,CAYRS,eAAeF,GACrB,GAAI1B,KAAKM,aAAanP,OAAQ,CAC5B,MAAMsV,EAAoBzG,KAAKM,aAAalO,MACzCsU,GAAOA,EAAGhF,aAAeA,IAE5B,GAAI+E,EAAmB,OAAOA,EAAkBjN,M,CAElD,MAAMmN,EAAc3G,KAAKmB,OAAOO,GAAYzO,KAAK9B,OACjD,GAAIwV,IAAgB3G,KAAKwG,UAAYxG,KAAKK,cAAe,CACvD,OAAOL,KAAKK,a,CAEd,OAAOL,KAAKO,WAAaP,KAAKO,WAAaoG,EAAcvK,S,CAInD4F,iBACNhC,KAAK+B,aAAarR,SAASgR,IACzB,MAAM/J,EAAKqI,KAAK0E,cAAchD,GAC9B,IAAK/J,EAAI,OACT2J,GAAS,KACP,MAAM9H,EAAS7B,EAAGS,wBAAwBoB,OAG1C,MAAMoN,EAAS5G,KAAKM,aAAauG,WAC9BH,GAAOA,EAAGhF,aAAeA,IAE5B,GAAIkF,GAAU,EAAG,CACf5G,KAAKM,aAAasG,GAAU,CAAEpN,SAAQkI,a,MACjC1B,KAAKM,aAAa/O,KAAK,CAAEiI,SAAQkI,cAAa,GACrD,G,CA2CEoF,eAEN,IAAK9G,KAAK+G,UAAY/G,KAAKpN,KAAKsR,cAAc,oBAAqB,CACjE5O,QAAQ0R,MACN,4E,EA8BEC,qBACN,IAAKjH,KAAKpN,OAASoN,KAAKnN,eAAiBmN,KAAKjN,MAAO,OAErD,GAAIiN,KAAKkH,gBAAiB,CACxBlH,KAAKkH,gBAAgBb,aACrBrG,KAAKkH,gBAAkB9K,S,CAEzB,MAAM+K,EAAMnH,KAAKkH,gBAAkB,IAAIlP,sBACrCtF,OAAQ/B,MACN,GAAIA,EAAE+H,eAAgBsH,KAAKjN,MAAMI,QAAQG,MAAM+N,SAAW,UACrDrB,KAAKjN,MAAMI,QAAQG,MAAM+N,SAAW,KAAK,GAEhD,CAAEvJ,KAAMkI,KAAKnN,aAAciG,UAAW,IAExCqO,EAAGnO,QAAQgH,KAAKpN,K,CAKlBF,0BAGEsN,KAAKjN,YAAcJ,EACjBqN,KAAKpN,KACLoN,KAAKpO,QACLoO,KAAKnN,aACLmN,KAAKlN,eAEDkN,KAAKiD,mBACXjD,KAAKjN,MAAMI,QAAQiU,SAAS,WAAYpH,KAAKoB,eAC7CpB,KAAKjN,MAAMlD,KAAKuX,SAAS,QAAQ,IAAMpH,KAAKyD,cAG5CzD,KAAK8G,eACL9G,KAAKyD,YACLzD,KAAKnN,aAAemH,EAAiBgG,KAAKpN,MAC1CoN,KAAKiH,oB,CAGPI,oBACErH,KAAKnN,aAAemH,EAAiBgG,KAAKpN,MAC1CoN,KAAKiH,oB,CAGPK,mBACEtH,KAAKoD,0B,CAGPmE,sBAAsBC,EAASC,EAASC,GAItC,GAAI,CAAC,OAAQ,WAAW3T,SAAS2T,GAAY,OAAO,K,CAMtDC,sB,CAIAC,qBACE5H,KAAKiG,mB,CAIP4B,uBACE,IAAK7H,KAAKkH,gBAAiB,OAC3BlH,KAAKkH,gBAAgBb,aACrBrG,KAAKkH,gBAAkB9K,S,CAGzB0L,SACE9H,KAAK0E,cAAgB,GAErB,OACErN,EAAC0Q,EAAI,KACH1Q,EAAA,OACEX,MAAO,GAAGxI,gBACVuO,IAAMuL,GAAOhI,KAAK+F,aAAeiC,GAAE,KAKrC3Q,EAAA,uBACE4Q,OAAO,mBACPvR,MAAM,QACNwR,wBAAyBlI,KAAKsC,qBAGhCjL,EAAA,OACEX,MAAO,GAAGxI,gBACVuO,IAAM0L,GAASnI,KAAKuC,gBAAkB4F,EAAI,kBACzB,iBAAmBnI,KAAKC,SACzCmI,SAAUpI,KAAK3L,OAAS,OAAS,IAAM+H,WAEvC/E,EAAA,qBACEgR,cAAa,KACb3R,MAAO,CACL,CAAC,GAAGxI,mBAA+B,KACnC,CAAC,GAAGA,yBAAqC8R,KAAKU,YAGlDrJ,EAAA,SACEiR,KAAMtI,KAAK3L,OAAS,OAAS,OAAS+H,UAAS,gBAChC4D,KAAKjN,MAAMlD,KAAKyD,MAAML,KAAK9B,OAAM,gBACjC6O,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQT,OAC/CuF,MAAO,GAAGxI,IACVuO,IAAM8L,GAASvI,KAAKoC,SAAWmG,GAE/BlR,EAAA,WACEX,MAAO,CACL,CAAC,GAAGxI,cAA0B,KAC9B,CAAC,GAAGA,qBAAiC8R,KAAKwI,aAE5CzY,GAAI,iBAAmBiQ,KAAKC,UAE5B5I,EAAA,QAAM1H,KAAK,WAAWqQ,KAAK+G,UAI7B1P,EAAA,aACEA,EAACuI,GAAgB,CACff,YAAamB,KAAKyI,WAClB/M,eAAgBsE,KAAKkC,oBAEpBlC,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQ8C,KAAKgU,GAAa,CACjDrR,EAACkE,EAAY,CACXrF,OAAQwS,EACRlN,aAAcwE,KAAKyI,WACnBhN,kBAAmBuE,KAAKS,UACxB/E,eAAgBsE,KAAKkC,mBACrBvG,SAAU,CACRI,SAAUiE,KAAK2I,oBAOxB3I,KAAKU,WAAaV,KAAKmB,OAAOhQ,QAC7BkG,EAAA,SAAOX,MAAO,GAAGxI,aACd,IAAIU,MAAM,IAAIga,QAAQlU,KAAKqB,GAC1BsB,EAAA,UACG2I,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQ8C,KAC/B,CAACmU,EAAW7S,IACVqB,EAACiG,GAAS,CACRvH,SAAUA,EACVC,SAAUA,EACVuH,cAAe,IAAMlG,EAAA,8BASnCA,EAAA,MAAIyR,SAAU9I,KAAKU,YAAcV,KAAKmB,OAAOhQ,QAC3CkG,EAAA,MACEX,MAAO,GAAGxI,QACVoO,QAAS0D,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQT,QAEzCkG,EAAA,OAAKX,MAAM,4DACTW,EAAA,QAAM1H,KAAK,cAAY,uBAM5BqQ,KAAKmB,OAAOzM,KAAI,CAAC8P,EAAO9C,IACvBrK,EAAA,SACEsF,IAAK6H,EAAMrF,OACXpP,GAAI,SAASiQ,KAAKC,YAAYyB,IAC9BjF,IAAMsM,IACJ/I,KAAK0E,cAAcnT,KAAKwX,EAAG,EAE7BrS,MAAO,CACL,CAAC,GAAGxI,gBACD8R,KAAK+B,aAAahO,SAAS2N,GAC9B,CAAC,GAAGxT,aACF8R,KAAK+B,aAAahO,SAAS2N,KAG9B1B,KAAK+B,aAAahO,SAAS2N,GAC1B8C,EAAMvR,KAAKyB,KAAI,CAACC,EAAK1D,KACnB,MAAM8E,EACJ2L,EAAa,EAAIA,EAAa1B,KAAKwG,SAAWvV,EAAIA,EACpD,OACEoG,EAACuH,GAAQ,CACPC,YAAamB,KAAKgJ,UAClB7S,SAAUxB,EACVoB,SAAUA,GAETiK,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQ8C,KAC/B,CAACmU,EAAW7S,IACVqB,EAACiG,GAAS,CACRvH,SAAUA,EACVC,SAAUA,MAIP,IAIfqB,EAAA,UACEA,EAAA,MACEiF,QAAS0D,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQT,OACzCwF,MAAO,CACL6C,OAAQwG,KAAK4B,eAAeF,GAAc,YASrD1B,KAAKiJ,YACJ5R,EAAA,aACEA,EAACuI,GAAgB,CACff,YAAamB,KAAKkJ,WAClBxN,eAAgBsE,KAAKkC,oBAEpBlC,KAAKjN,MAAMG,OAAOI,MAAM1B,QAAQ8C,KAAKgU,GAAa,CACjDrR,EAACkE,EAAY,CACXrF,OAAQwS,EACRlN,aAAcwE,KAAKkJ,WACnBxN,eAAgBsE,KAAKkC,mBACrBzG,kBAAmBuE,KAAKS,UACxB9E,SAAU,CACRI,SAAUiE,KAAK2I,uBAS1B3I,KAAKmB,OAAOhQ,QACbkG,EAAA,gBACEhD,KAAK,SACLqC,MAAO,CACL,CAAC,GAAGxI,cAA0B,KAC9B,CAAC,GAAGA,oBAAgC8R,KAAKU,a"}

package/dist/types/components/grid/grid-item.d.ts

@@ -1,10 +1,10 @@
-import type { GridSizes } from '../../interface';
 /**
+ * @deprecated - you can now use `grid-states="..."`
+ * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
+ *
  * Grid items to be used with [grid](/story/nano-components-grid) elements
  */
 export declare class GridItem {
-  private currGridSizes;
-  private el;
   /**
    * How to position this item within it's parent grid at different break points. Examples:
    * xl-col-span-2
@@ -12,13 +12,5 @@ export declare class GridItem {
    * xxl-row-span-2
    * m-row-start-2
    */
-  gridStates: string;
-  updateGridClasses(): void;
-  /**
-   * Called by parent grid to trigger new classes
-   * @internal
-   */
-  changeBP(newGridSizes: GridSizes[]): Promise<void>;
-  private applyChildrenClasses;
   render(): any;
 }

package/dist/types/components/grid/grid.d.ts

@@ -1,80 +1,56 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * A context-aware CSS grid implementation.
- * Uses it's own width to choose column number - not screen width.
+ * A lightweight, context-aware CSS grid implementation.
+ *
+ * - Define multiple grids templates at different breakpoints
+ * - Uses `@container` queries to select the correct grid depending on the current dimensions
+ * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+ * - SSR optimised
+
+ * @part grid - the main grid element.
+ * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
+ * @part helper - a replica grid showed when `show-helper` is true
+ *
+ * @slot - default slot. Use this to place grid items. Use `grid-states="..."` attribute to opt-out of auto / sequential placement.
  */
 export declare class Grid {
-  private el;
-  private ro;
-  private generalClasses;
-  private gridClass;
-  private isSizes;
-  private currentWidth;
-  constructor();
-  ready: boolean;
-  isSmall: boolean;
-  isMedium: boolean;
-  isLarge: boolean;
-  isXL: boolean;
-  isXXL: boolean;
-  /**
-   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  sSize: number;
-  /**
-   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  mSize: number;
-  /**
-   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  lSize: number;
-  /**
-   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
-   */
-  xlSize: number;
-  /**
-   * the number of columns the grid has at the small breakpoint.
-   */
+  private grids;
+  cacheKey: string;
+  /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  sSize: number | string;
+  /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  mSize: number | string;
+  /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  lSize: number | string;
+  /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+   * Will default to `px` if no unit supplied e.g. `20rem` */
+  xlSize: number | string;
+  /** the number of columns the grid has at the small breakpoint. */
   sCols: number;
-  /**
-   * the number of columns the grid has at the medium breakpoint.
-   */
+  /** the number of columns the grid has at the medium breakpoint. */
   mCols: number;
-  /**
-   * the number of columns the grid has at the large breakpoint.
-   */
+  /** the number of columns the grid has at the large breakpoint. */
   lCols: number;
-  /**
-   * the number of columns the grid has at the xl breakpoint.
-   */
+  /** the number of columns the grid has at the xl breakpoint. */
   xlCols: number;
-  /**
-   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
-   */
+  /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */
   xxlCols: number;
-  /**
-   * shows a grid helper to visualise where columns are
-   */
+  /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */
+  sTpl?: string;
+  /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */
+  mTpl?: string;
+  /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */
+  lTpl?: string;
+  /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */
+  xlTpl?: string;
+  /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */
+  xxlTpl?: string;
+  /** shows a grid helper to visualise where columns are */
   showHelper: boolean;
-  /**
-   * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.
-   */
-  contentPanel: boolean;
-  /**
-   * Helper to make grid items expand to full height in IE11
-   */
-  fullHeight: boolean;
-  /**
-   * Emitted when the `nano-grid` changes breakpoint
-   */
-  nanoBpChange: EventEmitter<string[]>;
-  propChanged(): void;
-  private applySizeClasses;
-  stateChange(): void;
-  private applyChildrenClasses;
+  constructSizeArray(): void;
+  protected styles: () => string;
   componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }