@nanoporetech-digital/components 1.13.13 → 1.13.14

package/dist/esm-es5/nano-menu-drawer.entry.js.map

@@ -1 +0,0 @@
-{"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","hostRef","_this","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","prototype","cancelNavItemEvents","detail","secondaryMenu","stopPropagation","openChange","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","widthChange","moveItemsToGlobalNav","hideHeightChange","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","componentWillLoad","closestElement","addEventListener","setTimeout","localState","getItem","componentDidLoad","disconnectedCallback","removeEventListener","debounceResize","render","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\n  ::slotted(*),\n  * {\n    --global-nav-height: 61px;\n\n    --padding-top: 13px;\n    --padding-end: 13px;\n    --padding-bottom: 13px;\n    --padding-start: 13px;\n\n    --secondary-padding-end: 13px;\n    --secondary-padding-bottom: 13px;\n    --secondary-padding-start: 13px;\n    --secondary-padding-top: 61px;\n\n    --icon-size: 19px;\n    --font-size: 11px;\n\n    --bg-color: #001a21;\n    --bg-color-hover: rgba(28, 62, 72, .8);\n    --bg-color-selected: #274048;\n    --bg-color-open: #274048;\n    --bg-color-focus: rgba(28, 62, 72, .8);\n    --focus-outline: none;\n\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\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, .8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, .8);\n  --focus-outline: none;\n\n  --content-color: #{$color-white};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\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    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\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 .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: var(--padding-top) auto var(--padding-bottom) 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: .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/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  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n    this.globalNav.addEventListener('nanoIsReady', () => {\n      setTimeout(() => {\n        this.attachIO();\n        this.openChange();\n        this.onWindowResize();\n        this.isLoading = false;\n      }, 500);\n    });\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/esm-es5/nano-menu.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,o){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,i){function a(e){try{c(o.next(e))}catch(t){i(t)}}function s(e){try{c(o["throw"](e))}catch(t){i(t)}}function c(e){e.done?n(e.value):r(e.value).then(a,s)}c((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return c([e,t])}}function c(a){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,r&&(i=a[0]&2?r["return"]:a[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;if(r=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){n.label=a[1];break}if(a[0]===6&&n.label<i[1]){n.label=i[1];i=a;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(a);break}if(i[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(s){a=[6,s];r=0}finally{o=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-7c54a0d9.js";import{g as getDirectChildren}from"./dom-ae168a2d.js";import{s as scrollIntoView}from"./scroll-4162ee24.js";import{g as getTextContent}from"./slot-2f257a82.js";var menuCss=".sc-nano-menu-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-menu,*.sc-nano-menu::before,*.sc-nano-menu::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-menu:export{screen:1000}.sc-nano-menu-h.legacy .sc-nano-menu-s>*,.legacy.sc-nano-menu-h *.sc-nano-menu{--padding-start:10px;--padding-end:10px;--padding-top:10px;--padding-bottom:10px;--secondary-padding-top:10px;--secondary-padding-bottom:10px;--secondary-bg-color:#fff;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#0084a9;--color-selected:#0084a9;--color-focus:#0084a9;--focus-outline:none;display:block}.sc-nano-menu-h{--padding-start:10px;--padding-end:10px;--padding-top:10px;--padding-bottom:10px;--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#0084a9;--color-selected:#0084a9;--color-focus:#0084a9;--focus-outline:none;display:block}.menu.sc-nano-menu{-ms-scroll-chaining:none;overscroll-behavior:none;font-size:0.9em;min-width:var(--width);position:relative}.menu.sc-nano-menu:focus{outline:none}.menu.sc-nano-menu-s>*:not(nano-nav-item){margin-left:var(--padding-start);margin-right:var(--padding-end);margin-top:var(--padding-top);margin-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.menu.sc-nano-menu-s>*:not(nano-nav-item){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:var(--padding-end);margin-inline-end:var(--padding-end)}}";var CANSHADOW=!!document.head.attachShadow;var Menu=function(){function e(e){var t=this;registerInstance(this,e);this.nanoFocus=createEvent(this,"nanoFocus",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.nanoSelect=createEvent(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this.handleFocus=function(){var e=t.getActiveItem();if(!e){t.setActiveItem(t.getItems()[0])}t.nanoFocus.emit()};this.handleBlur=function(){};this.handleClick=function(e){var n=e.target;var o=n.closest("nano-nav-item");if(o&&!o.disabled){t.nanoSelect.emit({item:o})}};this.handleKeyDown=function(e){clearTimeout(t.ignoreMouseTimeout);t.ignoreMouseTimeout=setTimeout((function(){return t.ignoreMouseEvents=false}),500);t.ignoreMouseEvents=true;switch(e.key){case" ":var n=t.getActiveItem();n.click();break;case"ArrowDown":case"ArrowUp":case"Home":case"End":var o=t.getItems();var r=t.getActiveItem();var i=o.indexOf(r);if(o.length){e.preventDefault();if(e.key==="ArrowDown"){i++}else if(e.key==="ArrowUp"){i--}else if(e.key==="Home"){i=0}else if(e.key==="End"){i=o.length-1}if(i<0)i=0;if(i>o.length-1)i=o.length-1;t.setActiveItem(o[i]);t.scrollItemIntoView(o[i]);return}break}if(e.key===" "||/^[\d\w]$/i.test(e.key)){clearTimeout(t.typeToSelectTimeout);t.typeToSelectTimeout=setTimeout((function(){return t.typeToSelect=""}),750);t.typeToSelect+=e.key;var o=t.getItems();for(var a=0,s=o;a<s.length;a++){var c=s[a];var u=c.shadowRoot.querySelector("slot:not([name])");var l=getTextContent(u).toLowerCase().trim();if(l.substring(0,t.typeToSelect.length)===t.typeToSelect){c.setFocus();break}}}};this.handleMouseOver=function(e){var n=e.target;var o=n.closest("nano-nav-item");if(o&&!t.ignoreMouseEvents){t.setActiveItem(o)}}}e.prototype.connectedCallback=function(){};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menu.focus();return[2]}))}))};e.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menu.blur();return[2]}))}))};e.prototype.getItems=function(){var e;var t=this.el.querySelectorAll("nano-nav-item.secondary-open");if(t.length){var n=t[t.length-1];e=Array.from(n.querySelectorAll("nano-nav-item"))}else{e=getDirectChildren(this.el,"nano-nav-item")}return e.filter((function(e){return!e.disabled}))};e.prototype.getActiveItem=function(){return this.el.querySelector("nano-nav-item.has-focus")};e.prototype.setActiveItem=function(e){if(e)e.setFocus();else this.el.setFocus()};e.prototype.scrollItemIntoView=function(e){if(e){scrollIntoView(e,this.menu)}};e.prototype.render=function(){var e=this;return h(Host,{class:{legacy:!CANSHADOW}},h("nav",{ref:function(t){return e.menu=t},part:"base",class:"menu",tabIndex:-1,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver},h("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();Menu.style=menuCss;export{Menu as nano_menu};
-//# sourceMappingURL=nano-menu.entry.js.map

package/dist/esm-es5/nano-menu.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/menu/menu.scss?tag=nano-menu&encapsulation=scoped","src/components/menu/menu.tsx"],"names":["menuCss","CANSHADOW","document","head","attachShadow","Menu","class_1","hostRef","_this","this","ignoreMouseEvents","typeToSelect","handleFocus","item","getActiveItem","setActiveItem","getItems","nanoFocus","emit","handleBlur","handleClick","event","target","closest","disabled","nanoSelect","handleKeyDown","clearTimeout","ignoreMouseTimeout","setTimeout","key","ele","click","items","selectedItem","index","indexOf","length","preventDefault","scrollItemIntoView","test","typeToSelectTimeout","_i","items_1","slot","shadowRoot","querySelector","label","getTextContent","toLowerCase","trim","substring","setFocus","handleMouseOver","prototype","connectedCallback","menu","focus","removeFocus","blur","opened","el","querySelectorAll","ctx","Array","from","getDirectChildren","filter","scrollIntoView","render","h","Host","class","legacy","ref","part","tabIndex","onClick","onFocus","onBlur","onKeyDown","onMouseOver"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host(.legacy) {\n\n  ::slotted(*),\n  * {\n    --padding-start: 10px;\n    --padding-end: 10px;\n    --padding-top: 10px;\n    --padding-bottom: 10px;\n\n    --secondary-padding-top: 10px;\n    --secondary-padding-bottom: 10px;\n    --secondary-bg-color: #{$color-white};\n\n    --bg-color-hover: #{$color-blue--faded};\n    --bg-color-focus: #{$color-blue--faded};\n    --bg-color-selected: #{$color-blue--faded};\n\n    --color-hover: #{$color-blue};\n    --color-selected: #{$color-blue};\n    --color-focus: #{$color-blue};\n\n    --focus-outline: none;\n    display: block;\n  }\n}\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n  */\n\n  --padding-start: 10px;\n  --padding-end: 10px;\n  --padding-top: 10px;\n  --padding-bottom: 10px;\n\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n\n  --bg-color-hover: #{$color-blue--faded};\n  --bg-color-focus: #{$color-blue--faded};\n  --bg-color-selected: #{$color-blue--faded};\n\n  --color-hover: #{$color-blue};\n  --color-selected: #{$color-blue};\n  --color-focus: #{$color-blue};\n\n  --focus-outline: none;\n  display: block;\n}\n\n.menu {\n  overscroll-behavior: none;\n  font-size: .9em;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.menu::slotted(*:not(nano-nav-item)) {\n  @include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  scrollIntoView,\n  getDirectChildren,\n} from '../../utils/utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  scoped: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter;\n\n  connectedCallback() {}\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    this.menu.focus();\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    this.menu.blur();\n  }\n\n  private getItems() {\n    let items: HTMLNanoNavItemElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item'\n      ) as HTMLNanoNavItemElement[];\n    }\n    return items.filter((el) => !el.disabled);\n  }\n\n  private getActiveItem() {\n    return this.el.querySelector(\n      'nano-nav-item.has-focus'\n    ) as HTMLNanoNavItemElement;\n  }\n\n  private setActiveItem(item?: HTMLNanoNavItemElement) {\n    if (item) item.setFocus();\n    else this.el.setFocus();\n  }\n\n  private scrollItemIntoView(item: HTMLNanoNavItemElement) {\n    if (item) {\n      scrollIntoView(item, this.menu);\n    }\n  }\n\n  private handleFocus = () => {\n    const item = this.getActiveItem();\n    if (!item) {\n      this.setActiveItem(this.getItems()[0]);\n    }\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    //this.setActiveItem();\n    // this.nanoBlur.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit({ item });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        let ele = this.getActiveItem();\n        ele.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems();\n        const selectedItem = this.getActiveItem();\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home') {\n            index = 0;\n          } else if (event.key === 'End') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = 0;\n          if (index > items.length - 1) index = items.length - 1;\n\n          this.setActiveItem(items[index]);\n          this.scrollItemIntoView(items[index]);\n\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[\\d\\w]$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems();\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          item.setFocus();\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveItem(item);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <nav\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class=\"menu\"\n          tabIndex={-1}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n        >\n          <slot />\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-nav-item_2.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,a){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function r(t){try{l(a.next(t))}catch(e){o(e)}}function s(t){try{l(a["throw"](t))}catch(e){o(e)}}function l(t){t.done?n(t.value):i(t.value).then(r,s)}l((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return l([t,e])}}function l(r){if(a)throw new TypeError("Generator is already executing.");while(n)try{if(a=1,i&&(o=r[0]&2?i["return"]:r[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,r[1])).done)return o;if(i=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;i=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=e.call(t,n)}catch(s){r=[6,s];i=0}finally{a=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,a=e.length,i=t.length;n<a;n++,i++)t[i]=e[n];return t};import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-7c54a0d9.js";import{d as displayTransition}from"./utils-fd1ada22.js";import{b as getSiblings,g as getDirectChildren,c as closestElement}from"./dom-ae168a2d.js";import{a as debounceEvent}from"./throttle-e3c852aa.js";import{c as createColorClasses}from"./theme-f5a16c79.js";import{P as Popover}from"./popover-05f61b5f.js";var navItemCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}: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}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-global-nav-bar.has-secondary) .secondary-menu:focus{outline:none}: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}';var NavItem=function(){function t(t){var e=this;registerInstance(this,t);this.nanoClose=createEvent(this,"nanoClose",7);this.nanoOpen=createEvent(this,"nanoOpen",7);this.nanoOpening=createEvent(this,"nanoOpening",7);this.nanoClosing=createEvent(this,"nanoClosing",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.nanoFocus=createEvent(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=function(){};this.closeOnBlur=true;this.closeSecondary=function(){return __awaiter(e,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return[2];this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});return[4,displayTransition(this.secondaryDiv,"open",false)];case 1:t=e.sent();this.didOpen=t!=="hidden";return[2]}}))}))};this.openSecondary=function(){return __awaiter(e,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return[2]}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return[2];this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});return[4,displayTransition(this.secondaryDiv,"open",true)];case 1:t=e.sent();this.didOpen=t==="shown";return[2]}}))}))};this.toggleSecondary=function(){if(!e.hasSecondarySlot)return;if(e.didOpen)e.closeSecondary();else e.openSecondary()};this.handleFocus=function(){e.hasFocus=true;if(e.href&&!e.animating&&e.hasSecondarySlot)e.openSecondary();e.nanoFocus.emit()};this.handleHostBlur=function(){if(e.animating)return;e.el.removeAttribute("tabindex");e.hasFocus=false;e.nanoBlur.emit()};this.handleHostClick=function(t){if(!e.hasAnchorEle)return;var n=t.target.closest("a, button");if(!n)e.btn.click()};this.handleMouseEnter=function(){return __awaiter(e,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(n){if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return[2];t=0;if(getSiblings(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((function(){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.openSecondary()];case 1:return[2,t.sent()]}}))}))}),t);this.animating=false;return[2]}))}))};this.handleMouseLeave=function(){if(!e.href)return;clearTimeout(e.waitShow);e.fromHover=true;e.animating=true;e.waitHide=window.setTimeout((function(){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.closeSecondary()];case 1:return[2,t.sent()]}}))}))}),300);e.animating=false};this.handleClick=function(){e.fromHover=false;if(e.hasSecondarySlot)e.toggleSecondary();else e.el.querySelector("*").click()};this.blur=function(t){if(!e.didOpen||e.animating)return;if(!e.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===e.el||t.relatedTarget===e.btn||e.foundThisNavEle(t.relatedTarget)){e.secondaryDiv.focus({preventScroll:true});return}}e.btn.removeEventListener("focusout",e.blur);e.secondaryDiv.removeEventListener("focusout",e.blur);window.removeEventListener("blur",e.blur);e.didBlur=true;e.open=false;if(!t.relatedTarget)setTimeout((function(){e.el.focus({preventScroll:true})}),50)}}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.btn)return[2];this.btn.focus();return[2]}))}))};t.prototype.openChange=function(){this.open?this.openSecondary():this.closeSecondary()};t.prototype.didOpenChange=function(){var t=this;if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((function(){if(!t.fromHover&&!t.didBlur)t.btn.focus({preventScroll:true});t.nanoClose.emit({secondaryMenu:t.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){var e=new window.IntersectionObserver((function(n){if(n[0].boundingClientRect.top<0){t.secondaryDiv.scrollIntoView({behavior:"smooth"})}e.disconnect()}),{threshold:1});e.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})}}};t.prototype.foundThisNavEle=function(t){var e=t.closest("nano-nav-item");e=e===t?t.parentElement.closest("nano-nav-item"):e;if(!e)return false;if(e===this.el)return true;return this.foundThisNavEle(e)};t.prototype.componentWillLoad=function(){var t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;var e=getDirectChildren(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}};t.prototype.connectedCallback=function(){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")};t.prototype.render=function(){var t=this;return h(Host,{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},h("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&h("a",{target:this.target,ref:function(e){return t.btn=e},href:this.href,onFocus:this.handleFocus},h("slot",{name:"icon-start"}),h("span",{class:"text"},h("slot",null)),h("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&h("button",{ref:function(e){return t.btn=e},onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},h("slot",{name:"icon-start"}),h("span",{class:"text"},h("slot",null)),h("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&h("div",{class:"link"},h("slot",{name:"icon-start"}),h("slot",null),h("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&h("div",{class:"secondary-menu",ref:function(e){return t.secondaryDiv=e},tabindex:"-1"},h("div",{class:"secondary-menu-content"},h("slot",{name:"secondary"})),h("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openChange"],didOpen:["didOpenChange"]}},enumerable:false,configurable:true});return t}();NavItem.style=navItemCss;var selectCss='.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}.sc-nano-select:export{screen:1000}.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(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 132, 169));--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, #687576);--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, #2696b6));--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}.has-focus.sc-nano-select-h .select.sc-nano-select{z-index:10}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(--input-text-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;pointer-events:none}@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(-110%);transform:translateY(-110%);font-size:0.9em}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select,.has-value.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-75%);transform:translateY(-75%);font-size:0.9em}.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{top:1.5em}.placeholder-as-label.sc-nano-select~.native-select-wrap.sc-nano-select{font-size:1.1em}.label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-left:0;padding-right:0;padding-top:0;padding-bottom:var(--padding-bottom);line-height:1}.label.sc-nano-select .placeholder.sc-nano-select{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}.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;position:relative;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom)}@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{color:var(--help-msg-color);font-style:italic}[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}.select.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;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 .select.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 .select.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 .select.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-select-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.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)}}.native-select.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;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-box-sizing:border-box;box-sizing:border-box;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;line-height:2.5em;min-height:2.5em;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-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)}}.legacy.sc-nano-select-h .native-select.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-select.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.has-float-label.sc-nano-select-h .native-select.sc-nano-select{opacity:0;padding-top:1.8em}.has-value.has-float-label.sc-nano-select-h .native-select.sc-nano-select{opacity:1}.native-select.sc-nano-select:-webkit-autofill{background-color:transparent}.native-select.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-select.sc-nano-select::-ms-clear{display:none}.native-select.sc-nano-select::-ms-expand{display:none}.native-select[disabled].sc-nano-select{opacity:0.4}.has-multiple.sc-nano-select-h .native-select.sc-nano-select{display:none}.native-select.sc-nano-select option.sc-nano-select{color:black}.multi-wrap.sc-nano-select{padding-left:0;padding-right:calc(1.9em + var(--padding-end));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%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-wrap.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(1.9em + var(--padding-end));padding-inline-end:calc(1.9em + var(--padding-end))}}.has-clr-btn.sc-nano-select-h .multi-wrap.sc-nano-select{padding-left:0;padding-right:calc(2.6em + (var(--padding-end)*2) + (var(--padding-end)*2));padding-top:0;padding-bottom:calc(var(--padding-bottom)/2)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-clr-btn.sc-nano-select-h .multi-wrap.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(2.6em + (var(--padding-end)*2) + (var(--padding-end)*2));padding-inline-end:calc(2.6em + (var(--padding-end)*2) + (var(--padding-end)*2))}}.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.8em - 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-select-box.sc-nano-select{position:absolute;background:var(--nano-layer-bg, #fff);min-width:calc(100% + (var(--input-border-width) * 2));z-index:var(--nano-layer-index-dropdown, 300);margin:0;font-size:1.15em;line-height:1.4;max-height:50vh;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));padding:var(--padding-top) 0 var(--padding-bottom);border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)))}.multi-select-box--open.sc-nano-select{opacity:1}.multi-select-box.sc-nano-select li.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-size:var(--input-font-size);cursor:pointer;list-style:none;color:var(--input-text-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-select-box.sc-nano-select li.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)}}.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select{color:black}.multi-select-box.sc-nano-select li.sc-nano-select:hover,.multi-select-box.sc-nano-select li.sc-nano-select:focus{color:var(--color--focus-contrast);outline:none;background:rgba(var(--multi-input-value-bg), 0.2)}.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select:hover,.nano-color.sc-nano-select-h .multi-select-box.sc-nano-select li.sc-nano-select:focus{background:rgba(var(--nano-color-base-rgb), 0.2)}.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:2px 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)}.select-down-icon.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);color:var(--input-text-color);font-size:1.4em;right:0;position:absolute;top:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-down-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)}}.is-invalid.sc-nano-select-h .select-down-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.rtl.sc-nano-select-h .select-down-icon.sc-nano-select{right:unset;left:0}.has-multiple.sc-nano-select-h .select-down-icon.sc-nano-select{pointer-events:all}.masked.sc-nano-select-h .select-down-icon.sc-nano-select{position:relative}.select-clear-icon.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-size:1.4em;color:var(--clear-btn-color);border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-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;position:absolute;top:0;height:100%;right:calc(1.4em + var(--padding-end))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-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)}}.select-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.rtl.sc-nano-select-h .select-clear-icon.sc-nano-select{right:unset;left:calc(1.4em + var(--padding-end))}.is-invalid.sc-nano-select-h .select-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .select-clear-icon.sc-nano-select{visibility:visible}.select-clear-icon.sc-nano-select nano-icon.sc-nano-select{--color:inherit}.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}';var Select=function(){function t(t){var e=this;registerInstance(this,t);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.nanoFocus=createEvent(this,"nanoFocus",7);this.nanoDidLoad=createEvent(this,"nanoDidLoad",7);this.nanoDidUnload=createEvent(this,"nanoDidUnload",7);this.nanoSearchChange=createEvent(this,"nanoSearchChange",7);this.nanoValidate=createEvent(this,"nanoValidate",7);this.listItems=[];this.valueItems=[];this.selectId="nano-select-"+selectIds++;this.rtl=false;this.currLiIndex=-1;this.inputSearchVal="";this.watchValue=true;this.onInit=true;this.currInsertIndex=0;this.availOpts=[];this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.listOpen=false;this.isLegacy="registerElement"in document;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasIconSlot=false;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.clearSelect=false;this.mask=false;this.debounce=0;this.native=true;this.customValidate=function(){e.nativeSelect.setCustomValidity("");if(e.required&&!e.getNativeValue().length){e.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(e.getNativeValue().length&&!e.allowCustomValues&&!e.isValidValues()){e.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(e.max&&e.getNativeValue().length>e.max){e.nativeSelect.setCustomValidity("Only up to "+e.max+" values are allowed.");return true}if(e.min&&e.getNativeValue().length<e.min){e.nativeSelect.setCustomValidity("You must select a minimum of "+e.min+" values.");return true}return false};this.showInlineValidation=function(t){if(e.validateOn==="submitThenDirty")e.validateOn="dirty";e.invalid=false;e.showErrorMsg=false;e.errorMessage="";if(!e.nativeSelect.validity.valid){e.errorMessage=e.nativeSelect.validationMessage;e.invalid=true;e.showErrorMsg=true}e.nanoValidate.emit({isValid:!e.invalid,errorMessage:e.errorMessage,originalEvent:t})};this.handleInvalid=function(t){e.invalid=true;if(e.validateOn==="submit")e.invalid=e.showErrorMsg=e.customValidate();if(e.showInlineError)t.preventDefault();setTimeout((function(n){return e.showInlineValidation(t)}),20)};this.onChange=function(t){if(!e.readonly&&!e.disabled&&t){t.preventDefault();t.stopPropagation()}e.value=e.getNativeValue()};this.onBlur=function(){if(e.multiple){e.currLiIndex=-1;document.removeEventListener("keydown",e.handleDocumentKeyDown);document.removeEventListener("mousedown",e.handleDocumentMouseDown)}e.hasFocus=false;setTimeout((function(){if(e.validateOn==="dirty"&&!e.listOpen&&!e.hasFocus)e.showInlineValidation()}),20);e.nanoBlur.emit()};this.onFocus=function(){if(e.multiple){e.currLiIndex=-1;document.addEventListener("keydown",e.handleDocumentKeyDown);document.addEventListener("mousedown",e.handleDocumentMouseDown);e.openList()}e.hasFocus=true;e.nanoFocus.emit()};this.clearSelectValue=function(t){if(e.clearSelect&&!e.readonly&&!e.disabled&&t){t.preventDefault();t.stopPropagation()}if(e.multiple){e.value=[];var n=e.nativeSelect.querySelectorAll("option");if(n.length)n.forEach((function(t){return t.remove()}));e.currInsertIndex=-1;e.setAvailOpts()}else e.value="";e.onChange()};this.onClick=function(){e.setFocus();e.openList()};this.onMultiInputBlur=function(){if(e.allowCustomValues)return;e.inputSearchVal="";e.setAvailOpts()};this.onDragStart=function(t){var n=t.target;e.dragVal=n.dataset.value};this.onDragEnd=function(t){e.dragVal=null;t.preventDefault()};this.onDragLeave=function(t){var n=t.target;var a=n.dataset&&n.dataset.value?n.dataset.value:null;if(!a||e.dragVal===a||!e.value.includes(e.dragVal)){t.preventDefault();return}var i=e.value.indexOf(a);var o=e.value.indexOf(e.dragVal);var r=e.value;var s=r[i];r[i]=r[o];r[o]=s;e.value=__spreadArray([],r)};this.onMultiInput=function(t){e.inputSearchVal=t.target.value;e.setAvailOpts();e.openList();e.nanoSearchChange.emit({value:t.target.value})};this.onOptFocus=function(t){var n=e.getActiveOpt();if(n)n.classList.remove("has-focus");t.target.classList.add("has-focus")};this.onHostClick=function(){setTimeout((function(t){if(!e.multiple||e.hasFocus)return;e.setFocus()}),20)};this.handleDocumentMouseDown=function(t){var n=t.target;if(closestElement(e.el.tagName.toLowerCase(),n)!==e.el){e.listOpen=false;e.onBlur()}};this.handleDocumentKeyDown=function(t){if(!e.multiple)return;if(!e.inputSearchVal){var n=void 0;switch(t.key){case"Backspace":if(e.multiInput.previousElementSibling)n=e.multiInput.previousElementSibling;else break;e.removeValue(n.dataset.value||null);break;case"Delete":if(e.multiInput.nextElementSibling)n=e.multiInput.nextElementSibling;else break;e.removeValue(n.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!e.value.length)break;if(t.key==="ArrowLeft"&&e.multiInput.previousSibling)e.currInsertIndex--;if(t.key==="ArrowRight"&&e.multiInput.nextSibling)e.currInsertIndex++;setTimeout((function(){e.multiInput.focus()}),20);t.preventDefault();break}}if(e.hasFocus&&!e.listOpen&&t.key==="ArrowDown"){e.openList();e.currLiIndex=-1}if(e.hasFocus&&t.key==="Tab"){setTimeout((function(){if(document.activeElement&&closestElement(e.el.tagName.toLowerCase(),document.activeElement)!==e.el){e.listOpen=false;e.onBlur();return}}))}if(e.listOpen){var a=e.getActiveOpt();var i=e.listItems.indexOf(a)||e.currLiIndex;switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();if(t.key==="ArrowDown")i++;else if(t.key==="ArrowUp")i--;if(i<0){e.currLiIndex=0;e.multiInput.focus();return}var o=e.listItems[i]?i:e.currLiIndex;setTimeout((function(){e.listItems[o].focus();e.currLiIndex=o}),20);return;case"Enter":case" ":if(e.listItems[e.currLiIndex]){e.addValue(e.listItems[e.currLiIndex].dataset.value);t.preventDefault()}return;case"Escape":e.listOpen=false;return}}if(e.currLiIndex>-1)t.preventDefault()}}t.prototype.debounceChanged=function(){this.nanoSearchChange=debounceEvent(this.nanoSearchChange,this.debounce)};t.prototype.shouldValidate=function(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this.invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()};t.prototype.valueChanged=function(){var t=this;if(!this.watchValue)return;if(this.multiple){if(typeof this.value==="string"&&!!this.value.length)this.value=this.value.split(",");if(this.value===null||typeof this.value==="string"&&!this.value.length)this.value=[];if(this.currInsertIndex>this.value.length-1)this.currInsertIndex=this.value.length-1}else if(typeof this.value!=="string"&&this.value&&this.value[0])this.value=this.value[0];this.setNativeValue();this.setAvailOpts();setTimeout((function(e){return t.shouldValidate()}),20);this.nanoChange.emit({value:this.value});if(this.onInit)return};t.prototype.optionsChanged=function(){this.setAvailOpts();if(this.hasFocus)this.openList()};t.prototype.multiChange=function(){this.switchValue();if(this.multiple)this.setupMulti();else if(this.popover)this.popover.destroy()};t.prototype.setupMulti=function(){var t=this;setTimeout((function(){t.setAvailOpts();t.popover=new Popover(t.selectWrap,t.multiList,{placement:"bottom-start",skidding:0,distance:0,onTransitionEnd:function(){if(!t.listOpen){t.multiList.scrollTop=0}}})}),20)};t.prototype.listOpenChange=function(){if(this.listOpen)this.popover.show();else this.popover.hide()};t.prototype.reportValidity=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(t)this.showInlineValidation();return[2,{isValid:!this.invalid,errorMessage:this.errorMessage}]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.nativeSelect&&!this.multiple)this.nativeSelect.focus();else if(this.multiInput)this.multiInput.focus();return[2]}))}))};t.prototype.getSelectElement=function(){return Promise.resolve(this.nativeSelect)};t.prototype.showError=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeSelect){this.nativeSelect.setCustomValidity(t);this.nativeSelect.reportValidity()}return[2]}))}))};t.prototype.setAvailOpts=function(){var t=this;if(!this.multiple)return;this.availOpts=this.options.filter((function(e){var n=typeof e==="string"?e:e["value"];var a=typeof e==="string"?e:e["label"]||e["value"];if(!n)return false;return!t.value.includes(n)&&(!t.multiInput||a.toLowerCase().indexOf(t.inputSearchVal.toLowerCase())>-1)}))};t.prototype.getNativeValue=function(){var t=this.nativeSelect;if(!t)return"";if(!this.multiple)return t.options[t.selectedIndex]&&t.options[t.selectedIndex].hasAttribute("value")?t.options[t.selectedIndex].value:"";else{return Array.from(t.options).map((function(t){if(t.selected&&t.hasAttribute("value"))return t.value}))}};t.prototype.setNativeValue=function(){var t=this;var e=this.nativeSelect;if(!e)return null;if(!this.multiple)e.value=this.value;else{Array.from(this.nativeSelect.options).filter((function(e){if(typeof t.value==="string")return e.value===t.value;else return t.value.find((function(e){if(typeof e==="string")return e===t.value;else if(e["value"])return e===e["value"]}))})).map((function(t){t.selected=true}))}};t.prototype.isValidValues=function(){var t=this;var e=this.nativeSelect;if(!e)return null;var n=this.nativeSelect.querySelectorAll("option:checked");var a=Array.from(n).map((function(t){return t.value||null}));if(this.multiple){return a.reduce((function(e,n){if(!e)return false;return!!t.options.find((function(t){return t["value"]?t["value"]===n:t===n}))}),true)}else{return this.options.find((function(t){return t["value"]?t["value"]===a[0]:t===a[0]}))}};t.prototype.openList=function(){if(!this.multiple)return;if((this.availOpts.length||!!this.inputSearchVal.length&&this.allowCustomValues)&&(!this.max||this.max&&this.value.length<this.max))this.listOpen=true;else this.listOpen=false};t.prototype.addValue=function(t){if(!this.multiple)return;if(this.value&&this.value.length&&this.value.includes(t))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=__spreadArray(__spreadArray(__spreadArray([],this.value.slice(0,this.currInsertIndex)),[t]),this.value.slice(this.currInsertIndex));this.inputSearchVal="";this.setAvailOpts();this.setFocus();this.openList()};t.prototype.removeValue=function(t){if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((function(e){return e!==t}));if(this.currInsertIndex>this.value.length-1)this.currInsertIndex=this.value.length-1;this.setFocus();this.openList()};t.prototype.switchValue=function(){this.watchValue=false;if(this.multiple){if(typeof this.value==="string"&&!!this.value.length)this.value=this.value.split(",");else this.value=[];this.currInsertIndex=Math.max(this.value.length-1,0)}else if(typeof this.value!=="string"&&this.value&&this.value[0])this.value=this.value[0];this.watchValue=true};t.prototype.isSelected=function(t){if(this.multiple)return this.value.find((function(e){return e===t}))};t.prototype.getLabel=function(t){var e=this.options.find((function(e){return e["value"]?e["value"]===t:e===t}));if(!e)return null;return e["label"]?e["label"]:e};t.prototype.slotChangeObserver=function(){var t=this;var e=this.mo=new MutationObserver((function(e){return t.processSlottedContent(e)}));e.observe(this.el,{childList:true,subtree:true})};t.prototype.processSlottedContent=function(t){var e=this;this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasIconSlot=!!this.el.querySelector('[slot="icon"]');if(!t){var n=this.el.querySelector('select:not([class*="sc-nano-select"])');if(n){Array.from(n.attributes).filter((function(t){return t.specified&&t.nodeName in e})).map((function(t){return e[t.nodeName]=t.nodeValue}))}var a=this.el.querySelector('label:not([class*="sc-nano-select"])');if(a)this.label=this.label||a.innerHTML;var i=this.el.querySelectorAll('option:not([class*="sc-nano-select"])');this.watchValue=false;if(i&&i.length){var o=[];i.forEach((function(t){o.push({label:t.label||t.innerText,value:t.value});if(!t.selected||!t.value)return;if(e.multiple)e.value.push(t.value);else e.value=t.value}));this.options=o}if(i.length||a||n){var r=this.el.querySelectorAll('[slot="legacy"]');if(r)r.forEach((function(t){return t.parentNode.removeChild(t)}))}this.watchValue=true}if(t&&!Array.from(t[0].addedNodes).find((function(t){return t.nodeName.toLowerCase()==="nano-select-option"})))return;var s=this.el.querySelectorAll("nano-select-option");if(s&&s.length){var l=[];s.forEach((function(t){l.push({label:t.label||t.innerText,value:t.value});if(!t.selected||!t.value)return;if(e.multiple)e.value.push(t.value);else e.value=t.value}));this.options=l}this.setAvailOpts()};t.prototype.getActiveOpt=function(){return this.multiList.querySelector(".has-focus")};t.prototype.connectedCallback=function(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))};t.prototype.disconnectedCallback=function(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect();if(this.popover)this.popover.destroy()};t.prototype.componentDidLoad=function(){this.slotChangeObserver();if(this.multiple)this.setupMulti();this.customValidate()};t.prototype.componentWillLoad=function(){this.switchValue();this.processSlottedContent();this.onInit=false};t.prototype.renderLabel=function(t,e){var n={};if(e==="float"){n={"placeholder-as-label":true}}else{n={label:true,"visually-hide":this.hideLabel}}if(!this.label&&!this.hasLabelSlot)return;return h("label",{class:n,htmlFor:this.selectId,id:t},this.label&&this.label,!this.label&&!!this.hasLabelSlot&&h("slot",{name:"label"}))};t.prototype.render=function(){var t=this;var e=this.selectId+"-lbl";var n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";var a=this.selectId+"-list";this.rtl=this.el.ownerDocument.dir==="rtl";this.listItems=[];this.valueItems=[];if(this.placeholder&&(!this.options[0]||this.options[0]["label"]!==this.placeholder)){this.options.unshift({label:this.placeholder,value:""})}var i=this.listOpen;var o;if(this.multiple){var r=h("input",{class:"multi-input",id:this.selectId,ref:function(e){return t.multiInput=e},disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,onBlur:this.onMultiInputBlur,placeholder:this.placeholder&&!this.floatLabel&&!this.value.length?this.placeholder:"",role:this.multiple?"combobox":"","aria-labelledby":e+" "+n,"aria-controls":a,"aria-expanded":i?"true":"false","aria-required":this.required?"true":"false","aria-autocomplete":"list"});if(!!this.value.length){o=this.value.map((function(e,n){var a=t.options.find((function(t){return t["value"]?t["value"]===e:t===e}));a=a&&a["label"]?a["label"]:e;var i=h("span",{onDragStart:t.onDragStart,onDragLeave:t.onDragLeave,onDragEnd:t.onDragEnd,draggable:true,"data-value":e,ref:function(e){return t.valueItems.push(e)},class:"multi-value"},h("span",null,a),h("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:function(){t.removeValue(e)},onMouseUp:function(){t.removeValue(e)}},h("nano-icon",{name:"light/times"})));if(n===0&&t.currInsertIndex<0)i=[r,i];else if(n===t.currInsertIndex)i=[i,r];return i}))}else o=r}return h(Host,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},createColorClasses(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,"multi-list-open":this.listOpen,"has-clr-btn":this.clearSelect,masked:this.mask,legacy:this.isLegacy}),onClick:this.onHostClick},!this.floatLabel&&this.renderLabel(e),h("div",{class:"select",ref:function(e){return t.selectWrap=e}},this.floatLabel&&this.renderLabel(e,"float"),h("div",{class:{"native-select-wrap":true,"native-select-wrap--multiple":this.multiple}},!this.multiple&&this.mask&&h("div",{class:"select-mask"},this.getLabel(this.value)),this.multiple&&[h("div",{class:"multi-wrap"},o),h("ul",{role:"listbox",ref:function(e){return t.multiList=e},"aria-multiselectable":"true","aria-required":this.required,"aria-expanded":i?"true":"false","aria-hidden":!i,hidden:!i,id:a,class:{"multi-select-box":true,"multi-select-box--open":i}},this.allowCustomValues&&this.inputSearchVal.length>0&&h("li",{"data-value":this.inputSearchVal,role:"option",tabindex:"-1",ref:function(e){return t.listItems.push(e)},onMouseDown:function(){t.addValue(t.inputSearchVal)},onFocus:this.onOptFocus},"Add ",this.inputSearchVal),this.availOpts.map((function(e){var n,a;if(e["value"]){n=e["value"];a=e["label"]||e["value"]}else if(typeof e==="string"){n=e;a=n}if(!n)return;return h("li",{role:"option",key:n,"data-value":n,ref:function(e){return t.listItems.push(e)},tabindex:"-1","aria-selected":t.isSelected(n)?"true":"false",onMouseDown:function(){t.addValue(n)},onFocus:t.onOptFocus},a)}))),h("select",{id:this.selectId+"-hidden",class:"native-select",ref:function(e){return t.nativeSelect=e},"aria-labelledby":e+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.value.map((function(t){return h("option",{value:t,selected:true},t)})))],!this.multiple&&h("select",{id:this.selectId,class:"native-select",ref:function(e){return t.nativeSelect=e},"aria-labelledby":e+" "+n,disabled:this.disabled,form:this.form,autoFocus:this.autofocus,multiple:this.multiple,name:this.name,required:this.required,size:this.size,onBlur:this.onBlur,onFocus:this.onFocus,onInvalid:this.handleInvalid,onChange:this.onChange},this.options.map((function(e,n){if(e["value"]||e["label"])return h("option",{key:e["label"]+n,label:e["label"],value:e["value"],selected:e["value"]===t.value||!t.value&&!e["value"],disabled:!e["value"]&&t.required},e["label"]?e["label"]:e["value"]);else return h("option",{key:e+n,value:e,selected:e===t.value},e)})),h("slot",{name:"legacy"})),this.clearSelect&&!this.readonly&&!this.disabled&&h("button",{type:"button",class:"select-clear-icon",tabindex:"-1",onTouchEnd:this.clearSelectValue,onMouseUp:this.clearSelectValue},h("nano-icon",{name:"light/times"})),h("div",{onTouchEnd:this.onClick,onMouseUp:this.onClick,class:"select-down-icon"},this.hasIconSlot?h("slot",{name:"icon"}):h("nano-icon",{name:"regular/chevron-down"})))),(this.showInlineError||this.hasHelperSlot)&&h("div",{class:"more",id:n},!!this.showInlineError?h("div",{class:"error"},this.errorMessage):"",h("div",{class:"helper"},h("slot",{name:"helper"}))))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],options:["optionsChanged"],multiple:["multiChange"],listOpen:["listOpenChange"]}},enumerable:false,configurable:true});return t}();var selectIds=0;Select.style=selectCss;export{NavItem as nano_nav_item,Select as nano_select};
-//# sourceMappingURL=nano-nav-item_2.entry.js.map

