@nanoporetech-digital/components 5.8.3 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/nano-details.cjs.entry.js +5 -1
  3. package/dist/cjs/nano-details.cjs.entry.js.map +1 -1
  4. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +1 -1
  5. package/dist/cjs/nano-global-nav.cjs.entry.js +1 -1
  6. package/dist/cjs/nano-grid_2.cjs.entry.js +2 -2
  7. package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -1
  8. package/dist/cjs/nano-tab-group.cjs.entry.js +1 -1
  9. package/dist/cjs/{nano-table-9bd1168f.js → nano-table-92aa0af6.js} +2 -2
  10. package/dist/cjs/{nano-table-9bd1168f.js.map → nano-table-92aa0af6.js.map} +1 -1
  11. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  12. package/dist/cjs/{table.worker-894a0418.js → table.worker-a1e24a67.js} +2 -2
  13. package/dist/cjs/table.worker-a1e24a67.js.map +1 -0
  14. package/dist/cjs/{transitions-6ca20f9b.js → transitions-e410ef6a.js} +5 -3
  15. package/dist/cjs/transitions-e410ef6a.js.map +1 -0
  16. package/dist/collection/components/details/details.js +32 -0
  17. package/dist/collection/components/details/details.js.map +1 -1
  18. package/dist/collection/components/grid/grid.js +2 -2
  19. package/dist/collection/components/grid/grid.js.map +1 -1
  20. package/dist/collection/utils/transitions.js +4 -2
  21. package/dist/collection/utils/transitions.js.map +1 -1
  22. package/dist/components/grid.js +2 -2
  23. package/dist/components/grid.js.map +1 -1
  24. package/dist/components/nano-details.js +4 -0
  25. package/dist/components/nano-details.js.map +1 -1
  26. package/dist/components/transitions.js +4 -2
  27. package/dist/components/transitions.js.map +1 -1
  28. package/dist/esm/nano-details.entry.js +5 -1
  29. package/dist/esm/nano-details.entry.js.map +1 -1
  30. package/dist/esm/nano-global-nav-user-profile_3.entry.js +1 -1
  31. package/dist/esm/nano-global-nav.entry.js +1 -1
  32. package/dist/esm/nano-grid_2.entry.js +2 -2
  33. package/dist/esm/nano-grid_2.entry.js.map +1 -1
  34. package/dist/esm/nano-tab-group.entry.js +1 -1
  35. package/dist/esm/{nano-table-baba1696.js → nano-table-27a6222d.js} +2 -2
  36. package/dist/esm/{nano-table-baba1696.js.map → nano-table-27a6222d.js.map} +1 -1
  37. package/dist/esm/nano-table.entry.js +1 -1
  38. package/dist/esm/{table.worker-ae46bca0.js → table.worker-d6be4e98.js} +2 -2
  39. package/dist/esm/table.worker-d6be4e98.js.map +1 -0
  40. package/dist/esm/{transitions-989cae97.js → transitions-d4403d6f.js} +5 -3
  41. package/dist/esm/transitions-d4403d6f.js.map +1 -0
  42. package/dist/nano-components/nano-components.esm.js +1 -1
  43. package/dist/nano-components/p-059301fa.js +5 -0
  44. package/dist/nano-components/p-059301fa.js.map +1 -0
  45. package/dist/nano-components/{p-e2cc4045.entry.js → p-2588c39f.entry.js} +2 -2
  46. package/dist/nano-components/{p-587d3e3d.js → p-7867967f.js} +2 -2
  47. package/dist/nano-components/p-7c82af28.entry.js +5 -0
  48. package/dist/nano-components/{p-84ba4c38.entry.js.map → p-7c82af28.entry.js.map} +1 -1
  49. package/dist/nano-components/p-80d4a23d.entry.js +5 -0
  50. package/dist/nano-components/p-80d4a23d.entry.js.map +1 -0
  51. package/dist/nano-components/{p-a1ead0a7.entry.js → p-91b44f7a.entry.js} +2 -2
  52. package/dist/nano-components/{p-ecf6276f.entry.js → p-a6d90d7b.entry.js} +2 -2
  53. package/dist/nano-components/{p-358b2ffd.entry.js → p-d017a01c.entry.js} +2 -2
  54. package/dist/nano-components/{p-f0226ce2.js → p-f453329d.js} +2 -2
  55. package/dist/types/components/details/details.d.ts +4 -0
  56. package/dist/types/components.d.ts +8 -0
  57. package/docs-json.json +19 -1
  58. package/hydrate/index.js +10 -4
  59. package/package.json +2 -2
  60. package/dist/cjs/table.worker-894a0418.js.map +0 -1
  61. package/dist/cjs/transitions-6ca20f9b.js.map +0 -1
  62. package/dist/esm/table.worker-ae46bca0.js.map +0 -1
  63. package/dist/esm/transitions-989cae97.js.map +0 -1
  64. package/dist/nano-components/p-0ec40950.js +0 -5
  65. package/dist/nano-components/p-0ec40950.js.map +0 -1
  66. package/dist/nano-components/p-84ba4c38.entry.js +0 -5
  67. package/dist/nano-components/p-ae85ca01.entry.js +0 -5
  68. package/dist/nano-components/p-ae85ca01.entry.js.map +0 -1
  69. /package/dist/nano-components/{p-e2cc4045.entry.js.map → p-2588c39f.entry.js.map} +0 -0
  70. /package/dist/nano-components/{p-587d3e3d.js.map → p-7867967f.js.map} +0 -0
  71. /package/dist/nano-components/{p-a1ead0a7.entry.js.map → p-91b44f7a.entry.js.map} +0 -0
  72. /package/dist/nano-components/{p-ecf6276f.entry.js.map → p-a6d90d7b.entry.js.map} +0 -0
  73. /package/dist/nano-components/{p-358b2ffd.entry.js.map → p-d017a01c.entry.js.map} +0 -0
  74. /package/dist/nano-components/{p-f0226ce2.js.map → p-f453329d.js.map} +0 -0
