@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/esm/nano-global-nav-user-profile_3.entry.js

@@ -1,1101 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { r as registerInstance, j as getAssetPath, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
-import { h, t as transformTag } from './renderer-4bc3e2dc.js';
-import { b as getSiblings, g as getDirectChildren, c as closestElement } from './dom-fafdec9a.js';
-import { d as displayTransition } from './transitions-c09bd7f6.js';
-import { g as getTabbableElements } from './tabbable-44932eb7.js';
-import { g as getActiveElement } from './active-element-a2502948.js';
-import { c as createColorClasses } from './theme-d553c17a.js';
-import { d as debounce, a as debounceEvent } from './throttle-df960210.js';
-import { F as FormControlWrap, a as FormControl } from './form-control-f48fa873.js';
-
-const GlobalNavUserProfile = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * Logged in user details automatically populated from MyAccount
-     */
-    myAccountUser;
-    /**
-     * Link to the user profile
-     */
-    userProfileUrl;
-    // Render output
-    render() {
-        return (!!this.myAccountUser && (h("a", { key: 'af80219c25fba785b6f7d18afef4a41b9ced4765', href: this.userProfileUrl, class: "user-profile" }, h("div", { key: '6ae0f4f9b48782faadb43d1594159e3fad9ee63d', class: "left" }, h("div", { key: '0bd20abade1f0fe5822aba9c2217d80124d62b20', class: "avatar-container" }, h("img", { key: '1a7096bd20754f3faf5ab150da0ebe2fe2684188', class: "avatar", src: this.myAccountUser?.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (h("img", { key: 'ad532ddde8267a7049820fb7ae39f0302f208db9', class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), h("div", { key: '9521c0b57fcb9343a746b0d0243f111e0a014100', class: "user-details" }, h("span", { key: '710b0ab535abe256c1d778f0e7deda1f23465fb9', class: "name" }, this.myAccountUser.name), h("span", { key: 'c4e782a0a9e70b7e160bfd466430126d6d77cb28', class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), h("div", { key: '3725605d921254382356a40da96c45a9cc54d401', class: "right" }, h("div", { key: 'fd99f869ee248ce594b5fef4fe310cfe9a127dd4', class: "chevron-right" }, h("nano-icon", { key: '4e548bc839e06498c1f1641af7fe30715e572d97', slot: "icon-end", name: "light/chevron-right" }))))));
-    }
-};
-
-const navItemCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(.nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(.nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(.nano-icon[slot=icon-start]){padding-inline:var(--padding-start) 0}:host .link ::slotted(.nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end)}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline:0 var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(.nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(.nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:\"\";background-color:rgb(12, 90, 113);block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:transform 0.2s ease}:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before,:host(.nano-global-nav-bar.selected) button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .text{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}";
-const NanoNavItemStyle0 = navItemCss;
-
-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);
-    }
-    hasSecondarySlot = false;
-    btn;
-    fromHover;
-    animating = false;
-    waitHide;
-    waitShow;
-    globalNavEle;
-    secondaryDiv;
-    hasAnchorEle = false;
-    didOpen = false;
-    isInGlobalNav = false;
-    isInMenuDrawer = false;
-    isInMenu = false;
-    hasFocus = false;
-    get el() { return getElement(this); }
-    /**
-     * Href to link to
-     */
-    href = null;
-    /**
-     * Target to use for links
-     */
-    target = '_self';
-    /**
-     * Disable the nav item
-     */
-    disabled = false;
-    /**
-     * Whether a secondary menu should be or is currently open
-     */
-    open = false;
-    /**
-     * Whether this menu item is currently 'selected'
-     */
-    selected = false;
-    /**
-     * Screen pixel width to activate the secondary menu
-     */
-    secondaryActiveWidth = 0;
-    /**
-     * Secondary fallback function for when the secondary menu is no longer active.
-     */
-    secondaryFallback = () => { };
-    /**
-     * Whether secondary menus should close on blur
-     */
-    closeOnBlur = true;
-    /**
-     * Will show an indicator badge - only when placed in a nano-menu-draw
-     */
-    notification = false;
-    /**
-     * Emitted when the nav item closes it's secondary navigation.
-     */
-    nanoClose;
-    /**
-     * Emitted when the nav item opens it's secondary navigation.
-     */
-    nanoOpen;
-    /**
-     * Emitted when the nav item is about to open it's secondary navigation.
-     */
-    nanoOpening;
-    /**
-     * Emitted when the nav item is about to close it's secondary navigation.
-     */
-    nanoClosing;
-    /**
-     * Emitted when the nav item loses focus.
-     */
-    nanoBlur;
-    /**
-     * Emitted when the nav item has focus.
-     */
-    nanoFocus;
-    /**
-     * 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() {
-        if (this.open)
-            this.openSecondary();
-        else
-            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 */
-            setTimeout(() => {
-                if (!this.fromHover &&
-                    (!document.activeElement || document.activeElement === document.body))
-                    this.btn.focus({ preventScroll: true });
-                this.el.tabIndex = null;
-                this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });
-            }, 50);
-        }
-        else {
-            /* the secondary 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 });
-                const focusableChild = getTabbableElements(this.secondaryDiv, true);
-                if (focusableChild[0])
-                    focusableChild[0].focus();
-                this.el.tabIndex = -1;
-                this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });
-            }
-        }
-    }
-    handleClose(e) {
-        if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur)
-            return;
-        if (!e.composedPath().some((el) => el === this.secondaryDiv))
-            this.toggleSecondary();
-    }
-    closeSecondary = async () => {
-        if (!this.hasSecondarySlot || !this.didOpen)
-            return;
-        this.open = false;
-        await displayTransition(this.secondaryDiv, {
-            className: 'open',
-            show: false,
-        });
-        this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
-        this.didOpen = false;
-    };
-    openSecondary = async () => {
-        if (window.innerWidth < this.secondaryActiveWidth) {
-            this.secondaryFallback.call(this);
-            return;
-        }
-        if (!this.hasSecondarySlot || this.didOpen)
-            return;
-        this.open = true;
-        await displayTransition(this.secondaryDiv, {
-            className: 'open',
-            show: true,
-        });
-        this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
-        this.didOpen = true;
-    };
-    toggleSecondary = () => {
-        if (!this.hasSecondarySlot)
-            return;
-        if (this.didOpen)
-            this.closeSecondary();
-        else
-            this.openSecondary();
-    };
-    handleFocus = () => {
-        this.hasFocus = true;
-        // opens secondary panel when activated via hover
-        if (this.href && !this.animating && this.hasSecondarySlot)
-            this.openSecondary();
-        this.nanoFocus.emit();
-    };
-    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
-    handleHostClick = (ev) => {
-        if (!this.hasAnchorEle)
-            return;
-        const foundlink = ev.target.closest('a, button');
-        if (!foundlink)
-            this.btn.click();
-    };
-    // handles secondary menu hover behaviour.
-    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.
-    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;
-    };
-    handleClick = () => {
-        this.fromHover = false;
-        if (this.hasSecondarySlot)
-            this.toggleSecondary();
-    };
-    connectedCallback() {
-        const secondaryEle = this.el.querySelector('[slot="secondary"]');
-        this.hasSecondarySlot = !!secondaryEle;
-        const 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);
-        }
-        this.isInGlobalNav = false;
-        this.isInMenuDrawer = false;
-        this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));
-        this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));
-        this.isInMenu = !!this.el.closest(transformTag('nano-menu'));
-        this.isInGlobalNav =
-            this.el.parentElement === this.globalNavEle ||
-                !!this.el.closest('.global-nav');
-    }
-    componentDidLoad() {
-        this.openChange();
-    }
-    disconnectedCallback() {
-        this.btn.removeEventListener('click', this.toggleSecondary);
-        this.btn.removeEventListener('focus', this.handleFocus);
-        this.btn.removeEventListener('blur', this.handleHostBlur);
-    }
-    render() {
-        return (h(Host, { key: '5919fe6851a8132a0da2c592c6adf977113c3983', 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,
-                'nano-nav-item': true,
-            }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, h("div", { key: 'a05002c6eae1e2107453b02f91f6d7467744bc94', class: {
-                'nav-item': true,
-                'secondary-open': this.open,
-                selected: this.selected,
-            }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { key: '7ee0a4a54692664dd7b9d1f9e3d20215542929b3', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
-                notification: this.notification,
-            } }, h("slot", { key: '7795fd5db028cd67ba1511619a5be68dc1f3ed51', name: "icon-start" }), h("span", { key: 'e5373722117ca7adc74c0dc59fca8e20f6503099', class: "text" }, h("slot", { key: 'e1e1ebb8b1b18245fb1fff5795ba8c31c967d399' })), h("slot", { key: '63dc5d008a47f44c292ac17bb061944f488b176e', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { key: 'cd84e3be0022646f164e52663b4b1266c08d582f', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
-                notification: this.notification,
-            } }, h("slot", { key: '9ae194d22d839cf97257c01b1fca424bb4b8e6d1', name: "icon-start" }), h("span", { key: 'eff83bc860b026e62a57b4eede50913d65eabf06', class: "text" }, h("slot", { key: '41996ab72195124b483872ec231a5ca74fc73f9e' })), h("slot", { key: '1ef36027a860dfcf86e0f9f7c90ec49053fad9ff', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { key: '5c9ab8780e84391ef3b2b1350a8b89e7343b635a', class: "link" }, h("slot", { key: 'a673392b8038993b07c9bcff7312ca63ce077738', name: "icon-start" }), h("slot", { key: '7678cd1e024dc47694849ef3fd2ab89138857675' }), h("slot", { key: '15cedad4ab1d11c4fc0ce7d1867db7bfd59cccd3', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { key: '8c274fc1b47d8365321105ed13233abaa77bf408', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'f25ebc76515bdce5a8f04119da028b11acc0c9df', class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { key: '8d38f82ab2ebb96ec60d07716309ebc2b45d8f3b', name: "secondary" })), h("div", { key: '07404964bfdce1b0ed694308524f9eef30454efa', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
-    }
-    static get watchers() { return {
-        "open": ["openChange"],
-        "didOpen": ["didOpenChange"]
-    }; }
-};
-NavItem.style = NanoNavItemStyle0;
-
-const selectCss = ".sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n.sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value--closable.sc-nano-select {\n  padding-inline-end: 0;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select .nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
-const NanoSelectStyle0 = selectCss;
-
-let selectIds = 0;
-const Select = class {
-    nativeSelect;
-    valueItems = [];
-    dragVal;
-    mo;
-    selectId = `nano-select-${selectIds++}`;
-    rtl = false;
-    onInit = true;
-    customError = '';
-    get inputCtrl() {
-        return this._inputCtrl;
-    }
-    set inputCtrl(input) {
-        if (input === this._inputCtrl)
-            return;
-        this._inputCtrl = input;
-        this.setDataListOpts();
-    }
-    _inputCtrl;
-    // we don't want these rendered eles decorated with @State
-    // because that will cause re-renders. Use get/set to set datalist options
-    _selectWrap;
-    get selectWrap() {
-        return this._selectWrap;
-    }
-    set selectWrap(ele) {
-        if (this._selectWrap === ele)
-            return;
-        this._selectWrap = ele;
-        this.setDataListOpts();
-    }
-    _datalist;
-    get datalist() {
-        return this._datalist;
-    }
-    set datalist(ele) {
-        if (this._datalist === ele)
-            return;
-        this._datalist = ele;
-        this.setDataListOpts();
-    }
-    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.showInlineValidation = debounce(this.showInlineValidation, 50);
-    }
-    currInsertIndex = -1;
-    showErrorMsg = false;
-    errorMessage = '';
-    hasFocus = false;
-    hasLabelSlot = false;
-    hasHelperSlot = false;
-    hasHelperEndSlot = false;
-    inputSearchVal = '';
-    get el() { return getElement(this); }
-    /**
-     * 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.
-     */
-    get invalid() {
-        return this._invalid;
-    }
-    _invalid = false;
-    /**
-     * Current validation message - if any. @readonly
-     */
-    get validityMessage() {
-        if (!this.nativeSelect)
-            return '';
-        return this.nativeSelect.validationMessage;
-    }
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     */
-    color;
-    /**
-     * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
-     */
-    autofocus = false;
-    /**
-     * If `true`, the user cannot interact with the select.
-     */
-    disabled = false;
-    /**
-     * When should the field perform validation
-     * @default 'submitThenDirty'
-     */
-    validateOn = 'submitThenDirty';
-    /**
-     * Whether to show validation errors underneath input
-     */
-    showInlineError = true;
-    /**
-     * String to place within a label element. Alternatively use the 'label' slot
-     */
-    label;
-    /**
-     * Visually hide the label - but make it accessible.
-     */
-    hideLabel = false;
-    /**
-     * Enable floating label behaviour. Will disable placeholder if set.
-     */
-    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.
-     */
-    multiple = false;
-    /** When `multiple="true"`, control how many values to show within the control at once.
-     * After the maximum, "+n" will be shown to indicate the number of additional items that are selected. */
-    maxValuesVisible = 3;
-    _maxValuesVisible;
-    watchMaxValuesVisible() {
-        if (!this.multiple)
-            return;
-        this._maxValuesVisible =
-            this.maxValuesVisible === false ? NaN : Number(this.maxValuesVisible);
-        // make sure maxValuesVisible is a number
-        if (!Number.isNaN(this._maxValuesVisible)) {
-            if (this.currInsertIndex > this._maxValuesVisible) {
-                // make the input position is no more than the max
-                this.currInsertIndex = this._maxValuesVisible;
-            }
-        }
-        else {
-            // if maxValuesVisible is undefined, it will be `NaN`
-            this.currInsertIndex = this.value.length - 1;
-        }
-    }
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.selectId + '-name';
-    /**
-     * 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.
-     */
-    placeholder;
-    /**
-     * If `true`, the user cannot modify the value.
-     */
-    readonly = false;
-    /**
-     * If `true`, the user must fill in a value before submitting a form.
-     */
-    required = false;
-    /**
-     * The initial size of the control.
-     */
-    size;
-    /**
-     * Maximum number of options that can be selected when multiple is true
-     */
-    max;
-    /**
-     * Minimum number of options that can be selected when multiple is true
-     */
-    min;
-    /**
-     * The form element to associate the select with (its form owner). Must be the id of a form.
-     */
-    form;
-    /**
-     * in multiple mode, allow users to enter their own values
-     */
-    allowCustomValues = false;
-    /**
-     * The value of the select.
-     */
-    get value() {
-        return this._value || (this.multiple ? [] : '');
-    }
-    set value(val) {
-        if (!!val && !!this._value) {
-            if (JSON.stringify(val) === JSON.stringify(this._value))
-                return;
-        }
-        if (typeof val === 'string') {
-            if (this.multiple)
-                this._value = val.split(',');
-            else
-                this._value = val;
-        }
-        else if (Array.isArray(val)) {
-            if (this.multiple)
-                this._value = val;
-            else
-                this._value = val[0];
-        }
-    }
-    _value;
-    /**
-     * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
-     * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
-     * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
-     * Regardless - reading `options` will return the current component options - slotted or otherwise
-     */
-    get options() {
-        if (this._options.length)
-            return this._options;
-        if (!this.datalist || !this.datalist.activeOptions)
-            return [];
-        return this._elementOptions.map((ao) => {
-            const { value, selected, label, filterMeta } = ao;
-            return { value, selected, label, filterMeta };
-        });
-    }
-    set options(opts) {
-        this._options = opts.map((opt) => {
-            if (typeof opt === 'string')
-                return { value: opt, label: opt };
-            else
-                return opt;
-        });
-    }
-    _options = [];
-    _elementOptions = [];
-    /**
-     * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
-     */
-    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".
-     */
-    mask = false;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
-     */
-    debounce = 0;
-    debounceChanged() {
-        this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);
-    }
-    shouldValidate() {
-        if (this.onInit)
-            return;
-        if (this.invalid)
-            this.showErrorMsg = this._invalid = false;
-        this.customValidate();
-        if (this.validateOn !== 'dirty')
-            return;
-        this.showInlineValidation();
-    }
-    /**
-     * Update the native select element when the value changes
-     */
-    valueChanged() {
-        this.customValidate();
-        if (this.onInit) {
-            if (this.multiple)
-                this.currInsertIndex = this.value.length - 1;
-            return;
-        }
-        requestAnimationFrame(() => {
-            this.shouldValidate();
-            this.nanoChange.emit({ value: this.value });
-        });
-    }
-    /** nano-dropdown config options you can pass to the nested dropdown component */
-    dropDownConfig = {};
-    setDataListOpts() {
-        if (!this.datalist || !this.selectWrap)
-            return;
-        this.datalist.input = this.inputCtrl;
-        const currDWConfig = this.datalist.dropDownConfig || {};
-        this.datalist.dropDownConfig = {
-            ...currDWConfig,
-            ...this.dropDownConfig,
-            tetherTo: this.selectWrap,
-        };
-    }
-    /**
-     * A function that customizes the tag value to be rendered when `multiple="true"`.
-     * @param option - the incoming option that was selected
-     * @param index - the incoming option index
-     * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
-     */
-    valueTagTemplate;
-    // Custom Events
-    /**
-     * Emitted when the value has changed.
-     */
-    nanoChange;
-    /**
-     * Emitted when the select loses focus.
-     */
-    nanoBlur;
-    /**
-     * Emitted when the select has focus.
-     */
-    nanoFocus;
-    /**
-     * Emitted when the select has been created.
-     * @internal
-     */
-    nanoDidLoad;
-    /**
-     * Emitted when the select has been removed.
-     * @internal
-     */
-    nanoDidUnload;
-    /**
-     * Emitted when a keyboard input occurred on a multiple="true" input
-     */
-    nanoSearchChange;
-    /**
-     * Called when validation is performed (which depends on `validateOn`).
-     * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
-     */
-    nanoValidate;
-    // Public Methods
-    /**
-     * Get the current state of the control.
-     * @param validateFirst - perform validation first before reporting
-     * @returns `{ isValid: boolean, errorMessage: string }`
-     */
-    async reportValidity(validateFirst) {
-        return new Promise((resolve) => {
-            if (validateFirst) {
-                this.customValidate();
-                this.showInlineValidation();
-            }
-            setTimeout(() => {
-                resolve({
-                    isValid: !this._invalid,
-                    errorMessage: this.nativeSelect.validationMessage,
-                });
-            }, 50);
-        });
-    }
-    /**
-     * Sets focus on the specified `nano-select`. Use this method instead of the global
-     * `select.focus()`.
-     */
-    async setFocus() {
-        if (!this.inputCtrl)
-            return;
-        this.inputCtrl.focus();
-        setTimeout(() => this.inputCtrl.click(), 50);
-    }
-    /**
-     * @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.customError = message;
-            this.nativeSelect.setCustomValidity(message);
-            this.showInlineValidation();
-        }
-    }
-    /* Logic */
-    get valArray() {
-        return typeof this.value === 'string'
-            ? this.value.length
-                ? [this.value]
-                : []
-            : this.value;
-    }
-    isValidValues() {
-        return this.valArray.find((val) => this.options.find((opt) => opt.value === val));
-    }
-    customValidate = () => {
-        if (!this.nativeSelect ||
-            !!this.customError ||
-            !this.nativeSelect['setCustomValidity'])
-            return;
-        this.nativeSelect.setCustomValidity('');
-        // add custom validations 'cos html5 validations are a bit rubbish on selects
-        if (this.required && !this.valArray.length) {
-            this.nativeSelect.setCustomValidity('Please fill in this field.');
-            return true;
-        }
-        if (this.valArray.length &&
-            !this.allowCustomValues &&
-            !this.isValidValues()) {
-            this.nativeSelect.setCustomValidity('Please choose an item from this field.');
-            return true;
-        }
-        if (this.max && this.valArray.length > this.max) {
-            this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);
-            return true;
-        }
-        if (this.min && this.valArray.length < this.min) {
-            this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);
-            return true;
-        }
-        return false;
-    };
-    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,
-        });
-    };
-    handleInvalid = (ev) => {
-        this._invalid = true;
-        if (this.validateOn === 'submit') {
-            this._invalid = this.showErrorMsg = this.customValidate();
-        }
-        if (this.showInlineError)
-            ev.preventDefault();
-        requestAnimationFrame(() => this.showInlineValidation(ev));
-    };
-    setValue = (e) => {
-        e.preventDefault();
-        if (!this.multiple) {
-            this.value = e.detail.value;
-            return;
-        }
-        if (this.value && this.value.length && this.value.includes(e.detail.value))
-            return;
-        if (this.max && this.value.length === this.max)
-            return;
-        if (Number.isNaN(this._maxValuesVisible) ||
-            this.value.length <= this._maxValuesVisible) {
-            this.currInsertIndex++;
-        }
-        this.value = [
-            ...this.value.slice(0, this.currInsertIndex),
-            e.detail.value,
-            ...this.value.slice(this.currInsertIndex),
-        ];
-        this.inputSearchVal = '';
-    };
-    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 (Number.isNaN(this._maxValuesVisible) ||
-            this.value.length <= this._maxValuesVisible) {
-            this.currInsertIndex--;
-        }
-        this.setFocus();
-    };
-    slotChangeObserver() {
-        if (!window['MutationObserver'])
-            return;
-        const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
-        mo.observe(this.el, { childList: true, subtree: true });
-    }
-    processSlottedContent() {
-        // see if we have label / helper content
-        this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
-        this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
-        this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
-    }
-    getOptionWithValue(value) {
-        let index;
-        const options = this.datalist?.activeOptions?.length
-            ? this.datalist.activeOptions
-            : this.options;
-        const option = options.find((opt, i) => {
-            index = i;
-            return !opt.disabled && opt.value?.length && opt.value === value;
-        });
-        return [option, index];
-    }
-    getLabel(toFind) {
-        const option = this.getOptionWithValue(toFind)[0];
-        return option && option.label ? option.label : toFind;
-    }
-    /* Event handling */
-    onReset(e) {
-        const form = this.form
-            ? document.querySelector('#' + this.form)
-            : this.el.closest('form');
-        if (!form || e.target !== this.el.closest('form'))
-            return;
-        this.clearSelectValue();
-    }
-    handleBlur(e) {
-        if (!this.hasFocus)
-            return;
-        const kev = e;
-        let target;
-        requestAnimationFrame(() => {
-            if (kev.key) {
-                if (kev.key !== 'Tab')
-                    return;
-                target = getActiveElement();
-            }
-            else
-                target = e.target;
-            if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
-                this.onBlur();
-            }
-        });
-    }
-    setOptions = () => {
-        if (!this.datalist ||
-            !this.datalist.activeOptions ||
-            !this.datalist.activeOptions.length)
-            return;
-        this._elementOptions = this.datalist.activeOptions.map((ao) => {
-            const { value, selected, label, filterMeta } = ao;
-            return { value, selected, label, filterMeta };
-        });
-        this.customValidate();
-    };
-    handleDocumentKeyDown = (ev) => {
-        if (!this.multiple || !this.hasFocus)
-            return;
-        if (!this.inputSearchVal) {
-            let rm;
-            switch (ev.key) {
-                case 'Backspace':
-                    if (this.inputCtrl.previousElementSibling)
-                        rm = this.inputCtrl.previousElementSibling;
-                    else
-                        break;
-                    this.removeValue(rm.dataset.value || null);
-                    break;
-                case 'Delete':
-                    if (this.inputCtrl.nextElementSibling)
-                        rm = this.inputCtrl.nextElementSibling;
-                    else
-                        break;
-                    this.removeValue(rm.dataset.value || null);
-                    break;
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    if (!this.value.length)
-                        break;
-                    if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)
-                        this.currInsertIndex--;
-                    if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)
-                        this.currInsertIndex++;
-                    setTimeout(() => {
-                        this.inputCtrl.focus();
-                    }, 20);
-                    ev.preventDefault();
-                    break;
-            }
-        }
-    };
-    onBlur = () => {
-        this.hasFocus = false;
-        requestAnimationFrame(() => {
-            if (this.validateOn === 'dirty' && !this.hasFocus)
-                this.showInlineValidation();
-        });
-        this.nanoBlur.emit();
-        if (!this.allowCustomValues && this.multiple) {
-            this.inputSearchVal = '';
-            const event = new window.Event('change');
-            this.inputCtrl.dispatchEvent(event);
-        }
-    };
-    onFocus = () => {
-        this.hasFocus = true;
-        this.nanoFocus.emit();
-    };
-    clearSelectValue = (ev) => {
-        if (this.clearSelect && !this.readonly && !this.disabled && ev) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-        if (this.multiple) {
-            this.value = [];
-            this.currInsertIndex = -1;
-        }
-        else
-            this.value = '';
-        this.inputCtrl.value = '';
-        const event = new window.Event('change');
-        this.inputCtrl.dispatchEvent(event);
-    };
-    onClick = () => {
-        this.setFocus();
-    };
-    /* Multi event handlers */
-    onDragStart = (ev) => {
-        const ele = ev.target;
-        this.dragVal = ele.dataset.value;
-    };
-    onDragEnd = (ev) => {
-        this.dragVal = null;
-        ev.preventDefault();
-    };
-    onDragLeave = (ev) => {
-        const ele = ev.target;
-        const spanVal = ele.dataset && ele.dataset.value ? ele.dataset.value : null;
-        if (!spanVal ||
-            this.dragVal === spanVal ||
-            !this.value.includes(this.dragVal)) {
-            ev.preventDefault();
-            return;
-        }
-        const to = this.value.indexOf(spanVal);
-        const from = this.value.indexOf(this.dragVal);
-        const tmpArr = this.value;
-        const tmpVal = tmpArr[to];
-        tmpArr[to] = tmpArr[from];
-        tmpArr[from] = tmpVal;
-        this.value = [...tmpArr];
-    };
-    onMultiInput = (ev) => {
-        this.inputSearchVal = ev.target.value.trim();
-        this.nanoSearchChange.emit({ value: ev.target.value.trim() });
-    };
-    /* Stencil Component lifecycle hooks */
-    connectedCallback() {
-        this.debounceChanged();
-        this.watchMaxValuesVisible();
-        this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {
-            detail: this.el,
-        }));
-    }
-    disconnectedCallback() {
-        document.dispatchEvent(new CustomEvent('nanoDidUnload', {
-            detail: this.el,
-        }));
-        if (this.mo)
-            this.mo.disconnect();
-    }
-    componentDidLoad() {
-        this.slotChangeObserver();
-        this.customValidate();
-        this.setDataListOpts();
-        requestAnimationFrame(() => (this.onInit = false));
-    }
-    componentWillLoad() {
-        this.processSlottedContent();
-    }
-    render() {
-        const labelId = this.selectId + '-lbl';
-        const moreId = this.showInlineError || this.hasHelperSlot
-            ? this.selectId + '-moreId'
-            : '';
-        const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';
-        this.rtl = this.el.ownerDocument.dir === 'rtl';
-        this.valueItems = [];
-        const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasHelperEndSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
-            el,
-            floatLabel,
-            label,
-            errorMessage,
-            showInlineError,
-            hasHelperSlot,
-            hasHelperEndSlot,
-            hasLabelSlot,
-            hideLabel,
-            placeholder,
-            rtl,
-        }))(this);
-        const wrapOptions = {
-            ...compWrapOptions,
-            labelId,
-            moreId,
-            helperEndId,
-            hasValue: !!this.value.length || !!this.inputSearchVal.length,
-            controlId: this.selectId,
-        };
-        const controlOptions = (({ readonly, disabled }) => ({
-            readonly,
-            disabled,
-            clearControl: this.clearSelect,
-        }))(this);
-        return (h(Host, { key: '536c9704da65bc7e7415e679382384c076696d51', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
-                ...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,
-                'has-clr-btn': this.clearSelect,
-                masked: this.mask,
-                'nano-select': true,
-            } }, h(FormControlWrap, { key: 'c7fd0db291f3362fcdfca52f443899260a284490', ...wrapOptions }, h(FormControl, { key: '9ea819ba91334497b7ef3e5fddf9308acc1aded9', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: 'f467f7b65f6edb3e98a5dcd99a4a4b275152b323', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '9f993b544220f7be26b9ed9d33fe1516c7652da5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'f3b4f85878ac17e3b9701a217a69e96bb68ea5e0', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '52a43b32040be9aad63e1f6975e0ab9e9202aacd', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
-                e.preventDefault();
-                this.removeValue(e.detail.value);
-            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
-            this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '8c051e25608cb6790bde692084c965bc064db0fa', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '8f8b1abae976d352d71f3e74c9636ffc10800326', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '139819ef432722a337fe9c9bb2c3713f8e1d4130' }))), h("select", { key: '15f20b80edea9e26b60c3c6d494d928e4cc479cc', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
-            this.valArray.map((val) => {
-                return (h("option", { value: val, selected: true }, val));
-            }), !this.allowCustomValues &&
-            this.options.map((opt) => {
-                return (h("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
-            }))));
-    }
-    multipleValues(labelId, moreId, helperEndId) {
-        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
-        if (!this.value.length)
-            return input;
-        const toReturn = [];
-        this.value.forEach((val, i) => {
-            if (!Number.isNaN(this._maxValuesVisible) && i > this._maxValuesVisible)
-                return;
-            let valueTag;
-            if (i === this._maxValuesVisible) {
-                valueTag = (h("span", { "data-value": val, class: "select__multi-value" }, h("span", null, "+", this.value.length - this._maxValuesVisible)));
-            }
-            else {
-                valueTag = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value select__multi-value--closable" }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
-                        ? this.valueTagTemplate(...this.getOptionWithValue(val))
-                        : undefined })) : (h("span", null, this.getLabel(val))), h("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
-                        this.removeValue(val);
-                    }, onMouseUp: () => {
-                        this.removeValue(val);
-                    } }, h("nano-icon", { name: "light/xmark" }))));
-            }
-            if (i === 0 && this.currInsertIndex < 0) {
-                toReturn.push(input, valueTag);
-            }
-            else if (i === this.currInsertIndex) {
-                toReturn.push(valueTag, input);
-            }
-            else {
-                toReturn.push(valueTag);
-            }
-        });
-        return toReturn;
-    }
-    static get watchers() { return {
-        "maxValuesVisible": ["watchMaxValuesVisible"],
-        "debounce": ["debounceChanged"],
-        "required": ["shouldValidate"],
-        "disabled": ["shouldValidate"],
-        "min": ["shouldValidate"],
-        "max": ["shouldValidate"],
-        "readonly": ["shouldValidate"],
-        "value": ["valueChanged"],
-        "dropDownConfig": ["setDataListOpts"]
-    }; }
-};
-Select.style = NanoSelectStyle0;
-
-export { GlobalNavUserProfile as nano_global_nav_user_profile, NavItem as nano_nav_item, Select as nano_select };
-
-//# sourceMappingURL=nano-global-nav-user-profile_3.entry.js.map