@nanoporetech-digital/components 5.1.2 → 5.2.0

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

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

package/dist/nano-components/p-dfbf0d56.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{c as t}from"./p-3de3449e.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-9ebbb814.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-f258383d.js",import.meta.url).href;const e=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const r=URL.createObjectURL(e);const c=t(r,o,p);URL.revokeObjectURL(r);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
+//# sourceMappingURL=p-dfbf0d56.js.map

package/dist/nano-components/{p-bd51e29f.js → p-f258383d.js}

@@ -1,4 +1,4 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-(()=>{"use strict";const e=(e,t)=>{const n=globalThis[t];return n!=null&&e instanceof n};const t=n=>{if(n!=null){if(e(n,"ArrayBuffer")||e(n,"MessagePort")||e(n,"ImageBitmap")||e(n,"OffscreenCanvas")){return[n]}if(typeof n==="object"){if(n.constructor===Object){n=Object.values(n)}if(Array.isArray(n)){return n.flatMap(t)}return t(n.buffer)}}return[]};const n={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:e})=>{if(e&&e[0]===r){let i=e[1];let s=e[2];let f=e[3];let u=0;let c=f.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(f[u])&&f[u][0]===o){const e=f[u][1];f[u]=(...t)=>{postMessage([o,e,t])}}}a=await n[s](...f)}catch(e){a=null;if(e instanceof Error){l={isError:true,value:{message:e.message,name:e.name,stack:e.stack}}}else{l={isError:false,value:e}}a=undefined}const p=t(a);postMessage([r,i,a,l],p)}}));var i=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var s=1/0;var f="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof i=="object"&&i&&i.Object===Object&&i;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var h=d.toString;var w=p.Symbol;var y=w?w.prototype:undefined,g=y?y.toString:undefined;function b(e){if(typeof e=="string"){return e}if(m(e)){return g?g.call(e):""}var t=e+"";return t=="0"&&1/e==-s?"-0":t}function v(e){return!!e&&typeof e=="object"}function m(e){return typeof e=="symbol"||v(e)&&h.call(e)==f}function k(e){return e==null?"":b(e)}function $(e){e=k(e);return e&&c.test(e)?e.replace(u,"\\$&"):e}var E=$;function x(e,t){if(typeof e==="string"){return t.checkString(e)}else if(typeof e==="number"){return t.checkNumber(e)}else{return false}}function A(e,t,n,r){if(typeof e==="object"){if(Array.isArray(e)){for(const o of e){if(A(o,t,n,r)){return true}}}else{for(const o in e){n.push(o);const i=A(e[o],t,n,r);n.pop();if(i)return true}}}else if(t.type==="exists"){if(t.key.test(n.join("."))){return!!e}else{return false}}else{const o=n.join(".");for(const e of r.ignorePaths){if(e.test(o))return false}if(r.includePaths){let e=false;for(const t of r.includePaths){if(t.test(o)){e=true;break}}if(!e)return false}if(t.key){if(!t.key.test(o))return false}return x(e,t)}return false}function j(e,t,n,r){if(t.length){let o=false;for(const i of t){if(A(e,i,[],r)?!i.negate:i.negate){if(n==="OR"){return true}o=true}else if(n==="AND"){return false}}return o}return true}function N(e,t){const n=[];let r=false;let o=0;let i="";for(let s=0;s<e.length;s++){const f=e[s];if(r){if(f===i){r=false;i=""}}else if(f==='"'||f==="'"){r=true;i=f}else if(f.match(t)&&!r){n.push(e.slice(o,s).trim());o=s+1}if(s===e.length-1){n.push(e.slice(o).trim())}}return n.map((e=>{if(e.startsWith('"')&&e.endsWith('"')){return e.slice(1,-1)}if(e.startsWith("'")&&e.endsWith("'")){return e.slice(1,-1)}return e})).filter((e=>e))}const O={"<":function e(t){const n=Number(t[0]);return e=>e<n},"<=":function e(t){const n=Number(t[0]);return e=>e<=n},"=":function e(t){const n=t[0].split(",").filter((e=>e)).map(Number);return e=>{for(let t=0;t<n.length;t++){if(e===n[t]){return true}}return false}},">=":function e(t){const n=Number(t[0]);return e=>e>=n},">":function e(t){const n=Number(t[0]);return e=>e>n},"..":function e(t){const n=Number(t[0]);const r=Number(t[1]);return e=>e>=n&&e<=r}};function P(e){const{values:t,operator:n}=R(e);const r=O[n];if(!r){throw new Error(`unknown operator ${n}`)}return r(t)}function R(e){const t=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.\s*)?\s*(?<firstValue>-?\d*\.?\d+)\s*(?:(?<afterDots>\.\.)\s*(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(e);if(!t){return{operator:"=",values:[e]}}if(!t.groups){throw new Error("unreachable")}const{startOperator:n,firstValue:r,afterDots:o,secondValue:i}=t.groups;let s=n;let f=r?[r]:[];if(n===".."){s="<="}else if(!n&&o&&!i){s=">="}else if(o){s=".."}if(i){f.push(i)}return{values:f,operator:s||"="}}const D={"<":function e(t){return e=>e<t[0]},"<=":function e(t){return e=>e<=t[0]},"=":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(`^${E(e)}$`,n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},"~":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(E(e),n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},">=":function e(t){return e=>e>=t[0]},">":function e(t){return e=>e>t[0]},"..":function e(t){return e=>e>=t[0]&&e<=t[1]}};function _(e,t){const{values:n,operator:r}=I(e);const o=D[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(n,t)}function I(e){const t=e.split("..");const n=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(t[0]);if(!n){return{operator:"~",values:[e]}}if(!n.groups){throw new Error("unreachable")}let{operator:r,value:o}=n.groups;let i=t[1]?.trim();let s=[o];if(t.length>1){r="..";if(!i){r=">="}else if(!o){s=[i];r="<="}else{s.push(i)}}return{operator:r||"~",values:s}}function S(e,t={pathAlias:{}}){const{caseSensitive:n,pathAlias:r}=t;const o=n?"":"i";let i=false;if(e.startsWith("-")){i=true;e=e.substring(1)}const s=e.indexOf(":");if(s>-1){const t=e.substring(s+1);if(s>0){const n=e.substring(0,s);if(n==="is"){return{type:"exists",negate:i,key:new RegExp(`(^|\\.)${E(t)}(\\.|$)`,o)}}else{return{type:"matches",negate:i,key:r[n]?r[n]:new RegExp(`(^|\\.)${E(n)}(\\.|$)`,o),checkNumber:P(t),checkString:_(t,o)}}}}return{type:"matches",negate:i,checkNumber:P(e),checkString:_(e,o)}}function M(e,t={pathAlias:{}}){return e.map((e=>S(e,t)))}function V(e,t){const{insensitive:n}=t;const r={};for(const[t,o]of Object.entries(e)){if(o instanceof RegExp){r[t]=o}else{r[t]=new RegExp(`(^|\\.)${E(o)}(\\.|$)`,n)}}return r}function T(e,t={}){let{index:n=false,predicate:r="AND",ignorePaths:o=[],includePaths:i,pathAlias:s={}}=t;const f=t.limit?t.limit:Infinity;const u=t.caseSensitive?"":"i";let c=t.keywords||[];const a=V(s,{insensitive:u});const l=o.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e));const p=i?i.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e)):undefined;if(typeof c==="string"){c=N(c,/[ \t\r\n]/)}const d=M(c,{caseSensitive:t.caseSensitive,pathAlias:a});let h=0;if(n){const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(n)}}return t}else{const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(e[n])}}return t}}const B=new Map;function F(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function C(e,t){const n=F();B.set(n,{rows:e,columns:X(t)});return n}async function L(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.rows=t;if(!n.rows&&!n.columns)Y(e);return true}async function q(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.columns=X(t);if(!n.rows&&!n.columns)Y(e);return true}async function z(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.searchTerm=t;if(!t||!t.length){n.filterRows=n.rows;return W(n,n.rows)}const r=n.columns.filter((e=>e.searchable!==false));n.filterRows=T(n.rows,{keywords:t,predicate:"OR",includePaths:[...r.map((e=>e.prop))],ignorePaths:["__uuid","__index"]});return W(n,n.filterRows)}function G(e){return e.columns.filter((e=>e.filter!==undefined&&e.filter!==null)).reduce(((e,t)=>{const{prop:n,filter:r}=t;e.push({prop:n,filter:r});return e}),[])}function H(e,t,n=[]){if(!n||!n.length)n=G(e);if(!n||!n.length)return t;n.forEach((e=>{if(typeof e.filter==="boolean"){t=t.filter((t=>t[e.prop]===e.filter))}else{t=T(t,{keywords:e.filter,includePaths:[e.prop],ignorePaths:["__uuid","__index"]})}}));return t}async function J(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;const r=(!t||!t.length)&&n.searchTerm?await z(e,n.searchTerm):n.searchTerm?n.filterRows:n.rows;n.filterRows=H(n,r,t);return Q(n,n.filterRows)}function K(e){const t=e.columns.find((e=>!!e.order));if(t){const{prop:e,order:n}=t;return{prop:e,order:n}}return null}function Q(e,t,n,r){if(!n&&!r){const t=K(e);if(t){({prop:n,order:r}=t)}}if(!n||!r||!t.length)return t;const o=e.columns.find((e=>e.prop===n));if(!!(o===null||o===void 0?void 0:o.sortCompareFn)&&typeof o.sortCompareFn==="function"){const e=t.slice().sort(o.sortCompareFn(n,r));return e}if((o===null||o===void 0?void 0:o.type)==="text"&&typeof t[0][n]==="string"){const e=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;return r==="asc"?e[n].localeCompare(t[n]):t[n].localeCompare(e[n])}));return e}const i=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;if(e[n]<t[n])return r==="asc"?-1:1;if(e[n]>t[n])return r==="asc"?1:-1;return 0}));return i}async function U(e,t,n){const r=B.get(e);if(!r)throw"cannot find worker with ID "+e;const o=r.filterRows||r.rows;return Q(r,o,t,n)}function W(e,t){t=H(e,t);return Q(e,t)}function X(e){return e.map((e=>{if(!!(e===null||e===void 0?void 0:e.sortCompareFn)){e.sortCompareFn=new Function("return "+e.sortCompareFn)()}return e}))}async function Y(e){B.delete(e)}n.createWorkerStore=C;n.destroyWorkerStore=Y;n.syncConfigToWorker=q;n.syncDataToWorker=L;n.workerFilter=J;n.workerSearch=z;n.workerSort=U})();
+(()=>{"use strict";const e=(e,t)=>{const n=globalThis[t];return n!=null&&e instanceof n};const t=n=>{if(n!=null){if(e(n,"ArrayBuffer")||e(n,"MessagePort")||e(n,"ImageBitmap")||e(n,"OffscreenCanvas")){return[n]}if(typeof n==="object"){if(n.constructor===Object){n=Object.values(n)}if(Array.isArray(n)){return n.flatMap(t)}return t(n.buffer)}}return[]};const n={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:e})=>{if(e&&e[0]===r){let i=e[1];let s=e[2];let f=e[3];let u=0;let c=f.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(f[u])&&f[u][0]===o){const e=f[u][1];f[u]=(...t)=>{postMessage([o,e,t])}}}a=await n[s](...f)}catch(e){a=null;if(e instanceof Error){l={isError:true,value:{message:e.message,name:e.name,stack:e.stack}}}else{l={isError:false,value:e}}a=undefined}const p=t(a);postMessage([r,i,a,l],p)}}));var i=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var s=1/0;var f="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof i=="object"&&i&&i.Object===Object&&i;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var h=d.toString;var w=p.Symbol;var y=w?w.prototype:undefined,g=y?y.toString:undefined;function b(e){if(typeof e=="string"){return e}if(m(e)){return g?g.call(e):""}var t=e+"";return t=="0"&&1/e==-s?"-0":t}function v(e){return!!e&&typeof e=="object"}function m(e){return typeof e=="symbol"||v(e)&&h.call(e)==f}function k(e){return e==null?"":b(e)}function $(e){e=k(e);return e&&c.test(e)?e.replace(u,"\\$&"):e}var E=$;function x(e,t){if(typeof e==="string"){return t.checkString(e)}else if(typeof e==="number"){return t.checkNumber(e)}else{return false}}function A(e,t,n,r){if(typeof e==="object"){if(Array.isArray(e)){for(const o of e){if(A(o,t,n,r)){return true}}}else{for(const o in e){n.push(o);const i=A(e[o],t,n,r);n.pop();if(i)return true}}}else if(t.type==="exists"){if(t.key.test(n.join("."))){return!!e}else{return false}}else{const o=n.join(".");for(const e of r.ignorePaths){if(e.test(o))return false}if(r.includePaths){let e=false;for(const t of r.includePaths){if(t.test(o)){e=true;break}}if(!e)return false}if(t.key){if(!t.key.test(o))return false}return x(e,t)}return false}function j(e,t,n,r){if(t.length){let o=false;for(const i of t){if(A(e,i,[],r)?!i.negate:i.negate){if(n==="OR"){return true}o=true}else if(n==="AND"){return false}}return o}return true}function N(e,t){const n=[];let r=false;let o=0;let i="";for(let s=0;s<e.length;s++){const f=e[s];if(r){if(f===i){r=false;i=""}}else if(f==='"'||f==="'"){r=true;i=f}else if(f.match(t)&&!r){n.push(e.slice(o,s).trim());o=s+1}if(s===e.length-1){n.push(e.slice(o).trim())}}return n.map((e=>{if(e.startsWith('"')&&e.endsWith('"')){return e.slice(1,-1)}if(e.startsWith("'")&&e.endsWith("'")){return e.slice(1,-1)}return e})).filter((e=>e))}const O={"<":function e(t){const n=Number(t[0]);return e=>e<n},"<=":function e(t){const n=Number(t[0]);return e=>e<=n},"=":function e(t){const n=t[0].split(",").filter((e=>e)).map(Number);return e=>{for(let t=0;t<n.length;t++){if(e===n[t]){return true}}return false}},">=":function e(t){const n=Number(t[0]);return e=>e>=n},">":function e(t){const n=Number(t[0]);return e=>e>n},"..":function e(t){const n=Number(t[0]);const r=Number(t[1]);return e=>e>=n&&e<=r}};function R(e){const{values:t,operator:n}=D(e);const r=O[n];if(!r){throw new Error(`unknown operator ${n}`)}return r(t)}function D(e){const t=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.\s*)?\s*(?<firstValue>-?\d*\.?\d+)\s*(?:(?<afterDots>\.\.)\s*(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(e);if(!t){return{operator:"=",values:[e]}}if(!t.groups){throw new Error("unreachable")}const{startOperator:n,firstValue:r,afterDots:o,secondValue:i}=t.groups;let s=n;let f=r?[r]:[];if(n===".."){s="<="}else if(!n&&o&&!i){s=">="}else if(o){s=".."}if(i){f.push(i)}return{values:f,operator:s||"="}}const P={"<":function e(t){return e=>e<t[0]},"<=":function e(t){return e=>e<=t[0]},"=":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(`^${E(e)}$`,n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},"~":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(E(e),n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},">=":function e(t){return e=>e>=t[0]},">":function e(t){return e=>e>t[0]},"..":function e(t){return e=>e>=t[0]&&e<=t[1]}};function _(e,t){const{values:n,operator:r}=I(e);const o=P[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(n,t)}function I(e){const t=e.split("..");const n=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(t[0]);if(!n){return{operator:"~",values:[e]}}if(!n.groups){throw new Error("unreachable")}let{operator:r,value:o}=n.groups;let i=t[1]?.trim();let s=[o];if(t.length>1){r="..";if(!i){r=">="}else if(!o){s=[i];r="<="}else{s.push(i)}}return{operator:r||"~",values:s}}function S(e,t={pathAlias:{}}){const{caseSensitive:n,pathAlias:r}=t;const o=n?"":"i";let i=false;if(e.startsWith("-")){i=true;e=e.substring(1)}const s=e.indexOf(":");if(s>-1){const t=e.substring(s+1);if(s>0){const n=e.substring(0,s);if(n==="is"){return{type:"exists",negate:i,key:new RegExp(`(^|\\.)${E(t)}(\\.|$)`,o)}}else{return{type:"matches",negate:i,key:r[n]?r[n]:new RegExp(`(^|\\.)${E(n)}(\\.|$)`,o),checkNumber:R(t),checkString:_(t,o)}}}}return{type:"matches",negate:i,checkNumber:R(e),checkString:_(e,o)}}function M(e,t={pathAlias:{}}){return e.map((e=>S(e,t)))}function V(e,t){const{insensitive:n}=t;const r={};for(const[t,o]of Object.entries(e)){if(o instanceof RegExp){r[t]=o}else{r[t]=new RegExp(`(^|\\.)${E(o)}(\\.|$)`,n)}}return r}function T(e,t={}){let{index:n=false,predicate:r="AND",ignorePaths:o=[],includePaths:i,pathAlias:s={}}=t;const f=t.limit?t.limit:Infinity;const u=t.caseSensitive?"":"i";let c=t.keywords||[];const a=V(s,{insensitive:u});const l=o.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e));const p=i?i.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e)):undefined;if(typeof c==="string"){c=N(c,/[ \t\r\n]/)}const d=M(c,{caseSensitive:t.caseSensitive,pathAlias:a});let h=0;if(n){const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(n)}}return t}else{const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(e[n])}}return t}}const B=new Map;function F(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function C(e,t){const n=F();B.set(n,{rows:e,columns:X(t)});return n}async function L(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.rows=t;if(!n.rows&&!n.columns)Y(e);return true}async function q(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.columns=X(t);if(!n.rows&&!n.columns)Y(e);return true}async function z(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.searchTerm=t;if(!t||!t.length){n.filterRows=n.rows;return W(n,n.rows)}const r=n.columns.filter((e=>e.searchable!==false));n.filterRows=T(n.rows,{keywords:t,predicate:"OR",includePaths:[...r.map((e=>e.prop))],ignorePaths:["__uuid","__index"]});return W(n,n.filterRows)}function G(e){return e.columns.filter((e=>e.filter!==undefined&&e.filter!==null)).reduce(((e,t)=>{const{prop:n,filter:r}=t;e.push({prop:n,filter:r});return e}),[])}function H(e,t,n=[]){if(!n||!n.length)n=G(e);if(!n||!n.length)return t;n.forEach((e=>{if(typeof e.filter==="boolean"){t=t.filter((t=>t[e.prop]===e.filter))}else{t=T(t,{predicate:typeof e.filter==="string"?"AND":"OR",keywords:e.filter,includePaths:[e.prop],ignorePaths:["__uuid","__index"]})}}));return t}async function J(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;const r=(!t||!t.length)&&n.searchTerm?await z(e,n.searchTerm):n.searchTerm?n.filterRows:n.rows;n.filterRows=H(n,r,t);return Q(n,n.filterRows)}function K(e){const t=e.columns.find((e=>!!e.order));if(t){const{prop:e,order:n}=t;return{prop:e,order:n}}return null}function Q(e,t,n,r){if(!n&&!r){const t=K(e);if(t){({prop:n,order:r}=t)}}if(!n||!r||!t.length)return t;const o=e.columns.find((e=>e.prop===n));if(!!(o===null||o===void 0?void 0:o.sortCompareFn)&&typeof o.sortCompareFn==="function"){const e=t.slice().sort(o.sortCompareFn(n,r));return e}if((o===null||o===void 0?void 0:o.type)==="text"&&typeof t[0][n]==="string"){const e=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;return r==="asc"?e[n].localeCompare(t[n]):t[n].localeCompare(e[n])}));return e}const i=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;if(e[n]<t[n])return r==="asc"?-1:1;if(e[n]>t[n])return r==="asc"?1:-1;return 0}));return i}async function U(e,t,n){const r=B.get(e);if(!r)throw"cannot find worker with ID "+e;const o=r.filterRows||r.rows;return Q(r,o,t,n)}function W(e,t){t=H(e,t);return Q(e,t)}function X(e){return e.map((e=>{if(!!(e===null||e===void 0?void 0:e.sortCompareFn)){e.sortCompareFn=new Function("return "+e.sortCompareFn)()}return e}))}async function Y(e){B.delete(e)}n.createWorkerStore=C;n.destroyWorkerStore=Y;n.syncConfigToWorker=q;n.syncDataToWorker=L;n.workerFilter=J;n.workerSearch=z;n.workerSort=U})();

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