package/dist/esm-es5/nano-nav-item_2.entry.js.map

@@ -1 +0,0 @@
-{"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","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_a","sent","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","__generator","handleMouseLeave","handleClick","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","Select","class_2","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","_","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","onMultiInputBlur","onDragStart","ele","dragVal","dataset","onDragEnd","onDragLeave","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","__spreadArray","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex_1","addValue","debounceChanged","debounceEvent","shouldValidate","valueChanged","split","setNativeValue","nanoChange","optionsChanged","multiChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","listOpenChange","show","hide","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","filter","opt","toFind","strFilter","nsl","selectedIndex","hasAttribute","Array","map","find","val","values","reduce","accumulator","currentValue","slice","Math","isSelected","getLabel","foundVal","slotChangeObserver","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","options_1","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","options_2","dispatchEvent","CustomEvent","detail","disconnectedCallback","componentDidLoad","renderLabel","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","optionMenu","valueMarkup","input_1","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","native-select-wrap","native-select-wrap--multiple","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","select","form","onInvalid","size"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\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(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n    display: var(--display, block);\n    white-space: nowrap;\n\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\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: var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));\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: var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));\n    outline: none;\n  }\n}\n\n.nav-item {\n\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color: var(--bg-color-selected, var(--bg-color-open, var(--bg-color)));\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color: var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))));\n    }\n  }\n\n  &.disabled {\n    opacity: .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: var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)));\n    }\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: var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n\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    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 .2s ease, transform .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 .3s ease, transform .2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n\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    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button, 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(var(--secondary-padding-top), var(--secondary-padding-end), var(--secondary-padding-bottom), var(--secondary-padding-start));\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\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n\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\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: .2s ease transform;\n    }\n  }\n\n  .selected button::before, .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: .5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform .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\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n\n    &:focus {\n      outline: none;\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n\n  .link,\n  a,\n  button {\n    @include padding(calc(var(--padding-top)/2), 0, calc(var(--padding-bottom)/2), var(--padding-start));\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    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    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    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 .3s ease, opacity .2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n    @include padding(var(--secondary-padding-top, var(--padding-top)), var(--secondary-padding-end, var(--padding-end)), var(--secondary-padding-bottom, var(--padding-bottom)), var(--secondary-padding-start, var(--padding-start)));\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\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    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir=rtl]) {\n\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 {\n  displayTransition,\n  getDirectChildren,\n  getSiblings,\n} from '../../utils/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() 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      >\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 '../input/input.vars';\n\n:host {\n  @include inputVars;\n\n  position: relative;\n  width: 100%;\n  /* stylelint-disable-next-line all */\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  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: .7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\n:host(.has-focus) {\n  .select {\n    z-index: 10;\n  }\n}\n\nlabel,\n.more, .error, .helper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &.visually-hide {\n    @include visually-hide;\n  }\n}\n\n\n.placeholder-as-label {\n  @include padding(0, 0, 0, var(--padding-start));\n  color: var(--input-text-color);\n  position: absolute;\n  font-size: 1.4em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  top: 50%;\n  transition: .125s ease-in;\n  opacity: .7;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--invalid-msg-color);\n  }\n\n  :host(.has-value) & {\n    transform: translateY(-110%);\n    font-size: .9em;\n  }\n\n  :host(.has-focus.has-multiple) &,\n  :host(.has-value.has-multiple) & {\n    transform: translateY(-75%);\n    font-size: .9em;\n  }\n\n  :host(.has-multiple) & {\n    top: 1.5em;\n  }\n\n  &~.native-select-wrap {\n    font-size: 1.1em;\n  }\n}\n\n.label {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  @include padding(0, 0, var(--padding-bottom));\n  line-height: 1;\n\n  .placeholder {\n    opacity: 0;\n    appearance: none;\n    transition: .3s ease opacity;\n    font-size: .9em;\n  }\n\n  :host(.has-value) & {\n    .placeholder {\n      opacity: .5;\n    }\n  }\n\n  :host(.has-focus) & {\n    color: var(--label-color--focus);\n  }\n\n  :host(.is-invalid) & {\n    color: var(--label-color--invalid);\n  }\n}\n\n.more {\n  height: 1em;\n  position: relative;\n  @include margin(4px, 0, var(--padding-bottom), 3px);\n}\n\n.helper, .error {\n  top: 0;\n  left: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: .3s ease-out opacity;\n}\n\n.helper {\n  color: var(--help-msg-color);\n  font-style: italic;\n\n  :host([show-inline-error]:not([show-inline-error=\"false\"]).is-invalid) & {\n    opacity: 0;\n  }\n}\n\n.error {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n\n  :host(.is-invalid) & {\n    opacity: 1;\n  }\n}\n\n.select {\n  @include text-inherit();\n  @include border-radius(var(--input-border-radius));\n  width: 100%;\n  padding: 0 !important;\n  position: relative;\n\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n\n  :host(.has-focus) & {\n    background: var(--input-bg-color--focus);\n    border: var(--input-border-style--focus);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid);\n    border-width: var(--input-border-width);\n  }\n\n  :host(.is-invalid.has-focus) & {\n    background: var(--input-bg-color--invalid);\n    border: var(--input-border-style--invalid-focus);\n    border-width: var(--input-border-width);\n  }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n  display: flex;\n  align-items: center;\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  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n.native-select {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\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  box-sizing: border-box;\n  transition: .3s ease opacity;\n  appearance: none;\n  // line-height: 1.3;\n  margin: 0;\n  line-height: 2.5em;\n  min-height: 2.5em;\n  box-sizing: border-box;\n\n  :host(.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  :host(.has-float-label) & {\n    opacity: 0;\n    padding-top: 1.8em;\n  }\n\n  :host(.has-value.has-float-label) & {\n    opacity: 1;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n\n  &[disabled] {\n    opacity: .4;\n  }\n\n  :host(.has-multiple) & {\n    display: none;\n  }\n\n  option {\n    color: black;\n  }\n}\n\n// multi stuff\n\n.multi {\n\n  &-wrap {\n    @include padding(0, calc(1.9em + var(--padding-end)), calc(var(--padding-bottom)/2), 0);\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-clr-btn) & {\n      @include padding(0, calc(2.6em + (var(--padding-end)*2) + (var(--padding-end)*2)), calc(var(--padding-bottom)/2), 0);\n    }\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(calc(var(--padding-top)/2), var(--padding-end), 0, var(--padding-start));\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    // line-height: calc(2.8em - var(--padding-top));\n    min-height: calc(2.8em - 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  &-select-box {\n    position: absolute;\n    background: #{$layer-bg-color};\n    min-width: calc(100% + (var(--input-border-width) * 2));\n    z-index: #{$layer-index-dropdown};\n    margin: 0;\n    font-size: 1.15em;\n    line-height: 1.4;\n    max-height: 50vh;\n    overflow-y: auto;\n    overscroll-behavior: none;\n    transition: opacity .2s ease;\n    opacity: 0;\n    box-sizing: border-box;\n    border-radius: #{$layer-border-radius};\n    box-shadow: #{$layer-shadow-large};\n    padding: var(--padding-top) 0 var(--padding-bottom);\n    border: #{$layer-border-style};\n\n    &--open {\n      opacity: 1;\n    }\n\n    li {\n      @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n      font-size: var(--input-font-size);\n      cursor: pointer;\n      list-style: none;\n      color: var(--input-text-color);\n\n      :host(.nano-color) & {\n        color: black;\n      }\n\n      &:hover,\n      &:focus {\n        color: var(--color--focus-contrast);\n        outline: none;\n        background: rgba(var(--multi-input-value-bg), .2);\n\n        :host(.nano-color) & {\n          background: current-color(base, 0.2);\n        }\n      }\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n    background: rgba(var(--multi-input-value-bg), .8);\n    color: var(--multi-input-value-text-color);\n    border: 2px solid;\n    border-color: var(--multi-input-value-border);\n    padding: .3em .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, .5em);\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// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n  color: var(--input-text-color);\n  font-size: 1.4em;\n  right: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: 0;\n  }\n\n  :host(.has-multiple) & {\n    pointer-events: all;\n  }\n\n  :host(.masked) & {\n    position: relative;\n  }\n}\n\n.select-clear-icon {\n  @include margin(0);\n  @include background-position(center);\n  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));\n  font-size: 1.4em;\n  color: var(--clear-btn-color);\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  visibility: hidden;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  right: calc(1.4em + var(--padding-end));\n\n  &:hover {\n    color: var(--clear-btn-color--hover);\n  }\n\n  :host(.rtl) & {\n    right: unset;\n    left: calc(1.4em + var(--padding-end));\n  }\n\n  :host(.is-invalid) & {\n    color: var(--clear-btn-color--invalid);\n  }\n\n  :host(.has-value) & {\n    visibility: visible;\n  }\n\n  nano-icon {\n    --color: inherit;\n  }\n}\n\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n//   pointer-events: none;\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} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  testLegacyStyle,\n  debounceEvent,\n  closestElement,\n  createColorClasses,\n} from '../../utils/utils';\nimport Popover from '../../utils/popover';\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 label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\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 multiInput?: HTMLInputElement;\n  private multiList?: HTMLUListElement;\n  private selectWrap?: HTMLDivElement;\n  private listItems: Array<HTMLLIElement> = [];\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private popover: Popover;\n\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private currLiIndex: number = -1;\n  private inputSearchVal: string = '';\n  private watchValue: boolean = true;\n  private onInit: boolean = true;\n\n  @State() currInsertIndex: number = 0;\n  @State() availOpts = [];\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() listOpen = false;\n  @State() isLegacy: boolean = 'registerElement' in document;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasIconSlot: boolean = false;\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({ mutable: true, reflect: true }) 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.\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() 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({ mutable: true }) value?: string | Array<string | null> = this.multiple\n    ? []\n    : '';\n\n  /**\n   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n   */\n  @Prop({ mutable: true }) options: Array<\n    string | { label: string; value?: string }\n  > = [];\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  /**\n   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n   */\n  @Prop() native = true;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  // @Watch('options')\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  @Watch('value')\n  protected valueChanged() {\n    if (!this.watchValue) return;\n\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      if (\n        this.value === null ||\n        (typeof this.value === 'string' && !this.value.length)\n      )\n        this.value = [];\n\n      if (this.currInsertIndex > this.value.length - 1)\n        this.currInsertIndex = this.value.length - 1;\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n\n    this.setNativeValue();\n    this.setAvailOpts();\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n\n    if (this.onInit) return;\n  }\n\n  @Watch('options')\n  protected optionsChanged() {\n    this.setAvailOpts();\n    if (this.hasFocus) this.openList();\n  }\n\n  /**\n   * Setup or rip down custom combobox when select is switched from mutliple\n   */\n  @Watch('multiple')\n  protected multiChange() {\n    this.switchValue();\n\n    if (this.multiple) this.setupMulti();\n    else if (this.popover) this.popover.destroy();\n  }\n\n  private setupMulti() {\n    setTimeout(() => {\n      this.setAvailOpts();\n      this.popover = new Popover(this.selectWrap, this.multiList, {\n        placement: 'bottom-start',\n        skidding: 0,\n        distance: 0,\n        onTransitionEnd: () => {\n          if (!this.listOpen) {\n            this.multiList.scrollTop = 0;\n          }\n        },\n      });\n    }, 20);\n  }\n\n  @Watch('listOpen')\n  listOpenChange() {\n    if (this.listOpen) this.popover.show();\n    else this.popover.hide();\n  }\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  /**\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    if (this.nativeSelect && !this.multiple) this.nativeSelect.focus();\n    else if (this.multiInput) this.multiInput.focus();\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.nativeSelect.reportValidity();\n    }\n  }\n\n  /* Logic */\n\n  // sets the available options of a multi select.\n  // Removes ones already selected\n  // Filters one if user starts to search\n  private setAvailOpts() {\n    if (!this.multiple) return;\n\n    this.availOpts = this.options.filter((opt) => {\n      let toFind = typeof opt === 'string' ? opt : opt['value'];\n      let strFilter =\n        typeof opt === 'string' ? opt : opt['label'] || opt['value'];\n\n      if (!toFind) return false;\n      return (\n        !(this.value as Array<string>).includes(toFind) &&\n        (!this.multiInput ||\n          strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >\n            -1)\n      );\n    });\n  }\n\n  private getNativeValue(): string | Array<string> {\n    const nsl = this.nativeSelect;\n    if (!nsl) return '';\n\n    if (!this.multiple)\n      return nsl.options[nsl.selectedIndex] &&\n        nsl.options[nsl.selectedIndex].hasAttribute('value')\n        ? nsl.options[nsl.selectedIndex].value\n        : '';\n    else {\n      return Array.from(nsl.options).map((opt) => {\n        if (opt.selected && opt.hasAttribute('value')) return opt.value;\n      });\n    }\n  }\n\n  private setNativeValue() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n    if (!this.multiple) nsl.value = this.value as string;\n    else {\n      Array.from(this.nativeSelect.options)\n        .filter((opt) => {\n          if (typeof this.value === 'string') return opt.value === this.value;\n          else\n            return this.value.find((val) => {\n              if (typeof val === 'string') return val === this.value;\n              else if (val['value']) return val === val['value'];\n            });\n        })\n        .map((opt) => {\n          opt.selected = true;\n        });\n    }\n  }\n\n  private isValidValues() {\n    const nsl = this.nativeSelect;\n    if (!nsl) return null;\n\n    const selected = this.nativeSelect.querySelectorAll('option:checked');\n    const values = Array.from(selected).map(\n      (el: HTMLOptionElement) => el.value || null\n    );\n\n    if (this.multiple) {\n      return values.reduce((accumulator, currentValue) => {\n        if (!accumulator) return false;\n        return !!this.options.find((opt) =>\n          opt['value'] ? opt['value'] === currentValue : opt === currentValue\n        );\n      }, true);\n    } else {\n      return this.options.find((opt) =>\n        opt['value'] ? opt['value'] === values[0] : opt === values[0]\n      );\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.getNativeValue().length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.getNativeValue().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.getNativeValue().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.getNativeValue().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 openList() {\n    if (!this.multiple) return;\n    if (\n      (this.availOpts.length ||\n        (!!this.inputSearchVal.length && this.allowCustomValues)) &&\n      (!this.max || (this.max && this.value.length < this.max))\n    )\n      this.listOpen = true;\n    else this.listOpen = false;\n  }\n\n  private addValue(value) {\n    if (!this.multiple) return;\n    if (this.value && this.value.length && this.value.includes(value)) 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      value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n\n    this.inputSearchVal = '';\n\n    this.setAvailOpts();\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\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    if (this.currInsertIndex > this.value.length - 1)\n      this.currInsertIndex = this.value.length - 1;\n\n    this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n    this.openList();\n  }\n\n  private switchValue() {\n    this.watchValue = false;\n    if (this.multiple) {\n      if (typeof this.value === 'string' && !!this.value.length)\n        this.value = this.value.split(',');\n      else this.value = [];\n\n      this.currInsertIndex = Math.max(this.value.length - 1, 0);\n    } else if (typeof this.value !== 'string' && this.value && this.value[0])\n      this.value = this.value[0];\n    this.watchValue = true;\n  }\n\n  private isSelected(value: string) {\n    if (this.multiple)\n      return (this.value as Array<string>).find((val) => val === value);\n    else value === this.value;\n  }\n\n  private getLabel(val: string) {\n    let foundVal = this.options.find((opt) => {\n      return opt['value'] ? opt['value'] === val : opt === val;\n    });\n    if (!foundVal) return null;\n    return foundVal['label'] ? foundVal['label'] : foundVal;\n  }\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver((mrs: MutationRecord[]) =>\n      this.processSlottedContent(mrs)\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent(mutations?: MutationRecord[]) {\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    this.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n    if (!mutations) {\n      // find legacy select. Take attrs and apply to our element\n      let existingselect = this.el.querySelector(\n        'select:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingselect) {\n        Array.from(existingselect.attributes)\n          .filter((attr) => attr.specified && attr.nodeName in this)\n          .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n      }\n\n      // find legacy label. Apply to our element\n      let existingLabel = this.el.querySelector(\n        'label:not([class*=\"sc-nano-select\"])'\n      );\n      if (existingLabel) this.label = this.label || existingLabel.innerHTML;\n\n      // find legacy slotted options. Apply them and add any relevant values\n      let legacyOpts = this.el.querySelectorAll(\n        'option:not([class*=\"sc-nano-select\"])'\n      );\n\n      this.watchValue = false;\n      if (legacyOpts && legacyOpts.length) {\n        let options = [];\n        legacyOpts.forEach((option: HTMLOptionElement) => {\n          options.push({\n            label: option.label || option.innerText,\n            value: option.value,\n          });\n          if (!option.selected || !option.value) return;\n\n          if (this.multiple) (this.value as Array<string>).push(option.value);\n          else this.value = option.value;\n        });\n        this.options = options;\n      }\n\n      if (legacyOpts.length || existingLabel || existingselect) {\n        // empty all legacy slotted stuff\n        let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n        if (children) children.forEach((n) => n.parentNode.removeChild(n));\n      }\n\n      this.watchValue = true;\n    }\n\n    if (\n      mutations &&\n      !Array.from(mutations[0].addedNodes).find(\n        (node) => node.nodeName.toLowerCase() === 'nano-select-option'\n      )\n    )\n      return;\n\n    // find nano-select-options\n    let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n    if (nanoOpts && nanoOpts.length) {\n      let options = [];\n      nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n        options.push({\n          label: option.label || option.innerText,\n          value: option.value,\n        });\n        if (!option.selected || !option.value) return;\n\n        if (this.multiple) (this.value as Array<string>).push(option.value);\n        else this.value = option.value;\n      });\n      this.options = options;\n    }\n\n    this.setAvailOpts();\n  }\n\n  /* Event handling */\n\n  private onChange = (ev?: Event) => {\n    if (!this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n    this.value = this.getNativeValue();\n  };\n\n  private onBlur = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n      document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    }\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    if (this.multiple) {\n      this.currLiIndex = -1;\n      document.addEventListener('keydown', this.handleDocumentKeyDown);\n      document.addEventListener('mousedown', this.handleDocumentMouseDown);\n      this.openList();\n    }\n\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      let options = this.nativeSelect.querySelectorAll('option');\n      if (options.length) options.forEach((n) => n.remove());\n      this.currInsertIndex = -1;\n      this.setAvailOpts();\n    } else this.value = '';\n\n    this.onChange();\n  };\n\n  private onClick = () => {\n    this.setFocus();\n    this.openList();\n  };\n\n  /* Multi event handlers */\n\n  private onMultiInputBlur = () => {\n    if (this.allowCustomValues) return;\n    this.inputSearchVal = '';\n    this.setAvailOpts();\n  };\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;\n    this.setAvailOpts();\n    this.openList();\n    this.nanoSearchChange.emit({ value: ev.target.value });\n  };\n\n  private getActiveOpt() {\n    return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n  }\n\n  private onOptFocus = (ev: FocusEvent) => {\n    let activeEle = this.getActiveOpt();\n    if (activeEle) activeEle.classList.remove('has-focus');\n    (ev.target as HTMLElement).classList.add('has-focus');\n  };\n\n  private onHostClick = () => {\n    setTimeout((_) => {\n      if (!this.multiple || this.hasFocus) return;\n      this.setFocus();\n    }, 20);\n  };\n\n  private handleDocumentMouseDown = (ev: MouseEvent) => {\n    const target = ev.target as HTMLElement;\n    if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n      this.listOpen = false;\n      this.onBlur();\n    }\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.multiInput.previousElementSibling)\n            rm = this.multiInput.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.multiInput.nextElementSibling)\n            rm = this.multiInput.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.multiInput.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.multiInput.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n\n    // navigated to component via keyboard. Open with down.\n    if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n      this.openList();\n      this.currLiIndex = -1;\n    }\n\n    // Close when tabbing outside of element\n    if (this.hasFocus && ev.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          closestElement(\n            this.el.tagName.toLowerCase(),\n            document.activeElement\n          ) !== this.el\n        ) {\n          this.listOpen = false;\n          this.onBlur();\n          return;\n        }\n      });\n    }\n\n    // list open, navigate items with arrows\n    if (this.listOpen) {\n      const selectedItem = this.getActiveOpt();\n      let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;\n\n      switch (ev.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n          ev.preventDefault();\n\n          if (ev.key === 'ArrowDown') testIndex++;\n          else if (ev.key === 'ArrowUp') testIndex--;\n\n          if (testIndex < 0) {\n            this.currLiIndex = 0;\n            this.multiInput.focus();\n            return;\n          }\n\n          let foundIndex = this.listItems[testIndex]\n            ? testIndex\n            : this.currLiIndex;\n          setTimeout(() => {\n            this.listItems[foundIndex].focus();\n            this.currLiIndex = foundIndex;\n          }, 20);\n          return;\n        case 'Enter':\n        case ' ':\n          if (this.listItems[this.currLiIndex]) {\n            this.addValue(this.listItems[this.currLiIndex].dataset.value);\n            ev.preventDefault();\n          }\n          return;\n        case 'Escape':\n          this.listOpen = false;\n          return;\n      }\n    }\n\n    if (this.currLiIndex > -1) ev.preventDefault();\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    testLegacyStyle(this.el);\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    if (this.popover) this.popover.destroy();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    if (this.multiple) this.setupMulti();\n    this.customValidate();\n  }\n\n  componentWillLoad() {\n    this.switchValue();\n    this.processSlottedContent();\n    this.onInit = false;\n  }\n\n  private renderLabel(labelId: string, position?: 'float') {\n    let classes: CssClassMap = {};\n    if (position === 'float') {\n      classes = { 'placeholder-as-label': true };\n    } else {\n      classes = { label: true, 'visually-hide': this.hideLabel };\n    }\n    if (!this.label && !this.hasLabelSlot) return;\n\n    return (\n      <label class={classes} htmlFor={this.selectId} id={labelId}>\n        {this.label && this.label}\n        {!this.label && !!this.hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const listId = this.selectId + '-list';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.listItems = [];\n    this.valueItems = [];\n\n    if (\n      this.placeholder &&\n      (!this.options[0] || this.options[0]['label'] !== this.placeholder)\n    ) {\n      this.options.unshift({ label: this.placeholder, value: '' });\n    }\n\n    let optionMenu = this.listOpen;\n\n    let valueMarkup;\n    if (this.multiple) {\n      let input = (\n        <input\n          class=\"multi-input\"\n          id={this.selectId}\n          ref={(input) => (this.multiInput = input)}\n          disabled={this.disabled}\n          autoFocus={this.autofocus}\n          autocomplete=\"off\"\n          onInput={this.onMultiInput}\n          value={this.inputSearchVal}\n          onTouchStart={this.onClick}\n          onMouseDown={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onMultiInputBlur}\n          placeholder={\n            this.placeholder && !this.floatLabel && !this.value.length\n              ? this.placeholder\n              : ''\n          }\n          role={this.multiple ? 'combobox' : ''}\n          aria-labelledby={labelId + ' ' + moreId}\n          aria-controls={listId}\n          aria-expanded={optionMenu ? 'true' : 'false'}\n          aria-required={this.required ? 'true' : 'false'}\n          aria-autocomplete=\"list\"\n        />\n      );\n\n      if (!!this.value.length) {\n        valueMarkup = (this.value as Array<string>).map((val, i) => {\n          let label = this.options.find((opt) => {\n            return opt['value'] ? opt['value'] === val : opt === val;\n          });\n          label = label && label['label'] ? label['label'] : val;\n\n          let toReturn = (\n            <span\n              onDragStart={this.onDragStart}\n              onDragLeave={this.onDragLeave}\n              onDragEnd={this.onDragEnd}\n              draggable\n              data-value={val}\n              ref={(span) => this.valueItems.push(span)}\n              class=\"multi-value\"\n            >\n              <span>{label}</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\n          if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn];\n          else if (i === this.currInsertIndex) toReturn = [toReturn, input];\n          return toReturn;\n        });\n      } else valueMarkup = input;\n    }\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          'multi-list-open': this.listOpen,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n        onClick={this.onHostClick}\n      >\n        {!this.floatLabel && this.renderLabel(labelId)}\n        <div class=\"select\" ref={(div) => (this.selectWrap = div)}>\n          {this.floatLabel && this.renderLabel(labelId, 'float')}\n          <div\n            class={{\n              'native-select-wrap': true,\n              'native-select-wrap--multiple': this.multiple,\n            }}\n          >\n            {!this.multiple && this.mask && (\n              <div class=\"select-mask\">\n                {this.getLabel(this.value as string)}\n              </div>\n            )}\n            {this.multiple && [\n              <div class=\"multi-wrap\">{valueMarkup}</div>,\n              <ul\n                role=\"listbox\"\n                ref={(ul) => (this.multiList = ul)}\n                aria-multiselectable=\"true\"\n                aria-required={this.required}\n                aria-expanded={optionMenu ? 'true' : 'false'}\n                aria-hidden={!optionMenu}\n                hidden={!optionMenu}\n                id={listId}\n                class={{\n                  'multi-select-box': true,\n                  'multi-select-box--open': optionMenu,\n                }}\n              >\n                {this.allowCustomValues && this.inputSearchVal.length > 0 && (\n                  <li\n                    data-value={this.inputSearchVal}\n                    role=\"option\"\n                    tabindex=\"-1\"\n                    ref={(li) => this.listItems.push(li)}\n                    onMouseDown={() => {\n                      this.addValue(this.inputSearchVal);\n                    }}\n                    onFocus={this.onOptFocus}\n                  >\n                    Add {this.inputSearchVal}\n                  </li>\n                )}\n                {this.availOpts.map((option) => {\n                  let optval, label;\n                  if (option['value']) {\n                    optval = option['value'];\n                    label = option['label'] || option['value'];\n                  } else if (typeof option === 'string') {\n                    optval = option;\n                    label = optval;\n                  }\n                  if (!optval) return;\n                  return (\n                    <li\n                      role=\"option\"\n                      key={optval}\n                      data-value={optval}\n                      ref={(li) => this.listItems.push(li)}\n                      tabindex=\"-1\"\n                      aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n                      onMouseDown={() => {\n                        this.addValue(optval);\n                      }}\n                      onFocus={this.onOptFocus}\n                    >\n                      {label}\n                    </li>\n                  );\n                })}\n              </ul>,\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.value as Array<string>).map((val) => {\n                  return (\n                    <option value={val} selected>\n                      {val}\n                    </option>\n                  );\n                })}\n              </select>,\n            ]}\n            {!this.multiple && (\n              <select\n                id={this.selectId}\n                class=\"native-select\"\n                ref={(select) => (this.nativeSelect = select)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                autoFocus={this.autofocus}\n                multiple={this.multiple}\n                name={this.name}\n                required={this.required}\n                size={this.size}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                onInvalid={this.handleInvalid}\n                onChange={this.onChange}\n              >\n                {this.options.map((option, i) => {\n                  if (option['value'] || option['label'])\n                    return (\n                      <option\n                        key={option['label'] + i}\n                        label={option['label']}\n                        value={option['value']}\n                        selected={\n                          option['value'] === this.value ||\n                          (!this.value && !option['value'])\n                        }\n                        disabled={!option['value'] && this.required}\n                      >\n                        {option['label'] ? option['label'] : option['value']}\n                      </option>\n                    );\n                  else\n                    return (\n                      <option\n                        key={(option as string) + i}\n                        value={option as string}\n                        selected={option === this.value}\n                      >\n                        {option}\n                      </option>\n                    );\n                })}\n                <slot name=\"legacy\" />\n              </select>\n            )}\n            {this.clearSelect && !this.readonly && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"select-clear-icon\"\n                tabindex=\"-1\"\n                onTouchEnd={this.clearSelectValue}\n                onMouseUp={this.clearSelectValue}\n              >\n                <nano-icon name=\"light/times\"></nano-icon>\n              </button>\n            )}\n            <div\n              onTouchEnd={this.onClick}\n              onMouseUp={this.onClick}\n              class=\"select-down-icon\"\n            >\n              {this.hasIconSlot ? (\n                <slot name=\"icon\" />\n              ) : (\n                <nano-icon name=\"regular/chevron-down\"></nano-icon>\n              )}\n            </div>\n          </div>\n        </div>\n        {(this.showInlineError || this.hasHelperSlot) && (\n          <div class=\"more\" id={moreId}>\n            {!!this.showInlineError ? (\n              <div class=\"error\">{this.errorMessage}</div>\n            ) : (\n              ''\n            )}\n            <div class=\"helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"]}

