@nanoporetech-digital/components 1.13.13 → 1.13.14

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

@@ -1,1110 +0,0 @@
-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';
-
-const 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}";
-
-const NavItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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;
-    /**
-     * Href to link to
-     */
-    this.href = null;
-    /**
-     * Target to use for links
-     */
-    this.target = '_self';
-    /**
-     * Disable the nav item
-     */
-    this.disabled = false;
-    /**
-     * Whether a secondary menu should be or is currently open
-     */
-    this.open = false;
-    /**
-     * Whether this menu item is currently 'selected'
-     */
-    this.selected = false;
-    /**
-     * Screen pixel width to activate the secondary menu
-     */
-    this.secondaryActiveWidth = 0;
-    /**
-     * Secondary fallback function for when the secondary menu is no longer active.
-     */
-    this.secondaryFallback = () => { };
-    /**
-     * Whether secondary menus should close on blur
-     */
-    this.closeOnBlur = true;
-    this.closeSecondary = async () => {
-      this.open = false;
-      if (!this.hasSecondarySlot || !this.didOpen)
-        return;
-      this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
-      let status = await displayTransition(this.secondaryDiv, 'open', false);
-      this.didOpen = status !== 'hidden';
-    };
-    this.openSecondary = async () => {
-      if (window.innerWidth < this.secondaryActiveWidth) {
-        this.secondaryFallback.call(this);
-        return;
-      }
-      this.open = true;
-      if (!this.hasSecondarySlot || this.didOpen)
-        return;
-      this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
-      let status = await displayTransition(this.secondaryDiv, 'open', true);
-      this.didOpen = status === 'shown';
-    };
-    this.toggleSecondary = () => {
-      if (!this.hasSecondarySlot)
-        return;
-      if (this.didOpen)
-        this.closeSecondary();
-      else
-        this.openSecondary();
-    };
-    this.handleFocus = () => {
-      this.hasFocus = true;
-      // opens secondary panel when activated via hover
-      if (this.href && !this.animating && this.hasSecondarySlot)
-        this.openSecondary();
-      this.nanoFocus.emit();
-    };
-    this.handleHostBlur = () => {
-      if (this.animating)
-        return;
-      // tab index is added to host when secondary panel opens
-      // to return focus after secondary panel closes. Remove now if it was added
-      this.el.removeAttribute('tabindex');
-      this.hasFocus = false;
-      this.nanoBlur.emit();
-    };
-    // direct host clicks to internal button
-    this.handleHostClick = (ev) => {
-      if (!this.hasAnchorEle)
-        return;
-      let foundlink = ev.target.closest('a, button');
-      if (!foundlink)
-        this.btn.click();
-    };
-    // handles secondary menu hover behaviour.
-    this.handleMouseEnter = async () => {
-      if (!this.href ||
-        this.animating ||
-        !this.hasSecondarySlot ||
-        (this.globalNavEle && !this.globalNavEle.classList.contains('ready')))
-        return;
-      // if there are sibling secondary panels currently open,
-      // we need to wait before opening otherwise we get unwanted overlapping
-      let timeToWait = 0;
-      if (getSiblings(this.el, '.secondary-open.has-secondary').length)
-        timeToWait = 300;
-      clearTimeout(this.waitHide);
-      this.fromHover = true;
-      this.animating = true;
-      this.waitShow = window.setTimeout(async () => await this.openSecondary(), timeToWait);
-      this.animating = false;
-    };
-    // handles secondary menu hover-out behaviour.
-    this.handleMouseLeave = () => {
-      if (!this.href)
-        return;
-      clearTimeout(this.waitShow);
-      this.fromHover = true;
-      this.animating = true;
-      // prevent closing immediately - makes navigating to items within more forgiving
-      this.waitHide = window.setTimeout(async () => await this.closeSecondary(), 300);
-      this.animating = false;
-    };
-    this.handleClick = () => {
-      this.fromHover = false;
-      if (this.hasSecondarySlot)
-        this.toggleSecondary();
-      else
-        this.el.querySelector('*').click();
-    };
-    this.blur = (ev) => {
-      if (!this.didOpen || this.animating)
-        return;
-      if (!this.closeOnBlur)
-        return;
-      // if event is associated with this element don't close
-      if (ev && ev.relatedTarget) {
-        if (ev.relatedTarget === this.el ||
-          ev.relatedTarget === this.btn ||
-          this.foundThisNavEle(ev.relatedTarget)) {
-          this.secondaryDiv.focus({ preventScroll: true });
-          return;
-        }
-      }
-      this.btn.removeEventListener('focusout', this.blur);
-      this.secondaryDiv.removeEventListener('focusout', this.blur);
-      window.removeEventListener('blur', this.blur);
-      this.didBlur = true;
-      this.open = false;
-      if (!ev.relatedTarget)
-        setTimeout(() => {
-          this.el.focus({ preventScroll: true });
-        }, 50);
-    };
-  }
-  /**
-   * Sets focus on the first button or anchor present. Use this method instead of the global
-   * `element.focus()`.
-   */
-  async setFocus() {
-    if (!this.btn)
-      return;
-    this.btn.focus();
-  }
-  /**
-   * Public open watcher
-   */
-  openChange() {
-    this.open ? this.openSecondary() : this.closeSecondary();
-  }
-  /**
-   * Internal open watcher
-   */
-  didOpenChange() {
-    if (!this.hasSecondarySlot)
-      return;
-    if (!this.didOpen) {
-      /* the secondadry panel is not closing via hover,
-      remove blur events, add focus back to originating button */
-      if (!this.fromHover) {
-        this.btn.removeEventListener('focusout', this.blur);
-        this.secondaryDiv.removeEventListener('focusout', this.blur);
-      }
-      setTimeout(() => {
-        if (!this.fromHover && !this.didBlur)
-          this.btn.focus({ preventScroll: true });
-        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });
-      }, 50);
-    }
-    else {
-      this.didBlur = false;
-      /* the secondadry panel is not opening via hover,
-      scroll content into view, focus on it and add blur events */
-      if (!this.fromHover) {
-        const panelio = new window.IntersectionObserver((data) => {
-          if (data[0].boundingClientRect.top < 0) {
-            this.secondaryDiv.scrollIntoView({
-              behavior: 'smooth',
-            });
-          }
-          panelio.disconnect();
-        }, { threshold: 1 });
-        panelio.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 });
-      }
-    }
-  }
-  // utility to traverse up, to see if element is nested within current nav-item
-  foundThisNavEle(el) {
-    let found = el.closest('nano-nav-item');
-    found = found === el ? el.parentElement.closest('nano-nav-item') : found;
-    if (!found)
-      return false;
-    if (found === this.el)
-      return true;
-    return this.foundThisNavEle(found);
-  }
-  componentWillLoad() {
-    let secondaryEle = this.el.querySelector('[slot="secondary"]');
-    this.hasSecondarySlot = !!secondaryEle;
-    let link = getDirectChildren(this.el, 'a, button')[0];
-    this.hasAnchorEle = !!link;
-    if (link) {
-      this.href = link.href
-        ? link.href
-        : null;
-      this.btn = link;
-      if (this.hasSecondarySlot)
-        this.btn.addEventListener('click', this.toggleSecondary);
-      this.btn.addEventListener('focus', this.handleFocus);
-      this.btn.addEventListener('blur', this.handleHostBlur);
-    }
-  }
-  connectedCallback() {
-    this.isInGlobalNav = false;
-    this.isInMenuDrawer = false;
-    this.globalNavEle = this.el.closest('nano-global-nav');
-    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');
-    this.isInMenu = !!this.el.closest('nano-menu');
-    this.isInGlobalNav =
-      this.el.parentElement === this.globalNavEle ||
-        !!this.el.closest('.global-nav');
-  }
-  render() {
-    return (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: (a) => (this.btn = a), 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: (btn) => (this.btn = btn), 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: (div) => (this.secondaryDiv = div), tabindex: "-1" }, h("div", { class: "secondary-menu-content" }, h("slot", { name: "secondary" })), h("div", { class: "secondary-menu-mask", onClick: this.closeSecondary }))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["openChange"],
-    "didOpen": ["didOpenChange"]
-  }; }
-};
-NavItem.style = navItemCss;
-
-const 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}";
-
-const Select = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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 will be true when the control is in an invalid state.
-     * Validity is determined by the `required` prop. Or if custom validity message is set.
-     */
-    this.invalid = false;
-    /**
-     * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
-     */
-    this.autofocus = false;
-    /**
-     * If `true`, the user cannot interact with the select.
-     */
-    this.disabled = false;
-    /**
-     * When should the field perform validation
-     */
-    this.validateOn = 'submit';
-    /**
-     * Whether to show validation errors underneath input
-     */
-    this.showInlineError = true;
-    /**
-     * Visually hide the label - but make it accessible.
-     */
-    this.hideLabel = false;
-    /**
-     * Enable floating label behaviour. Will disable placeholder if set.
-     */
-    this.floatLabel = false;
-    /**
-     * 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.
-     */
-    this.multiple = false;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.selectId + '-name';
-    /**
-     * If `true`, the user cannot modify the value.
-     */
-    this.readonly = false;
-    /**
-     * If `true`, the user must fill in a value before submitting a form.
-     */
-    this.required = false;
-    /**
-     * in multiple mode, allow users to enter their own values
-     */
-    this.allowCustomValues = false;
-    /**
-     * The value of the select.
-     */
-    this.value = this.multiple
-      ? []
-      : '';
-    /**
-     * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]
-     */
-    this.options = [];
-    /**
-     * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
-     */
-    this.clearSelect = false;
-    /**
-     * Hide the native select element and cover with a value 'mask'.
-     * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
-     */
-    this.mask = false;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
-     */
-    this.debounce = 0;
-    /**
-     * Whether to use native <select> elements. Setting to false will use a similar UI as multiple="true"
-     */
-    this.native = true;
-    this.customValidate = () => {
-      this.nativeSelect.setCustomValidity('');
-      // add custom validations 'cos html5 validations are a bit rubbish on selects
-      if (this.required && !this.getNativeValue().length) {
-        this.nativeSelect.setCustomValidity('Please fill in this field.');
-        return true;
-      }
-      if (this.getNativeValue().length &&
-        !this.allowCustomValues &&
-        !this.isValidValues()) {
-        this.nativeSelect.setCustomValidity('Please choose an item from this field.');
-        return true;
-      }
-      if (this.max && this.getNativeValue().length > this.max) {
-        this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);
-        return true;
-      }
-      if (this.min && this.getNativeValue().length < this.min) {
-        this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);
-        return true;
-      }
-      return false;
-    };
-    this.showInlineValidation = (ev) => {
-      if (this.validateOn === 'submitThenDirty')
-        this.validateOn = 'dirty';
-      this.invalid = false;
-      this.showErrorMsg = false;
-      this.errorMessage = '';
-      if (!this.nativeSelect.validity.valid) {
-        this.errorMessage = this.nativeSelect.validationMessage;
-        this.invalid = true;
-        this.showErrorMsg = true;
-      }
-      this.nanoValidate.emit({
-        isValid: !this.invalid,
-        errorMessage: this.errorMessage,
-        originalEvent: ev,
-      });
-    };
-    this.handleInvalid = (ev) => {
-      this.invalid = true;
-      if (this.validateOn === 'submit')
-        this.invalid = this.showErrorMsg = this.customValidate();
-      if (this.showInlineError)
-        ev.preventDefault();
-      setTimeout((_) => this.showInlineValidation(ev), 20);
-    };
-    /* Event handling */
-    this.onChange = (ev) => {
-      if (!this.readonly && !this.disabled && ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      this.value = this.getNativeValue();
-    };
-    this.onBlur = () => {
-      if (this.multiple) {
-        this.currLiIndex = -1;
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-      }
-      this.hasFocus = false;
-      setTimeout(() => {
-        if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)
-          this.showInlineValidation();
-      }, 20);
-      this.nanoBlur.emit();
-    };
-    this.onFocus = () => {
-      if (this.multiple) {
-        this.currLiIndex = -1;
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-        document.addEventListener('mousedown', this.handleDocumentMouseDown);
-        this.openList();
-      }
-      this.hasFocus = true;
-      this.nanoFocus.emit();
-    };
-    this.clearSelectValue = (ev) => {
-      if (this.clearSelect && !this.readonly && !this.disabled && ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      if (this.multiple) {
-        this.value = [];
-        let options = this.nativeSelect.querySelectorAll('option');
-        if (options.length)
-          options.forEach((n) => n.remove());
-        this.currInsertIndex = -1;
-        this.setAvailOpts();
-      }
-      else
-        this.value = '';
-      this.onChange();
-    };
-    this.onClick = () => {
-      this.setFocus();
-      this.openList();
-    };
-    /* Multi event handlers */
-    this.onMultiInputBlur = () => {
-      if (this.allowCustomValues)
-        return;
-      this.inputSearchVal = '';
-      this.setAvailOpts();
-    };
-    this.onDragStart = (ev) => {
-      let ele = ev.target;
-      this.dragVal = ele.dataset.value;
-    };
-    this.onDragEnd = (ev) => {
-      this.dragVal = null;
-      ev.preventDefault();
-    };
-    this.onDragLeave = (ev) => {
-      let ele = ev.target;
-      let spanVal = ele.dataset && ele.dataset.value ? ele.dataset.value : null;
-      if (!spanVal ||
-        this.dragVal === spanVal ||
-        !this.value.includes(this.dragVal)) {
-        ev.preventDefault();
-        return;
-      }
-      let to = this.value.indexOf(spanVal);
-      let from = this.value.indexOf(this.dragVal);
-      let tmpArr = this.value;
-      let tmpVal = tmpArr[to];
-      tmpArr[to] = tmpArr[from];
-      tmpArr[from] = tmpVal;
-      this.value = [...tmpArr];
-    };
-    this.onMultiInput = (ev) => {
-      this.inputSearchVal = ev.target.value;
-      this.setAvailOpts();
-      this.openList();
-      this.nanoSearchChange.emit({ value: ev.target.value });
-    };
-    this.onOptFocus = (ev) => {
-      let activeEle = this.getActiveOpt();
-      if (activeEle)
-        activeEle.classList.remove('has-focus');
-      ev.target.classList.add('has-focus');
-    };
-    this.onHostClick = () => {
-      setTimeout((_) => {
-        if (!this.multiple || this.hasFocus)
-          return;
-        this.setFocus();
-      }, 20);
-    };
-    this.handleDocumentMouseDown = (ev) => {
-      const target = ev.target;
-      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
-        this.listOpen = false;
-        this.onBlur();
-      }
-    };
-    this.handleDocumentKeyDown = (ev) => {
-      if (!this.multiple)
-        return;
-      if (!this.inputSearchVal) {
-        let rm;
-        switch (ev.key) {
-          case 'Backspace':
-            if (this.multiInput.previousElementSibling)
-              rm = this.multiInput.previousElementSibling;
-            else
-              break;
-            this.removeValue(rm.dataset.value || null);
-            break;
-          case 'Delete':
-            if (this.multiInput.nextElementSibling)
-              rm = this.multiInput.nextElementSibling;
-            else
-              break;
-            this.removeValue(rm.dataset.value || null);
-            break;
-          case 'ArrowLeft':
-          case 'ArrowRight':
-            if (!this.value.length)
-              break;
-            if (ev.key === 'ArrowLeft' && this.multiInput.previousSibling)
-              this.currInsertIndex--;
-            if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)
-              this.currInsertIndex++;
-            setTimeout(() => {
-              this.multiInput.focus();
-            }, 20);
-            ev.preventDefault();
-            break;
-        }
-      }
-      // navigated to component via keyboard. Open with down.
-      if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {
-        this.openList();
-        this.currLiIndex = -1;
-      }
-      // Close when tabbing outside of element
-      if (this.hasFocus && ev.key === 'Tab') {
-        setTimeout(() => {
-          if (document.activeElement &&
-            closestElement(this.el.tagName.toLowerCase(), document.activeElement) !== this.el) {
-            this.listOpen = false;
-            this.onBlur();
-            return;
-          }
-        });
-      }
-      // list open, navigate items with arrows
-      if (this.listOpen) {
-        const selectedItem = this.getActiveOpt();
-        let testIndex = this.listItems.indexOf(selectedItem) || this.currLiIndex;
-        switch (ev.key) {
-          case 'ArrowDown':
-          case 'ArrowUp':
-            ev.preventDefault();
-            if (ev.key === 'ArrowDown')
-              testIndex++;
-            else if (ev.key === 'ArrowUp')
-              testIndex--;
-            if (testIndex < 0) {
-              this.currLiIndex = 0;
-              this.multiInput.focus();
-              return;
-            }
-            let foundIndex = this.listItems[testIndex]
-              ? testIndex
-              : this.currLiIndex;
-            setTimeout(() => {
-              this.listItems[foundIndex].focus();
-              this.currLiIndex = foundIndex;
-            }, 20);
-            return;
-          case 'Enter':
-          case ' ':
-            if (this.listItems[this.currLiIndex]) {
-              this.addValue(this.listItems[this.currLiIndex].dataset.value);
-              ev.preventDefault();
-            }
-            return;
-          case 'Escape':
-            this.listOpen = false;
-            return;
-        }
-      }
-      if (this.currLiIndex > -1)
-        ev.preventDefault();
-    };
-  }
-  debounceChanged() {
-    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);
-  }
-  // @Watch('options')
-  shouldValidate() {
-    if (this.onInit)
-      return;
-    if (this.invalid)
-      this.showErrorMsg = this.invalid = false;
-    this.customValidate();
-    if (this.validateOn !== 'dirty')
-      return;
-    this.showInlineValidation();
-  }
-  /**
-   * Update the native select element when the value changes
-   */
-  valueChanged() {
-    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((_) => this.shouldValidate(), 20);
-    this.nanoChange.emit({ value: this.value });
-    if (this.onInit)
-      return;
-  }
-  optionsChanged() {
-    this.setAvailOpts();
-    if (this.hasFocus)
-      this.openList();
-  }
-  /**
-   * Setup or rip down custom combobox when select is switched from mutliple
-   */
-  multiChange() {
-    this.switchValue();
-    if (this.multiple)
-      this.setupMulti();
-    else if (this.popover)
-      this.popover.destroy();
-  }
-  setupMulti() {
-    setTimeout(() => {
-      this.setAvailOpts();
-      this.popover = new Popover(this.selectWrap, this.multiList, {
-        placement: 'bottom-start',
-        skidding: 0,
-        distance: 0,
-        onTransitionEnd: () => {
-          if (!this.listOpen) {
-            this.multiList.scrollTop = 0;
-          }
-        },
-      });
-    }, 20);
-  }
-  listOpenChange() {
-    if (this.listOpen)
-      this.popover.show();
-    else
-      this.popover.hide();
-  }
-  /**
-   * Get the current state of the control.
-   * @param validateFirst - perform validation first before reporting
-   * @returns `{ isValid: boolean, errorMessage: string }`
-   */
-  async reportValidity(validateFirst) {
-    if (validateFirst)
-      this.showInlineValidation();
-    return {
-      isValid: !this.invalid,
-      errorMessage: this.errorMessage,
-    };
-  }
-  /**
-   * Sets focus on the specified `nano-select`. Use this method instead of the global
-   * `select.focus()`.
-   */
-  async setFocus() {
-    if (this.nativeSelect && !this.multiple)
-      this.nativeSelect.focus();
-    else if (this.multiInput)
-      this.multiInput.focus();
-  }
-  /**
-   * Returns the native `<select>` element used under the hood.
-   */
-  getSelectElement() {
-    return Promise.resolve(this.nativeSelect);
-  }
-  /**
-   * Invalidate the field and show a custom error message.
-   * To clear the error you will need to re-call this method with an empty string.
-   */
-  async showError(message) {
-    if (this.nativeSelect) {
-      this.nativeSelect.setCustomValidity(message);
-      this.nativeSelect.reportValidity();
-    }
-  }
-  /* Logic */
-  // sets the available options of a multi select.
-  // Removes ones already selected
-  // Filters one if user starts to search
-  setAvailOpts() {
-    if (!this.multiple)
-      return;
-    this.availOpts = this.options.filter((opt) => {
-      let toFind = typeof opt === 'string' ? opt : opt['value'];
-      let strFilter = typeof opt === 'string' ? opt : opt['label'] || opt['value'];
-      if (!toFind)
-        return false;
-      return (!this.value.includes(toFind) &&
-        (!this.multiInput ||
-          strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >
-            -1));
-    });
-  }
-  getNativeValue() {
-    const nsl = this.nativeSelect;
-    if (!nsl)
-      return '';
-    if (!this.multiple)
-      return nsl.options[nsl.selectedIndex] &&
-        nsl.options[nsl.selectedIndex].hasAttribute('value')
-        ? nsl.options[nsl.selectedIndex].value
-        : '';
-    else {
-      return Array.from(nsl.options).map((opt) => {
-        if (opt.selected && opt.hasAttribute('value'))
-          return opt.value;
-      });
-    }
-  }
-  setNativeValue() {
-    const nsl = this.nativeSelect;
-    if (!nsl)
-      return null;
-    if (!this.multiple)
-      nsl.value = this.value;
-    else {
-      Array.from(this.nativeSelect.options)
-        .filter((opt) => {
-        if (typeof this.value === 'string')
-          return opt.value === this.value;
-        else
-          return this.value.find((val) => {
-            if (typeof val === 'string')
-              return val === this.value;
-            else if (val['value'])
-              return val === val['value'];
-          });
-      })
-        .map((opt) => {
-        opt.selected = true;
-      });
-    }
-  }
-  isValidValues() {
-    const nsl = this.nativeSelect;
-    if (!nsl)
-      return null;
-    const selected = this.nativeSelect.querySelectorAll('option:checked');
-    const values = Array.from(selected).map((el) => el.value || null);
-    if (this.multiple) {
-      return values.reduce((accumulator, currentValue) => {
-        if (!accumulator)
-          return false;
-        return !!this.options.find((opt) => opt['value'] ? opt['value'] === currentValue : opt === currentValue);
-      }, true);
-    }
-    else {
-      return this.options.find((opt) => opt['value'] ? opt['value'] === values[0] : opt === values[0]);
-    }
-  }
-  openList() {
-    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;
-  }
-  addValue(value) {
-    if (!this.multiple)
-      return;
-    if (this.value && this.value.length && this.value.includes(value))
-      return;
-    if (this.max && this.value.length === this.max)
-      return;
-    this.currInsertIndex++;
-    this.value = [
-      ...this.value.slice(0, this.currInsertIndex),
-      value,
-      ...this.value.slice(this.currInsertIndex),
-    ];
-    this.inputSearchVal = '';
-    this.setAvailOpts();
-    this.setFocus();
-    this.openList();
-  }
-  removeValue(toFind) {
-    if (!this.multiple || !this.value.length)
-      return;
-    if (!toFind)
-      toFind = this.value[this.value.length - 1];
-    this.value = this.value.filter((val) => val !== toFind);
-    if (this.currInsertIndex > this.value.length - 1)
-      this.currInsertIndex = this.value.length - 1;
-    this.setFocus();
-    this.openList();
-  }
-  switchValue() {
-    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;
-  }
-  isSelected(value) {
-    if (this.multiple)
-      return this.value.find((val) => val === value);
-  }
-  getLabel(val) {
-    let foundVal = this.options.find((opt) => {
-      return opt['value'] ? opt['value'] === val : opt === val;
-    });
-    if (!foundVal)
-      return null;
-    return foundVal['label'] ? foundVal['label'] : foundVal;
-  }
-  slotChangeObserver() {
-    const mo = (this.mo = new MutationObserver((mrs) => this.processSlottedContent(mrs)));
-    mo.observe(this.el, { childList: true, subtree: true });
-  }
-  processSlottedContent(mutations) {
-    // see if we have label / helper content
-    this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
-    this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
-    this.hasIconSlot = !!this.el.querySelector('[slot="icon"]');
-    if (!mutations) {
-      // find legacy select. Take attrs and apply to our element
-      let existingselect = this.el.querySelector('select:not([class*="sc-nano-select"])');
-      if (existingselect) {
-        Array.from(existingselect.attributes)
-          .filter((attr) => attr.specified && attr.nodeName in this)
-          .map((attr) => (this[attr.nodeName] = attr.nodeValue));
-      }
-      // find legacy label. Apply to our element
-      let existingLabel = this.el.querySelector('label:not([class*="sc-nano-select"])');
-      if (existingLabel)
-        this.label = this.label || existingLabel.innerHTML;
-      // find legacy slotted options. Apply them and add any relevant values
-      let legacyOpts = this.el.querySelectorAll('option:not([class*="sc-nano-select"])');
-      this.watchValue = false;
-      if (legacyOpts && legacyOpts.length) {
-        let options = [];
-        legacyOpts.forEach((option) => {
-          options.push({
-            label: option.label || option.innerText,
-            value: option.value,
-          });
-          if (!option.selected || !option.value)
-            return;
-          if (this.multiple)
-            this.value.push(option.value);
-          else
-            this.value = option.value;
-        });
-        this.options = options;
-      }
-      if (legacyOpts.length || existingLabel || existingselect) {
-        // empty all legacy slotted stuff
-        let children = this.el.querySelectorAll('[slot="legacy"]');
-        if (children)
-          children.forEach((n) => n.parentNode.removeChild(n));
-      }
-      this.watchValue = true;
-    }
-    if (mutations &&
-      !Array.from(mutations[0].addedNodes).find((node) => node.nodeName.toLowerCase() === 'nano-select-option'))
-      return;
-    // find nano-select-options
-    let nanoOpts = this.el.querySelectorAll('nano-select-option');
-    if (nanoOpts && nanoOpts.length) {
-      let options = [];
-      nanoOpts.forEach((option) => {
-        options.push({
-          label: option.label || option.innerText,
-          value: option.value,
-        });
-        if (!option.selected || !option.value)
-          return;
-        if (this.multiple)
-          this.value.push(option.value);
-        else
-          this.value = option.value;
-      });
-      this.options = options;
-    }
-    this.setAvailOpts();
-  }
-  getActiveOpt() {
-    return this.multiList.querySelector('.has-focus');
-  }
-  /* Stencil Component lifecycle hooks */
-  connectedCallback() {
-    this.debounceChanged();
-    this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {
-      detail: this.el,
-    }));
-  }
-  disconnectedCallback() {
-    document.dispatchEvent(new CustomEvent('nanoDidUnload', {
-      detail: this.el,
-    }));
-    if (this.mo)
-      this.mo.disconnect();
-    if (this.popover)
-      this.popover.destroy();
-  }
-  componentDidLoad() {
-    this.slotChangeObserver();
-    if (this.multiple)
-      this.setupMulti();
-    this.customValidate();
-  }
-  componentWillLoad() {
-    this.switchValue();
-    this.processSlottedContent();
-    this.onInit = false;
-  }
-  renderLabel(labelId, position) {
-    let classes = {};
-    if (position === 'float') {
-      classes = { 'placeholder-as-label': true };
-    }
-    else {
-      classes = { label: true, 'visually-hide': this.hideLabel };
-    }
-    if (!this.label && !this.hasLabelSlot)
-      return;
-    return (h("label", { class: classes, htmlFor: this.selectId, id: labelId }, this.label && this.label, !this.label && !!this.hasLabelSlot && h("slot", { name: "label" })));
-  }
-  render() {
-    const labelId = this.selectId + '-lbl';
-    const moreId = this.showInlineError || this.hasHelperSlot
-      ? this.selectId + '-moreId'
-      : '';
-    const listId = 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: '' });
-    }
-    let optionMenu = this.listOpen;
-    let valueMarkup;
-    if (this.multiple) {
-      let input = (h("input", { class: "multi-input", id: this.selectId, ref: (input) => (this.multiInput = input), 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": labelId + ' ' + moreId, "aria-controls": listId, "aria-expanded": optionMenu ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-autocomplete": "list" }));
-      if (!!this.value.length) {
-        valueMarkup = this.value.map((val, i) => {
-          let label = this.options.find((opt) => {
-            return opt['value'] ? opt['value'] === val : opt === val;
-          });
-          label = label && label['label'] ? label['label'] : val;
-          let toReturn = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "multi-value" }, h("span", null, label), h("button", { class: "multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
-              this.removeValue(val);
-            }, onMouseUp: () => {
-              this.removeValue(val);
-            } }, h("nano-icon", { name: "light/times" }))));
-          if (i === 0 && this.currInsertIndex < 0)
-            toReturn = [input, toReturn];
-          else if (i === this.currInsertIndex)
-            toReturn = [toReturn, input];
-          return toReturn;
-        });
-      }
-      else
-        valueMarkup = input;
-    }
-    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(labelId), h("div", { class: "select", ref: (div) => (this.selectWrap = div) }, this.floatLabel && this.renderLabel(labelId, '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" }, valueMarkup),
-      h("ul", { role: "listbox", ref: (ul) => (this.multiList = ul), "aria-multiselectable": "true", "aria-required": this.required, "aria-expanded": optionMenu ? 'true' : 'false', "aria-hidden": !optionMenu, hidden: !optionMenu, id: listId, class: {
-          'multi-select-box': true,
-          'multi-select-box--open': optionMenu,
-        } }, this.allowCustomValues && this.inputSearchVal.length > 0 && (h("li", { "data-value": this.inputSearchVal, role: "option", tabindex: "-1", ref: (li) => this.listItems.push(li), onMouseDown: () => {
-          this.addValue(this.inputSearchVal);
-        }, onFocus: this.onOptFocus }, "Add ", this.inputSearchVal)), this.availOpts.map((option) => {
-        let optval, label;
-        if (option['value']) {
-          optval = option['value'];
-          label = option['label'] || option['value'];
-        }
-        else if (typeof option === 'string') {
-          optval = option;
-          label = optval;
-        }
-        if (!optval)
-          return;
-        return (h("li", { role: "option", key: optval, "data-value": optval, ref: (li) => this.listItems.push(li), tabindex: "-1", "aria-selected": this.isSelected(optval) ? 'true' : 'false', onMouseDown: () => {
-            this.addValue(optval);
-          }, onFocus: this.onOptFocus }, label));
-      })),
-      h("select", { id: this.selectId + '-hidden', class: "native-select", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.value.map((val) => {
-        return (h("option", { value: val, selected: true }, val));
-      })),
-    ], !this.multiple && (h("select", { id: this.selectId, class: "native-select", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, 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((option, i) => {
-      if (option['value'] || option['label'])
-        return (h("option", { key: option['label'] + i, label: option['label'], value: option['value'], selected: option['value'] === this.value ||
-            (!this.value && !option['value']), disabled: !option['value'] && this.required }, option['label'] ? option['label'] : option['value']));
-      else
-        return (h("option", { key: option + i, value: option, selected: option === this.value }, option));
-    }), 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: moreId }, !!this.showInlineError ? (h("div", { class: "error" }, this.errorMessage)) : (''), h("div", { class: "helper" }, h("slot", { name: "helper" }))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "required": ["shouldValidate"],
-    "disabled": ["shouldValidate"],
-    "min": ["shouldValidate"],
-    "max": ["shouldValidate"],
-    "validateOn": ["shouldValidate"],
-    "readonly": ["shouldValidate"],
-    "value": ["valueChanged"],
-    "options": ["optionsChanged"],
-    "multiple": ["multiChange"],
-    "listOpen": ["listOpenChange"]
-  }; }
-};
-let selectIds = 0;
-Select.style = selectCss;
-
-export { NavItem as nano_nav_item, Select as nano_select };
-
-//# sourceMappingURL=nano-nav-item_2.entry.js.map