@@ -85,6 +85,7 @@ export declare class DataList implements ComponentInterface {
   private changeInputValue;
   private optSelected;
   private setOptStartsWith;
+  private removeEventListeners;
   private processSlottedContent;
   private handleShow;
   private handleHide;

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

@@ -116,7 +116,7 @@ export declare class NavItem implements ComponentInterface {
   private handleMouseEnter;
   private handleMouseLeave;
   private handleClick;
-  componentWillLoad(): void;
   connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -41,6 +41,8 @@ export declare class ResizeObserve implements ComponentInterface {
     x: boolean;
     y: boolean;
   }>;
+  /** Fires after any resizing */
+  nanoResize: EventEmitter<ResizeObserverEntry[]>;
   dimensionChanged(): void;
   statesChanged(): void;
   private assesContentFit;

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

@@ -174,7 +174,6 @@ export declare class Sortable implements ComponentInterface {
    * @returns the cloned html node
    */
   private createClone;
-  private addListeners;
   private removeEventHandlers;
   private addEventHandlers;
   /**

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

@@ -68,8 +68,8 @@ export declare class Sticker implements ComponentInterface {
    * By default, it will find traverse the DOM to find the closest. */
   scrollParent?: HTMLElement | Document;
   /** Upon being stuck, attach the sticker to another sticker element.
-   * A JS query selector that returns a <nano-sticker> */
-  stickTo: string;
+   * JS query selector string or DOM element pointing to a `<nano-sticker>`  */
+  stickTo: string | HTMLNanoStickerElement;
   /** Emitted when a sticker is stuck */
   nanoStuck: EventEmitter<{
     sticker: HTMLNanoStickerElement;

package/dist/types/components/table/table-interface.d.ts

@@ -10,13 +10,13 @@ export declare namespace TableTypes {
   /** Function called, via intersection observer, when an element's pinned status changes */
   type PinnedCb = (positions: {
     [key in Position]?: boolean;
-  }) => void;
+  }, target: Element) => void;
   /** Potential column ordering options */
   type Order = 'asc' | 'desc' | undefined;
   /** Column filtering */
   interface Filter {
     prop: TableTypes.Prop;
-    filter: string | boolean;
+    filter: string | boolean | string[];
   }
   /** Column sorting */
   interface Sort {
@@ -73,6 +73,15 @@ export declare namespace TableTypes {
   interface HFunc<T> {
     (sel: any, data: any, children: T): T;
   }
+  /**
+   * Properties that can be used with the row template `TableCell` jsx partial
+   */
+  type TableRowCellHelperProps = {
+    header?: boolean;
+    wrap?: boolean;
+    cellProps?: CellProps;
+    wrapperProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
+  };
   /**
    * A row render function, called during a any row's render to the dom.
    * It can be used to add extra markup around any given table row
@@ -85,19 +94,17 @@ export declare namespace TableTypes {
   props: RowDataSchemaModel<P>, 
   /** a helper template to minimise boilerplate.
    * A shortcut for `<td><div class="nano-tbl__cell-content"></div></td>` */
-  TableCell: FunctionalComponent<{
-    header?: boolean;
-  }>) => T | undefined;
+  TableCell: FunctionalComponent<TableRowCellHelperProps>) => T | undefined;
   /**
    * A cell render function, called during any cell's render to the dom.
    * It can be used to add any markup within a table cell.
    */
-  type CellTemplateFunc<T, P> = (createElement: HFunc<T>, props: RenderModel<P>) => T | string | undefined;
+  type CellTemplateFunc<T, P> = (createElement: HFunc<T>, props: RenderModel<P>) => TplResult;
   /**
    * A table header render function, called during any column's render to the dom.
    * It can be used to add any markup within a table header `th`.
    */
-  type ColumnTemplateFunc<T, P> = (createElement: HFunc<T>, col: ColumnConfig<P>) => T | string | undefined;
+  type ColumnTemplateFunc<T, P> = (createElement: HFunc<T>, col: ColumnConfig<P>) => TplResult;
   /** A function used to assess the order of any given column.
    * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    */
@@ -120,6 +127,11 @@ export declare namespace TableTypes {
   type Prop = keyof RowData;
   /** Valid column data types */
   type ColumnType = 'text' | 'string' | 'number' | 'date' | 'boolean' | 'unknown';
+  type LibJSX = {
+    [key: string]: any;
+  };
+  type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];
+  type TplResult = JSXRender | string | Element | undefined;
   /**
    * A table column's configuration
    */
@@ -151,19 +163,19 @@ export declare namespace TableTypes {
     /** Whether to include this column when doing a general search. Defaults to true */
     searchable?: boolean;
     /** Current filters applied to this column  */
-    filter?: string | boolean;
+    filter?: string | boolean | string[];
     /**
      * A cell render function, called during any cell's render to the dom.
      * It can be used to add any markup within a table cell.
      */
-    cellTemplate?: CellTemplateFunc<VNode | VNode[], T>;
+    cellTemplate?: CellTemplateFunc<JSXRender, T>;
     /** A function which can be used to apply any html attribute/s onto a table cell `td` */
     cellProperties?: PropertiesFunc;
     /**
      * A table header render function, called during any column's render to the dom.
      * It can be used to add any markup within a table header `th`.
      */
-    columnTemplate?: ColumnTemplateFunc<VNode | VNode[], T>;
+    columnTemplate?: ColumnTemplateFunc<JSXRender, T>;
     /** A function which can be used to apply any html attribute/s onto a table head `th` */
     columnProperties?: ColPropertiesFunc<T>;
     /** A custom sorting comparator function - assess the order of any given column.
@@ -190,7 +202,7 @@ export declare namespace TableTypes {
    * controlling their visual state.
    */
   interface HeadFootRenderer<T = RowData> {
-    /** Function to decide whether the row is vertically pinned. Defaults to `start` for the header and `end` the footer */
+    /** Position prop. Defaults to `top` for the header and `bottom` the footer */
     pinned: Position;
     /**
      * A row render function, called during a any row's render to the dom.

package/dist/types/components/table/table.cell.d.ts

@@ -1,11 +1,4 @@
 import { FunctionalComponent, VNode } from '../../stencil-public-runtime';
-/**
- * Renders a cell using a custom renderer if set.
- * @param rowIndex - the current row index being rendered
- * @param colIndex - the current column index being rendered
- * @returns - a JSX node
- */
-export declare function cellRender(rowIndex: number, colIndex: number): VNode;
 export declare const baseCellClasses: (colIndex: number, toString?: boolean) => string | {
   [x: string]: boolean;
 };

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

@@ -16,7 +16,10 @@ import { TableTypes } from '../../interface';
  */
 export declare class Table implements ComponentInterface {
   constructor();
-  jsxRenderer: TableTypes.HFunc<any>;
+  /** Function called whenever `col.cellTemplate` renders an unknown object.
+   * The function should render a valid HTMLElement to the cell arg.
+   * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
+  customRenderer: (node: any, cell: HTMLElement) => void;
   /** The type of table. Grid type will make cells navigable by keyboard */
   type: 'grid' | 'table';
   /** A descriptive title of the table.
@@ -25,8 +28,8 @@ export declare class Table implements ComponentInterface {
   /** Show the caption on-screen */
   showCaption: boolean;
   /** Will show a loading state when set to true.
-   * By default, will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting.
+   * By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy
+   * *or* when performing custom filtering or sorting.
    * *Note* when set manually, will overwrite any internal loading state.
    * Set to 'undefined' to revert to default behaviour. */
   loading: boolean;
@@ -62,7 +65,7 @@ export declare class Table implements ComponentInterface {
   searchTerm: string;
   /** A custom filtering function. Should return a promise.
    * If the promise resolves as `true` the column UI will be updated.
-   * If the promise resolves as falsey, the sort will be performed by the component.
+   * If the promise resolves as falsy, the sort will be performed by the component.
    * A good use-case would be performing the filter on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
   customFilterFn?: (filters: TableTypes.Filter[]) => Promise<true | TableTypes.Falsy>;
@@ -86,6 +89,8 @@ export declare class Table implements ComponentInterface {
    */
   virtualTotalItems: number;
   virtualTotalItemsChangeHandler(): void;
+  /** @readonly - shows the currently applied filters */
+  get appliedFilters(): TableTypes.Filter[];
   /** Fired when the table has done it's first complete render */
   nanoTblReady: EventEmitter;
   /** Fired whenever a block is activated by scrolling into view / becoming visible
@@ -151,8 +156,6 @@ export declare class Table implements ComponentInterface {
   removeFilters(columnNames: TableTypes.Prop[]): Promise<void>;
   /** Updates a row model at a given index
    * @param row - the row to update.
-   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
-   * - rows are augmented with certain properties to aid with efficient rendering
    * @param rowIndex - the row index to insert this row
    */
   updateRow(row: TableTypes.RowData, rowIndex: number): Promise<void>;
@@ -167,6 +170,7 @@ export declare class Table implements ComponentInterface {
   private tableWrapperEle;
   private cacheScrollPosition;
   private activeWatcherIo;
+  private tablePinnedService;
   /** `tr` elements split into units - defined by `perBlock`
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
@@ -236,7 +240,6 @@ export declare class Table implements ComponentInterface {
   private scrollHandler;
   /** Process slotted content */
   private processSlots;
-  private handleColumnPinned;
   private handleResizeChange;
   /** Adds an IO. Makes sure our scroll listener is only active when
    * the table is in viewport */

package/dist/types/components/table/table.header.d.ts

@@ -4,7 +4,6 @@ type TableColHeadProps = {
   column: TableTypes.ColumnConfig;
   headRenderer: TableTypes.HeadFootRenderer;
   onColumnSortClick?: (order: TableTypes.Order, column: TableTypes.Prop, el: HTMLTableCellElement) => void;
-  onColumnPinned?: TableTypes.PinnedCb;
   defaults: {
     sortable?: boolean;
   };

package/dist/types/components/table/table.pin-service.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.
+ *
+ * *knowing* when an element is pinned is tricky.
+ * Managing the display of multiple, side-by-side pinned elements is trickier still.
+ *
+ * Pinning table columns are very different from pinning table rows:
+ * - Rows are actual elements we can select, measure and apply styles to.
+ * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.
+ *
+ * With this in mind, how columns and rows are pinned is different:
+ * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.
+ *
+ * The service is slightly opinionated on how it pins rows and columns (with some room for override):
+ * - Pinned columns are stuck consecutively, without overlapping.
+ * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.
+ * Both columns are important for context
+ *
+ * - Pinned rows are set to overlap *when* they have the same ancestor,
+ * and stuck consecutively when they have a different ancestor.
+ * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.
+ * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.
+ *
+ * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.
+ */
+export declare class TablePinService {
+  private cachedColMeta;
+  private tableId;
+  private tableEle;
+  private scrollElement;
+  private startColumns;
+  private endColumns;
+  private topRows;
+  private bottomRows;
+  private tableDims;
+  constructor(table: HTMLTableElement, scrollElement: HTMLElement);
+  private get pinnedStart();
+  private set pinnedStart(value);
+  private _pinnedStart;
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'last' start column.
+   * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)
+   */
+  private handlePinnedStartChange;
+  private get pinnedEnd();
+  private set pinnedEnd(value);
+  private _pinnedEnd;
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'first' end column.
+   * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)
+   */
+  private handlePinnedEndChange;
+  private get cssColDimensionCacheKey();
+  private set cssColDimensionCacheKey(value);
+  private _cssColDimensionCacheKey;
+  /**
+   * To only generate column dimension styles when necessary we
+   * maintain a cache key string via serialised column meta.
+   * Only when this key changes do we generate a new stylesheet
+   */
+  private generateCssCacheKey;
+  /**
+   * Generates pinned column width offset styles
+   * so pinned columns can appear stuck together,
+   * then attaches a stylesheet.
+   */
+  private createPinnedColDimensionStyles;
+  private getParentOffsets;
+  /**
+   * Loops through all 'top' & 'bottom' rows (on scroll or resize)
+   * Manages their visual state by applying classes on stuck / unstuck
+   * And their pinned offset / distance
+   */
+  assessRows(): void;
+  /**
+   * Loops through all 'start' & 'end' columns (on scroll or resize)
+   * Caches meta about each column (e.g. size, position-index)
+   * and decides which columns are pinned
+   */
+  assessCols(): Promise<void>;
+  private cacheX;
+  private cacheY;
+  onScroll(pos: {
+    x: number;
+    y: number;
+  }): void;
+  onResize(): void;
+}

package/dist/types/components/table/table.row.d.ts

@@ -4,12 +4,13 @@ type TableRowProps = {
   rowRenderer: TableTypes.RowRenderer;
   rowIndex: number;
   rowModel: TableTypes.RowData;
-  onColumnPinned?: TableTypes.PinnedCb;
+  onRowPinned?: TableTypes.PinnedCb;
 };
 export declare const TableRow: FunctionalComponent<TableRowProps>;
 type TableHeadFootProps = {
   rowRenderer: TableTypes.HeadFootRenderer;
-  onColumnPinned?: TableTypes.PinnedCb;
+  onRowPinned?: TableTypes.PinnedCb;
+  onColPinned?: TableTypes.PinnedCb;
 };
 export declare const TableHeadFootRow: FunctionalComponent<TableHeadFootProps>;
 export {};

package/dist/types/components/table/table.utils.d.ts

@@ -41,20 +41,6 @@ export declare function mergeCellProperties(rowIndex: number, colIndex: number,
  * @returns - a JSX node
  */
 export declare function colheadFootRender(col: TableTypes.ColumnConfig): VNode;
-/**
- * Adds element to Intersection Observer. Fires when element changes on the x axis
- * @param el - an element to observe
- * @param pos - the edge to watch (start or end)
- * @param cb - callback when an intersection state changes.
- */
-export declare function addHObserver(el: HTMLTableCellElement, pos: TableTypes.Position, cb: TableTypes.PinnedCb): void;
-/**
- * Adds element to Intersection Observer. Fires when element changes on the y axis
- * @param el - an element to observe
- * @param pos - the edge to watch (start or end)
- * @param cb - callback when an intersection state changes.
- */
-export declare function addVObserver(el: HTMLTableCellElement, pos: TableTypes.Position, cb: TableTypes.PinnedCb): void;
 /**
  * Renders a class string or map for pinned classes on the v axis.
  * @param type - element tagName
@@ -74,11 +60,6 @@ export declare function headerPinClasses(type: ValidRenderTypes, vPinned?: Table
 export declare function classListToStr(classes: {
   [key: string]: boolean;
 }): string;
-/**
- * Detects the current scroll speed as a number.
- * Use within a scroll listener
- */
-export declare const detectScrollSpeed: () => number;
 /**
  * Attempts to find the closes scrolling parental element
  * @param element - the element from which to traverse up the DOM
@@ -92,12 +73,4 @@ export declare function findScrollParent(element: HTMLElement): HTMLElement;
  * @returns true if the element's area percentage is visible
  */
 export declare function isInViewport(el: Element, percentVisible?: number): boolean;
-/**
- * Immutable array re-order
- * @param from - the index to move from
- * @param to - the index to move to
- * @param arr - the array to re-order
- * @returns - a new, re-orderd array
- */
-export declare function arrMove(from: number, to: number, arr: any[]): any[];
 export {};

package/dist/types/components.d.ts

@@ -2294,9 +2294,9 @@ export namespace Components {
         "scrollParent"?: HTMLElement | Document;
         "setTriggerPos": (offset: number | { v: number; h: number; }) => Promise<number | { v: number; h: number; }>;
         /**
-          * Upon being stuck, attach the sticker to another sticker element. A JS query selector that returns a <nano-sticker>
+          * Upon being stuck, attach the sticker to another sticker element. JS query selector string or DOM element pointing to a `<nano-sticker>`
          */
-        "stickTo": string;
+        "stickTo": string | HTMLNanoStickerElement;
     }
     interface NanoTab {
         /**
@@ -2393,6 +2393,10 @@ export namespace Components {
           * @returns a promise which resolves when complete
          */
         "addSort": (column: TableTypes.Prop, order: TableTypes.Order) => Promise<void>;
+        /**
+          * @readonly - shows the currently applied filters
+         */
+        "appliedFilters": Filter[];
         /**
           * The number of total blocks currently rendered in the table. @readonly
          */
@@ -2406,11 +2410,15 @@ export namespace Components {
          */
         "columns": TableTypes.NanoTable<any>['columns'];
         /**
-          * A custom filtering function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
+          * A custom filtering function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsy, the sort will be performed by the component. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
         "customFilterFn"?: (
     filters: TableTypes.Filter[]
   ) => Promise<true | TableTypes.Falsy>;
+        /**
+          * Function called whenever `col.cellTemplate` renders an unknown object. The function should render a valid HTMLElement to the cell arg. Example usage - render JSX from a 3rd party lib and append the result to the cell element.
+         */
+        "customRenderer": (node: any, cell: HTMLElement) => void;
         /**
           * A custom sorting function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
@@ -2430,9 +2438,8 @@ export namespace Components {
           * Used for custom thead row rendering
          */
         "headRender": TableTypes.HeadFootRenderer;
-        "jsxRenderer": TableTypes.HFunc<any>;
         /**
-          * Will show a loading state when set to true. By default, will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting. *Note* when set manually, will overwrite any internal loading state. Set to 'undefined' to revert to default behaviour.
+          * Will show a loading state when set to true. By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy *or* when performing custom filtering or sorting. *Note* when set manually, will overwrite any internal loading state. Set to 'undefined' to revert to default behaviour.
          */
         "loading": boolean;
         /**
@@ -2486,7 +2493,7 @@ export namespace Components {
         "type": 'grid' | 'table';
         /**
           * Updates a row model at a given index
-          * @param row - the row to update. *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property - rows are augmented with certain properties to aid with efficient rendering
+          * @param row - the row to update.
           * @param rowIndex - the row index to insert this row
          */
         "updateRow": (row: TableTypes.RowData, rowIndex: number) => Promise<void>;
@@ -5198,6 +5205,10 @@ declare namespace LocalJSX {
           * Fire `nanoResizeContentFitChange` events notifying whether content currently fits or does not on the x, y or both axis'. Also makes the `content-fit-...` slots available
          */
         "notifyContentFit"?: 'x' | 'y' | 'xy';
+        /**
+          * Fires after any resizing
+         */
+        "onNanoResize"?: (event: NanoResizeObserveCustomEvent<ResizeObserverEntry[]>) => void;
         /**
           * Fires when the content either begins or stops fitting. Will only work when `notifyContentFit` is set.
          */
@@ -5679,9 +5690,9 @@ declare namespace LocalJSX {
          */
         "scrollParent"?: HTMLElement | Document;
         /**
-          * Upon being stuck, attach the sticker to another sticker element. A JS query selector that returns a <nano-sticker>
+          * Upon being stuck, attach the sticker to another sticker element. JS query selector string or DOM element pointing to a `<nano-sticker>`
          */
-        "stickTo"?: string;
+        "stickTo"?: string | HTMLNanoStickerElement;
     }
     interface NanoTab {
         /**
@@ -5774,6 +5785,10 @@ declare namespace LocalJSX {
      * - Add custom properties at every level
      */
     interface NanoTable {
+        /**
+          * @readonly - shows the currently applied filters
+         */
+        "appliedFilters"?: Filter[];
         /**
           * The number of total blocks currently rendered in the table. @readonly
          */
@@ -5787,11 +5802,15 @@ declare namespace LocalJSX {
          */
         "columns"?: TableTypes.NanoTable<any>['columns'];
         /**
-          * A custom filtering function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
+          * A custom filtering function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsy, the sort will be performed by the component. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
         "customFilterFn"?: (
     filters: TableTypes.Filter[]
   ) => Promise<true | TableTypes.Falsy>;
+        /**
+          * Function called whenever `col.cellTemplate` renders an unknown object. The function should render a valid HTMLElement to the cell arg. Example usage - render JSX from a 3rd party lib and append the result to the cell element.
+         */
+        "customRenderer"?: (node: any, cell: HTMLElement) => void;
         /**
           * A custom sorting function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
@@ -5811,9 +5830,8 @@ declare namespace LocalJSX {
           * Used for custom thead row rendering
          */
         "headRender"?: TableTypes.HeadFootRenderer;
-        "jsxRenderer"?: TableTypes.HFunc<any>;
         /**
-          * Will show a loading state when set to true. By default, will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting. *Note* when set manually, will overwrite any internal loading state. Set to 'undefined' to revert to default behaviour.
+          * Will show a loading state when set to true. By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy *or* when performing custom filtering or sorting. *Note* when set manually, will overwrite any internal loading state. Set to 'undefined' to revert to default behaviour.
          */
         "loading"?: boolean;
         /**