package/dist/nano-components/{p-358b2ffd.entry.js → p-d017a01c.entry.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{r as n,h as t,i as e,c as i,a as s,g as a}from"./p-d6a04b3a.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-0ec40950.js";import{g as h}from"./p-f88fa15c.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-7bff5224.js";import{F as f,a as v}from"./p-dc805ecc.js";const m=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var n;return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:(n=this.myAccountUser)===null||n===void 0?void 0:n.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,{className:"open",show:false});this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,{className:"open",show:true});this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(o(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=r(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(s,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:this.el.closest('[role="menu"]')?"menuitem":undefined},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n display: flex;\n gap: 1rem;\n container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, "currentcolor");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n \n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: var(--nano-font-family, inherit);\n display: block;\n}\n\n.nano-color.sc-nano-select-h {\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n display: none;\n}\n\n.select__native-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n \n \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n -webkit-padding-before: 1.8em;\n padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n -webkit-padding-before: 1em;\n padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n flex: 1;\n}\n.select__multi-value.sc-nano-select {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgb(var(--multi-input-value-bg)/80%);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n background-position: center;\n -webkit-padding-start: 0.5em;\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n -webkit-appearance: none;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(21%);\n inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n pointer-events: auto;\n}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const i=this.value.indexOf(e);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(n){if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},n),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(n){const t=this.options.find((t=>{var e;return!t.disabled&&((e=t.value)===null||e===void 0?void 0:e.length)&&t.value===n}));return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(l(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:n,moreId:e,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask})},t(f,Object.assign({},o),t(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,i)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,i){const s=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+i});if(!this.value.length)return s;return this.value.map(((n,e)=>{let i=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value"},t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})));if(e===0&&this.currInsertIndex<0)i=[s,i];else if(e===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
5
- //# sourceMappingURL=p-358b2ffd.entry.js.map
4
+ import{r as n,h as t,i as e,c as i,a as s,g as a}from"./p-d6a04b3a.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-059301fa.js";import{g as h}from"./p-f88fa15c.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-7bff5224.js";import{F as f,a as v}from"./p-dc805ecc.js";const m=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var n;return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:(n=this.myAccountUser)===null||n===void 0?void 0:n.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,{className:"open",show:false});this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,{className:"open",show:true});this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(o(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=r(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(s,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:this.el.closest('[role="menu"]')?"menuitem":undefined},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n display: flex;\n gap: 1rem;\n container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, "currentcolor");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n \n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: var(--nano-font-family, inherit);\n display: block;\n}\n\n.nano-color.sc-nano-select-h {\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n display: none;\n}\n\n.select__native-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n \n \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n -webkit-padding-before: 1.8em;\n padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n -webkit-padding-before: 1em;\n padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n flex: 1;\n}\n.select__multi-value.sc-nano-select {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgb(var(--multi-input-value-bg)/80%);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n background-position: center;\n -webkit-padding-start: 0.5em;\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n -webkit-appearance: none;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(21%);\n inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n pointer-events: auto;\n}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const i=this.value.indexOf(e);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(n){if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},n),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(n){const t=this.options.find((t=>{var e;return!t.disabled&&((e=t.value)===null||e===void 0?void 0:e.length)&&t.value===n}));return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(l(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:n,moreId:e,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask})},t(f,Object.assign({},o),t(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,i)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,i){const s=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+i});if(!this.value.length)return s;return this.value.map(((n,e)=>{let i=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value"},t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})));if(e===0&&this.currInsertIndex<0)i=[s,i];else if(e===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
5
+ //# sourceMappingURL=p-d017a01c.entry.js.map
package/dist/nano-components/{p-f0226ce2.js → p-f453329d.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{j as t,h as n,F as e,g as i,e as o,w as s,d as r,r as a,c as l,a as d}from"./p-d6a04b3a.js";import{a as c}from"./p-ee045579.js";import{d as h}from"./p-7bff5224.js";import{c as b}from"./p-70747f20.js";const p="nano-tbl";const f=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const u=t=>{if(t!=null){if(f(t,"ArrayBuffer")||f(t,"MessagePort")||f(t,"ImageBitmap")||f(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(u)}return u(t.buffer)}}return[]};let _=0;let m=0;const g=new Map;const w=new Map;const v=(n,e,i)=>{const o=new Worker(n,{name:e});o.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const o=n[1];const s=n[2];if(e===i){const e=n[3];const[i,r,a]=g.get(o);g.delete(o);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>w.delete(t)))}i(s)}}else if(e===i+".cb"){try{w.get(o)(...s)}catch(n){t(n)}}}}));return o};const y=(t,n,e)=>(...i)=>new Promise(((o,s)=>{let r=_++;let a=0;let l=i.length;let d=[o,s];g.set(r,d);for(;a<l;a++){if(typeof i[a]==="function"){const t=m++;w.set(t,i[a]);i[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,r,e,i],u(i));if(t.then){t.then(c)}else{c(t)}}));const k=import("./p-587d3e3d.js").then((t=>t.worker));const x=y(k,"stencil.table.worker","createWorkerStore");const $=y(k,"stencil.table.worker","syncConfigToWorker");const j=y(k,"stencil.table.worker","syncDataToWorker");const z=y(k,"stencil.table.worker","workerFilter");const O=y(k,"stencil.table.worker","workerSearch");const C=y(k,"stencil.table.worker","workerSort");function S(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!(t===null||t===void 0?void 0:t.sortCompareFn)){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const I=new WeakMap;async function R(t,n,e,i){const o={data:b({rows:[]}),config:b({columns:n}),general:b({workerId:null,scrollParent:e,host:t,isReady:i})};const s=await x(o.data.state.rows,S(o.config.state.columns));o.general.state.workerId=s;I.set(t,o);o.data.use({reset:()=>{if(o.general.state.workerId)j(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)j(o.general.state.workerId,null)}});o.config.use({reset:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)}});return o}function P(t){return I.get(t)}function T(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function A(t,n){const e=I.get(t);if(!e)return;const i=e.config.state.columns;const o=i.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=i.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=i.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=T(t[n.prop]);if(n.type==="date")o.push(n.prop)}return n}))}o.forEach((n=>{var e;const i=(e=new Date(t[n]))!==null&&e!==void 0?e:null;if(!!i&&Number(i))t[n]=Number(i)}));t["__index"]=n;t["__uuid"]=c(i.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return j(e.general.state.workerId,n)}function M(t,n){const e=I.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return $(e.general.state.workerId,S(n))}async function B(t,n){const e=I.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 F(t,n){const e=I.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await z(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function N(t,n,e){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await C(i.general.state.workerId,n,e)}catch(t){console.warn(t)}}function D(t,n){const e=H();const i=e.config.state.columns;const o=e.data.state.rows;const s=i[n];const r=s===null||s===void 0?void 0:s.prop;const a=o[t];const l=a?a[i[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function E(t){const n=H();const e=n.data.state.rows;const i=e[t];return{rowModel:i,rowIndex:t}}function W(t,n){if(!n)return t;const e=Object.assign(Object.assign({},n),t);if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class=Object.assign(Object.assign({},n.class),e.class)}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"){e.class+=" "+n.class}}if(n.style){e.style=Object.assign(Object.assign({},n.style),e.style)}return e}function H(){return P(i(o()))}function L(t,n,e){var i;const o=Object.assign({},e);const s=(i=H().config.state.columns[n])===null||i===void 0?void 0:i.cellProperties;if(!s)return o;const r=D(t,n);const a=s(r);if(!a)return o;return W(o,a)}function J(t){const i=t===null||t===void 0?void 0:t.columnTemplate;return i?i(n,t):n(e,null,t.title)}function Y(t,n,e=false){const i={[`${p}__${t}`]:true,[`${p}__pin`]:!!n,[`${p}__pin--top`]:n==="top",[`${p}__pin--bottom`]:n==="bottom"};if(e)return q(i);return i}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function K(t){let n=getComputedStyle(t);const e=n.position==="absolute";const i=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let o=t;o=o.parentElement;){n=getComputedStyle(o);if(e&&n.position==="static"){continue}if(i.test(n.overflow+n.overflowY+n.overflowX))return o}return document.documentElement}function X(t,n=100){const e=t.getBoundingClientRect();const i=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-i)/e.height*100)<n)}const U=({column:t,onColumnSortClick:i,defaults:o})=>{function s(n){let e;switch(t.order){case"asc":e="desc";break;case"desc":e=null;break;default:e="asc"}i(e,t.prop,n.target.closest("th"))}function r(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let a={};if(t.columnProperties){a=t.columnProperties(t)||a}const l={class:Object.assign(Object.assign({},Y("th",t.pinned)),{[`${p}__pin--start`]:t.pinned==="start",[`${p}__pin--end`]:t.pinned==="end",[`${p}__ordered`]:!!t.order,[`${p}__filtered`]:t.filter!==undefined&&t.filter!==null})};let d=a?W(l,a):l;const c=J(t);if(!c)return n(e,null);d=Number(d.colSpan)>1?Object.assign(Object.assign({},d),{scope:"colgroup"}):Object.assign(Object.assign({},d),{scope:"col"});if(r()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";d=Object.assign(Object.assign({},d),{"aria-sort":n})}return n("th",Object.assign({},d,{key:t.prop}),r()?n("button",{class:{[`${p}__order-btn`]:true,[`${p}__cell-content`]:true},onClick:s},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?n("nano-icon",{name:"solid/long-arrow-down"}):n("nano-icon",{name:"solid/long-arrow-up"})),n("div",{class:`${p}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))):n("div",{class:`${p}__cell-content`},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/bars-filter"})))};function G(t,i){var s,r;const a=H();const l=a.config.state.columns;const d=(s=l[i])===null||s===void 0?void 0:s.cellTemplate;const c=D(t,i);const h=o();if(!!c.cellModel&&l[i].type==="date"){const t=new Date(c.cellModel);if(t instanceof Date&&!isNaN(t)){c.cellModel=!d?`${new Date(c.cellModel).toLocaleDateString()} ${new Date(c.cellModel).toLocaleTimeString()}`:t}}let b=false;const p=(...t)=>{b=true;return n(...t)};let f=d?d(p,c):undefined;if(f&&h.customRenderer&&f["t"]===undefined&&!(f instanceof Element)&&typeof f!=="string"&&!b){const t=document.createElement("template");const n=h.customRenderer(f,t.content);f=n&&n["then"]?n:t}return f?f:c.cellModel!==undefined&&c.cellModel!==null?n(e,null,(r=c.cellModel)===null||r===void 0?void 0:r.toString()):""}const Q=(t,n=false)=>{const e=H();const i=e.config.state.columns[t];const o={[`${p}__td`]:true,[`${p}__ordered`]:!!i.order,[`${p}__pin`]:!!i.pinned,[`${p}__pin--start`]:i.pinned==="start",[`${p}__pin--end`]:i.pinned==="end"};if(n)return q(o);return o};const V=({rowIndex:t,colIndex:e,nestedContent:i})=>{const s=()=>i?i():G(t,e)||n("span",{class:"placeholder"}," ");let r="td";const a=o();const l=H();const d=l.config.state.columns[e];let c=L(t,e,{class:Q(e)});if(d.rowHeader){c=Number(c.rowSpan)>1?Object.assign(Object.assign({},c),{scope:"rowgroup"}):Object.assign(Object.assign({},c),{scope:"row"});r="th"}const h=t=>{const e=s();return n("div",Object.assign({ref:t=>{if(!t)return;if(e instanceof Element){t.replaceChildren();t.append(e["content"]||e)}else if(e["then"]){e.then((n=>t.innerHTML=n))}}},t,{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:!!d.wrap},innerHTML:typeof e==="string"&&e.includes("<")?e:undefined}),(typeof e!=="string"||!e.includes("<"))&&!e["then"]&&!(e instanceof Element)&&e)};return n(r,Object.assign({role:a.type==="grid"?"gridcell":undefined},c),d.autoTooltip&&!d.wrap?n("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},n("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(r).style.zIndex="100",onNanoHide:t=>t.target.closest(r).style.zIndex=""},n(h,null),n("span",{slot:"content"},n(s,null)))):n(h,null))};const Z=(t,e,i)=>{const o=n("div",Object.assign({},t.wrapperProps,{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:t.wrap}}),e);return t.header?n("th",Object.assign({scope:i},t.cellProps),o):n("td",Object.assign({},t.cellProps),o)};const tt=({rowRenderer:t,rowIndex:e,rowModel:i},o,s)=>{const r=({header:t,wrap:n,cellProps:e,wrapperProps:i},o)=>Z({header:t,wrap:n,cellProps:e,wrapperProps:i},o,"row");let a={};if(!i){const t=E(e);i=t.rowModel}if(t===null||t===void 0?void 0:t.rowProperties){a=t.rowProperties({rowModel:i,rowIndex:e})||a}let l;if((t===null||t===void 0?void 0:t.pinned)&&typeof t.pinned==="function"){l=t.pinned({rowModel:i,rowIndex:e})}const d=W({class:Y("tr",l,true)},a);const c=t===null||t===void 0?void 0:t.template;const h=t=>s.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Q(n,true)},t.vattrs)}return t}));if(c){let t=c(n,{renderedRow:n("tr",Object.assign({},d,{key:i.__uuid}),o),rowModel:i,rowIndex:e},r);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${i.__uuid}_${n}`;t.vattrs=W({class:Y("tr",l,true)},t.vattrs);if(!!t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return n("tr",Object.assign({},d,{key:i.__uuid}),h(o))};const nt=({rowRenderer:t},e,i)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const s=({header:t,wrap:n,cellProps:e,wrapperProps:i},o)=>Z({header:t,wrap:n,cellProps:e,wrapperProps:i},o,"col");const r=t.pinned||null;const a={class:Y("tr",r)};const l=o?W(a,o):a;const d=t===null||t===void 0?void 0:t.template;if(d){let t=d(n,{renderedRow:n("tr",Object.assign({},l),e)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:Y("tr",r,true)},t.vattrs);if(!!t.vchildren){t.vchildren=i.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Y(t.vtag.toString(),r,true)},t.vattrs)}return t}))}}return t}))}return t}return n("tr",Object.assign({},l),e)};function et(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{constructor(t,n){this.cachedColMeta=new WeakMap;this._pinnedStart=[];this._pinnedEnd=[];this._cssColDimensionCacheKey="";this.cacheX=0;this.cacheY=0;this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${p}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${p}__pin--end`);this.topRows=t.getElementsByClassName(`${p}__pin--top`);this.bottomRows=t.getElementsByClassName(`${p}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${p}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);et(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${p}__pinned--start`);et(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${p}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);et(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${p}__pinned--end`);et(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const i=Array.from(this.endColumns).reverse();const o=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${i.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;et(`${this.tableId}-dimension-style`,o)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let i=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;i=this.scrollElement.offsetTop}return{offsetX:e,offsetY:i}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const i of this.topRows){const{y:o,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-top");const d=l!==""?parseFloat(l):t;await new Promise((l=>s((()=>{if(o-e<=d){i.classList.add(`${p}__pinned`,`${p}__pinned--top`)}else{i.classList.remove(`${p}__pinned`,`${p}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}l()}))))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:i}=this.getParentOffsets();for(const o of t){if(!o.isConnected)continue;const{y:t,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-bottom");const d=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+i-(t+r)<=d){o.classList.add(`${p}__pinned`,`${p}__pinned--bottom`)}else{o.classList.remove(`${p}__pinned`,`${p}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const i=new Promise((i=>{if(this.startColumns.length){r((()=>{const{offsetX:o}=this.getParentOffsets();let s=o;e=Array.from(this.startColumns[0].parentElement.children);for(const i of this.startColumns){t=i.getBoundingClientRect();this.cachedColMeta.set(i,{width:t.width,idx:e.indexOf(i)});n=this.pinnedStart.find((t=>t===i));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,i]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==i))}s+=t.width}if(!this.endColumns.length)i()}))}if(this.endColumns.length){r((()=>{const o=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const i of o){t=i.getBoundingClientRect();this.cachedColMeta.set(i,{width:t.width,idx:e.indexOf(i)});n=this.pinnedEnd.find((t=>t===i));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[i,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==i))}r+=t.width}i()}))}}));await i;this.generateCssCacheKey()}onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const ot=':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.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform:scale(1);height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-before:var(--border-style);border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding);padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding);padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--td-padding-start) !important;padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;-webkit-border-before:none;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);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}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.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-before:var(--border-style);border-block-start:var(--border-style);-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)}';const st=false;function rt(t,n=false){if(!performance||!st)return;if(n){performance===null||performance===void 0?void 0:performance.mark("end"+t);performance===null||performance===void 0?void 0:performance.measure(t,"start"+t,"end"+t);const n=performance===null||performance===void 0?void 0:performance.getEntriesByName(t);console.log(n[n.length?n.length-1:0])}else{performance===null||performance===void 0?void 0:performance.mark("start"+t)}}let at=0;const lt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.renderId="tbl-"+at++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.measureHeight=0;this.blockHeights=[];this.unitHeight=0;this._isReady=false;this.sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const i=this.nanoTblBeforeSort.emit({column:n,order:t});if(i.defaultPrevented)return;rt("sort");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 N(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=()=>{var t;let n=0;rt("scrollHandler");if(!((t=this.store)===null||t===void 0?void 0:t.general.state.isActive)||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{n=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;n+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:n})}let t=this.host.offsetTop;let e=0;const i=this.blocks.length;while(e<i&&n>=t){t+=this.getBlockHeight(e);if(n<t){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}rt("scrollHandler",true)}))};this.handleResizeChange=t=>{var n;this.tableWrapperEle.className="";let e=[`${p}__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.customRenderer=undefined;this.type="table";this.caption=undefined;this.showCaption=false;this.loading=undefined;this.internalLoading=true;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=50;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.defaultSort=true;this.virtualTotalItems=0;this.blocks=[];this.activeBlocks=[0,1];this.debounceSetLoading=h(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 A(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}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()}get appliedFilters(){return this.filters}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});rt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;rt("search");this.scrollToTop();try{await B(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});rt("search",true)}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;rt("filter");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;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await F(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&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));this.nanoTblAfterFilter.emit({filters:this.filters});rt("filter",true)}scrollToTop(t){var n;const e=(n=this.scrollParent.style)===null||n===void 0?void 0:n.scrollBehavior;const i=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!X(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!X(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(i)this.scrollParent.scrollLeft=i;if(e)this.scrollParent.style.scrollBehavior=e;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{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(`${p}__inactive`))}));t()}))}))}setInitialBlockDimension(){var t;if(!((t=this.blockElements)===null||t===void 0?void 0:t.length))return;rt("blockDims");const n=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const e=new Promise((async t=>{if(await n())t();else{const e=new IntersectionObserver((async()=>{if(await n()){t();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}));e.then((()=>{rt("blockDims",true);rt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{filter:n,prop:e}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}rt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let i=[];const o=[];for(n;n<=e;n++){i.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){o.push({rows:i,__uuid:c(i.map((t=>t.__uuid)).join())});i=[]}}if(i.length){o.push({rows:i,__uuid:c(i.map((t=>t.__uuid)).join())})}this.blocks=o;rt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)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:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${p}__inactive`))return;const e=n.getBoundingClientRect().height;const i=this.blockHeights.findIndex((n=>n.blockIndex===t));if(i>-1){this.blockHeights[i]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((async([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){rt("init");this.store=await R(this.host,this.columns,this.scrollParent,this.isReady);await this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=K(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=K(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){rt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));rt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return n(d,null,n("div",{class:`${p}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("nano-resize-observe",{states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),n("div",{class:`${p}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},n("nano-progress-bar",{indeterminate:true,class:{[`${p}__progress-bar`]:true,[`${p}__progress-bar--show`]:this._loading}}),n("table",{role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${p}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},n("caption",{class:{[`${p}__caption`]:true,[`${p}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},n("slot",{name:"caption"},this.caption)),n("thead",null,n(nt,{rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[n(U,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&n("tbody",{class:`${p}__active ${p}__loading`},[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((e,i)=>n(V,{rowIndex:t,colIndex:i,nestedContent:()=>n("nano-skeleton",null)}))))))),n("tr",{hidden:!!this._loading||!!this.blocks.length},n("th",{class:`${p}__th`,colSpan:this.store.config.state.columns.length},n("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},n("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,e)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${e}`,ref:t=>{this.blockElements.push(t)},class:{[`${p}__inactive`]:!this.activeBlocks.includes(e),[`${p}__active`]:this.activeBlocks.includes(e)}},this.activeBlocks.includes(e)?t.rows.map(((t,i)=>{const o=e>0?e*this.perBlock+i:i;return n(tt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,e)=>n(V,{rowIndex:o,colIndex:e}))))})):n("tr",{class:`${p}__tr--placeholder`},n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(e)+"px"}}))))),this.showFooter&&n("tfoot",null,n(nt,{rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[n(U,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${p}__spinner`]:true,[`${p}__spinner--show`]:this._loading}})))}get host(){return i(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};lt.style=ot;export{lt as T,v as c};
5
- //# sourceMappingURL=p-f0226ce2.js.map
4
+ import{j as t,h as n,F as e,g as i,e as o,w as s,d as r,r as a,c as l,a as d}from"./p-d6a04b3a.js";import{a as c}from"./p-ee045579.js";import{d as h}from"./p-7bff5224.js";import{c as b}from"./p-70747f20.js";const p="nano-tbl";const f=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const u=t=>{if(t!=null){if(f(t,"ArrayBuffer")||f(t,"MessagePort")||f(t,"ImageBitmap")||f(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(u)}return u(t.buffer)}}return[]};let _=0;let m=0;const g=new Map;const w=new Map;const v=(n,e,i)=>{const o=new Worker(n,{name:e});o.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const o=n[1];const s=n[2];if(e===i){const e=n[3];const[i,r,a]=g.get(o);g.delete(o);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>w.delete(t)))}i(s)}}else if(e===i+".cb"){try{w.get(o)(...s)}catch(n){t(n)}}}}));return o};const y=(t,n,e)=>(...i)=>new Promise(((o,s)=>{let r=_++;let a=0;let l=i.length;let d=[o,s];g.set(r,d);for(;a<l;a++){if(typeof i[a]==="function"){const t=m++;w.set(t,i[a]);i[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,r,e,i],u(i));if(t.then){t.then(c)}else{c(t)}}));const k=import("./p-7867967f.js").then((t=>t.worker));const x=y(k,"stencil.table.worker","createWorkerStore");const $=y(k,"stencil.table.worker","syncConfigToWorker");const j=y(k,"stencil.table.worker","syncDataToWorker");const z=y(k,"stencil.table.worker","workerFilter");const O=y(k,"stencil.table.worker","workerSearch");const C=y(k,"stencil.table.worker","workerSort");function S(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!(t===null||t===void 0?void 0:t.sortCompareFn)){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const I=new WeakMap;async function R(t,n,e,i){const o={data:b({rows:[]}),config:b({columns:n}),general:b({workerId:null,scrollParent:e,host:t,isReady:i})};const s=await x(o.data.state.rows,S(o.config.state.columns));o.general.state.workerId=s;I.set(t,o);o.data.use({reset:()=>{if(o.general.state.workerId)j(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)j(o.general.state.workerId,null)}});o.config.use({reset:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)}});return o}function P(t){return I.get(t)}function T(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function A(t,n){const e=I.get(t);if(!e)return;const i=e.config.state.columns;const o=i.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=i.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=i.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=T(t[n.prop]);if(n.type==="date")o.push(n.prop)}return n}))}o.forEach((n=>{var e;const i=(e=new Date(t[n]))!==null&&e!==void 0?e:null;if(!!i&&Number(i))t[n]=Number(i)}));t["__index"]=n;t["__uuid"]=c(i.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return j(e.general.state.workerId,n)}function M(t,n){const e=I.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return $(e.general.state.workerId,S(n))}async function B(t,n){const e=I.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 F(t,n){const e=I.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await z(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function N(t,n,e){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await C(i.general.state.workerId,n,e)}catch(t){console.warn(t)}}function D(t,n){const e=H();const i=e.config.state.columns;const o=e.data.state.rows;const s=i[n];const r=s===null||s===void 0?void 0:s.prop;const a=o[t];const l=a?a[i[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function E(t){const n=H();const e=n.data.state.rows;const i=e[t];return{rowModel:i,rowIndex:t}}function W(t,n){if(!n)return t;const e=Object.assign(Object.assign({},n),t);if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class=Object.assign(Object.assign({},n.class),e.class)}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"){e.class+=" "+n.class}}if(n.style){e.style=Object.assign(Object.assign({},n.style),e.style)}return e}function H(){return P(i(o()))}function L(t,n,e){var i;const o=Object.assign({},e);const s=(i=H().config.state.columns[n])===null||i===void 0?void 0:i.cellProperties;if(!s)return o;const r=D(t,n);const a=s(r);if(!a)return o;return W(o,a)}function J(t){const i=t===null||t===void 0?void 0:t.columnTemplate;return i?i(n,t):n(e,null,t.title)}function Y(t,n,e=false){const i={[`${p}__${t}`]:true,[`${p}__pin`]:!!n,[`${p}__pin--top`]:n==="top",[`${p}__pin--bottom`]:n==="bottom"};if(e)return q(i);return i}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function K(t){let n=getComputedStyle(t);const e=n.position==="absolute";const i=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let o=t;o=o.parentElement;){n=getComputedStyle(o);if(e&&n.position==="static"){continue}if(i.test(n.overflow+n.overflowY+n.overflowX))return o}return document.documentElement}function X(t,n=100){const e=t.getBoundingClientRect();const i=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-i)/e.height*100)<n)}const U=({column:t,onColumnSortClick:i,defaults:o})=>{function s(n){let e;switch(t.order){case"asc":e="desc";break;case"desc":e=null;break;default:e="asc"}i(e,t.prop,n.target.closest("th"))}function r(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let a={};if(t.columnProperties){a=t.columnProperties(t)||a}const l={class:Object.assign(Object.assign({},Y("th",t.pinned)),{[`${p}__pin--start`]:t.pinned==="start",[`${p}__pin--end`]:t.pinned==="end",[`${p}__ordered`]:!!t.order,[`${p}__filtered`]:t.filter!==undefined&&t.filter!==null})};let d=a?W(l,a):l;const c=J(t);if(!c)return n(e,null);d=Number(d.colSpan)>1?Object.assign(Object.assign({},d),{scope:"colgroup"}):Object.assign(Object.assign({},d),{scope:"col"});if(r()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";d=Object.assign(Object.assign({},d),{"aria-sort":n})}return n("th",Object.assign({},d,{key:t.prop}),r()?n("button",{class:{[`${p}__order-btn`]:true,[`${p}__cell-content`]:true},onClick:s},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?n("nano-icon",{name:"solid/long-arrow-down"}):n("nano-icon",{name:"solid/long-arrow-up"})),n("div",{class:`${p}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))):n("div",{class:`${p}__cell-content`},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/bars-filter"})))};function G(t,i){var s,r;const a=H();const l=a.config.state.columns;const d=(s=l[i])===null||s===void 0?void 0:s.cellTemplate;const c=D(t,i);const h=o();if(!!c.cellModel&&l[i].type==="date"){const t=new Date(c.cellModel);if(t instanceof Date&&!isNaN(t)){c.cellModel=!d?`${new Date(c.cellModel).toLocaleDateString()} ${new Date(c.cellModel).toLocaleTimeString()}`:t}}let b=false;const p=(...t)=>{b=true;return n(...t)};let f=d?d(p,c):undefined;if(f&&h.customRenderer&&f["t"]===undefined&&!(f instanceof Element)&&typeof f!=="string"&&!b){const t=document.createElement("template");const n=h.customRenderer(f,t.content);f=n&&n["then"]?n:t}return f?f:c.cellModel!==undefined&&c.cellModel!==null?n(e,null,(r=c.cellModel)===null||r===void 0?void 0:r.toString()):""}const Q=(t,n=false)=>{const e=H();const i=e.config.state.columns[t];const o={[`${p}__td`]:true,[`${p}__ordered`]:!!i.order,[`${p}__pin`]:!!i.pinned,[`${p}__pin--start`]:i.pinned==="start",[`${p}__pin--end`]:i.pinned==="end"};if(n)return q(o);return o};const V=({rowIndex:t,colIndex:e,nestedContent:i})=>{const s=()=>i?i():G(t,e)||n("span",{class:"placeholder"}," ");let r="td";const a=o();const l=H();const d=l.config.state.columns[e];let c=L(t,e,{class:Q(e)});if(d.rowHeader){c=Number(c.rowSpan)>1?Object.assign(Object.assign({},c),{scope:"rowgroup"}):Object.assign(Object.assign({},c),{scope:"row"});r="th"}const h=t=>{const e=s();return n("div",Object.assign({ref:t=>{if(!t)return;if(e instanceof Element){t.replaceChildren();t.append(e["content"]||e)}else if(e["then"]){e.then((n=>t.innerHTML=n))}}},t,{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:!!d.wrap},innerHTML:typeof e==="string"&&e.includes("<")?e:undefined}),(typeof e!=="string"||!e.includes("<"))&&!e["then"]&&!(e instanceof Element)&&e)};return n(r,Object.assign({role:a.type==="grid"?"gridcell":undefined},c),d.autoTooltip&&!d.wrap?n("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},n("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(r).style.zIndex="100",onNanoHide:t=>t.target.closest(r).style.zIndex=""},n(h,null),n("span",{slot:"content"},n(s,null)))):n(h,null))};const Z=(t,e,i)=>{const o=n("div",Object.assign({},t.wrapperProps,{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:t.wrap}}),e);return t.header?n("th",Object.assign({scope:i},t.cellProps),o):n("td",Object.assign({},t.cellProps),o)};const tt=({rowRenderer:t,rowIndex:e,rowModel:i},o,s)=>{const r=({header:t,wrap:n,cellProps:e,wrapperProps:i},o)=>Z({header:t,wrap:n,cellProps:e,wrapperProps:i},o,"row");let a={};if(!i){const t=E(e);i=t.rowModel}if(t===null||t===void 0?void 0:t.rowProperties){a=t.rowProperties({rowModel:i,rowIndex:e})||a}let l;if((t===null||t===void 0?void 0:t.pinned)&&typeof t.pinned==="function"){l=t.pinned({rowModel:i,rowIndex:e})}const d=W({class:Y("tr",l,true)},a);const c=t===null||t===void 0?void 0:t.template;const h=t=>s.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Q(n,true)},t.vattrs)}return t}));if(c){let t=c(n,{renderedRow:n("tr",Object.assign({},d,{key:i.__uuid}),o),rowModel:i,rowIndex:e},r);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${i.__uuid}_${n}`;t.vattrs=W({class:Y("tr",l,true)},t.vattrs);if(!!t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return n("tr",Object.assign({},d,{key:i.__uuid}),h(o))};const nt=({rowRenderer:t},e,i)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const s=({header:t,wrap:n,cellProps:e,wrapperProps:i},o)=>Z({header:t,wrap:n,cellProps:e,wrapperProps:i},o,"col");const r=t.pinned||null;const a={class:Y("tr",r)};const l=o?W(a,o):a;const d=t===null||t===void 0?void 0:t.template;if(d){let t=d(n,{renderedRow:n("tr",Object.assign({},l),e)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:Y("tr",r,true)},t.vattrs);if(!!t.vchildren){t.vchildren=i.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Y(t.vtag.toString(),r,true)},t.vattrs)}return t}))}}return t}))}return t}return n("tr",Object.assign({},l),e)};function et(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{constructor(t,n){this.cachedColMeta=new WeakMap;this._pinnedStart=[];this._pinnedEnd=[];this._cssColDimensionCacheKey="";this.cacheX=0;this.cacheY=0;this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${p}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${p}__pin--end`);this.topRows=t.getElementsByClassName(`${p}__pin--top`);this.bottomRows=t.getElementsByClassName(`${p}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${p}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);et(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${p}__pinned--start`);et(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${p}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);et(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${p}__pinned--end`);et(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const i=Array.from(this.endColumns).reverse();const o=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${i.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;et(`${this.tableId}-dimension-style`,o)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let i=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;i=this.scrollElement.offsetTop}return{offsetX:e,offsetY:i}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const i of this.topRows){const{y:o,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-top");const d=l!==""?parseFloat(l):t;await new Promise((l=>s((()=>{if(o-e<=d){i.classList.add(`${p}__pinned`,`${p}__pinned--top`)}else{i.classList.remove(`${p}__pinned`,`${p}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}l()}))))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:i}=this.getParentOffsets();for(const o of t){if(!o.isConnected)continue;const{y:t,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-bottom");const d=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+i-(t+r)<=d){o.classList.add(`${p}__pinned`,`${p}__pinned--bottom`)}else{o.classList.remove(`${p}__pinned`,`${p}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const i=new Promise((i=>{if(this.startColumns.length){r((()=>{const{offsetX:o}=this.getParentOffsets();let s=o;e=Array.from(this.startColumns[0].parentElement.children);for(const i of this.startColumns){t=i.getBoundingClientRect();this.cachedColMeta.set(i,{width:t.width,idx:e.indexOf(i)});n=this.pinnedStart.find((t=>t===i));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,i]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==i))}s+=t.width}if(!this.endColumns.length)i()}))}if(this.endColumns.length){r((()=>{const o=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const i of o){t=i.getBoundingClientRect();this.cachedColMeta.set(i,{width:t.width,idx:e.indexOf(i)});n=this.pinnedEnd.find((t=>t===i));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[i,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==i))}r+=t.width}i()}))}}));await i;this.generateCssCacheKey()}onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const ot=':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.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform:scale(1);height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-before:var(--border-style);border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding);padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding);padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--td-padding-start) !important;padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;-webkit-border-before:none;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);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}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.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-before:var(--border-style);border-block-start:var(--border-style);-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)}';const st=false;function rt(t,n=false){if(!performance||!st)return;if(n){performance===null||performance===void 0?void 0:performance.mark("end"+t);performance===null||performance===void 0?void 0:performance.measure(t,"start"+t,"end"+t);const n=performance===null||performance===void 0?void 0:performance.getEntriesByName(t);console.log(n[n.length?n.length-1:0])}else{performance===null||performance===void 0?void 0:performance.mark("start"+t)}}let at=0;const lt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.renderId="tbl-"+at++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.measureHeight=0;this.blockHeights=[];this.unitHeight=0;this._isReady=false;this.sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const i=this.nanoTblBeforeSort.emit({column:n,order:t});if(i.defaultPrevented)return;rt("sort");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 N(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=()=>{var t;let n=0;rt("scrollHandler");if(!((t=this.store)===null||t===void 0?void 0:t.general.state.isActive)||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{n=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;n+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:n})}let t=this.host.offsetTop;let e=0;const i=this.blocks.length;while(e<i&&n>=t){t+=this.getBlockHeight(e);if(n<t){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}rt("scrollHandler",true)}))};this.handleResizeChange=t=>{var n;this.tableWrapperEle.className="";let e=[`${p}__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.customRenderer=undefined;this.type="table";this.caption=undefined;this.showCaption=false;this.loading=undefined;this.internalLoading=true;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=50;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.defaultSort=true;this.virtualTotalItems=0;this.blocks=[];this.activeBlocks=[0,1];this.debounceSetLoading=h(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 A(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}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()}get appliedFilters(){return this.filters}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});rt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;rt("search");this.scrollToTop();try{await B(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});rt("search",true)}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;rt("filter");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;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await F(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&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));this.nanoTblAfterFilter.emit({filters:this.filters});rt("filter",true)}scrollToTop(t){var n;const e=(n=this.scrollParent.style)===null||n===void 0?void 0:n.scrollBehavior;const i=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!X(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!X(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(i)this.scrollParent.scrollLeft=i;if(e)this.scrollParent.style.scrollBehavior=e;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{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(`${p}__inactive`))}));t()}))}))}setInitialBlockDimension(){var t;if(!((t=this.blockElements)===null||t===void 0?void 0:t.length))return;rt("blockDims");const n=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const e=new Promise((async t=>{if(await n())t();else{const e=new IntersectionObserver((async()=>{if(await n()){t();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}));e.then((()=>{rt("blockDims",true);rt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{filter:n,prop:e}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}rt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let i=[];const o=[];for(n;n<=e;n++){i.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){o.push({rows:i,__uuid:c(i.map((t=>t.__uuid)).join())});i=[]}}if(i.length){o.push({rows:i,__uuid:c(i.map((t=>t.__uuid)).join())})}this.blocks=o;rt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)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:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${p}__inactive`))return;const e=n.getBoundingClientRect().height;const i=this.blockHeights.findIndex((n=>n.blockIndex===t));if(i>-1){this.blockHeights[i]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((async([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){rt("init");this.store=await R(this.host,this.columns,this.scrollParent,this.isReady);await this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=K(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=K(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){rt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));rt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return n(d,null,n("div",{class:`${p}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("nano-resize-observe",{states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),n("div",{class:`${p}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},n("nano-progress-bar",{indeterminate:true,class:{[`${p}__progress-bar`]:true,[`${p}__progress-bar--show`]:this._loading}}),n("table",{role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${p}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},n("caption",{class:{[`${p}__caption`]:true,[`${p}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},n("slot",{name:"caption"},this.caption)),n("thead",null,n(nt,{rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[n(U,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&n("tbody",{class:`${p}__active ${p}__loading`},[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((e,i)=>n(V,{rowIndex:t,colIndex:i,nestedContent:()=>n("nano-skeleton",null)}))))))),n("tr",{hidden:!!this._loading||!!this.blocks.length},n("th",{class:`${p}__th`,colSpan:this.store.config.state.columns.length},n("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},n("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,e)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${e}`,ref:t=>{this.blockElements.push(t)},class:{[`${p}__inactive`]:!this.activeBlocks.includes(e),[`${p}__active`]:this.activeBlocks.includes(e)}},this.activeBlocks.includes(e)?t.rows.map(((t,i)=>{const o=e>0?e*this.perBlock+i:i;return n(tt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,e)=>n(V,{rowIndex:o,colIndex:e}))))})):n("tr",{class:`${p}__tr--placeholder`},n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(e)+"px"}}))))),this.showFooter&&n("tfoot",null,n(nt,{rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[n(U,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${p}__spinner`]:true,[`${p}__spinner--show`]:this._loading}})))}get host(){return i(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};lt.style=ot;export{lt as T,v as c};
5
+ //# sourceMappingURL=p-f453329d.js.map
package/dist/types/components/details/details.d.ts CHANGED
@@ -51,6 +51,10 @@ export declare class Details {
51
51
  * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
52
52
  */
53
53
  nanoClosed: EventEmitter;
54
+ /** Emitted after the details opens and all transitions are complete. */
55
+ nanoAfterOpened: EventEmitter;
56
+ /** Emitted after the details closes and all transitions are complete. */
57
+ nanoAfterClosed: EventEmitter;
54
58
  toggleClick(): void;
55
59
  private onKeyDown;
56
60
  private onMouseDown;
package/dist/types/components.d.ts CHANGED
@@ -3980,6 +3980,14 @@ declare namespace LocalJSX {
3980
3980
  * Hide the handle. (You will need to control the hiding / showing of content with script)
3981
3981
  */
3982
3982
  "noHandle"?: boolean;
3983
+ /**
3984
+ * Emitted after the details closes and all transitions are complete.
3985
+ */
3986
+ "onNanoAfterClosed"?: (event: NanoDetailsCustomEvent<any>) => void;
3987
+ /**
3988
+ * Emitted after the details opens and all transitions are complete.
3989
+ */
3990
+ "onNanoAfterOpened"?: (event: NanoDetailsCustomEvent<any>) => void;
3983
3991
  /**
3984
3992
  * Emitted when the component closes. Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
3985
3993
  */
package/docs-json.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2023-10-13T17:51:13",
2
+ "timestamp": "2023-10-16T15:57:29",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "2.23.1",
@@ -4192,6 +4192,24 @@
4192
4192
  ],
4193
4193
  "methods": [],
4194
4194
  "events": [
4195
+ {
4196
+ "event": "nanoAfterClosed",
4197
+ "detail": "any",
4198
+ "bubbles": true,
4199
+ "cancelable": true,
4200
+ "composed": true,
4201
+ "docs": "Emitted after the details closes and all transitions are complete.",
4202
+ "docsTags": []
4203
+ },
4204
+ {
4205
+ "event": "nanoAfterOpened",
4206
+ "detail": "any",
4207
+ "bubbles": true,
4208
+ "cancelable": true,
4209
+ "composed": true,
4210
+ "docs": "Emitted after the details opens and all transitions are complete.",
4211
+ "docsTags": []
4212
+ },
4195
4213
  {
4196
4214
  "event": "nanoClosed",
4197
4215
  "detail": "any",
package/hydrate/index.js CHANGED
@@ -12172,13 +12172,15 @@ const displayTransition = (el, options) => {
12172
12172
  const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
12173
12173
  return new Promise((resolve) => {
12174
12174
  const showCb = (e) => {
12175
- if (e.target === el || e.composedPath().some((el) => el === e.target)) {
12175
+ if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
12176
+ (!opts.transitionProp || opts.transitionProp === e.propertyName)) {
12176
12177
  resolve('shown');
12177
12178
  el.removeEventListener('transitionend', showCb);
12178
12179
  }
12179
12180
  };
12180
12181
  const hideCb = (e) => {
12181
- if (e.target === el || e.composedPath().some((el) => el === e.target)) {
12182
+ if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
12183
+ (!opts.transitionProp || opts.transitionProp === e.propertyName)) {
12182
12184
  el.style.display = 'none';
12183
12185
  resolve('hidden');
12184
12186
  el.removeEventListener('transitionend', hideCb);
@@ -12221,6 +12223,8 @@ class Details {
12221
12223
  registerInstance(this, hostRef);
12222
12224
  this.nanoOpened = createEvent(this, "nanoOpened", 7);
12223
12225
  this.nanoClosed = createEvent(this, "nanoClosed", 7);
12226
+ this.nanoAfterOpened = createEvent(this, "nanoAfterOpened", 7);
12227
+ this.nanoAfterClosed = createEvent(this, "nanoAfterClosed", 7);
12224
12228
  this.stateChanging = false;
12225
12229
  this.onKeyDown = (e) => {
12226
12230
  if (this.stateChanging || this.disabled)
@@ -12279,6 +12283,7 @@ class Details {
12279
12283
  this.stateChanging = false;
12280
12284
  this.detailsEl.open = false;
12281
12285
  this.bodyEl.classList.add('is-hidden');
12286
+ this.nanoAfterClosed.emit();
12282
12287
  });
12283
12288
  requestAnimationFrame(() => {
12284
12289
  this.bodyEl.style.height = '0px';
@@ -12299,6 +12304,7 @@ class Details {
12299
12304
  }).then(() => {
12300
12305
  this.stateChanging = false;
12301
12306
  this.bodyEl.style.height = 'auto';
12307
+ this.nanoAfterOpened.emit();
12302
12308
  });
12303
12309
  this.bodyEl.style.height =
12304
12310
  (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +
@@ -18413,7 +18419,7 @@ class Grid {
18413
18419
  .join('')}
18414
18420
  ${this.showHelper
18415
18421
  ? /* css */ `
18416
- [cache-key="${this.cacheKey}"] .grid--helper :nth-child(-n+${bp.cols}) {
18422
+ [cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${bp.cols}) {
18417
18423
  display: block !important;
18418
18424
  }
18419
18425
  `
@@ -18489,7 +18495,7 @@ class Grid {
18489
18495
  this.constructSizeArray();
18490
18496
  }
18491
18497
  render() {
18492
- return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
18498
+ return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
18493
18499
  }
18494
18500
  static get watchers() { return {
18495
18501
  "sTpl": ["constructSizeArray"],