@nanoporetech-digital/components 4.5.1 → 4.5.3

package/dist/nano-components/{p-125d4ca8.entry.js → p-dc2c37d5.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,h as e,a,g as s}from"./p-f6a8467a.js";import{M as n}from"./p-e04f2333.js";import{l as r,u as o}from"./p-d7c34990.js";import{c as l}from"./p-411bb8f1.js";import"./p-45abbbdd.js";import"./p-257432ff.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px)}";let c;let d;let f;let u;if(globalThis["document"]){c=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"})}const m=class{constructor(a){t(this,a);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>e("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},e("div",{class:"alert__content"},e("div",{part:"icon",class:"alert__icon"},e("slot",{name:"icon"})),e("div",{part:"message",class:"alert__message"},e("slot",null)),this.closable&&e("div",{class:"alert__close"},e("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),e("div",{class:"alert__footer"},e("slot",{name:"footer"})));this.isModal=false;this.isToast=false;this.isShowing=false;this.label=undefined;this.open=false;this.closable=false;this.color=undefined;this.duration=Infinity;this.hoist=false}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((i=>{let e;switch(t){case"tl":e=d;break;case"bl":e=f;break;case"br":e=u;break;default:e=c;break}if(!e.parentElement){document.body.appendChild(e)}e.appendChild(this.host);this.connectedCallback();this.show();const a=()=>{this.host.remove();this.isToast=false;i();if(!e.querySelector("nano-alert")){e.remove()}};this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nano-after-hide",a,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();r(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const i=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const e=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",i,{once:true});this.host.addEventListener("nano-after-show",i,{once:true});this.host.addEventListener("nanoAfterHide",e,{once:true});this.host.addEventListener("nano-after-hide",e,{once:true})}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host);this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){o(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return e(a,{class:Object.assign({},l(this.color)),showing:this.isShowing},this.isModal&&[e("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),e("div",{class:"alert__modal-wrap"},e(this.Panel,null))],!this.isModal&&e(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};m.style=h;export{m as nano_alert};
-//# sourceMappingURL=p-125d4ca8.entry.js.map
+import{r as t,c as i,h as e,a,g as s}from"./p-f6a8467a.js";import{M as n}from"./p-e04f2333.js";import{l as r,u as o}from"./p-d7c34990.js";import{c as l}from"./p-411bb8f1.js";import"./p-45abbbdd.js";import"./p-257432ff.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px)}";let c;let d;let f;let u;if(globalThis["document"]){c=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"})}const m=class{constructor(a){t(this,a);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>e("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},e("div",{class:"alert__content"},e("div",{part:"icon",class:"alert__icon"},e("slot",{name:"icon"})),e("div",{part:"message",class:"alert__message"},e("slot",null)),this.closable&&e("div",{class:"alert__close"},e("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),e("div",{class:"alert__footer"},e("slot",{name:"footer"})));this.isModal=false;this.isToast=false;this.isShowing=false;this.label=undefined;this.open=false;this.closable=false;this.color=undefined;this.duration=Infinity;this.hoist=false}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((i=>{let e;switch(t){case"tl":e=d;break;case"bl":e=f;break;case"br":e=u;break;default:e=c;break}if(!e.parentElement){document.body.appendChild(e)}e.appendChild(this.host);this.connectedCallback();this.show();const a=()=>{this.host.remove();this.isToast=false;i();if(!e.querySelector("nano-alert")){e.remove()}};this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nano-after-hide",a,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();r(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const i=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const e=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",i,{once:true});this.host.addEventListener("nano-after-show",i,{once:true});this.host.addEventListener("nanoAfterHide",e,{once:true});this.host.addEventListener("nano-after-hide",e,{once:true})}))}connectedCallback(){this.modal=new n(this.host);this.handleHoistChange();this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){o(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;if(this.panel)this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return e(a,{class:Object.assign({},l(this.color)),showing:this.isShowing},this.isModal&&[e("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),e("div",{class:"alert__modal-wrap"},e(this.Panel,null))],!this.isModal&&e(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};m.style=h;export{m as nano_alert};
+//# sourceMappingURL=p-dc2c37d5.entry.js.map

package/dist/nano-components/{p-125d4ca8.entry.js.map → p-dc2c37d5.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["alertCss","toastStackTr","toastStackTl","toastStackBl","toastStackBr","globalThis","Object","assign","document","createElement","className","Alert","this","addedTransEnd","goingToHide","goingToShow","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","open","isShowing","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","duration","Infinity","setTimeout","Panel","h","ref","el","part","class","alert","isToast","isModal","role","undefined","label","onMouseMove","tabIndex","name","closable","iconName","onClick","handleOpenChange","show","handleDurationChange","handleHoistChange","hoist","body","children","prepend","async","nanoShow","requestAnimationFrame","nanoHide","position","Promise","resolve","toastStack","parentElement","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","render","Host","createColorClasses","color","showing","alert__overlay","div"],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.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/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{map.get($colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n  toastStackTr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tr',\n  });\n  toastStackTl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tl',\n  });\n  toastStackBl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--bl',\n  });\n  toastStackBr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--br',\n  });\n}\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Relocate the dialog to the root of the DOM.\n   * Most useful in conjunction with `alert()` when parental elements\n   * have css stacking constraints which don't allow for `position: fixed`\n   */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    requestAnimationFrame(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nano-after-hide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nano-after-hide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["alertCss","toastStackTr","toastStackTl","toastStackBl","toastStackBr","globalThis","Object","assign","document","createElement","className","Alert","this","addedTransEnd","goingToHide","goingToShow","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","open","isShowing","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","duration","Infinity","setTimeout","Panel","h","ref","el","part","class","alert","isToast","isModal","role","undefined","label","onMouseMove","tabIndex","name","closable","iconName","onClick","handleOpenChange","show","handleDurationChange","handleHoistChange","hoist","body","children","prepend","async","nanoShow","requestAnimationFrame","nanoHide","position","Promise","resolve","toastStack","parentElement","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","render","Host","createColorClasses","color","showing","alert__overlay","div"],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.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/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{map.get($colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-block-start-width: 4px;\n  border-block-start-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 #{$spacing-medium};\n  padding-block: 0;\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  ::slotted(*) {\n    color: var(--tint-color);\n    margin-inline-start: #{$spacing-medium};\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n  toastStackTr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tr',\n  });\n  toastStackTl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--tl',\n  });\n  toastStackBl = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--bl',\n  });\n  toastStackBr = Object.assign(document.createElement('div'), {\n    className: 'nano-toast-stack nano-toast-stack--br',\n  });\n}\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /**\n   * Relocate the dialog to the root of the DOM.\n   * Most useful in conjunction with `alert()` when parental elements\n   * have css stacking constraints which don't allow for `position: fixed`\n   */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    requestAnimationFrame(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    requestAnimationFrame(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nano-after-hide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      requestAnimationFrame(() => {\n        this.show();\n      });\n\n      const onOpen = () =>\n        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nano-after-hide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.handleHoistChange();\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    if (this.panel)\n      this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/{p-b2b29eaf.js → p-ffb57a0d.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{j as t,g as n,e,h as o,F 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 _=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(_)}return _(t.buffer)}}return[]};let f=0;let u=0;const g=new Map;const m=new Map;const v=(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]=g.get(i);g.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=>m.delete(t)))}o(r)}}else if(e===o+".cb"){try{m.get(i)(...r)}catch(n){t(n)}}}}));return i};const w=(t,n,e)=>(...o)=>new Promise(((i,r)=>{let s=f++;let a=0;let l=o.length;let d=[i,r];g.set(s,d);for(;a<l;a++){if(typeof o[a]==="function"){const t=u++;m.set(t,o[a]);o[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,s,e,o],_(o));if(t.then){t.then(c)}else{c(t)}}));const y=import("./p-e68a4e16.js").then((t=>t.worker));const k=w(y,"stencil.table.worker","createWorkerStore");const x=w(y,"stencil.table.worker","syncConfigToWorker");const $=w(y,"stencil.table.worker","syncDataToWorker");const j=w(y,"stencil.table.worker","workerFilter");const O=w(y,"stencil.table.worker","workerSearch");const C=w(y,"stencil.table.worker","workerSort");function z(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!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){const o={data:h({rows:[]}),config:h({columns:n}),general:h({workerId:null,scrollParent:e,host:t})};const i=await k(o.data.state.rows,z(o.config.state.columns));o.general.state.workerId=i;S.set(t,o);o.data.use({reset:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)}});o.config.use({reset:()=>{if(o.general.state.workerId)x(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)x(o.general.state.workerId,null)}});return o}function D(t){return S.get(t)}function T(t){if(t instanceof Date){return"date"}if(["number","string"].includes(typeof t)){return typeof t}return"unknown"}function R(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 M(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 N(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 F(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 P(t,n){const e=E();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 A(t){const n=E();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 E(){return D(n(e()))}function H(t,n,e){var o;const i=Object.assign({},e);const r=(o=E().config.state.columns[n])===null||o===void 0?void 0:o.cellProperties;if(!r)return i;const s=P(t,n);const a=r(s);if(!a)return i;return W(i,a)}function q(t){const n=t===null||t===void 0?void 0:t.columnTemplate;return n?n(o,t):o(i,null,t.title)}const J=new WeakMap;const L=new WeakMap;function Z(t,n,e){if(J.get(t))return;const o=E();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});J.set(t,r);setTimeout((()=>r.observe(t)),300)}function U(t,n,e){if(L.get(t))return;const o=E();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});L.set(t,r);requestAnimationFrame((()=>r.observe(t)))}function G(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 K(o);return o}function K(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function Q(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 V(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)}function X(t,n,e){const o=[...e];const i=o.splice(t,1)[0];o.splice(n,0,i);return o}let Y;let tt;let nt;let et;const ot=({column:t,headRenderer:n,onColumnSortClick:e,onColumnPinned:r,onColumnDrag:s,onColumnDrop:a,defaults:l})=>{const d=E();function c(t,n){Y=n;tt=nt=t.target;et=tt.closest("."+`${b}__tr`);et.classList.add(`${b}__dragging`);tt.classList.add(`${b}__drag--start`);t.dataTransfer.effectAllowed="move";t.dataTransfer.setData("text/html",tt.innerHTML);s(n.prop,tt)}function h(){et.classList.remove(`${b}__dragging`);tt.classList.remove(`${b}__drag--start`);et.querySelectorAll(`.${b}__drag-mask--active`).forEach((t=>{t.classList.remove(`${b}__drag-mask--active`)}));tt=null;Y=null;et=null;nt=null}function p(t){if(nt===t.target)return;t.preventDefault();t.stopImmediatePropagation();t.dataTransfer.dropEffect="move";et.querySelectorAll(`.${b}__drag-mask--active`).forEach((t=>{t.classList.remove(`${b}__drag-mask--active`)}));nt=t.target;if(!nt.classList.contains(`${b}__drag-mask`)){t.dataTransfer.dropEffect="none";return}nt.classList.add(`${b}__drag-mask--active`)}function _(t){t.stopPropagation();const{colName:n}=this.dataset;if(n===Y.prop)return;const e=d.config.state.columns;let o=e.findIndex((t=>t.prop===n));const i=e.findIndex((t=>t===Y));if(o<i&&this.classList.contains(`${b}__drag-mask--end`))o++;if(o>i&&this.classList.contains(`${b}__drag-mask--start`))o--;if(o===i)return;a(Y.prop,d.config.state.columns[o].prop,tt)}function f(n){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}e(o,t.prop,n.target.closest("th"))}function u(){return!!l.sortable&&t.sortable!==false||!l.sortable&&t.sortable===true}function g(){return!!l.draggable&&t.draggable!==false||!l.draggable&&t.draggable===true}let m={};if(t.columnProperties){m=t.columnProperties(t)||m}const v={class:Object.assign(Object.assign({},G("th",n===null||n===void 0?void 0:n.pinned)),{[`${b}__pin--start`]:t.pinned==="start",[`${b}__pin--end`]:t.pinned==="end",[`${b}__ordered`]:!!t.order,[`${b}__filtered`]:!!t.filter})};let w=m?W(v,m):v;const y=q(t);if(!y)return o(i,null);w=Number(w.colSpan)>1?Object.assign(Object.assign({},w),{scope:"colgroup"}):Object.assign(Object.assign({},w),{scope:"col"});if(u()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";w=Object.assign(Object.assign({},w),{"aria-sort":n})}if(g()){w=Object.assign(Object.assign({},w),{draggable:true,onDragStart:n=>c(n,t),onDragOver:t=>t.preventDefault(),onDragEnd:()=>h()})}return o("th",Object.assign({},w,{ref:e=>{if(["end","start"].includes(t.pinned))Z(e,t.pinned,r);if(["top","bottom"].includes(n.pinned))U(e,n.pinned,r)},key:t.prop}),g()&&[o("div",{class:{[`${b}__drag-mask`]:true,[`${b}__drag-mask--start`]:true},"data-col-name":t.prop,onDragEnter:p,onDrop:_,onDragOver:t=>t.preventDefault()}),o("div",{class:{[`${b}__drag-mask`]:true,[`${b}__drag-mask--end`]:true},"data-col-name":t.prop,onDragEnter:p,onDrop:_,onDragOver:t=>t.preventDefault()})],u()?o("button",{class:{[`${b}__order-btn`]:true,[`${b}__cell-content`]:true},onClick:f},q(t),!!t.filter&&o("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?o("nano-icon",{name:"solid/long-arrow-down"}):o("nano-icon",{name:"solid/long-arrow-up"})),o("div",{class:`${b}__status-icons`},o("nano-icon",{name:"light/chevron-down"}))):o("div",{class:`${b}__cell-content`},q(t),!!t.filter&&o("nano-icon",{name:"light/bars-filter"})))};function it(t,n){var e,r;const s=E();const a=s.config.state.columns;const l=(e=a[n])===null||e===void 0?void 0:e.cellTemplate;const d=P(t,n);if(!!d.cellModel&&a[n].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(o,d):d.cellModel?o(i,null,(r=d.cellModel)===null||r===void 0?void 0:r.toString()):""}const rt=(t,n=false)=>{const e=E();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 K(i);return i};const st=({rowIndex:t,colIndex:n,nestedContent:e})=>{const i=()=>e?e():it(t,n)||o("span",{class:"placeholder"}," ");let r="td";const s=E();const a=s.config.state.columns[n];let l=H(t,n,{class:rt(n)});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=>o("div",Object.assign({},t,{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:!!a.wrap}}),o(i,null));return o(r,Object.assign({},l),a.autoTooltip&&!a.wrap?o("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},o("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(r).style.zIndex="100",onNanoHide:t=>t.target.closest(r).style.zIndex=""},o(d,null),o("span",{slot:"content"},o(i,null)))):o(d,null))};const at=({rowRenderer:t,rowIndex:n,rowModel:e,onColumnPinned:i},r,s)=>{let a={};const l=({header:t,wrap:n},e)=>{const i=o("div",{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:n}},e);return t?o("th",{scope:"row"},i):o("td",null,i)};if(!e){const t=A(n);e=t.rowModel}if(t===null||t===void 0?void 0:t.rowProperties){a=t.rowProperties({rowModel:e,rowIndex:n})||a}let d;if((t===null||t===void 0?void 0:t.pinned)&&typeof t.pinned==="function"){d=t.pinned()}const c={class:G("tr",d)};const h=a?W(c,a):c;const p=t===null||t===void 0?void 0:t.template;if(p){let t=p(o,{renderedRow:o("tr",Object.assign({},h,{key:e.__uuid}),r),rowModel:e,rowIndex:n},l);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=W({class:G("tr",d,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:G(t.vtag.toString(),d,true)+rt(n,true),ref:t=>{if(!!t&&d==="top"||d==="bottom")U(t,d,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 o("tr",Object.assign({},h,{key:e.__uuid}),r)};const lt=({rowRenderer:t,onColumnPinned:n},e,i)=>{let r={};if(t.rowProperties){r=t.rowProperties()||{}}const s=({header:t,wrap:n},e)=>{const i=o("div",{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:n}},e);return t!==false?o("th",{scope:"col"},i):o("td",null,i)};const a=t.pinned||null;const l={class:G("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(o,{renderedRow:o("tr",Object.assign({},d),e)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:G("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:G(t.vtag.toString(),a,true),ref:t=>{if(!!t&&a==="top"||a==="bottom")U(t,a,n);if(!!t&&t.classList.contains("nano-tbl__pin--end"))Z(t,"end",n);if(!!t&&t.classList.contains("nano-tbl__pin--start"))Z(t,"start",n)}},t.vattrs)}return t}))}}return t}))}return t}return o("tr",Object.assign({},d),e)};const dt=':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__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;-webkit-border-start:2px dashed var(--border-tint-color);border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;-webkit-border-end:2px dashed var(--border-tint-color);border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.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__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;transition:all 0.2s ease}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)}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 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 ct=0;const ht=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.nanoTblColDrag=s(this,"nanoTblColDrag",7);this.nanoTblColDrop=s(this,"nanoTblColDrop",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-"+ct++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.cacheScrollPosition=0;this.measureHeight=0;this.blockHeights=[];this.unitHeight=0;this._isReady=false;this.colDrag=t=>{this.nanoTblColDrag.emit({column:t})};this.colDrop=(t,n)=>{const e=this.store.config.state.columns;const o=e.findIndex((t=>t.prop===n));const i=e.findIndex((n=>n.prop===t));const r=this.nanoTblColDrop.emit({fromCol:t,toCol:n,fromIndex:i,toIndex:o});if(r.defaultPrevented)return;this.columns=X(i,o,e)};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 F(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=()=>{this.cacheScrollPosition=this.scrollParent.scrollTop||window.scrollY;requestAnimationFrame((()=>{let t=0;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.defaultColDraggable=false;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 R(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)this.setInitialBlockDimension();this._loading=false}))}async handleColsChange(){await M(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 N(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;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&&!V(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!V(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(o)this.scrollParent.scrollLeft=o;if(e)this.scrollParent.style.scrollBehavior=e;this.scrollHandler()}setMeasureElement(){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`))}))}))}setInitialBlockDimension(){var t;if(!((t=this.blockElements)===null||t===void 0?void 0:t.length))return;const n=new Promise((t=>{a((()=>{this.setMeasureElement();if(!this.measureEle&&!this.unitHeight)t();this.blockElements.forEach(((n,e)=>{var o;if(!n||!((o=n.classList)===null||o===void 0?void 0:o.contains(`${b}__inactive`))){if(e===this.blockElements.length-1)t();return}if(e===this.blockElements.length-1)t()}))}))}));n.then((()=>{requestAnimationFrame((()=>{this.isReady=true}))}))}async columnInit(){this.filters=this.columns.filter((t=>!!t.filter)).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>0){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")}}async componentWillLoad(){this.scrollParent=Q(this.host);this.store=await I(this.host,this.columns,this.scrollParent);await this.handleRowsChange();this.processSlots();this.store.data.onChange("rows",(()=>this.setBlocks()));this.setBlocks()}connectedCallback(){this.scrollParent=Q(this.host)}componentDidLoad(){this.setInitialBlockDimension()}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){}componentDidRender(){this.setMeasureElement()}render(){this.blockElements=[];return o(l,null,o("div",{class:`${b}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),o("nano-resize-observe",{"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined,states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange}),o("div",{class:`${b}__wrap sm md`,ref:t=>this.tableWrapperEle=t},o("nano-progress-bar",{indeterminate:true,class:{[`${b}__progress-bar`]:true,[`${b}__progress-bar--show`]:this._loading}}),o("table",{role:this.type==="grid"?"grid":undefined,"aria-readonly":this.type==="table"?"true":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${b}`,ref:t=>this.tableEle=t},o("caption",{class:{[`${b}__caption`]:true,[`${b}__caption--hide`]:!this.showCaption},id:"table-caption-"+this.renderId},o("slot",{name:"caption"},this.caption)),o("thead",null,o(lt,{rowRenderer:this.headRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[o(ot,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,onColumnPinned:this.handleColumnPinned,onColumnDrag:this.colDrag,onColumnDrop:this.colDrop,defaults:{sortable:this.defaultSort,draggable:this.defaultColDraggable}})])))),this._loading&&!this.blocks.length&&o("tbody",{class:`${b}__active`},[...Array(10).keys()].map((t=>o("tr",null,this.store.config.state.columns.map(((n,e)=>o(st,{rowIndex:t,colIndex:e,nestedContent:()=>o("nano-skeleton",null)}))))))),!this._loading&&!this.blocks.length&&o("tr",null,o("th",{class:`${b}__th`,colSpan:this.store.config.state.columns.length},o("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},o("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>o("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${b}__inactive`]:!this.activeBlocks.includes(n),[`${b}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const i=n>0?n*this.perBlock+e:e;return o(at,{rowRenderer:this.rowRender,rowModel:t,rowIndex:i},this.store.config.state.columns.map(((t,n)=>o(st,{rowIndex:i,colIndex:n}))))})):o("tr",null,o("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&o("tfoot",null,o(lt,{rowRenderer:this.footRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[o(ot,{column:t,headRenderer:this.footRender,onColumnPinned:this.handleColumnPinned,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort,draggable:this.defaultColDraggable}})]))))),!!this.blocks.length&&o("nano-spinner",{type:"circle",class:{[`${b}__spinner`]:true,[`${b}__spinner--show`]:this._loading}})))}get host(){return n(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};ht.style=dt;export{ht as T,v as c};
-//# sourceMappingURL=p-b2b29eaf.js.map
+import{j as t,g as n,e,h as o,F 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 _=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(_)}return _(t.buffer)}}return[]};let f=0;let u=0;const g=new Map;const m=new Map;const v=(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]=g.get(i);g.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=>m.delete(t)))}o(r)}}else if(e===o+".cb"){try{m.get(i)(...r)}catch(n){t(n)}}}}));return i};const w=(t,n,e)=>(...o)=>new Promise(((i,r)=>{let s=f++;let a=0;let l=o.length;let d=[i,r];g.set(s,d);for(;a<l;a++){if(typeof o[a]==="function"){const t=u++;m.set(t,o[a]);o[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,s,e,o],_(o));if(t.then){t.then(c)}else{c(t)}}));const y=import("./p-dbf47e49.js").then((t=>t.worker));const k=w(y,"stencil.table.worker","createWorkerStore");const x=w(y,"stencil.table.worker","syncConfigToWorker");const $=w(y,"stencil.table.worker","syncDataToWorker");const j=w(y,"stencil.table.worker","workerFilter");const O=w(y,"stencil.table.worker","workerSearch");const C=w(y,"stencil.table.worker","workerSort");function z(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!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){const o={data:h({rows:[]}),config:h({columns:n}),general:h({workerId:null,scrollParent:e,host:t})};const i=await k(o.data.state.rows,z(o.config.state.columns));o.general.state.workerId=i;S.set(t,o);o.data.use({reset:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)}});o.config.use({reset:()=>{if(o.general.state.workerId)x(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)x(o.general.state.workerId,null)}});return o}function D(t){return S.get(t)}function T(t){if(t instanceof Date){return"date"}if(["number","string"].includes(typeof t)){return typeof t}return"unknown"}function R(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 M(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 N(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 F(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 P(t,n){const e=E();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 A(t){const n=E();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 E(){return D(n(e()))}function H(t,n,e){var o;const i=Object.assign({},e);const r=(o=E().config.state.columns[n])===null||o===void 0?void 0:o.cellProperties;if(!r)return i;const s=P(t,n);const a=r(s);if(!a)return i;return W(i,a)}function q(t){const n=t===null||t===void 0?void 0:t.columnTemplate;return n?n(o,t):o(i,null,t.title)}const J=new WeakMap;const L=new WeakMap;function Z(t,n,e){if(J.get(t))return;const o=E();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});J.set(t,r);setTimeout((()=>r.observe(t)),300)}function U(t,n,e){if(L.get(t))return;const o=E();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});L.set(t,r);requestAnimationFrame((()=>r.observe(t)))}function G(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 K(o);return o}function K(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function Q(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 V(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)}function X(t,n,e){const o=[...e];const i=o.splice(t,1)[0];o.splice(n,0,i);return o}let Y;let tt;let nt;let et;const ot=({column:t,headRenderer:n,onColumnSortClick:e,onColumnPinned:r,onColumnDrag:s,onColumnDrop:a,defaults:l})=>{const d=E();function c(t,n){Y=n;tt=nt=t.target;et=tt.closest("."+`${b}__tr`);et.classList.add(`${b}__dragging`);tt.classList.add(`${b}__drag--start`);t.dataTransfer.effectAllowed="move";t.dataTransfer.setData("text/html",tt.innerHTML);s(n.prop,tt)}function h(){et.classList.remove(`${b}__dragging`);tt.classList.remove(`${b}__drag--start`);et.querySelectorAll(`.${b}__drag-mask--active`).forEach((t=>{t.classList.remove(`${b}__drag-mask--active`)}));tt=null;Y=null;et=null;nt=null}function p(t){if(nt===t.target)return;t.preventDefault();t.stopImmediatePropagation();t.dataTransfer.dropEffect="move";et.querySelectorAll(`.${b}__drag-mask--active`).forEach((t=>{t.classList.remove(`${b}__drag-mask--active`)}));nt=t.target;if(!nt.classList.contains(`${b}__drag-mask`)){t.dataTransfer.dropEffect="none";return}nt.classList.add(`${b}__drag-mask--active`)}function _(t){t.stopPropagation();const{colName:n}=this.dataset;if(n===Y.prop)return;const e=d.config.state.columns;let o=e.findIndex((t=>t.prop===n));const i=e.findIndex((t=>t===Y));if(o<i&&this.classList.contains(`${b}__drag-mask--end`))o++;if(o>i&&this.classList.contains(`${b}__drag-mask--start`))o--;if(o===i)return;a(Y.prop,d.config.state.columns[o].prop,tt)}function f(n){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}e(o,t.prop,n.target.closest("th"))}function u(){return!!l.sortable&&t.sortable!==false||!l.sortable&&t.sortable===true}function g(){return!!l.draggable&&t.draggable!==false||!l.draggable&&t.draggable===true}let m={};if(t.columnProperties){m=t.columnProperties(t)||m}const v={class:Object.assign(Object.assign({},G("th",n===null||n===void 0?void 0:n.pinned)),{[`${b}__pin--start`]:t.pinned==="start",[`${b}__pin--end`]:t.pinned==="end",[`${b}__ordered`]:!!t.order,[`${b}__filtered`]:!!t.filter})};let w=m?W(v,m):v;const y=q(t);if(!y)return o(i,null);w=Number(w.colSpan)>1?Object.assign(Object.assign({},w),{scope:"colgroup"}):Object.assign(Object.assign({},w),{scope:"col"});if(u()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";w=Object.assign(Object.assign({},w),{"aria-sort":n})}if(g()){w=Object.assign(Object.assign({},w),{draggable:true,onDragStart:n=>c(n,t),onDragOver:t=>t.preventDefault(),onDragEnd:()=>h()})}return o("th",Object.assign({},w,{ref:e=>{if(["end","start"].includes(t.pinned))Z(e,t.pinned,r);if(["top","bottom"].includes(n.pinned))U(e,n.pinned,r)},key:t.prop}),g()&&[o("div",{class:{[`${b}__drag-mask`]:true,[`${b}__drag-mask--start`]:true},"data-col-name":t.prop,onDragEnter:p,onDrop:_,onDragOver:t=>t.preventDefault()}),o("div",{class:{[`${b}__drag-mask`]:true,[`${b}__drag-mask--end`]:true},"data-col-name":t.prop,onDragEnter:p,onDrop:_,onDragOver:t=>t.preventDefault()})],u()?o("button",{class:{[`${b}__order-btn`]:true,[`${b}__cell-content`]:true},onClick:f},q(t),!!t.filter&&o("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?o("nano-icon",{name:"solid/long-arrow-down"}):o("nano-icon",{name:"solid/long-arrow-up"})),o("div",{class:`${b}__status-icons`},o("nano-icon",{name:"light/chevron-down"}))):o("div",{class:`${b}__cell-content`},q(t),!!t.filter&&o("nano-icon",{name:"light/bars-filter"})))};function it(t,n){var e,r;const s=E();const a=s.config.state.columns;const l=(e=a[n])===null||e===void 0?void 0:e.cellTemplate;const d=P(t,n);if(!!d.cellModel&&a[n].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(o,d):d.cellModel?o(i,null,(r=d.cellModel)===null||r===void 0?void 0:r.toString()):""}const rt=(t,n=false)=>{const e=E();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 K(i);return i};const st=({rowIndex:t,colIndex:n,nestedContent:e})=>{const i=()=>e?e():it(t,n)||o("span",{class:"placeholder"}," ");let r="td";const s=E();const a=s.config.state.columns[n];let l=H(t,n,{class:rt(n)});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=>o("div",Object.assign({},t,{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:!!a.wrap}}),o(i,null));return o(r,Object.assign({},l),a.autoTooltip&&!a.wrap?o("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},o("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(r).style.zIndex="100",onNanoHide:t=>t.target.closest(r).style.zIndex=""},o(d,null),o("span",{slot:"content"},o(i,null)))):o(d,null))};const at=({rowRenderer:t,rowIndex:n,rowModel:e,onColumnPinned:i},r,s)=>{let a={};const l=({header:t,wrap:n},e)=>{const i=o("div",{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:n}},e);return t?o("th",{scope:"row"},i):o("td",null,i)};if(!e){const t=A(n);e=t.rowModel}if(t===null||t===void 0?void 0:t.rowProperties){a=t.rowProperties({rowModel:e,rowIndex:n})||a}let d;if((t===null||t===void 0?void 0:t.pinned)&&typeof t.pinned==="function"){d=t.pinned()}const c={class:G("tr",d)};const h=a?W(c,a):c;const p=t===null||t===void 0?void 0:t.template;if(p){let t=p(o,{renderedRow:o("tr",Object.assign({},h,{key:e.__uuid}),r),rowModel:e,rowIndex:n},l);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=W({class:G("tr",d,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:G(t.vtag.toString(),d,true)+rt(n,true),ref:t=>{if(!!t&&d==="top"||d==="bottom")U(t,d,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 o("tr",Object.assign({},h,{key:e.__uuid}),r)};const lt=({rowRenderer:t,onColumnPinned:n},e,i)=>{let r={};if(t.rowProperties){r=t.rowProperties()||{}}const s=({header:t,wrap:n},e)=>{const i=o("div",{class:{[`${b}__cell-content`]:true,[`${b}__cell-content--wrap`]:n}},e);return t!==false?o("th",{scope:"col"},i):o("td",null,i)};const a=t.pinned||null;const l={class:G("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(o,{renderedRow:o("tr",Object.assign({},d),e)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:G("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:G(t.vtag.toString(),a,true),ref:t=>{if(!!t&&a==="top"||a==="bottom")U(t,a,n);if(!!t&&t.classList.contains("nano-tbl__pin--end"))Z(t,"end",n);if(!!t&&t.classList.contains("nano-tbl__pin--start"))Z(t,"start",n)}},t.vattrs)}return t}))}}return t}))}return t}return o("tr",Object.assign({},d),e)};const dt=':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__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;-webkit-border-start:2px dashed var(--border-tint-color);border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;-webkit-border-end:2px dashed var(--border-tint-color);border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.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__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;transition:all 0.2s ease}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)}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 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 ct=0;const ht=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.nanoTblColDrag=s(this,"nanoTblColDrag",7);this.nanoTblColDrop=s(this,"nanoTblColDrop",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-"+ct++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.cacheScrollPosition=0;this.measureHeight=0;this.blockHeights=[];this.unitHeight=0;this._isReady=false;this.colDrag=t=>{this.nanoTblColDrag.emit({column:t})};this.colDrop=(t,n)=>{const e=this.store.config.state.columns;const o=e.findIndex((t=>t.prop===n));const i=e.findIndex((n=>n.prop===t));const r=this.nanoTblColDrop.emit({fromCol:t,toCol:n,fromIndex:i,toIndex:o});if(r.defaultPrevented)return;this.columns=X(i,o,e)};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 F(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=()=>{this.cacheScrollPosition=this.scrollParent.scrollTop||window.scrollY;requestAnimationFrame((()=>{let t=0;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.defaultColDraggable=false;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 R(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)this.setInitialBlockDimension();this._loading=false}))}async handleColsChange(){await M(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 N(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;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&&!V(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!V(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(o)this.scrollParent.scrollLeft=o;if(e)this.scrollParent.style.scrollBehavior=e;this.scrollHandler()}setMeasureElement(){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`))}))}))}setInitialBlockDimension(){var t;if(!((t=this.blockElements)===null||t===void 0?void 0:t.length))return;const n=new Promise((t=>{a((()=>{this.setMeasureElement();if(!this.measureEle&&!this.unitHeight)t();this.blockElements.forEach(((n,e)=>{var o;if(!n||!((o=n.classList)===null||o===void 0?void 0:o.contains(`${b}__inactive`))){if(e===this.blockElements.length-1)t();return}if(e===this.blockElements.length-1)t()}))}))}));n.then((()=>{requestAnimationFrame((()=>{this.isReady=true}))}))}async columnInit(){this.filters=this.columns.filter((t=>!!t.filter)).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>0){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")}}async componentWillLoad(){this.scrollParent=Q(this.host);this.store=await I(this.host,this.columns,this.scrollParent);await this.handleRowsChange();this.processSlots();this.store.data.onChange("rows",(()=>this.setBlocks()));this.setBlocks()}connectedCallback(){this.scrollParent=Q(this.host)}componentDidLoad(){this.setInitialBlockDimension()}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){}componentDidRender(){this.setMeasureElement()}render(){this.blockElements=[];return o(l,null,o("div",{class:`${b}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),o("nano-resize-observe",{"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined,states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange}),o("div",{class:`${b}__wrap sm md`,ref:t=>this.tableWrapperEle=t},o("nano-progress-bar",{indeterminate:true,class:{[`${b}__progress-bar`]:true,[`${b}__progress-bar--show`]:this._loading}}),o("table",{role:this.type==="grid"?"grid":undefined,"aria-readonly":this.type==="table"?"true":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${b}`,ref:t=>this.tableEle=t},o("caption",{class:{[`${b}__caption`]:true,[`${b}__caption--hide`]:!this.showCaption},id:"table-caption-"+this.renderId},o("slot",{name:"caption"},this.caption)),o("thead",null,o(lt,{rowRenderer:this.headRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[o(ot,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,onColumnPinned:this.handleColumnPinned,onColumnDrag:this.colDrag,onColumnDrop:this.colDrop,defaults:{sortable:this.defaultSort,draggable:this.defaultColDraggable}})])))),this._loading&&!this.blocks.length&&o("tbody",{class:`${b}__active`},[...Array(10).keys()].map((t=>o("tr",null,this.store.config.state.columns.map(((n,e)=>o(st,{rowIndex:t,colIndex:e,nestedContent:()=>o("nano-skeleton",null)}))))))),!this._loading&&!this.blocks.length&&o("tr",null,o("th",{class:`${b}__th`,colSpan:this.store.config.state.columns.length},o("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},o("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>o("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${b}__inactive`]:!this.activeBlocks.includes(n),[`${b}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const i=n>0?n*this.perBlock+e:e;return o(at,{rowRenderer:this.rowRender,rowModel:t,rowIndex:i},this.store.config.state.columns.map(((t,n)=>o(st,{rowIndex:i,colIndex:n}))))})):o("tr",null,o("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&o("tfoot",null,o(lt,{rowRenderer:this.footRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[o(ot,{column:t,headRenderer:this.footRender,onColumnPinned:this.handleColumnPinned,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort,draggable:this.defaultColDraggable}})]))))),!!this.blocks.length&&o("nano-spinner",{type:"circle",class:{[`${b}__spinner`]:true,[`${b}__spinner--show`]:this._loading}})))}get host(){return n(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};ht.style=dt;export{ht as T,v as c};
+//# sourceMappingURL=p-ffb57a0d.js.map

