@nanoporetech-digital/components 1.15.6 → 2.1.0

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,f as i,h as o,e,g as n}from"./p-ab5813a7.js";import{c as s}from"./p-b619500f.js";const a=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host(.legacy) ::slotted(*),:host(.legacy) *{--global-nav-height:61px;--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--secondary-padding-end:13px;--secondary-padding-bottom:13px;--secondary-padding-start:13px;--secondary-padding-top:61px;--icon-size:19px;--font-size:11px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-open:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72)}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:61px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72);font-family:inherit;font-size: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;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-top:var(--global-nav-height)}@supports ((position: -webkit-sticky) or (position: sticky)){:host(.has-global-nav) .content-wrap{margin-top:calc(var(--global-nav-height) * -1)}}.container{right:auto;-webkit-box-flex:0;-ms-flex:0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));flex:0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;width:calc((var(--padding-end, 1em) * 2) + var(--icon-size));height:100%}:host(.open) .container{width:auto}:host(:not(.loading)) .container{-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.content-wrap{left:0;top:0;width:inherit;max-width:inherit;background:var(--bg-color);color:#fff;position:fixed;position:-webkit-sticky;position:sticky;font-size:var(--icon-size);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:calc(100vh - 61px);min-height:calc((var(--vh, 1vh) * 100) - 61px);z-index:1}:host([dir=rtl]) .content-wrap{right:0;left:auto}.content{width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--bg-color);-webkit-box-flex:1;-ms-flex:1;flex:1}.content::after{content:"";position:absolute;top:0;left:0;right:0;background:var(--bg-color);z-index:-1;height:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin:var(--padding-top) auto var(--padding-bottom) calc(var(--padding-start) / 2);border-radius:4px;padding:6px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;width:30px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);-webkit-transition:0.2s -webkit-transform ease-in-out;transition:0.2s -webkit-transform ease-in-out;transition:0.2s transform ease-in-out;transition:0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}.foot{margin-top:auto}.measure-ele{height:1px}';const r=!!document.head.attachShadow;let h=class{constructor(i){t(this,i);this.children=[];this.currHeight=window.innerHeight;this.reset=false;this.widthOk=true;this.heightOk=true;this.isLoading=true;this.hide=false;this.open=true;this.saveState=true;this.hideWidth=576;this.hideHeight=true;this.onWindowResize=()=>{if(window.innerWidth>this.hideWidth)this.widthOk=true;else this.widthOk=false;let t=window.innerHeight*.01;this.el.style.setProperty("--vh",`${t}px`);if(window.innerHeight>this.currHeight&&this.widthOk&&!this.heightOk){this.moveItemsToDrawer()}this.currHeight=window.innerHeight};this.toggle=t=>{t.preventDefault();this.open=!this.open};this.onToggleKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open;break}}}cancelNavItemEvents(t){if(!t.detail.secondaryMenu)return;t.stopPropagation()}openChange(){if(this.saveState)localStorage.setItem("nanoMenuDrawerOpen",this.open.toString());if(this.containerDiv){if(this.open)i((()=>this.containerDiv.style.width=this.contentDiv.scrollWidth+"px"));else i((()=>this.containerDiv.style.width=null))}}widthChange(){if(this.widthOk)this.moveItemsToDrawer();else this.moveItemsToGlobalNav()}hideHeightChange(){if(this.hideHeight&&!this.io)this.attachIO();else if(!this.hideHeight&&this.io){this.io.disconnect();this.io=undefined}}moveItemsToGlobalNav(){let t=this.el.querySelectorAll("nano-nav-item");t.forEach((t=>{this.children.push({slot:t.getAttribute("slot"),element:t});t.setAttribute("slot","overflow");t.classList.add("nano-global-nav-menu");this.globalNav.appendChild(t)}));this.hide=true}moveItemsToDrawer(){if(!this.children||!this.children.length)return;this.children.forEach((t=>{t.element.removeAttribute("slot");t.element.classList.remove("nano-global-nav-menu");if(t.slot&&t.slot.length)t.element.setAttribute("slot",t.slot);this.el.appendChild(t.element)}));this.children=[];this.hide=false;if(!this.io)this.attachIO()}attachIO(){if(!this.hideHeight)return;const t=this.io=new window.IntersectionObserver((t=>{this.heightOk=t[0].intersectionRatio!==0;if(!this.heightOk){this.moveItemsToGlobalNav();this.io.disconnect();this.io=undefined}}),{threshold:1});t.observe(this.measureEle)}handleGlobalNavReady(t){if(t.target.tagName!=="NANO-GLOBAL-NAV")return;setTimeout((()=>{this.attachIO();this.openChange();this.onWindowResize();this.isLoading=false}),500)}componentWillLoad(){this.globalNav=s("nano-global-nav",this.el);this.widthOk=window.innerWidth>this.hideWidth;this.currHeight=window.innerHeight;if(this.saveState){let t=localStorage.getItem("nanoMenuDrawerOpen");this.open=t?t==="true":this.open}}componentDidLoad(){{window.addEventListener("resize",this.onWindowResize)}}disconnectedCallback(){window.removeEventListener("resize",this.debounceResize);if(this.io){this.io.disconnect();this.io=null}}render(){return o(e,{class:{open:this.open,hide:this.hide,legacy:!r,loading:this.isLoading,"has-global-nav":!!this.globalNav},dir:this.el.ownerDocument.dir==="rtl"?"rtl":null},o("div",{ref:t=>this.containerDiv=t,class:"container"},o("div",{class:"content-wrap"},o("nav",{ref:t=>this.contentDiv=t,class:"content"},o("button",{onMouseDown:this.toggle,onKeyDown:this.onToggleKeyDown,class:"collapse-btn"},o("nano-icon",{name:"light/arrow-alt-to-right","aria-label":"collapse / expand"})),o("slot",null),o("div",{class:"foot"},o("div",{class:"measure-ele",ref:t=>this.measureEle=t}),o("slot",{name:"foot"}))))))}get el(){return n(this)}static get watchers(){return{open:["openChange"],widthOk:["widthChange"],hideHeight:["hideHeightChange"]}}};h.style=a;export{h as nano_menu_drawer};
+//# sourceMappingURL=p-c0ddb4c3.entry.js.map

package/dist/nano-components/{p-78569d39.entry.js.map → p-c0ddb4c3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","[object Object]","hostRef","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","detail","secondaryMenu","stopPropagation","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","moveItemsToGlobalNav","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","target","tagName","setTimeout","openChange","closestElement","localState","getItem","addEventListener","removeEventListener","debounceResize","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":";;;+FAAA,MAAMA,EAAgB,23HCetB,MAAMC,IAAcC,SAASC,KAAKC,iBAerBC,EAAU,MALvBC,YAAAC,aAWUC,KAAAC,SACN,GAEMD,KAAAE,WAAqBC,OAAOC,YAI3BJ,KAAAK,MAAiB,MACjBL,KAAAM,QAAmB,KACnBN,KAAAO,SAAoB,KACpBP,KAAAQ,UAAqB,KACrBR,KAAAS,KAAgB,MAKjBT,KAAAU,KAAgB,KAKhBV,KAAAW,UAAqB,KAKrBX,KAAAY,UAAoB,IAMpBZ,KAAAa,WAAsB,KAoEtBb,KAAAc,eAAiB,KACvB,GAAIX,OAAOY,WAAaf,KAAKY,UAAWZ,KAAKM,QAAU,UAClDN,KAAKM,QAAU,MAEpB,IAAIU,EAAKb,OAAOC,YAAc,IAC9BJ,KAAKiB,GAAGC,MAAMC,YAAY,OAAQ,GAAGH,OAErC,GACEb,OAAOC,YAAcJ,KAAKE,YAC1BF,KAAKM,UACJN,KAAKO,SACN,CACAP,KAAKoB,oBAEPpB,KAAKE,WAAaC,OAAOC,aAGnBJ,KAAAqB,OAAUC,IAChBA,EAAEC,iBACFvB,KAAKU,MAAQV,KAAKU,MAGZV,KAAAwB,gBAAmBC,IACzB,OAAQA,EAAGC,KACT,IAAK,QACL,IAAK,IACH1B,KAAKU,MAAQV,KAAKU,KAClB,QA3FNZ,oBAAoB2B,GAClB,IAAMA,EAAGE,OAA8BC,cAAe,OACtDH,EAAGI,kBAIL/B,aACE,GAAIE,KAAKW,UACPmB,aAAaC,QAAQ,qBAAsB/B,KAAKU,KAAKsB,YACvD,GAAIhC,KAAKiC,aAAc,CACrB,GAAIjC,KAAKU,KACPwB,GACE,IACGlC,KAAKiC,aAAaf,MAAMiB,MAAQnC,KAAKoC,WAAWC,YAAc,YAEhEH,GAAU,IAAOlC,KAAKiC,aAAaf,MAAMiB,MAAQ,QAK1DrC,cACE,GAAIE,KAAKM,QAASN,KAAKoB,yBAClBpB,KAAKsC,uBAIZxC,mBACE,GAAIE,KAAKa,aAAeb,KAAKuC,GAAIvC,KAAKwC,gBACjC,IAAKxC,KAAKa,YAAcb,KAAKuC,GAAI,CACpCvC,KAAKuC,GAAGE,aACRzC,KAAKuC,GAAKG,WAIN5C,uBACN,IAAI6C,EAAe3C,KAAKiB,GAAG2B,iBAAiB,iBAE5CD,EAAaE,SAASC,IACpB9C,KAAKC,SAAS8C,KAAK,CACjBC,KAAMF,EAAQG,aAAa,QAC3BH,QAASA,IAEXA,EAAQI,aAAa,OAAQ,YAC7BJ,EAAQK,UAAUC,IAAI,wBACtBpD,KAAKqD,UAAUC,YAAYR,MAE7B9C,KAAKS,KAAO,KAGNX,oBACN,IAAKE,KAAKC,WAAaD,KAAKC,SAASsD,OAAQ,OAE7CvD,KAAKC,SAAS4C,SAASW,IACrBA,EAAMV,QAAQW,gBAAgB,QAC9BD,EAAMV,QAAQK,UAAUO,OAAO,wBAC/B,GAAIF,EAAMR,MAAQQ,EAAMR,KAAKO,OAC3BC,EAAMV,QAAQI,aAAa,OAAQM,EAAMR,MAC3ChD,KAAKiB,GAAGqC,YAAYE,EAAMV,YAE5B9C,KAAKC,SAAW,GAChBD,KAAKS,KAAO,MACZ,IAAKT,KAAKuC,GAAIvC,KAAKwC,WAkCb1C,WACN,IAAKE,KAAKa,WAAY,OACtB,MAAM0B,EAA4BvC,KAAKuC,GAAK,IAC1CpC,OACAwD,sBACCC,IACC5D,KAAKO,SAAWqD,EAAK,GAAGC,oBAAsB,EAC9C,IAAK7D,KAAKO,SAAU,CAClBP,KAAKsC,uBACLtC,KAAKuC,GAAGE,aACRzC,KAAKuC,GAAKG,aAGd,CAAEoB,UAAW,IAEfvB,EAAGwB,QAAQ/D,KAAKgE,YAIlBlE,qBAAqBwB,GACnB,GAAIA,EAAE2C,OAAOC,UAAY,kBAAmB,OAE5CC,YAAW,KACTnE,KAAKwC,WACLxC,KAAKoE,aACLpE,KAAKc,iBACLd,KAAKQ,UAAY,QAChB,KAGLV,oBACEE,KAAKqD,UAAYgB,EACf,kBACArE,KAAKiB,IAGPjB,KAAKM,QAAUH,OAAOY,WAAaf,KAAKY,UACxCZ,KAAKE,WAAaC,OAAOC,YAEzB,GAAIJ,KAAKW,UAAW,CAClB,IAAI2D,EAAaxC,aAAayC,QAAQ,sBACtCvE,KAAKU,KAAO4D,EAAaA,IAAe,OAAStE,KAAKU,MAI1DZ,mBACuB,CACnBK,OAAOqE,iBAAiB,SAAUxE,KAAKc,iBAI3ChB,uBACEK,OAAOsE,oBAAoB,SAAUzE,KAAK0E,gBAC1C,GAAI1E,KAAKuC,GAAI,CACXvC,KAAKuC,GAAGE,aACRzC,KAAKuC,GAAK,MAIdzC,SACE,OACE6E,EAACC,EAAI,CACHC,MAAO,CACLnE,KAAMV,KAAKU,KACXD,KAAMT,KAAKS,KACXqE,QAASrF,EACTsF,QAAS/E,KAAKQ,UACdwE,mBAAoBhF,KAAKqD,WAE3B4B,IAAMjF,KAAKiB,GAAGiE,cAA2BD,MAAQ,MAAQ,MAAQ,MAEjEN,EAAA,MAAA,CAAKQ,IAAMC,GAASpF,KAAKiC,aAAemD,EAAMP,MAAM,aAClDF,EAAA,MAAA,CAAKE,MAAM,gBACTF,EAAA,MAAA,CAAKQ,IAAMC,GAASpF,KAAKoC,WAAagD,EAAMP,MAAM,WAChDF,EAAA,SAAA,CACEU,YAAarF,KAAKqB,OAClBiE,UAAWtF,KAAKwB,gBAChBqD,MAAM,gBAENF,EAAA,YAAA,CACEY,KAAK,2BAA0BC,aACpB,uBAGfb,EAAA,OAAA,MACAA,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CACEE,MAAM,cACNM,IAAMC,GAASpF,KAAKgE,WAAaoB,IAEnCT,EAAA,OAAA,CAAMY,KAAK","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n  ::slotted(*),\n  * {\n    --global-nav-height: 61px;\n    --padding-top: 13px;\n    --padding-end: 13px;\n    --padding-bottom: 13px;\n    --padding-start: 13px;\n    --secondary-padding-end: 13px;\n    --secondary-padding-bottom: 13px;\n    --secondary-padding-start: 13px;\n    --secondary-padding-top: 61px;\n    --icon-size: 19px;\n    --font-size: 11px;\n    --bg-color: #001a21;\n    --bg-color-hover: rgba(28, 62, 72, 0.8);\n    --bg-color-selected: #274048;\n    --bg-color-open: #274048;\n    --bg-color-focus: rgba(28, 62, 72, 0.8);\n    --focus-outline: none;\n    --content-color: #{$color-white};\n    --secondary-bg-color: rgb(28, 62, 72);\n  }\n}\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{$color-white};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-top: var(--global-nav-height);\n\n    @at-root {\n      @supports ((position: sticky)) {\n        & {\n          margin-top: calc(var(--global-nav-height) * -1);\n        }\n      }\n    }\n  }\n}\n\n.container {\n  right: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  height: 100%;\n}\n\n:host(.open) {\n  .container {\n    width: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: width 0.3s ease;\n  }\n}\n\n.content-wrap {\n  left: 0;\n  top: 0;\n  width: inherit;\n  max-width: inherit;\n  background: var(--bg-color);\n  color: $color-white;\n  position: fixed;\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-height: calc(100vh - 61px);\n  min-height: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n\n  @include rtl-host {\n    right: 0;\n    left: auto;\n  }\n}\n\n.content {\n  width: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    height: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin:\n    var(--padding-top) auto var(--padding-bottom)\n    calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding: 6px 5px;\n  display: flex;\n  align-content: center;\n  width: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-top: auto;\n}\n\n.measure-ele {\n  height: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    let currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    let vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      let localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          legacy: !CANSHADOW,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","[object Object]","hostRef","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","detail","secondaryMenu","stopPropagation","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","moveItemsToGlobalNav","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","target","tagName","setTimeout","openChange","closestElement","localState","getItem","addEventListener","removeEventListener","debounceResize","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n  ::slotted(*),\n  * {\n    --global-nav-height: 61px;\n    --padding-top: 13px;\n    --padding-end: 13px;\n    --padding-bottom: 13px;\n    --padding-start: 13px;\n    --secondary-padding-end: 13px;\n    --secondary-padding-bottom: 13px;\n    --secondary-padding-start: 13px;\n    --secondary-padding-top: 61px;\n    --icon-size: 19px;\n    --font-size: 11px;\n    --bg-color: #001a21;\n    --bg-color-hover: rgba(28, 62, 72, 0.8);\n    --bg-color-selected: #274048;\n    --bg-color-open: #274048;\n    --bg-color-focus: rgba(28, 62, 72, 0.8);\n    --focus-outline: none;\n    --content-color: #{$color-white};\n    --secondary-bg-color: rgb(28, 62, 72);\n  }\n}\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{$color-white};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-top: var(--global-nav-height);\n\n    @at-root {\n      @supports ((position: sticky)) {\n        & {\n          margin-top: calc(var(--global-nav-height) * -1);\n        }\n      }\n    }\n  }\n}\n\n.container {\n  right: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  height: 100%;\n}\n\n:host(.open) {\n  .container {\n    width: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: width 0.3s ease;\n  }\n}\n\n.content-wrap {\n  left: 0;\n  top: 0;\n  width: inherit;\n  max-width: inherit;\n  background: var(--bg-color);\n  color: $color-white;\n  position: fixed;\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-height: calc(100vh - 61px);\n  min-height: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n\n  @include rtl-host {\n    right: 0;\n    left: auto;\n  }\n}\n\n.content {\n  width: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    height: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin:\n    var(--padding-top) auto var(--padding-bottom)\n    calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding: 6px 5px;\n  display: flex;\n  align-content: center;\n  width: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-top: auto;\n}\n\n.measure-ele {\n  height: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    let currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    let vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      let localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          legacy: !CANSHADOW,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as n,h as e,e as i,g as a}from"./p-ab5813a7.js";import{d as s,r as o}from"./p-289aa03f.js";import{b as r,g as l,c as d}from"./p-b619500f.js";import{F as c,a as h}from"./p-672e5547.js";import{a as p}from"./p-1da5f8df.js";import{c as g}from"./p-d99437a6.js";import{g as u}from"./p-74a7fc4f.js";const b=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size: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-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-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]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}: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,:host a:focus{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, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;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{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);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;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}: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{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:5px;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';let m=class{constructor(e){t(this,e);this.nanoClose=n(this,"nanoClose",7);this.nanoOpen=n(this,"nanoOpen",7);this.nanoOpening=n(this,"nanoOpening",7);this.nanoClosing=n(this,"nanoClosing",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.isLegacy=!document.head.attachShadow;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.closeSecondary=async()=>{this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",false);this.didOpen=t!=="hidden"};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",true);this.didOpen=t==="shown"};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=t=>{if(!this.hasAnchorEle)return;let n=t.target.closest("a, button");if(!n)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(r(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);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=()=>{var t;this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary();else(t=this.el.querySelector("*"))===null||t===void 0?void 0:t.click()};this.blur=t=>{if(!this.didOpen||this.animating)return;if(!this.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===this.el||t.relatedTarget===this.btn||this.foundThisNavEle(t.relatedTarget)){this.secondaryDiv.focus({preventScroll:true});return}}this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur);window.removeEventListener("blur",this.blur);this.didBlur=true;this.open=false;if(!t.relatedTarget)setTimeout((()=>{this.el.focus({preventScroll:true})}),50)}}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((()=>{if(!this.fromHover&&!this.didBlur)this.btn.focus({preventScroll:true});this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){const t=new window.IntersectionObserver((n=>{if(n[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}foundThisNavEle(t){let n=t.closest("nano-nav-item");n=n===t?t.parentElement.closest("nano-nav-item"):n;if(!n)return false;if(n===this.el)return true;return this.foundThisNavEle(n)}componentWillLoad(){let t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;let n=l(this.el,"a, button")[0];this.hasAnchorEle=!!n;if(n){this.href=n.href?n.href:null;this.btn=n;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){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")}render(){return e(i,{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,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},e("div",{class:"secondary-menu-content"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};m.style=b;const f='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-select .label-placeholder.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-select .placeholder.sc-nano-select{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .placeholder.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-select .charcount.sc-nano-select{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .charcount.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.input.sc-nano-select{font-family:inherit;font-size: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;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.input-clear-icon.sc-nano-select,.end.sc-nano-select,.start.sc-nano-select,.value-end.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;--nano-icon-size:1.4em;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .start.sc-nano-select{display:none}.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-select-h[disabled]:not([disabled=false]) .start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.input-clear-icon.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .input-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input.sc-nano-select::selection{background:transparent}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input[disabled].sc-nano-select{opacity:0.4}.native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.native-input.sc-nano-select::-webkit-search-decoration,.native-input.sc-nano-select::-webkit-search-cancel-button,.native-input.sc-nano-select::-webkit-search-results-button,.native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-select::-ms-clear,.native-input.sc-nano-select::-ms-reveal{display:none}.native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.textarea.sc-nano-select .native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-select .native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.sc-nano-select .native-input.sc-nano-select{padding-top:1.4em}.has-float-label.textarea.sc-nano-select .native-input.sc-nano-select{padding-top:1.8em}.legacy.sc-nano-select .native-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size: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-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.78em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.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{pointer-events:auto}';let v=0;let w=class{constructor(e){t(this,e);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoSearchChange=n(this,"nanoSearchChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${v++}`;this.rtl=false;this.onInit=true;this.isLegacy="registerElement"in document;this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.inputSearchVal="";this._invalid=false;this.autofocus=false;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.readonly=false;this.required=false;this.allowCustomValues=false;this._value=this.multiple?[]:"";this._options=[];this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.customValidate=()=>{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=t=>{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:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit")this._invalid=this.showErrorMsg=this.customValidate();if(this.showInlineError)t.preventDefault();setTimeout((n=>this.showInlineValidation(t)),20)};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;this.inputCtrl.focus();return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((n=>n!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:n,selected:e,label:i,filterMeta:a}=t;return{value:n,selected:e,label:i,filterMeta:a}}))};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let n;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)n=this.inputCtrl.previousElementSibling;else break;this.removeValue(n.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)n=this.inputCtrl.nextElementSibling;else break;this.removeValue(n.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;setTimeout((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}),20);this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{let n=t.target;this.dragVal=n.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{let n=t.target;let e=n.dataset&&n.dataset.value?n.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){t.preventDefault();return}let i=this.value.indexOf(e);let a=this.value.indexOf(this.dragVal);let s=this.value;let o=s[i];s[i]=s[a];s[a]=o;this.value=[...s]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})}}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}get invalid(){return this._invalid}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:n,selected:e,label:i,filterMeta:a}=t;return{value:n,selected:e,label:i,filterMeta:a}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=p(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(){if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}setTimeout((t=>this.shouldValidate()),20);this.nanoChange.emit({value:this.value})}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap});this.datalist.input=this.inputCtrl}async reportValidity(t){if(t)this.showInlineValidation();return{isValid:!this.invalid,errorMessage:this.errorMessage}}async setFocus(){this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((n=>n.value===t))))}slotChangeObserver(){const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');if(!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')){console.warn("nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}}getLabel(t){let n=this.options.find((n=>{var e;return!n.disabled&&((e=n.value)===null||e===void 0?void 0:e.length)&&n.value===t}));return n&&n.label?n.label:t}handleBlur(t){if(!this.hasFocus)return;const n=t;let e;o((()=>{if(n.key){if(n.key!=="Tab")return;e=u()}else e=t.target;if(d(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();o((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:t,floatLabel:n,label:e,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasLabelSlot:o,hideLabel:r,placeholder:l,rtl:d})=>({el:t,floatLabel:n,label:e,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasLabelSlot:o,hideLabel:r,placeholder:l,rtl:d}))(this);const s=Object.assign(Object.assign({},a),{labelId:t,moreId:n,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const o=(({readonly:t,disabled:n})=>({readonly:t,disabled:n,clearControl:this.clearSelect}))(this);return e(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},g(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,legacy:this.isLegacy})},e(c,Object.assign({},s),e(h,Object.assign({},o,{onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&e("div",{class:"multi-wrap"},this.multipleValues(t,n)),!this.multiple&&[this.mask&&e("div",{class:"select-mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n){let i=e("input",{class:"multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,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.floatLabel&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n});if(!this.value.length)return i;return this.value.map(((t,n)=>{let a=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)a=[i,a];else if(n===this.currInsertIndex)a=[a,i];return a}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};w.style=f;export{m as nano_nav_item,w as nano_select};
+//# sourceMappingURL=p-c954c040.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","slice","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","selectWrap","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","Object","assign","tetherTo","input","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","getLabel","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 5px;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\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\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\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  appearance: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &[disabled] {\n    opacity: 0.4;\n  }\n\n  &::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: 2.5em;\n    min-height: 2.5em;\n    // text-overflow: ellipsis;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .textarea & {\n    line-height: 1.5em;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label & {\n    padding-top: 1.4em;\n  }\n\n  .has-float-label.textarea & {\n    padding-top: 1.8em;\n  }\n\n  .legacy & {\n    box-sizing: content-box;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.select-mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.multi {\n  &-wrap {\n    @include padding(\n      0,\n      0,\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    max-width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    min-height: calc(2.78em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.3em 0.5em;\n    border-radius: 3px;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    font-weight: 600;\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.4;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.placeholder-as-label {\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-120%);\n    font-size: 0.9em;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  debounceEvent,\n  createColorClasses,\n  closestElement,\n  raf,\n  getActiveElement,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private inputCtrl?: HTMLInputElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private isLegacy: boolean = 'registerElement' in document;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. User get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  private _invalid = false;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n    this.datalist.input = this.inputCtrl;\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * Returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit')\n      this._invalid = this.showErrorMsg = this.customValidate();\n    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      this.selectWrap.clientWidth; // force reflow\n      this.inputCtrl.focus();\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n\n    // breaking change introduced in v2. Rm in v3\n    if (\n      !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n    ) {\n      console.warn(\n        'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  private getLabel(toFind: string) {\n    let label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    raf(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    raf(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"multi-wrap\">\n                {this.multipleValues(labelId, moreId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select-mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={\n                  !this.floatLabel && this.placeholder ? this.placeholder : ''\n                }\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n              <nano-option\n                slot=\"list-top\"\n                value={this.inputSearchVal}\n                selected={false}\n                label={this.inputSearchVal}\n                onNanoSelect={() => this.inputCtrl.focus()}\n              >\n                <span slot=\"check-icon\"></span>\n                Add '{this.inputSearchVal}'\n              </nano-option>\n            )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"native-select\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string\n  ): VNode | (VNode | VNode[])[] {\n    let input: VNode = (\n      <input\n        class=\"multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.floatLabel && !this.value.length\n            ? this.placeholder\n            : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"]}

package/dist/nano-components/p-c9c1a345.system.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js","./p-89edc042.system.js","./p-1d13dbdf.system.js"],(function(e){"use strict";var t,n,o,i,r,s,a;return{setters:[function(e){t=e.r;n=e.c;o=e.h;i=e.e;r=e.g},function(e){s=e.c},function(e){a=e.g}],execute:function(){var l=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";var c=e("nano_accordion",function(){function e(e){t(this,e);this.nanoToggle=n(this,"nanoToggle",7)}e.prototype.onToggleHandler=function(e){var t=this;e.stopPropagation();var n=a(this.el,"nano-details")||this.el.querySelectorAll("nano-details");n.forEach((function(n,o){if(n!==e.target)n.open=false;else t.itemOpened=o}));this.nanoToggle.emit()};e.prototype.onClosedHandler=function(e){e.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()};e.prototype.render=function(){var e;return o(i,{class:Object.assign(Object.assign({},s(this.color)),(e={},e["nano-color-"+this.itemOpened]=typeof this.itemOpened==="number",e))},o("slot",null))};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());c.style=l}}}));
+//# sourceMappingURL=p-c9c1a345.system.entry.js.map