package/dist/esm-es5/nano-range.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(r,e,n,a){function t(r){return r instanceof n?r:new n((function(e){e(r)}))}return new(n||(n=Promise))((function(n,o){function i(r){try{c(a.next(r))}catch(e){o(e)}}function s(r){try{c(a["throw"](r))}catch(e){o(e)}}function c(r){r.done?n(r.value):t(r.value).then(i,s)}c((a=a.apply(r,e||[])).next())}))};var __generator=this&&this.__generator||function(r,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,t,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(r){return function(e){return c([r,e])}}function c(i){if(a)throw new TypeError("Generator is already executing.");while(n)try{if(a=1,t&&(o=i[0]&2?t["return"]:i[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,i[1])).done)return o;if(t=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;t=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){n.label=i[1];break}if(i[0]===6&&n.label<o[1]){n.label=o[1];o=i;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(i);break}if(o[2])n.ops.pop();n.trys.pop();continue}i=e.call(r,n)}catch(s){i=[6,s];t=0}finally{a=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-7c54a0d9.js";import{c as clamp,a as renderHiddenInput}from"./utils-fd1ada22.js";import{c as createColorClasses}from"./theme-f5a16c79.js";import{a as debounceEvent}from"./throttle-e3c852aa.js";var rangeCss='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range:export{screen:1000}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #0084a9);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #0084a9);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';var Range=function(){function r(r){var e=this;registerInstance(this,r);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoStyle=createEvent(this,"nanoStyle",7);this.nanoFocus=createEvent(this,"nanoFocus",7);this.nanoBlur=createEvent(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.ratioA=0;this.ratioB=0;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0;this.clampBounds=function(r){return clamp(e.min,r,e.max)};this.ensureValueInBounds=function(r){if(e.dualKnobs){return{lower:e.clampBounds(r.lower),upper:e.clampBounds(r.upper)}}else{return e.clampBounds(r)}};this.handleKeyboard=function(r,n){var a=e.step;a=a>0?a:1;a=a/(e.max-e.min);if(!n){a*=-1}if(r==="A"){e.ratioA=clamp(0,e.ratioA+a,1)}else{e.ratioB=clamp(0,e.ratioB+a,1)}e.updateValue()};this.onBlur=function(){if(e.hasFocus){e.hasFocus=false;e.nanoBlur.emit();e.emitStyle()}};this.onFocus=function(){if(!e.hasFocus){e.hasFocus=true;e.nanoFocus.emit();e.emitStyle()}}}r.prototype.debounceChanged=function(){this.nanoChange=debounceEvent(this.nanoChange,this.debounce)};r.prototype.minChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.maxChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.disabledChanged=function(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()};r.prototype.valueChanged=function(r){if(!this.noUpdate){this.updateRatio()}r=this.ensureValueInBounds(r);this.nanoChange.emit({value:r})};r.prototype.connectedCallback=function(){this.updateRatio();this.debounceChanged();this.disabledChanged()};r.prototype.disconnectedCallback=function(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}};r.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var r,e;var n=this;return __generator(this,(function(a){switch(a.label){case 0:r=this.rangeSlider;if(!r)return[3,2];e=this;return[4,import("./index-935a4b79.js")];case 1:e.gesture=a.sent().createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:function(r){return n.onStart(r)},onMove:function(r){return n.onMove(r)},onEnd:function(r){return n.onEnd(r)}});this.gesture.enable(!this.disabled);a.label=2;case 2:return[2]}}))}))};r.prototype.getValue=function(){var r=this.value||0;if(this.dualKnobs){if(typeof r==="object"){return r}return{lower:0,upper:r}}else{if(typeof r==="object"){return r.upper}return r}};r.prototype.emitStyle=function(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})};r.prototype.onStart=function(r){var e=this.rect=this.rangeSlider.getBoundingClientRect();var n=r.currentX;var a=clamp(0,(n-e.left)/e.width,1);if(document.dir==="rtl"){a=1-a}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B";this.setFocus(this.pressedKnob);this.update(n)};r.prototype.onMove=function(r){this.update(r.currentX)};r.prototype.onEnd=function(r){this.update(r.currentX);this.pressedKnob=undefined};r.prototype.update=function(r){var e=this.rect;var n=clamp(0,(r-e.left)/e.width,1);if(document.dir==="rtl"){n=1-n}if(this.snaps){n=valueToRatio(ratioToValue(n,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=n}else{this.ratioB=n}this.updateValue()};Object.defineProperty(r.prototype,"valA",{get:function(){return ratioToValue(this.ratioA,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"valB",{get:function(){return ratioToValue(this.ratioB,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioLower",{get:function(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioUpper",{get:function(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA},enumerable:false,configurable:true});r.prototype.updateRatio=function(){var r=this.getValue();var e=this,n=e.min,a=e.max;if(this.dualKnobs){this.ratioA=valueToRatio(r.lower,n,a);this.ratioB=valueToRatio(r.upper,n,a)}else{this.ratioA=valueToRatio(r,n,a)}};r.prototype.updateValue=function(){this.noUpdate=true;var r=this,e=r.valA,n=r.valB;this.value=!this.dualKnobs?e:{lower:Math.min(e,n),upper:Math.max(e,n)};this.noUpdate=false};r.prototype.setFocus=function(r){if(this.el.shadowRoot){var e=this.el.shadowRoot.querySelector(r==="A"?".range-knob-a":".range-knob-b");if(e){e.focus()}}};r.prototype.render=function(){var r;var e=this;var n=this,a=n.min,t=n.max,o=n.step,i=n.el,s=n.handleKeyboard,c=n.pressedKnob,l=n.disabled,b=n.pin,d=n.ratioLower,g=n.ratioUpper;var u=d*100+"%";var p=100-g*100+"%";var f=document;var m=f.dir==="rtl";var v=m?"right":"left";var k=m?"left":"right";var w=function(r){var e;return e={},e[v]=r[v],e};var x=(r={},r[v]=u,r[k]=p,r);var y=[];if(this.snaps&&this.ticks){for(var z=a;z<=t;z+=o){var B=valueToRatio(z,a,t);var A={ratio:B,active:B>=d&&B<=g};A[v]=B*100+"%";y.push(A)}}renderHiddenInput(true,i,this.name,JSON.stringify(this.getValue()),l);return h(Host,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:createColorClasses(this.color,{"range-disabled":l,"range-pressed":c!==undefined,"range-has-pin":b,"range-snaps":this.snaps})},h("div",{class:"range-wrap"},h("slot",{name:"start"}),h("div",{class:"range-slider",ref:function(r){return e.rangeSlider=r}},y.map((function(r){return h("span",{style:w(r),role:"presentation",class:{"range-tick":true,"range-tick-active":r.active},part:r.active?"tick-active":"tick"})})),h("div",{class:"range-bar",role:"presentation",part:"bar"}),h("div",{class:"range-bar range-bar-active",role:"presentation",style:x,part:"bar-active"}),renderKnob(m,{knob:"A",pressed:c==="A",value:this.valA,ratio:this.ratioA,pin:b,disabled:l,handleKeyboard:s,min:a,max:t}),this.dualKnobs&&renderKnob(m,{knob:"B",pressed:c==="B",value:this.valB,ratio:this.ratioB,pin:b,disabled:l,handleKeyboard:s,min:a,max:t})),h("slot",{name:"end"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return r}();var renderKnob=function(r,e){var n=e.knob,a=e.value,t=e.ratio,o=e.min,i=e.max,s=e.disabled,c=e.pressed,l=e.pin,b=e.handleKeyboard;var d=r?"right":"left";var g=function(){var r={};r[d]=t*100+"%";return r};return h("div",{onKeyDown:function(r){var e=r.key;if(e==="ArrowLeft"||e==="ArrowDown"){b(n,false);r.preventDefault();r.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){b(n,true);r.preventDefault();r.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":n==="A","range-knob-b":n==="B","range-knob-pressed":c,"range-knob-min":a===o,"range-knob-max":a===i},style:g(),role:"slider",tabindex:s?-1:0,"aria-valuemin":o,"aria-valuemax":i,"aria-disabled":s?"true":null,"aria-valuenow":a},l&&h("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),h("div",{class:"range-knob",role:"presentation",part:"knob"}))};var ratioToValue=function(r,e,n,a){var t=(n-e)*r;if(a>0){t=Math.round(t/a)*a+e}return clamp(e,t,n)};var valueToRatio=function(r,e,n){return clamp(0,(r-e)/(n-e),1)};Range.style=rangeCss;export{Range as nano_range};
-//# sourceMappingURL=nano-range.entry.js.map