package/dist/themes/nanopore.cn.css

@@ -1 +1 @@
-html{font-family:var(--nano-font-family);font-weight:var(--nano-font-weight, 500);color:var(--nano-text-color, #4a4a4a);font-size:var(--nano-base-font-size)}a{color:var(--nano-color-primary, #007495);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-block:16px 10px;font-weight:600;line-height:1.2}h1{margin-block-start:10px;font-size:28px}h2{margin-block-start:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{inset-block-start:-0.5em}sub{inset-block-end:-0.25em}p{font-size:1.125rem;line-height:1.4;margin-block:0 1rem}p.supporting{font-size:.875rem}.heading{font-weight:500;line-height:1.3;margin-block:0 1.5rem;margin-inline:0}.heading__highlight{color:#007495}@media print{.heading{color:#4a4a4a}}.heading--one{font-size:2.5rem}@media(min-width: 768px){.heading--one{font-size:3.25rem}}.heading--two{font-size:1.5rem}@media(min-width: 768px){.heading--two{font-size:2rem}}.heading--three{font-size:1.125rem}@media(min-width: 768px){.heading--three{font-size:1.375rem}}.heading--four{font-size:1.125rem}.heading--five{font-size:1rem}.heading--light{font-weight:200}.heading--upper{text-transform:uppercase}.heading--meta{font-size:.875rem;text-transform:uppercase;letter-spacing:1.3px;font-weight:bold;margin-block-end:1rem}.button{padding:0;border:none;background-color:rgba(0,0,0,0);font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out,box-shadow 100ms ease-in-out,border-color 100ms ease-in-out,color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:500;cursor:pointer;background:rgba(0,0,0,.02)}.button::-moz-focus-inner{border:0;padding:0}.button:hover,.button:focus{text-decoration:none;color:inherit}@media print{.button{display:none}}.button:focus,.button.button--focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.button nano-icon,.button nano-spinner{--base-color-rgb: 255 255 255;margin-inline-start:.5em;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.button.button--icon-start nano-icon,.button.button--icon-start nano-spinner{margin-inline-start:0;margin-inline-end:.5em}.button:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.button:active:not(.button--disabled):not(:disabled){box-shadow:none}.button--disabled,.button:disabled{opacity:.6}.button--disabled:hover,.button:disabled:hover{cursor:default}.button--primary{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled),.button--primary.button--active{background-color:var(--nano-color-primary-shade, #00637f);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--primary.button--active.button--keyline{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:focus{color:var(--nano-color-primary-contrast, #fff)}.button--primary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--nano-color-primary, #007495);border-color:var(--nano-color-primary, #007495)}.button--primary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--primary.button--keyline:not(:focus):not(.button--focus),.button--primary.button--keyline.button--active{box-shadow:none}.button--secondary{background-color:#17bb75;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled),.button--secondary.button--active{background-color:#0b814f;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--secondary.button--active.button--keyline{background-color:#17bb75;color:#fff}.button--secondary:focus{color:#fff}.button--secondary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#17bb75;border-color:#17bb75}.button--secondary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--secondary.button--keyline:not(:focus):not(.button--focus),.button--secondary.button--keyline.button--active{box-shadow:none}.button--light{background-color:#fff;color:#007495}.button--light:hover:not(.button--disabled):not(:disabled),.button--light.button--active{background-color:#fff;color:#0c5a71}.button--light:hover:not(.button--disabled):not(:disabled).button--keyline,.button--light.button--active.button--keyline{background-color:#fff;color:#007495}.button--light:focus{color:#007495}.button--light.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#fff;border-color:#fff}.button--light.button--keyline:hover:not(.button--disabled):not(:disabled),.button--light.button--keyline:not(:focus):not(.button--focus),.button--light.button--keyline.button--active{box-shadow:none}.button--danger{background-color:#ef4135;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled),.button--danger.button--active{background-color:#be2a20;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled).button--keyline,.button--danger.button--active.button--keyline{background-color:#ef4135;color:#fff}.button--danger:focus{color:#fff}.button--danger.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#ef4135;border-color:#ef4135}.button--danger.button--keyline:hover:not(.button--disabled):not(:disabled),.button--danger.button--keyline:not(:focus):not(.button--focus),.button--danger.button--keyline.button--active{box-shadow:none}.button--warning{background-color:#f57e20;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled),.button--warning.button--active{background-color:#b95e17;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled).button--keyline,.button--warning.button--active.button--keyline{background-color:#f57e20;color:#fff}.button--warning:focus{color:#fff}.button--warning.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#f57e20;border-color:#f57e20}.button--warning.button--keyline:hover:not(.button--disabled):not(:disabled),.button--warning.button--keyline:not(:focus):not(.button--focus),.button--warning.button--keyline.button--active{box-shadow:none}.button--tertiary{background:rgba(0,0,0,0);box-shadow:none;text-decoration:underline;font-weight:400}.button--tertiary:hover:not(.button--disabled):not(:disabled),.button--tertiary:hover.button--active,.button--tertiary:focus:not(.button--disabled):not(:disabled),.button--tertiary:focus.button--active{color:#b5aea7;box-shadow:none;text-decoration:underline}.nano-color-primary{--nano-color-base: var(--nano-color-primary, #007495) ;--nano-color-base-rgb: var( --nano-color-primary-rgb, 0 116 149 ) ;--nano-color-contrast: var(--nano-color-primary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-primary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-primary-shade, #00637f) ;--nano-color-tint: var(--nano-color-primary-tint, #2689a5) ;--nano-color-tint-rgb: var( --nano-color-primary-tint-rgb, 38 137 165 ) }.nano-color-secondary{--nano-color-base: var(--nano-color-secondary, #548caf) ;--nano-color-base-rgb: var( --nano-color-secondary-rgb, 84 140 175 ) ;--nano-color-contrast: var(--nano-color-secondary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-secondary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-secondary-shade, #477795) ;--nano-color-tint: var(--nano-color-secondary-tint, #6e9dbb) ;--nano-color-tint-rgb: var( --nano-color-secondary-tint-rgb, 110 157 187 ) }.nano-color-tertiary{--nano-color-base: var(--nano-color-tertiary, #b5aea7) ;--nano-color-base-rgb: var( --nano-color-tertiary-rgb, 181 174 167 ) ;--nano-color-contrast: var(--nano-color-tertiary-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-tertiary-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-tertiary-shade, #9a948e) ;--nano-color-tint: var(--nano-color-tertiary-tint, #c0bab4) ;--nano-color-tint-rgb: var( --nano-color-tertiary-tint-rgb, 192 186 180 ) }.nano-color-success{--nano-color-base: var(--nano-color-success, #17bb75) ;--nano-color-base-rgb: var( --nano-color-success-rgb, 23 187 117 ) ;--nano-color-contrast: var(--nano-color-success-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-success-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-success-shade, #149f63) ;--nano-color-tint: var(--nano-color-success-tint, #3ac58a) ;--nano-color-tint-rgb: var( --nano-color-success-tint-rgb, 58 197 138 ) }.nano-color-warning{--nano-color-base: var(--nano-color-warning, #f57e20) ;--nano-color-base-rgb: var( --nano-color-warning-rgb, 245 126 32 ) ;--nano-color-contrast: var(--nano-color-warning-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-warning-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-warning-shade, #d06b1b) ;--nano-color-tint: var(--nano-color-warning-tint, #f79141) ;--nano-color-tint-rgb: var( --nano-color-warning-tint-rgb, 247 145 65 ) }.nano-color-danger{--nano-color-base: var(--nano-color-danger, #ef4135) ;--nano-color-base-rgb: var( --nano-color-danger-rgb, 239 65 53 ) ;--nano-color-contrast: var(--nano-color-danger-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-danger-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-danger-shade, #cb372d) ;--nano-color-tint: var(--nano-color-danger-tint, #f15e53) ;--nano-color-tint-rgb: var( --nano-color-danger-tint-rgb, 241 94 83 ) }.nano-color-light{--nano-color-base: var(--nano-color-light, #f2f7f9) ;--nano-color-base-rgb: var( --nano-color-light-rgb, 242 247 249 ) ;--nano-color-contrast: var(--nano-color-light-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-light-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-light-shade, #ced2d4) ;--nano-color-tint: var(--nano-color-light-tint, #f4f8fa) ;--nano-color-tint-rgb: var( --nano-color-light-tint-rgb, 244 248 250 ) }.nano-color-medium{--nano-color-base: var(--nano-color-medium, #005c75) ;--nano-color-base-rgb: var( --nano-color-medium-rgb, 0 92 117 ) ;--nano-color-contrast: var(--nano-color-medium-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-medium-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-medium-shade, #004e63) ;--nano-color-tint: var(--nano-color-medium-tint, #26748a) ;--nano-color-tint-rgb: var( --nano-color-medium-tint-rgb, 38 116 138 ) }.nano-color-dark{--nano-color-base: var(--nano-color-dark, #455556) ;--nano-color-base-rgb: var( --nano-color-dark-rgb, 69 85 86 ) ;--nano-color-contrast: var(--nano-color-dark-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-dark-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-dark-shade, #3b4849) ;--nano-color-tint: var(--nano-color-dark-tint, #616f6f) ;--nano-color-tint-rgb: var( --nano-color-dark-tint-rgb, 97 111 111 ) }:root{--nano-base-font-size: 16px;--nano-padding: 1rem;--nano-font-family: helvetica, arial, "Lucida Grande", sans-serif;--nano-color-white:#fff;--nano-color-white-rgb:255 255 255;--nano-color-lightblue:#90c6e7;--nano-color-lightblue-rgb:144 198 231;--nano-color-blue:#007495;--nano-color-blue-rgb:0 116 149;--nano-color-darkblue:#0c5a71;--nano-color-darkblue-rgb:12 90 113;--nano-color-darkgrey:#455556;--nano-color-darkgrey-rgb:69 85 86;--nano-color-palegrey:#b5aea7;--nano-color-palegrey-rgb:181 174 167;--nano-color-dimgrey:#918b86;--nano-color-dimgrey-rgb:145 139 134;--nano-color-lightgrey:#e4e6e8;--nano-color-lightgrey-rgb:228 230 232;--nano-color-mediumgrey:#687576;--nano-color-mediumgrey-rgb:104 117 118;--nano-color-green:#17bb75;--nano-color-green-rgb:23 187 117;--nano-color-orange:#f57e20;--nano-color-orange-rgb:245 126 32;--nano-color-paleyellow:#ede797;--nano-color-paleyellow-rgb:237 231 151;--nano-color-purple:#a53f97;--nano-color-purple-rgb:165 63 151;--nano-color-red:#ef4135;--nano-color-red-rgb:239 65 53;--nano-color-yellow:#f5cc49;--nano-color-yellow-rgb:245 204 73;--nano-color-background:#f0efed;--nano-color-background-rgb:240 239 237;--nano-color-black:#4a4a4a;--nano-color-black-rgb:74 74 74;--nano-color-celsius:#f0efed;--nano-color-celsius-rgb:240 239 237;--nano-color-offwhite:#f9f9fb;--nano-color-offwhite-rgb:249 249 251;--nano-color-darkblue--faded:#005c75;--nano-color-darkblue--faded-rgb:0 92 117;--nano-color-red--faded:#fee8de;--nano-color-red--faded-rgb:254 232 222;--nano-color-orange--faded:#feeddb;--nano-color-orange--faded-rgb:254 237 219;--nano-color-yellow--faded:#fefcf2;--nano-color-yellow--faded-rgb:254 252 242;--nano-color-green--faded:#edf5f2;--nano-color-green--faded-rgb:237 245 242;--nano-color-blue--faded:#f2f7f9;--nano-color-blue--faded-rgb:242 247 249;--nano-color-blue--darker:#245a6f;--nano-color-blue--darker-rgb:36 90 111;--nano-color-green--darker:#0b814f;--nano-color-green--darker-rgb:11 129 79;--nano-color-red--darker:#be2a20;--nano-color-red--darker-rgb:190 42 32;--nano-color-purple--darker:#772c6d;--nano-color-purple--darker-rgb:119 44 109;--nano-color-orange--darker:#b95e17;--nano-color-orange--darker-rgb:185 94 23;--nano-color-palegrey--darker:#8c8379;--nano-color-palegrey--darker-rgb:140 131 121;--nano-color-lightblue--darker:#548caf;--nano-color-lightblue--darker-rgb:84 140 175}@media(max-width: 576px){:root{--nano-base-font-size: 14px}}body{background-color:var(--nano-background-color, #f0efed)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:rgba(181,174,167,.5);margin-block:.5em;margin-inline:0;padding:0}area[href]:not([tabindex="-1"]):focus,iframe:not([tabindex="-1"]):focus,[contentEditable=true]:not([tabindex="-1"]):focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));border-radius:3px}/*# sourceMappingURL=nanopore.cn.css.map */
+html{font-family:var(--nano-font-family);font-weight:var(--nano-font-weight, 400);color:var(--nano-text-color, #4a4a4a);font-size:var(--nano-base-font-size)}a{color:var(--nano-color-primary, #007495);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-block:16px 10px;font-weight:600;line-height:1.2}h1{margin-block-start:10px;font-size:28px}h2{margin-block-start:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{inset-block-start:-0.5em}sub{inset-block-end:-0.25em}p{font-size:1.125rem;line-height:1.4;margin-block:0 1rem}p.supporting{font-size:.875rem}.heading{font-weight:500;line-height:1.3;margin-block:0 1.5rem;margin-inline:0}.heading__highlight{color:#007495}@media print{.heading{color:#4a4a4a}}.heading--one{font-size:2.5rem}@media(min-width: 768px){.heading--one{font-size:3.25rem}}.heading--two{font-size:1.5rem}@media(min-width: 768px){.heading--two{font-size:2rem}}.heading--three{font-size:1.125rem}@media(min-width: 768px){.heading--three{font-size:1.375rem}}.heading--four{font-size:1.125rem}.heading--five{font-size:1rem}.heading--light{font-weight:200}.heading--upper{text-transform:uppercase}.heading--meta{font-size:.875rem;text-transform:uppercase;letter-spacing:1.3px;font-weight:bold;margin-block-end:1rem}.button{padding:0;border:none;background-color:rgba(0,0,0,0);font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out,box-shadow 100ms ease-in-out,border-color 100ms ease-in-out,color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0,0,0,.02)}.button::-moz-focus-inner{border:0;padding:0}.button:hover,.button:focus{text-decoration:none;color:inherit}@media print{.button{display:none}}.button:focus,.button.button--focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.button nano-icon,.button nano-spinner{--base-color-rgb: 255 255 255;margin-inline-start:.5em;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.button.button--icon-start nano-icon,.button.button--icon-start nano-spinner{margin-inline-start:0;margin-inline-end:.5em}.button:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.button:active:not(.button--disabled):not(:disabled){box-shadow:none}.button--disabled,.button:disabled{opacity:.6}.button--disabled:hover,.button:disabled:hover{cursor:default}.button--primary{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled),.button--primary.button--active{background-color:var(--nano-color-primary-shade, #00637f);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--primary.button--active.button--keyline{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:focus{color:var(--nano-color-primary-contrast, #fff)}.button--primary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--nano-color-primary, #007495);border-color:var(--nano-color-primary, #007495)}.button--primary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--primary.button--keyline:not(:focus):not(.button--focus),.button--primary.button--keyline.button--active{box-shadow:none}.button--secondary{background-color:#17bb75;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled),.button--secondary.button--active{background-color:#0b814f;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--secondary.button--active.button--keyline{background-color:#17bb75;color:#fff}.button--secondary:focus{color:#fff}.button--secondary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#17bb75;border-color:#17bb75}.button--secondary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--secondary.button--keyline:not(:focus):not(.button--focus),.button--secondary.button--keyline.button--active{box-shadow:none}.button--light{background-color:#fff;color:#007495}.button--light:hover:not(.button--disabled):not(:disabled),.button--light.button--active{background-color:#fff;color:#0c5a71}.button--light:hover:not(.button--disabled):not(:disabled).button--keyline,.button--light.button--active.button--keyline{background-color:#fff;color:#007495}.button--light:focus{color:#007495}.button--light.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#fff;border-color:#fff}.button--light.button--keyline:hover:not(.button--disabled):not(:disabled),.button--light.button--keyline:not(:focus):not(.button--focus),.button--light.button--keyline.button--active{box-shadow:none}.button--danger{background-color:#ef4135;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled),.button--danger.button--active{background-color:#be2a20;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled).button--keyline,.button--danger.button--active.button--keyline{background-color:#ef4135;color:#fff}.button--danger:focus{color:#fff}.button--danger.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#ef4135;border-color:#ef4135}.button--danger.button--keyline:hover:not(.button--disabled):not(:disabled),.button--danger.button--keyline:not(:focus):not(.button--focus),.button--danger.button--keyline.button--active{box-shadow:none}.button--warning{background-color:#f57e20;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled),.button--warning.button--active{background-color:#b95e17;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled).button--keyline,.button--warning.button--active.button--keyline{background-color:#f57e20;color:#fff}.button--warning:focus{color:#fff}.button--warning.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#f57e20;border-color:#f57e20}.button--warning.button--keyline:hover:not(.button--disabled):not(:disabled),.button--warning.button--keyline:not(:focus):not(.button--focus),.button--warning.button--keyline.button--active{box-shadow:none}.button--tertiary{background:rgba(0,0,0,0);box-shadow:none;text-decoration:underline;font-weight:400}.button--tertiary:hover:not(.button--disabled):not(:disabled),.button--tertiary:hover.button--active,.button--tertiary:focus:not(.button--disabled):not(:disabled),.button--tertiary:focus.button--active{color:#b5aea7;box-shadow:none;text-decoration:underline}.nano-color-primary{--nano-color-base: var(--nano-color-primary, #007495) ;--nano-color-base-rgb: var( --nano-color-primary-rgb, 0 116 149 ) ;--nano-color-contrast: var(--nano-color-primary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-primary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-primary-shade, #00637f) ;--nano-color-tint: var(--nano-color-primary-tint, #2689a5) ;--nano-color-tint-rgb: var( --nano-color-primary-tint-rgb, 38 137 165 ) }.nano-color-secondary{--nano-color-base: var(--nano-color-secondary, #548caf) ;--nano-color-base-rgb: var( --nano-color-secondary-rgb, 84 140 175 ) ;--nano-color-contrast: var(--nano-color-secondary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-secondary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-secondary-shade, #477795) ;--nano-color-tint: var(--nano-color-secondary-tint, #6e9dbb) ;--nano-color-tint-rgb: var( --nano-color-secondary-tint-rgb, 110 157 187 ) }.nano-color-tertiary{--nano-color-base: var(--nano-color-tertiary, #b5aea7) ;--nano-color-base-rgb: var( --nano-color-tertiary-rgb, 181 174 167 ) ;--nano-color-contrast: var(--nano-color-tertiary-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-tertiary-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-tertiary-shade, #9a948e) ;--nano-color-tint: var(--nano-color-tertiary-tint, #c0bab4) ;--nano-color-tint-rgb: var( --nano-color-tertiary-tint-rgb, 192 186 180 ) }.nano-color-success{--nano-color-base: var(--nano-color-success, #17bb75) ;--nano-color-base-rgb: var( --nano-color-success-rgb, 23 187 117 ) ;--nano-color-contrast: var(--nano-color-success-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-success-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-success-shade, #149f63) ;--nano-color-tint: var(--nano-color-success-tint, #3ac58a) ;--nano-color-tint-rgb: var( --nano-color-success-tint-rgb, 58 197 138 ) }.nano-color-warning{--nano-color-base: var(--nano-color-warning, #f57e20) ;--nano-color-base-rgb: var( --nano-color-warning-rgb, 245 126 32 ) ;--nano-color-contrast: var(--nano-color-warning-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-warning-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-warning-shade, #d06b1b) ;--nano-color-tint: var(--nano-color-warning-tint, #f79141) ;--nano-color-tint-rgb: var( --nano-color-warning-tint-rgb, 247 145 65 ) }.nano-color-danger{--nano-color-base: var(--nano-color-danger, #ef4135) ;--nano-color-base-rgb: var( --nano-color-danger-rgb, 239 65 53 ) ;--nano-color-contrast: var(--nano-color-danger-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-danger-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-danger-shade, #cb372d) ;--nano-color-tint: var(--nano-color-danger-tint, #f15e53) ;--nano-color-tint-rgb: var( --nano-color-danger-tint-rgb, 241 94 83 ) }.nano-color-light{--nano-color-base: var(--nano-color-light, #f2f7f9) ;--nano-color-base-rgb: var( --nano-color-light-rgb, 242 247 249 ) ;--nano-color-contrast: var(--nano-color-light-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-light-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-light-shade, #ced2d4) ;--nano-color-tint: var(--nano-color-light-tint, #f4f8fa) ;--nano-color-tint-rgb: var( --nano-color-light-tint-rgb, 244 248 250 ) }.nano-color-medium{--nano-color-base: var(--nano-color-medium, #005c75) ;--nano-color-base-rgb: var( --nano-color-medium-rgb, 0 92 117 ) ;--nano-color-contrast: var(--nano-color-medium-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-medium-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-medium-shade, #004e63) ;--nano-color-tint: var(--nano-color-medium-tint, #26748a) ;--nano-color-tint-rgb: var( --nano-color-medium-tint-rgb, 38 116 138 ) }.nano-color-dark{--nano-color-base: var(--nano-color-dark, #455556) ;--nano-color-base-rgb: var( --nano-color-dark-rgb, 69 85 86 ) ;--nano-color-contrast: var(--nano-color-dark-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-dark-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-dark-shade, #3b4849) ;--nano-color-tint: var(--nano-color-dark-tint, #616f6f) ;--nano-color-tint-rgb: var( --nano-color-dark-tint-rgb, 97 111 111 ) }:root{--nano-base-font-size: 16px;--nano-padding: 1rem;--nano-font-family: helvetica, arial, "Lucida Grande", sans-serif;--nano-color-white:#fff;--nano-color-white-rgb:255 255 255;--nano-color-lightblue:#90c6e7;--nano-color-lightblue-rgb:144 198 231;--nano-color-blue:#007495;--nano-color-blue-rgb:0 116 149;--nano-color-darkblue:#0c5a71;--nano-color-darkblue-rgb:12 90 113;--nano-color-darkgrey:#455556;--nano-color-darkgrey-rgb:69 85 86;--nano-color-palegrey:#b5aea7;--nano-color-palegrey-rgb:181 174 167;--nano-color-dimgrey:#918b86;--nano-color-dimgrey-rgb:145 139 134;--nano-color-lightgrey:#e4e6e8;--nano-color-lightgrey-rgb:228 230 232;--nano-color-mediumgrey:#687576;--nano-color-mediumgrey-rgb:104 117 118;--nano-color-green:#17bb75;--nano-color-green-rgb:23 187 117;--nano-color-orange:#f57e20;--nano-color-orange-rgb:245 126 32;--nano-color-paleyellow:#ede797;--nano-color-paleyellow-rgb:237 231 151;--nano-color-purple:#a53f97;--nano-color-purple-rgb:165 63 151;--nano-color-red:#ef4135;--nano-color-red-rgb:239 65 53;--nano-color-yellow:#f5cc49;--nano-color-yellow-rgb:245 204 73;--nano-color-background:#f0efed;--nano-color-background-rgb:240 239 237;--nano-color-black:#4a4a4a;--nano-color-black-rgb:74 74 74;--nano-color-celsius:#f0efed;--nano-color-celsius-rgb:240 239 237;--nano-color-offwhite:#f9f9fb;--nano-color-offwhite-rgb:249 249 251;--nano-color-darkblue--faded:#005c75;--nano-color-darkblue--faded-rgb:0 92 117;--nano-color-red--faded:#fee8de;--nano-color-red--faded-rgb:254 232 222;--nano-color-orange--faded:#feeddb;--nano-color-orange--faded-rgb:254 237 219;--nano-color-yellow--faded:#fefcf2;--nano-color-yellow--faded-rgb:254 252 242;--nano-color-green--faded:#edf5f2;--nano-color-green--faded-rgb:237 245 242;--nano-color-blue--faded:#f2f7f9;--nano-color-blue--faded-rgb:242 247 249;--nano-color-blue--darker:#245a6f;--nano-color-blue--darker-rgb:36 90 111;--nano-color-green--darker:#0b814f;--nano-color-green--darker-rgb:11 129 79;--nano-color-red--darker:#be2a20;--nano-color-red--darker-rgb:190 42 32;--nano-color-purple--darker:#772c6d;--nano-color-purple--darker-rgb:119 44 109;--nano-color-orange--darker:#b95e17;--nano-color-orange--darker-rgb:185 94 23;--nano-color-palegrey--darker:#8c8379;--nano-color-palegrey--darker-rgb:140 131 121;--nano-color-lightblue--darker:#548caf;--nano-color-lightblue--darker-rgb:84 140 175}@media(max-width: 576px){:root{--nano-base-font-size: 14px}}body{background-color:var(--nano-background-color, #f0efed)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:rgba(181,174,167,.5);margin-block:.5em;margin-inline:0;padding:0}area[href]:not([tabindex="-1"]):focus,iframe:not([tabindex="-1"]):focus,[contentEditable=true]:not([tabindex="-1"]):focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));border-radius:3px}/*# sourceMappingURL=nanopore.cn.css.map */