package/dist/nano-components/{p-38a3e791.system.entry.js.map → p-c9c1a345.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"names":["accordionCss","Accordion","exports","class_1","prototype","onToggleHandler","event","_this","this","stopPropagation","items","getDirectChildren","el","querySelectorAll","forEach","item","i","target","open","itemOpened","nanoToggle","emit","onClosedHandler","render","h","Host","class","Object","assign","createColorClasses","color","_a","connectedCallback"],"mappings":";;;8PAAA,IAAMA,EAAe,8JCwBRC,EAASC,EAAA,iBAAA,0EAgBpBC,EAAAC,UAAAC,gBAAA,SAAgBC,GAAhB,IAAAC,EAAAC,KACEF,EAAMG,kBAEN,IAAIC,EACFC,EAAkBH,KAAKI,GAAI,iBAC3BJ,KAAKI,GAAGC,iBAAiB,gBAC3BH,EAAMI,SAAQ,SAACC,EAA8BC,GAC3C,GAAID,IAAST,EAAMW,OAAQF,EAAKG,KAAO,WAClCX,EAAKY,WAAaH,KAEzBR,KAAKY,WAAWC,QAIlBlB,EAAAC,UAAAkB,gBAAA,SAAgBhB,GACdA,EAAMG,kBACND,KAAKW,WAAa,KAClBX,KAAKY,WAAWC,QAGlBlB,EAAAC,UAAAmB,OAAA,iBACE,OACEC,EAACC,EAAI,CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EAAmBrB,KAAKsB,SAAMC,EAAA,GACjCA,EAAC,cAAcvB,KAAKW,mBACXX,KAAKW,aAAe,SAAQY,KAGvCP,EAAA,OAAA,QAKNrB,EAAAC,UAAA4B,kBAAA,kIAlDoB","sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, getDirectChildren } from '../../utils';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    let items =\n      getDirectChildren(this.el, 'nano-details') ||\n      this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n  }\n}\n"]}
+{"version":3,"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"names":["accordionCss","Accordion","exports","class_1","prototype","onToggleHandler","event","_this","this","stopPropagation","items","getDirectChildren","el","querySelectorAll","forEach","item","i","target","open","itemOpened","nanoToggle","emit","onClosedHandler","render","h","Host","class","Object","assign","createColorClasses","color","_a"],"mappings":";;;8PAAA,IAAMA,EAAe,+LCwBRC,EAASC,EAAA,iBAAA,0EAgBpBC,EAAAC,UAAAC,gBAAA,SAAgBC,GAAhB,IAAAC,EAAAC,KACEF,EAAMG,kBAEN,IAAIC,EACFC,EAAkBH,KAAKI,GAAI,iBAC3BJ,KAAKI,GAAGC,iBAAiB,gBAC3BH,EAAMI,SAAQ,SAACC,EAA8BC,GAC3C,GAAID,IAAST,EAAMW,OAAQF,EAAKG,KAAO,WAClCX,EAAKY,WAAaH,KAEzBR,KAAKY,WAAWC,QAIlBlB,EAAAC,UAAAkB,gBAAA,SAAgBhB,GACdA,EAAMG,kBACND,KAAKW,WAAa,KAClBX,KAAKY,WAAWC,QAGlBlB,EAAAC,UAAAmB,OAAA,iBACE,OACEC,EAACC,EAAI,CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EAAmBrB,KAAKsB,SAAMC,EAAA,GACjCA,EAAC,cAAcvB,KAAKW,mBACXX,KAAKW,aAAe,SAAQY,KAGvCP,EAAA,OAAA,6HA7Cc","sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { getDirectChildren } from '../../utils';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    let items =\n      getDirectChildren(this.el, 'nano-details') ||\n      this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-8c8963f6.js → p-cb79d1ec.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{g as t}from"./p-56113dd3.js";let s=[];class i{constructor(t){this.tabDirection="forward";this.element=t;this.handleFocusIn=this.handleFocusIn.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}activate(){s.push(this.element);document.addEventListener("focusin",this.handleFocusIn);document.addEventListener("keydown",this.handleKeyDown)}deactivate(){s=s.filter((t=>t!==this.element));document.removeEventListener("focusin",this.handleFocusIn);document.removeEventListener("keydown",this.handleKeyDown)}isActive(){return s[s.length-1]===this.element}handleFocusIn(s){const i=s.composedPath();if(this.isActive()&&!i.includes(this.element)){const s=t(this.element);const i=this.tabDirection==="backward"?s.length-1:0;s[i].focus({preventScroll:true})}}handleKeyDown(t){if(t.key==="Tab"&&t.shiftKey){this.tabDirection="backward";setTimeout((()=>this.tabDirection="forward"))}}}export{i as M};
-//# sourceMappingURL=p-8c8963f6.js.map
+import{g as t}from"./p-9a385481.js";let s=[];class i{constructor(t){this.tabDirection="forward";this.element=t;this.handleFocusIn=this.handleFocusIn.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}activate(){s.push(this.element);document.addEventListener("focusin",this.handleFocusIn);document.addEventListener("keydown",this.handleKeyDown)}deactivate(){s=s.filter((t=>t!==this.element));document.removeEventListener("focusin",this.handleFocusIn);document.removeEventListener("keydown",this.handleKeyDown)}isActive(){return s[s.length-1]===this.element}handleFocusIn(s){const i=s.composedPath();if(this.isActive()&&!i.includes(this.element)){const s=t(this.element);const i=this.tabDirection==="backward"?s.length-1:0;s[i].focus({preventScroll:true})}}handleKeyDown(t){if(t.key==="Tab"&&t.shiftKey){this.tabDirection="backward";setTimeout((()=>this.tabDirection="forward"))}}}export{i as M};
+//# sourceMappingURL=p-cb79d1ec.js.map

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as i,c as t,h as a,e as o,g as n}from"./p-ab5813a7.js";const e='.sc-nano-file-upload-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-height:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0, 116, 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, #fee8de);--drop-border--invalid:var(--nano-color-danger-rgb, 239, 65, 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1em);--btn-padding-end:var(--nano-btn-padding-end, 1em)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{display:none}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) / 2);margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__more.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;width:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg);color:var(--drop-text);min-height:var(--drop-height);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0.9em;position:relative;-webkit-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:"";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgba(var(--drop-border-tint), 0.5);border-style:dashed;top:0;bottom:0;left:0;right:0;-webkit-transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgba(var(--drop-border--invalid), 1)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{top:5px;bottom:5px;left:5px;right:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgba(var(--drop-border-tint), 1);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;top:-4px}.file-upload__list-item.sc-nano-file-upload{width:100%;margin:0 0 2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:hideListItem 0.3s ease-in-out forwards;animation:hideListItem 0.3s ease-in-out forwards}@-webkit-keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{-webkit-animation:showListItem 0.3s ease-in-out forwards;animation:showListItem 0.3s ease-in-out forwards}@-webkit-keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:white;border-radius:5px;padding:5px 5px;margin-right:2px;display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:white;border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgba(var(--drop-border--invalid), 1)}.file-upload__button.sc-nano-file-upload{margin:0;padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;-webkit-transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;padding-left:var(--nano-btn-padding-start, 1rem);padding-right:var(--nano-btn-padding-end, 1rem);padding-top:var(--nano-btn-padding-top, 0.5rem);padding-bottom:var(--nano-btn-padding-bottom, 0.5rem);-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5rem);font-weight:500;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-width:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--nano-btn-padding-start, 1rem);padding-inline-start:var(--nano-btn-padding-start, 1rem);-webkit-padding-end:var(--nano-btn-padding-end, 1rem);padding-inline-end:var(--nano-btn-padding-end, 1rem)}}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0.5rem;margin-right:0;font-size:var(--nano-btn-icon-size, 1rem);vertical-align:middle;margin-top:-0.188rem;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0;margin-right:0.5rem}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}}.file-upload__button.sc-nano-file-upload:hover:not(.file-upload__button--disabled){-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){-webkit-box-shadow:none;box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{-webkit-box-shadow:none;box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0.4rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.4rem;margin-inline-start:0.4rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}';let l=0;let s=()=>new DataTransfer;try{s()}catch(d){try{s=()=>new ClipboardEvent("").clipboardData;s()}catch(p){s=null}}let r=class{constructor(o){i(this,o);this.nanoChange=t(this,"nanoChange",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoValidate=t(this,"nanoValidate",7);this.fileInputId=`nano-file-upload-${l++}`;this.canChangeFileList=!!s;this.removeFiles=[];this.errorMessage=null;this.isDragging=false;this.fileList=[];this.maxFileSize=1;this.maxFiles=1;this.placeholder="Choose a file...";this.hideLabel=false;this.required=false;this.disabled=false;this.clearInput=false;this.showInlineError=true;this.validateOn="submit";this._invalid=false;this.onClearClick=()=>{this.value=""};this.onBlur=()=>{this.hasFocus=false;if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.validate=i=>{this.errorMessage=null;this.inputEl.setCustomValidity("");let t;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.inputEl.validity.valid){if(this.showInlineError)this.errorMessage=this.inputEl.validationMessage}else{this.fileList.forEach((i=>{t=null;if(!this.checkFileSize(i.file.size)){t="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb"}else if(!this.checkFileType(i.file.type))t=`File type is not allowed (${this.accept})`;if(!this.errorMessage&&t)this.errorMessage=t;i.validationMessage=t;i.valid=!t}));if(this.fileList.length>this.maxFiles)this.errorMessage=`Maxinum number of files exceeded (${this.maxFiles})`}if(!!this.errorMessage){this._invalid=true;this.inputEl.setCustomValidity(this.errorMessage)}else{this._invalid=false}this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:i})};this.onInvalid=i=>{this.validate(i);if(this.showInlineError)i.preventDefault()};this.onFileChoose=i=>{const t=i.target.files;if(t&&t.length)this.addNewFiles(i.target.files)};this.onFileRemoveFileClick=(i,t)=>{if(!this.canChangeFileList)return;this.removeFiles.push(t);i.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active")};this.onFileRemoveAnim=()=>{if(!this.canChangeFileList||!this.removeFiles.length)return;this.fileList=this.fileList.filter((i=>!this.removeFiles.find((t=>t===i))));this.removeFiles=[]};this.onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};this.onDragStop=i=>{i.preventDefault();i.stopPropagation();this.isDragging=false};this.onDragStart=i=>{i.preventDefault();i.stopPropagation();this.isDragging=true};this.onDrop=i=>{this.onDragStop(i);if(i.dataTransfer.files&&i.dataTransfer.files.length)this.addNewFiles(i.dataTransfer.files)};this.FileUploadInput=(i,t)=>{const o=this.fileInputId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[a("div",{class:"file-upload__"+i+"-wrap"},a("label",{class:`file-upload__`+i,htmlFor:this.fileInputId,id:o,onDrop:i=>{this.onDrop(i);this.onDragStop(i)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},a("div",{class:`file-upload__label ${this.hideLabel||i!=="drop"?"visually-hide":""}`},this.label&&this.label,!this.label&&this.hasLabelSlot&&a("slot",{name:"label"})),i==="drop"&&a("div",{class:"file-upload__drop-area"},"Drap and drop or ",a("span",null,"browse")),i==="btn"&&a("div",{class:`file-upload__button button--keyline button--icon-start ${this.hasFocus?"button--focus":""}`},a("div",{class:`file-upload__btn-content`},a("nano-icon",{name:"regular/cloud-upload"}),a("span",null,!!this.fileList.length?this.fileList[0].file.name:this.placeholder),!!this.value&&this.clearInput&&!this.disabled&&a("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"-1",onClick:this.onClearClick},a("nano-icon",{name:"light/times"})))),a("input",{"aria-labelledby":o+" "+n+" "+t,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?undefined:this.name,ref:i=>{if(this.canChangeFileList){this.publicInputEl=i;return}this.inputEl=i},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),a("input",{name:!this.canChangeFileList?undefined:this.name,ref:i=>{if(!this.canChangeFileList)return;this.inputEl=i},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:true,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?a("div",{class:"file-upload__more",id:n},this.showInlineError?a("div",{class:"file-upload__error"},this.errorMessage):"",a("div",{class:"file-upload__help"},a("slot",{name:"helper"}))):""]};this.button=()=>this.FileUploadInput("btn");this.dropArea=()=>{const i=this.fileInputId+"-list";return[this.FileUploadInput("drop",i),a("output",{class:"file-upload__list-wrap",id:i},!!this.fileList&&this.fileList.length>0&&a("ul",{class:"file-upload__list list"},this.fileList.map((i=>a("li",{key:i.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:i=>this.onFileRemoveAnim()},a("span",{class:"list-title"},i.file.name),!i.valid&&a("nano-tooltip",{content:i.validationMessage,placement:"left"},a("nano-icon-button",{class:"list-button list-error",iconName:"light/exclamation-triangle",label:"File error"})),this.canChangeFileList&&a("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:i.location}),this.canChangeFileList&&a("nano-icon-button",{onClick:t=>this.onFileRemoveFileClick(t,i),class:"list-button list-button--remove",iconName:"light/times",label:"Remove file"}))))))]}}fileListChange(){if(this.canChangeFileList){this.publicInputEl.value="";this.inputEl.files=this.arrToFileList(this.fileList.map((i=>i.file)));this.nanoChange.emit({value:this.value,files:this.files})}}shouldValidate(){if(!this.inputEl)return;setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}get invalid(){return this._invalid}get files(){return this.inputEl?Array.from(this.inputEl.files).map((i=>{i.objectURL=URL.createObjectURL(i);return i})):[]}get value(){return this.inputEl?this.inputEl.value:""}set value(i){if(i===""&&this.inputEl){this.fileList=[];this.inputEl.value=""}}async reportValidity(i){if(i)this.validate();return{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){if(this.inputEl)this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(i){if(this.inputEl){this.inputEl.setCustomValidity(i);this.validate()}}globalClickHandler(i){if(!this.hasFocus)return;if(i.composedPath().every((i=>i!==this.host)))this.onBlur()}globalKeydownHandler(i){if(!this.hasFocus||i.key!=="Tab")return;if(i.target!==this.inputEl)this.onBlur()}arrToFileList(i){const t=s();for(var a=0,o=i.length;a<o;a++)t.items.add(i[a]);return t.files}checkFileSize(i){return i/1e6<=this.maxFileSize}checkFileType(i){if(!this.accept)return true;return this.accept.match(i)&&this.accept.match(i).length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const i=this.mo=new MutationObserver((()=>this.processSlottedContent()));i.observe(this.host,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(i){const t=Array.from(i).map((i=>({file:i,location:URL.createObjectURL(i),valid:true,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const i=t.filter((i=>!this.fileList.find((t=>t.file.name===i.file.name))));this.fileList=[...this.fileList,...i]}else this.fileList=t}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){return a(o,null,a("div",{class:{"file-upload":true,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":this._invalid}},this.maxFiles>1?a(this.dropArea,null):a(this.button,null)))}get host(){return n(this)}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"]}}};r.style=e;export{r as nano_file_upload};
+//# sourceMappingURL=p-d6569144.entry.js.map