npm - @nanoporetech-digital/components - Versions diffs - 1.15.5 → 1.15.6 - Mend

@nanoporetech-digital/components 1.15.5 → 1.15.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","Select","class_2","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","_","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","onMultiInputBlur","onDragStart","ele","dragVal","dataset","onDragEnd","onDragLeave","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","__spreadArray","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex_1","addValue","debounceChanged","debounceEvent","shouldValidate","valueChanged","split","setNativeValue","nanoChange","optionsChanged","multiChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","listOpenChange","show","hide","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","filter","opt","toFind","strFilter","nsl","selectedIndex","hasAttribute","Array","map","find","val","values","reduce","accumulator","currentValue","slice","Math","isSelected","getLabel","foundVal","slotChangeObserver","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","options_1","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","options_2","dispatchEvent","CustomEvent","detail","disconnectedCallback","componentDidLoad","renderLabel","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","optionMenu","valueMarkup","input_1","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","native-select-wrap","native-select-wrap--multiple","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","select","form","onInvalid","size"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n\n ::slotted(),\n {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(null, var(--padding-end), null, null);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(null, null, null, var(--padding-start));\n }\n\n .link {\n &::slotted(nano-icon[slot='icon-start']),\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(null, 0, null, var(--padding-start));\n }\n\n &::slotted(nano-icon[slot='icon-end']),\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(null, var(--padding-end), null, 0);\n }\n }\n\n .link,\n button,\n a {\n border-bottom: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus,\n a:focus {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, none);\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: none;\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n @include padding(null, var(--padding-end), null, 0);\n\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(0, var(--padding-end), 0, 0);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n left: auto;\n right: 0;\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n .secondary-menu-content {\n @include padding(\n var(--secondary-padding-top),\n var(--secondary-padding-end),\n var(--secondary-padding-bottom),\n var(--secondary-padding-start)\n );\n }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n margin: 0 11px;\n\n ::slotted(a) {\n @include padding(7px, 6px, 7px, 6px);\n }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n ::slotted(a) {\n @include padding(8px, 12px, 8px, 12px);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include margin(0, 0, 0, var(--padding-end));\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include margin(0, var(--padding-start), 0, 0);\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n button {\n position: relative;\n\n &::before {\n content: '';\n background: rgb(134, 190, 226);\n height: 3px;\n left: 5px;\n bottom: -14px;\n right: 5px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n\n .secondary-open button::before {\n opacity: 0.5;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n left: 0;\n right: 0;\n z-index: -2;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n\n &:focus {\n outline: none;\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n @include padding(\n calc(var(--padding-top) / 2),\n 0,\n calc(var(--padding-bottom) / 2),\n var(--padding-start)\n );\n\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n @include padding(null, var(--padding-end), null, 0);\n\n text-align: left;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n top: 0;\n right: 0;\n left: auto;\n bottom: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n\n @include padding(\n var(--secondary-padding-top, var(--padding-top)),\n var(--secondary-padding-end, var(--padding-end)),\n var(--secondary-padding-bottom, var(--padding-bottom)),\n var(--secondary-padding-start, var(--padding-start))\n );\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n // opacity: 1;\n }\n }\n}\n\n:host(.nano-menu-drawer.legacy) {\n .link,\n a,\n button {\n width: auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .text {\n text-align: right;\n }\n\n .secondary-menu {\n right: auto;\n left: 0;\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() isLegacy: boolean = !document.head.attachShadow;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n / the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events /\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n let status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n let status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n let foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen \|\| this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (\n ev.relatedTarget === this.el \|\|\n ev.relatedTarget === this.btn \|\|\n this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n ) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n let link = getDirectChildren(this.el, 'a, button')[0] as\n \| HTMLAnchorElement\n \| HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n legacy: this.isLegacy,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../input/input.vars';\n\n:host {\n @include inputVars;\n\n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: $font-family-base;\n display: inline-block;\n}\n\n:host(.nano-color) {\n --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n\n color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n * {\n pointer-events: none !important;\n }\n}\n\nlabel,\n.more,\n.error,\n.helper {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &.visually-hide {\n @include visually-hide;\n }\n}\n\n.placeholder-as-label {\n @include padding(0, 0, 0, var(--padding-start));\n\n color: var(--input-text-color);\n position: absolute;\n font-size: 1.4em;\n transform: translateY(-50%);\n transform-origin: top left;\n top: 50%;\n transition: 0.125s ease-in;\n opacity: 0.7;\n pointer-events: none;\n\n :host(.is-invalid) & {\n color: var(--invalid-msg-color);\n }\n\n :host(.has-value) & {\n transform: translateY(-110%);\n font-size: 0.9em;\n }\n\n :host(.has-focus.has-multiple) &,\n :host(.has-value.has-multiple) & {\n transform: translateY(-75%);\n font-size: 0.9em;\n }\n\n :host(.has-multiple) & {\n top: 1.5em;\n }\n\n & ~ .native-select-wrap {\n font-size: 1.1em;\n }\n}\n\n.label {\n @include padding(0, 0, var(--padding-bottom));\n\n color: var(--label-color);\n font-size: var(--label-font-size);\n line-height: 1;\n\n .placeholder {\n opacity: 0;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n }\n\n :host(.has-value) & {\n .placeholder {\n opacity: 0.5;\n }\n }\n\n :host(.has-focus) & {\n color: var(--label-color--focus);\n }\n\n :host(.is-invalid) & {\n color: var(--label-color--invalid);\n }\n}\n\n.more {\n @include margin(4px, 0, var(--padding-bottom), 3px);\n\n height: 1em;\n position: relative;\n}\n\n.helper,\n.error {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.helper {\n color: var(--help-msg-color);\n font-style: italic;\n\n :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n opacity: 0;\n }\n}\n\n.error {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n\n :host(.is-invalid) & {\n opacity: 1;\n }\n}\n\n.select {\n @include text-inherit();\n @include border-radius(var(--input-border-radius));\n\n width: 100%;\n padding: 0 !important;\n position: relative;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n\n :host(.has-focus) & {\n z-index: 10;\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n }\n\n :host(.is-invalid) & {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n }\n\n :host(.is-invalid.has-focus) & {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n display: flex;\n align-items: center;\n}\n\n.select-mask {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.native-select {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n box-sizing: border-box;\n transition: 0.3s ease opacity;\n appearance: none;\n // line-height: 1.3;\n margin: 0;\n line-height: 2.5em;\n min-height: 2.5em;\n\n :host(.legacy) & {\n box-sizing: content-box;\n }\n\n :host(.masked) & {\n opacity: 0;\n position: absolute;\n left: 0;\n top: 0;\n }\n\n :host(.has-float-label) & {\n opacity: 0;\n padding-top: 1.8em;\n }\n\n :host(.has-value.has-float-label) & {\n opacity: 1;\n }\n\n &:-webkit-autofill {\n background-color: transparent;\n }\n\n &:invalid {\n box-shadow: none;\n }\n\n &::-ms-clear {\n display: none;\n }\n\n &::-ms-expand {\n display: none;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n :host(.has-multiple) & {\n display: none;\n }\n\n option {\n color: black;\n }\n}\n\n// multi stuff\n\n.multi {\n &-wrap {\n @include padding(\n 0,\n calc(1.9em + var(--padding-end)),\n calc(var(--padding-bottom) / 2),\n 0\n );\n\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n max-width: 100%;\n\n :host(.has-clr-btn) & {\n @include padding(\n 0,\n calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2)),\n calc(var(--padding-bottom) / 2),\n 0\n );\n }\n\n :host(.has-float-label) & {\n padding-top: 1.3em;\n }\n }\n\n &-input {\n @include text-inherit();\n @include padding(\n calc(var(--padding-top) / 2),\n var(--padding-end),\n 0,\n var(--padding-start)\n );\n\n min-width: 50px;\n max-width: 100%;\n max-height: 100%;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n // line-height: calc(2.8em - var(--padding-top));\n min-height: calc(2.8em - var(--padding-top));\n box-sizing: border-box;\n\n :host(.legacy) & {\n box-sizing: content-box;\n }\n\n &:last-child {\n flex: 1;\n }\n }\n\n &-select-box {\n position: absolute;\n background: #{$layer-bg-color};\n min-width: calc(100% + (var(--input-border-width) * 2));\n z-index: #{$layer-index-dropdown};\n margin: 0;\n font-size: 1.15em;\n line-height: 1.4;\n max-height: 50vh;\n overflow-y: auto;\n overscroll-behavior: none;\n transition: opacity 0.2s ease;\n opacity: 0;\n box-sizing: border-box;\n border-radius: #{$layer-border-radius};\n box-shadow: #{$layer-shadow-large};\n padding: var(--padding-top) 0 var(--padding-bottom);\n border: #{$layer-border-style};\n\n &--open {\n opacity: 1;\n }\n\n li {\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n font-size: var(--input-font-size);\n cursor: pointer;\n list-style: none;\n color: var(--input-text-color);\n\n :host(.nano-color) & {\n color: black;\n }\n\n &:hover,\n &:focus {\n color: var(--color--focus-contrast);\n outline: none;\n background: rgba(var(--multi-input-value-bg), 0.2);\n\n :host(.nano-color) & {\n background: current-color(base, 0.2);\n }\n }\n }\n }\n\n &-value {\n @include margin(4px, 0, 0, 4px);\n\n background: rgba(var(--multi-input-value-bg), 0.8);\n color: var(--multi-input-value-text-color);\n border: 2px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.3em 0.5em;\n border-radius: 3px;\n line-height: 1;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n font-weight: 600;\n letter-spacing: 1px;\n\n span {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n line-height: 1.4;\n }\n }\n\n &-value-remove {\n @include margin(0);\n @include background-position(center);\n @include padding(0, 0, 0, 0.5em);\n\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n appearance: none;\n display: flex;\n align-items: center;\n top: 0;\n font-size: 1em;\n\n nano-icon {\n --color: var(--multi-input-value-text-color);\n }\n }\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n @include margin(0);\n @include background-position(center);\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n color: var(--input-text-color);\n font-size: 1.4em;\n right: 0;\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n :host(.rtl) & {\n right: unset;\n left: 0;\n }\n\n :host(.has-multiple) & {\n pointer-events: all;\n }\n\n :host(.masked) & {\n position: relative;\n }\n}\n\n.select-clear-icon {\n @include margin(0);\n @include background-position(center);\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n font-size: 1.4em;\n color: var(--clear-btn-color);\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n visibility: hidden;\n appearance: none;\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n height: 100%;\n right: calc(1.4em + var(--padding-end));\n\n &:hover {\n color: var(--clear-btn-color--hover);\n }\n\n :host(.rtl) & {\n right: unset;\n left: calc(1.4em + var(--padding-end));\n }\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n :host(.has-value) & {\n visibility: visible;\n }\n\n nano-icon {\n --color: inherit;\n }\n}\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n// pointer-events: none;\n// }\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n pointer-events: auto;\n}\n","import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\n\nimport {\n Color,\n SelectChangeEventDetail,\n InputChangeEventDetail,\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\nimport {\n testLegacyStyle,\n debounceEvent,\n closestElement,\n createColorClasses,\n} from '../../utils';\nimport Popover from '../../utils/popover';\n\n/*\n The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n \n @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\n /\n@Component({\n tag: 'nano-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class Select implements ComponentInterface {\n private nativeSelect?: HTMLSelectElement;\n private multiInput?: HTMLInputElement;\n private multiList?: HTMLUListElement;\n private selectWrap?: HTMLDivElement;\n private listItems: Array<HTMLLIElement> = [];\n private valueItems: Array<HTMLSpanElement> = [];\n private dragVal: string;\n private mo?: MutationObserver;\n private popover: Popover;\n\n private selectId = `nano-select-${selectIds++}`;\n private rtl: boolean = false;\n private currLiIndex: number = -1;\n private inputSearchVal: string = '';\n private watchValue: boolean = true;\n private onInit: boolean = true;\n\n @State() currInsertIndex: number = 0;\n @State() availOpts = [];\n @State() showErrorMsg = false;\n @State() errorMessage: string = '';\n @State() hasFocus = false;\n @State() listOpen = false;\n @State() isLegacy: boolean = 'registerElement' in document;\n @State() hasLabelSlot: boolean = false;\n @State() hasHelperSlot: boolean = false;\n @State() hasIconSlot: boolean = false;\n\n @Element() el!: HTMLNanoSelectElement;\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set.\n /\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, the user cannot interact with the select.\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop({ reflect: true }) showInlineError = true;\n\n /\n String to place within a label element.\n /\n @Prop() label!: string;\n\n /\n Visually hide the label - but make it accessible.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n Enable floating label behaviour. Will disable placeholder if set.\n /\n @Prop() floatLabel: boolean = false;\n\n /\n If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n /\n @Prop() multiple?: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.selectId + '-name';\n\n /\n Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n The initial size of the control.\n /\n @Prop() size?: number;\n\n /\n Maximum number of options that can be selected when multiple is true\n /\n @Prop() max?: number;\n\n /\n Minimum number of options that can be selected when multiple is true\n /\n @Prop() min?: number;\n\n /\n The form element to associate the select with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n in multiple mode, allow users to enter their own values\n /\n @Prop() allowCustomValues: boolean = false;\n\n /\n The value of the select.\n /\n @Prop({ mutable: true }) value?: string \| Array<string \| null> = this.multiple\n ? []\n : '';\n\n /\n You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n /\n @Prop({ mutable: true }) options: Array<\n string \| { label: string; value?: string }\n > = [];\n\n /\n If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n /\n @Prop() clearSelect = false;\n\n /\n Hide the native select element and cover with a value 'mask'.\n * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n /\n @Prop() mask = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n /\n @Prop() debounce = 0;\n\n /\n Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n /\n @Prop() native = true;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n }\n\n // @Watch('options')\n @Watch('required')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n @Watch('validateOn')\n @Watch('readonly')\n protected shouldValidate() {\n if (this.onInit) return;\n if (this.invalid) this.showErrorMsg = this.invalid = false;\n\n this.customValidate();\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n /\n Update the native select element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n if (!this.watchValue) return;\n\n if (this.multiple) {\n if (typeof this.value === 'string' && !!this.value.length)\n this.value = this.value.split(',');\n if (\n this.value === null \|\|\n (typeof this.value === 'string' && !this.value.length)\n )\n this.value = [];\n\n if (this.currInsertIndex > this.value.length - 1)\n this.currInsertIndex = this.value.length - 1;\n } else if (typeof this.value !== 'string' && this.value && this.value[0])\n this.value = this.value[0];\n\n this.setNativeValue();\n this.setAvailOpts();\n setTimeout((_) => this.shouldValidate(), 20);\n this.nanoChange.emit({ value: this.value });\n\n if (this.onInit) return;\n }\n\n @Watch('options')\n protected optionsChanged() {\n this.setAvailOpts();\n if (this.hasFocus) this.openList();\n }\n\n /\n Setup or rip down custom combobox when select is switched from mutliple\n /\n @Watch('multiple')\n protected multiChange() {\n this.switchValue();\n\n if (this.multiple) this.setupMulti();\n else if (this.popover) this.popover.destroy();\n }\n\n private setupMulti() {\n setTimeout(() => {\n this.setAvailOpts();\n this.popover = new Popover(this.selectWrap, this.multiList, {\n placement: 'bottom-start',\n skidding: 0,\n distance: 0,\n onTransitionEnd: () => {\n if (!this.listOpen) {\n this.multiList.scrollTop = 0;\n }\n },\n });\n }, 20);\n }\n\n @Watch('listOpen')\n listOpenChange() {\n if (this.listOpen) this.popover.show();\n else this.popover.hide();\n }\n\n /\n Emitted when the value has changed.\n /\n @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n /\n Emitted when the select loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the select has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the select has been created.\n * @internal\n /\n @Event() nanoDidLoad!: EventEmitter<void>;\n\n /\n Emitted when the select has been removed.\n * @internal\n /\n @Event() nanoDidUnload!: EventEmitter<void>;\n\n /\n Emitted when a keyboard input occurred on a multiple=\"true\" input\n /\n @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) this.showInlineValidation();\n return {\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n };\n }\n\n /\n Sets focus on the specified `nano-select`. Use this method instead of the global\n * `select.focus()`.\n /\n @Method()\n async setFocus() {\n if (this.nativeSelect && !this.multiple) this.nativeSelect.focus();\n else if (this.multiInput) this.multiInput.focus();\n }\n\n /\n Returns the native `<select>` element used under the hood.\n /\n @Method()\n getSelectElement(): Promise<HTMLSelectElement> {\n return Promise.resolve(this.nativeSelect!);\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n /\n @Method()\n async showError(message: string) {\n if (this.nativeSelect) {\n this.nativeSelect.setCustomValidity(message);\n this.nativeSelect.reportValidity();\n }\n }\n\n / Logic /\n\n // sets the available options of a multi select.\n // Removes ones already selected\n // Filters one if user starts to search\n private setAvailOpts() {\n if (!this.multiple) return;\n\n this.availOpts = this.options.filter((opt) => {\n let toFind = typeof opt === 'string' ? opt : opt['value'];\n let strFilter =\n typeof opt === 'string' ? opt : opt['label'] \|\| opt['value'];\n\n if (!toFind) return false;\n return (\n !(this.value as Array<string>).includes(toFind) &&\n (!this.multiInput \|\|\n strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >\n -1)\n );\n });\n }\n\n private getNativeValue(): string \| Array<string> {\n const nsl = this.nativeSelect;\n if (!nsl) return '';\n\n if (!this.multiple)\n return nsl.options[nsl.selectedIndex] &&\n nsl.options[nsl.selectedIndex].hasAttribute('value')\n ? nsl.options[nsl.selectedIndex].value\n : '';\n else {\n return Array.from(nsl.options).map((opt) => {\n if (opt.selected && opt.hasAttribute('value')) return opt.value;\n });\n }\n }\n\n private setNativeValue() {\n const nsl = this.nativeSelect;\n if (!nsl) return null;\n if (!this.multiple) nsl.value = this.value as string;\n else {\n Array.from(this.nativeSelect.options)\n .filter((opt) => {\n if (typeof this.value === 'string') return opt.value === this.value;\n else\n return this.value.find((val) => {\n if (typeof val === 'string') return val === this.value;\n else if (val['value']) return val === val['value'];\n });\n })\n .map((opt) => {\n opt.selected = true;\n });\n }\n }\n\n private isValidValues() {\n const nsl = this.nativeSelect;\n if (!nsl) return null;\n\n const selected = this.nativeSelect.querySelectorAll('option:checked');\n const values = Array.from(selected).map(\n (el: HTMLOptionElement) => el.value \|\| null\n );\n\n if (this.multiple) {\n return values.reduce((accumulator, currentValue) => {\n if (!accumulator) return false;\n return !!this.options.find((opt) =>\n opt['value'] ? opt['value'] === currentValue : opt === currentValue\n );\n }, true);\n } else {\n return this.options.find((opt) =>\n opt['value'] ? opt['value'] === values[0] : opt === values[0]\n );\n }\n }\n\n private customValidate = () => {\n this.nativeSelect.setCustomValidity('');\n\n // add custom validations 'cos html5 validations are a bit rubbish on selects\n if (this.required && !this.getNativeValue().length) {\n this.nativeSelect.setCustomValidity('Please fill in this field.');\n return true;\n }\n if (\n this.getNativeValue().length &&\n !this.allowCustomValues &&\n !this.isValidValues()\n ) {\n this.nativeSelect.setCustomValidity(\n 'Please choose an item from this field.'\n );\n return true;\n }\n if (this.max && this.getNativeValue().length > this.max) {\n this.nativeSelect.setCustomValidity(\n `Only up to ${this.max} values are allowed.`\n );\n return true;\n }\n if (this.min && this.getNativeValue().length < this.min) {\n this.nativeSelect.setCustomValidity(\n `You must select a minimum of ${this.min} values.`\n );\n return true;\n }\n return false;\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this.invalid = false;\n this.showErrorMsg = false;\n this.errorMessage = '';\n\n if (!this.nativeSelect.validity.valid) {\n this.errorMessage = this.nativeSelect.validationMessage;\n this.invalid = true;\n this.showErrorMsg = true;\n }\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n private handleInvalid = (ev: Event) => {\n this.invalid = true;\n\n if (this.validateOn === 'submit')\n this.invalid = this.showErrorMsg = this.customValidate();\n if (this.showInlineError) ev.preventDefault();\n\n setTimeout((_) => this.showInlineValidation(ev), 20);\n };\n\n private openList() {\n if (!this.multiple) return;\n if (\n (this.availOpts.length \|\|\n (!!this.inputSearchVal.length && this.allowCustomValues)) &&\n (!this.max \|\| (this.max && this.value.length < this.max))\n )\n this.listOpen = true;\n else this.listOpen = false;\n }\n\n private addValue(value) {\n if (!this.multiple) return;\n if (this.value && this.value.length && this.value.includes(value)) return;\n if (this.max && this.value.length === this.max) return;\n\n this.currInsertIndex++;\n this.value = [\n ...this.value.slice(0, this.currInsertIndex),\n value,\n ...this.value.slice(this.currInsertIndex),\n ];\n\n this.inputSearchVal = '';\n\n this.setAvailOpts();\n\n this.selectWrap.clientWidth; // force reflow\n this.setFocus();\n this.openList();\n }\n\n private removeValue(toFind?: string) {\n if (!this.multiple \|\| !this.value.length) return;\n\n if (!toFind) toFind = this.value[this.value.length - 1];\n this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n if (this.currInsertIndex > this.value.length - 1)\n this.currInsertIndex = this.value.length - 1;\n\n this.selectWrap.clientWidth; // force reflow\n this.setFocus();\n this.openList();\n }\n\n private switchValue() {\n this.watchValue = false;\n if (this.multiple) {\n if (typeof this.value === 'string' && !!this.value.length)\n this.value = this.value.split(',');\n else this.value = [];\n\n this.currInsertIndex = Math.max(this.value.length - 1, 0);\n } else if (typeof this.value !== 'string' && this.value && this.value[0])\n this.value = this.value[0];\n this.watchValue = true;\n }\n\n private isSelected(value: string) {\n if (this.multiple)\n return (this.value as Array<string>).find((val) => val === value);\n else value === this.value;\n }\n\n private getLabel(val: string) {\n let foundVal = this.options.find((opt) => {\n return opt['value'] ? opt['value'] === val : opt === val;\n });\n if (!foundVal) return null;\n return foundVal['label'] ? foundVal['label'] : foundVal;\n }\n\n private slotChangeObserver() {\n const mo = (this.mo = new MutationObserver((mrs: MutationRecord[]) =>\n this.processSlottedContent(mrs)\n ));\n mo.observe(this.el, { childList: true, subtree: true });\n }\n\n private processSlottedContent(mutations?: MutationRecord[]) {\n // see if we have label / helper content\n this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n this.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n if (!mutations) {\n // find legacy select. Take attrs and apply to our element\n let existingselect = this.el.querySelector(\n 'select:not([class=\"sc-nano-select\"])'\n );\n if (existingselect) {\n Array.from(existingselect.attributes)\n .filter((attr) => attr.specified && attr.nodeName in this)\n .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n }\n\n // find legacy label. Apply to our element\n let existingLabel = this.el.querySelector(\n 'label:not([class=\"sc-nano-select\"])'\n );\n if (existingLabel) this.label = this.label \|\| existingLabel.innerHTML;\n\n // find legacy slotted options. Apply them and add any relevant values\n let legacyOpts = this.el.querySelectorAll(\n 'option:not([class=\"sc-nano-select\"])'\n );\n\n this.watchValue = false;\n if (legacyOpts && legacyOpts.length) {\n let options = [];\n legacyOpts.forEach((option: HTMLOptionElement) => {\n options.push({\n label: option.label \|\| option.innerText,\n value: option.value,\n });\n if (!option.selected \|\| !option.value) return;\n\n if (this.multiple) (this.value as Array<string>).push(option.value);\n else this.value = option.value;\n });\n this.options = options;\n }\n\n if (legacyOpts.length \|\| existingLabel \|\| existingselect) {\n // empty all legacy slotted stuff\n let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n if (children) children.forEach((n) => n.parentNode.removeChild(n));\n }\n\n this.watchValue = true;\n }\n\n if (\n mutations &&\n !Array.from(mutations[0].addedNodes).find(\n (node) => node.nodeName.toLowerCase() === 'nano-select-option'\n )\n )\n return;\n\n // find nano-select-options\n let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n if (nanoOpts && nanoOpts.length) {\n let options = [];\n nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n options.push({\n label: option.label \|\| option.innerText,\n value: option.value,\n });\n if (!option.selected \|\| !option.value) return;\n\n if (this.multiple) (this.value as Array<string>).push(option.value);\n else this.value = option.value;\n });\n this.options = options;\n }\n\n this.setAvailOpts();\n }\n\n /* Event handling /\n\n private onChange = (ev?: Event) => {\n if (!this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n this.value = this.getNativeValue();\n };\n\n private onBlur = () => {\n if (this.multiple) {\n this.currLiIndex = -1;\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n }\n this.hasFocus = false;\n\n setTimeout(() => {\n if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)\n this.showInlineValidation();\n }, 20);\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n if (this.multiple) {\n this.currLiIndex = -1;\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n this.openList();\n }\n\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private clearSelectValue = (ev?: Event) => {\n if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n if (this.multiple) {\n this.value = [];\n let options = this.nativeSelect.querySelectorAll('option');\n if (options.length) options.forEach((n) => n.remove());\n this.currInsertIndex = -1;\n this.setAvailOpts();\n } else this.value = '';\n\n this.onChange();\n };\n\n private onClick = () => {\n this.setFocus();\n this.openList();\n };\n\n / Multi event handlers /\n\n private onMultiInputBlur = () => {\n if (this.allowCustomValues) return;\n this.inputSearchVal = '';\n this.setAvailOpts();\n };\n\n private onDragStart = (ev: MouseEvent) => {\n let ele = ev.target as HTMLSpanElement;\n this.dragVal = ele.dataset.value;\n };\n\n private onDragEnd = (ev) => {\n this.dragVal = null;\n ev.preventDefault();\n };\n\n private onDragLeave = (ev: MouseEvent) => {\n let ele = ev.target as HTMLSpanElement;\n let spanVal: string =\n ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n if (\n !spanVal \|\|\n this.dragVal === spanVal \|\|\n !this.value.includes(this.dragVal)\n ) {\n ev.preventDefault();\n return;\n }\n\n let to = this.value.indexOf(spanVal);\n let from = this.value.indexOf(this.dragVal);\n let tmpArr = this.value as Array<string>;\n let tmpVal = tmpArr[to];\n\n tmpArr[to] = tmpArr[from];\n tmpArr[from] = tmpVal;\n this.value = [...tmpArr];\n };\n\n private onMultiInput = (ev) => {\n this.inputSearchVal = ev.target.value;\n this.setAvailOpts();\n this.openList();\n this.nanoSearchChange.emit({ value: ev.target.value });\n };\n\n private getActiveOpt() {\n return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n }\n\n private onOptFocus = (ev: FocusEvent) => {\n let activeEle = this.getActiveOpt();\n if (activeEle) activeEle.classList.remove('has-focus');\n (ev.target as HTMLElement).classList.add('has-focus');\n };\n\n private onHostClick = () => {\n setTimeout((_) => {\n if (!this.multiple \|\| this.hasFocus) return;\n this.setFocus();\n }, 20);\n };\n\n private handleDocumentMouseDown = (ev: MouseEvent) => {\n const target = ev.target as HTMLElement;\n if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n this.listOpen = false;\n this.onBlur();\n }\n };\n\n private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n if (!this.multiple) return;\n\n if (!this.inputSearchVal) {\n let rm: HTMLSpanElement;\n\n switch (ev.key) {\n case 'Backspace':\n if (this.multiInput.previousElementSibling)\n rm = this.multiInput.previousElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value \|\| null);\n break;\n\n case 'Delete':\n if (this.multiInput.nextElementSibling)\n rm = this.multiInput.nextElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value \|\| null);\n break;\n\n case 'ArrowLeft':\n case 'ArrowRight':\n if (!this.value.length) break;\n\n if (ev.key === 'ArrowLeft' && this.multiInput.previousSibling)\n this.currInsertIndex--;\n if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)\n this.currInsertIndex++;\n\n setTimeout(() => {\n this.multiInput.focus();\n }, 20);\n ev.preventDefault();\n break;\n }\n }\n\n // navigated to component via keyboard. Open with down.\n if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n this.openList();\n this.currLiIndex = -1;\n }\n\n // Close when tabbing outside of element\n if (this.hasFocus && ev.key === 'Tab') {\n setTimeout(() => {\n if (\n document.activeElement &&\n closestElement(\n this.el.tagName.toLowerCase(),\n document.activeElement\n ) !== this.el\n ) {\n this.listOpen = false;\n this.onBlur();\n return;\n }\n });\n }\n\n // list open, navigate items with arrows\n if (this.listOpen) {\n const selectedItem = this.getActiveOpt();\n let testIndex = this.listItems.indexOf(selectedItem) \|\| this.currLiIndex;\n\n switch (ev.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n ev.preventDefault();\n\n if (ev.key === 'ArrowDown') testIndex++;\n else if (ev.key === 'ArrowUp') testIndex--;\n\n if (testIndex < 0) {\n this.currLiIndex = 0;\n this.multiInput.focus();\n return;\n }\n\n let foundIndex = this.listItems[testIndex]\n ? testIndex\n : this.currLiIndex;\n setTimeout(() => {\n this.listItems[foundIndex].focus();\n this.currLiIndex = foundIndex;\n }, 20);\n return;\n case 'Enter':\n case ' ':\n if (this.listItems[this.currLiIndex]) {\n this.addValue(this.listItems[this.currLiIndex].dataset.value);\n ev.preventDefault();\n }\n return;\n case 'Escape':\n this.listOpen = false;\n return;\n }\n }\n\n if (this.currLiIndex > -1) ev.preventDefault();\n };\n\n / Stencil Component lifecycle hooks */\n\n connectedCallback() {\n this.debounceChanged();\n\n if (!Build.isBrowser) return;\n\n this.el.dispatchEvent(\n new CustomEvent('nanoDidLoad', {\n detail: this.el,\n })\n );\n testLegacyStyle(this.el);\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('nanoDidUnload', {\n detail: this.el,\n })\n );\n\n if (!Build.isBrowser) return;\n if (this.mo) this.mo.disconnect();\n if (this.popover) this.popover.destroy();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n if (this.multiple) this.setupMulti();\n this.customValidate();\n }\n\n componentWillLoad() {\n this.switchValue();\n this.processSlottedContent();\n this.onInit = false;\n }\n\n private renderLabel(labelId: string, position?: 'float') {\n let classes: CssClassMap = {};\n if (position === 'float') {\n classes = { 'placeholder-as-label': true };\n } else {\n classes = { label: true, 'visually-hide': this.hideLabel };\n }\n if (!this.label && !this.hasLabelSlot) return;\n\n return (\n <label class={classes} htmlFor={this.selectId} id={labelId}>\n {this.label && this.label}\n {!this.label && !!this.hasLabelSlot && <slot name=\"label\" />}\n </label>\n );\n }\n\n render() {\n const labelId = this.selectId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot\n ? this.selectId + '-moreId'\n : '';\n const listId = this.selectId + '-list';\n\n this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n this.listItems = [];\n this.valueItems = [];\n\n if (\n this.placeholder &&\n (!this.options[0] \|\| this.options[0]['label'] !== this.placeholder)\n ) {\n this.options.unshift({ label: this.placeholder, value: '' });\n }\n\n let optionMenu = this.listOpen;\n\n let valueMarkup;\n if (this.multiple) {\n let input = (\n <input\n class=\"multi-input\"\n id={this.selectId}\n ref={(input) => (this.multiInput = input)}\n disabled={this.disabled}\n autoFocus={this.autofocus}\n autocomplete=\"off\"\n onInput={this.onMultiInput}\n value={this.inputSearchVal}\n onTouchStart={this.onClick}\n onMouseDown={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onMultiInputBlur}\n placeholder={\n this.placeholder && !this.floatLabel && !this.value.length\n ? this.placeholder\n : ''\n }\n role={this.multiple ? 'combobox' : ''}\n aria-labelledby={labelId + ' ' + moreId}\n aria-controls={listId}\n aria-expanded={optionMenu ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n />\n );\n\n if (!!this.value.length) {\n valueMarkup = (this.value as Array<string>).map((val, i) => {\n let label = this.options.find((opt) => {\n return opt['value'] ? opt['value'] === val : opt === val;\n });\n label = label && label['label'] ? label['label'] : val;\n\n let toReturn = (\n <span\n onDragStart={this.onDragStart}\n onDragLeave={this.onDragLeave}\n onDragEnd={this.onDragEnd}\n draggable\n data-value={val}\n ref={(span) => this.valueItems.push(span)}\n class=\"multi-value\"\n >\n <span>{label}</span>\n <button\n class=\"multi-value-remove\"\n type=\"button\"\n tabindex=\"-1\"\n onTouchEnd={() => {\n this.removeValue(val);\n }}\n onMouseUp={() => {\n this.removeValue(val);\n }}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n </span>\n );\n\n if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn];\n else if (i === this.currInsertIndex) toReturn = [toReturn, input];\n return toReturn;\n });\n } else valueMarkup = input;\n }\n\n return (\n <Host\n type={this.multiple ? 'select-multiple' : 'select-one'}\n aria-disabled={this.disabled ? 'true' : null}\n class={{\n ...createColorClasses(this.color),\n 'has-value': !!this.value.length \|\| !!this.inputSearchVal.length,\n 'has-focus': this.hasFocus,\n 'is-invalid': this.invalid,\n 'has-label': this.label !== null && !this.floatLabel,\n 'has-float-label': this.label !== null && this.floatLabel,\n rtl: this.rtl,\n 'has-multiple': this.multiple,\n 'multi-list-open': this.listOpen,\n 'has-clr-btn': this.clearSelect,\n masked: this.mask,\n legacy: this.isLegacy,\n }}\n onClick={this.onHostClick}\n >\n {!this.floatLabel && this.renderLabel(labelId)}\n <div class=\"select\" ref={(div) => (this.selectWrap = div)}>\n {this.floatLabel && this.renderLabel(labelId, 'float')}\n <div\n class={{\n 'native-select-wrap': true,\n 'native-select-wrap--multiple': this.multiple,\n }}\n >\n {!this.multiple && this.mask && (\n <div class=\"select-mask\">\n {this.getLabel(this.value as string)}\n </div>\n )}\n {this.multiple && [\n <div class=\"multi-wrap\">{valueMarkup}</div>,\n <ul\n role=\"listbox\"\n ref={(ul) => (this.multiList = ul)}\n aria-multiselectable=\"true\"\n aria-required={this.required}\n aria-expanded={optionMenu ? 'true' : 'false'}\n aria-hidden={!optionMenu}\n hidden={!optionMenu}\n id={listId}\n class={{\n 'multi-select-box': true,\n 'multi-select-box--open': optionMenu,\n }}\n >\n {this.allowCustomValues && this.inputSearchVal.length > 0 && (\n <li\n data-value={this.inputSearchVal}\n role=\"option\"\n tabindex=\"-1\"\n ref={(li) => this.listItems.push(li)}\n onMouseDown={() => {\n this.addValue(this.inputSearchVal);\n }}\n onFocus={this.onOptFocus}\n >\n Add {this.inputSearchVal}\n </li>\n )}\n {this.availOpts.map((option) => {\n let optval, label;\n if (option['value']) {\n optval = option['value'];\n label = option['label'] \|\| option['value'];\n } else if (typeof option === 'string') {\n optval = option;\n label = optval;\n }\n if (!optval) return;\n return (\n <li\n role=\"option\"\n key={optval}\n data-value={optval}\n ref={(li) => this.listItems.push(li)}\n tabindex=\"-1\"\n aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n onMouseDown={() => {\n this.addValue(optval);\n }}\n onFocus={this.onOptFocus}\n >\n {label}\n </li>\n );\n })}\n </ul>,\n <select\n id={this.selectId + '-hidden'}\n class=\"native-select\"\n ref={(select) => (this.nativeSelect = select)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n form={this.form}\n multiple={this.multiple}\n name={this.name}\n required={this.required}\n onInvalid={this.handleInvalid}\n >\n {(this.value as Array<string>).map((val) => {\n return (\n <option value={val} selected>\n {val}\n </option>\n );\n })}\n </select>,\n ]}\n {!this.multiple && (\n <select\n id={this.selectId}\n class=\"native-select\"\n ref={(select) => (this.nativeSelect = select)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n form={this.form}\n autoFocus={this.autofocus}\n multiple={this.multiple}\n name={this.name}\n required={this.required}\n size={this.size}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onInvalid={this.handleInvalid}\n onChange={this.onChange}\n >\n {this.options.map((option, i) => {\n if (option['value'] \|\| option['label'])\n return (\n <option\n key={option['label'] + i}\n label={option['label']}\n value={option['value']}\n selected={\n option['value'] === this.value \|\|\n (!this.value && !option['value'])\n }\n disabled={!option['value'] && this.required}\n >\n {option['label'] ? option['label'] : option['value']}\n </option>\n );\n else\n return (\n <option\n key={(option as string) + i}\n value={option as string}\n selected={option === this.value}\n >\n {option}\n </option>\n );\n })}\n <slot name=\"legacy\" />\n </select>\n )}\n {this.clearSelect && !this.readonly && !this.disabled && (\n <button\n type=\"button\"\n class=\"select-clear-icon\"\n tabindex=\"-1\"\n onTouchEnd={this.clearSelectValue}\n onMouseUp={this.clearSelectValue}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n <div\n onTouchEnd={this.onClick}\n onMouseUp={this.onClick}\n class=\"select-down-icon\"\n >\n {this.hasIconSlot ? (\n <slot name=\"icon\" />\n ) : (\n <nano-icon name=\"regular/chevron-down\"></nano-icon>\n )}\n </div>\n </div>\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"helper\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet selectIds = 0;\n"]}
1	+ {"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","Select","class_2","listItems","valueItems","selectId","selectIds","rtl","currLiIndex","inputSearchVal","watchValue","onInit","currInsertIndex","availOpts","showErrorMsg","errorMessage","listOpen","hasLabelSlot","hasHelperSlot","hasIconSlot","invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","value","options","clearSelect","mask","debounce","native","customValidate","nativeSelect","setCustomValidity","getNativeValue","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","originalEvent","handleInvalid","preventDefault","_","onChange","stopPropagation","handleDocumentKeyDown","handleDocumentMouseDown","openList","clearSelectValue","querySelectorAll","forEach","n","remove","setAvailOpts","onMultiInputBlur","onDragStart","ele","dragVal","dataset","onDragEnd","onDragLeave","spanVal","includes","to","indexOf","from","tmpArr","tmpVal","__spreadArray","onMultiInput","nanoSearchChange","onOptFocus","activeEle","getActiveOpt","add","onHostClick","closestElement","tagName","toLowerCase","rm","key","multiInput","previousElementSibling","removeValue","nextElementSibling","previousSibling","nextSibling","activeElement","selectedItem","testIndex","foundIndex_1","addValue","debounceChanged","debounceEvent","shouldValidate","valueChanged","split","setNativeValue","nanoChange","optionsChanged","multiChange","switchValue","setupMulti","popover","destroy","Popover","selectWrap","multiList","placement","skidding","distance","onTransitionEnd","scrollTop","listOpenChange","show","hide","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","filter","opt","toFind","strFilter","nsl","selectedIndex","hasAttribute","Array","map","find","val","values","reduce","accumulator","currentValue","slice","Math","isSelected","getLabel","foundVal","slotChangeObserver","mo","MutationObserver","mrs","processSlottedContent","childList","subtree","mutations","existingselect","attributes","attr","specified","nodeName","nodeValue","existingLabel","label","innerHTML","legacyOpts","options_1","option","push","innerText","children","parentNode","removeChild","addedNodes","node","nanoOpts","options_2","dispatchEvent","CustomEvent","detail","disconnectedCallback","componentDidLoad","renderLabel","labelId","position","classes","placeholder-as-label","visually-hide","htmlFor","id","moreId","listId","placeholder","unshift","optionMenu","valueMarkup","input_1","input","autoFocus","autocomplete","onInput","onTouchStart","onMouseDown","role","aria-labelledby","aria-controls","aria-expanded","aria-required","aria-autocomplete","i","toReturn","draggable","data-value","span","type","onTouchEnd","onMouseUp","aria-disabled","Object","assign","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","multi-list-open","has-clr-btn","masked","native-select-wrap","native-select-wrap--multiple","ul","aria-multiselectable","aria-hidden","hidden","multi-select-box","multi-select-box--open","li","optval","aria-selected","select","form","onInvalid","size"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n\n ::slotted(),\n {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(null, var(--padding-end), null, null);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(null, null, null, var(--padding-start));\n }\n\n .link {\n &::slotted(nano-icon[slot='icon-start']),\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(null, 0, null, var(--padding-start));\n }\n\n &::slotted(nano-icon[slot='icon-end']),\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(null, var(--padding-end), null, 0);\n }\n }\n\n .link,\n button,\n a {\n border-bottom: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus,\n a:focus {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, none);\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: none;\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n @include padding(null, var(--padding-end), null, 0);\n\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(0, var(--padding-end), 0, 0);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n left: auto;\n right: 0;\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n .secondary-menu-content {\n @include padding(\n var(--secondary-padding-top),\n var(--secondary-padding-end),\n var(--secondary-padding-bottom),\n var(--secondary-padding-start)\n );\n }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n margin: 0 11px;\n\n ::slotted(a) {\n @include padding(7px, 6px, 7px, 6px);\n }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n ::slotted(a) {\n @include padding(8px, 12px, 8px, 12px);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include margin(0, 0, 0, var(--padding-end));\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include margin(0, var(--padding-start), 0, 0);\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n button {\n position: relative;\n\n &::before {\n content: '';\n background: rgb(134, 190, 226);\n height: 3px;\n left: 5px;\n bottom: -14px;\n right: 5px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n\n .secondary-open button::before {\n opacity: 0.5;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n left: 0;\n right: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n @include padding(\n calc(var(--padding-top) / 2),\n 0,\n calc(var(--padding-bottom) / 2),\n var(--padding-start)\n );\n\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n @include padding(null, var(--padding-end), null, 0);\n\n text-align: left;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n top: 0;\n right: 0;\n left: auto;\n bottom: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n\n @include padding(\n var(--secondary-padding-top, var(--padding-top)),\n var(--secondary-padding-end, var(--padding-end)),\n var(--secondary-padding-bottom, var(--padding-bottom)),\n var(--secondary-padding-start, var(--padding-start))\n );\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n // opacity: 1;\n }\n }\n}\n\n:host(.nano-menu-drawer.legacy) {\n .link,\n a,\n button {\n width: auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .text {\n text-align: right;\n }\n\n .secondary-menu {\n right: auto;\n left: 0;\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() isLegacy: boolean = !document.head.attachShadow;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n / the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events /\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n let status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n let status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n let foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen \|\| this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (\n ev.relatedTarget === this.el \|\|\n ev.relatedTarget === this.btn \|\|\n this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n ) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n let link = getDirectChildren(this.el, 'a, button')[0] as\n \| HTMLAnchorElement\n \| HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n legacy: this.isLegacy,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../input/input.vars';\n\n:host {\n @include inputVars;\n\n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: $font-family-base;\n display: inline-block;\n}\n\n:host(.nano-color) {\n --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n\n color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n * {\n pointer-events: none !important;\n }\n}\n\nlabel,\n.more,\n.error,\n.helper {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &.visually-hide {\n @include visually-hide;\n }\n}\n\n.placeholder-as-label {\n @include padding(0, 0, 0, var(--padding-start));\n\n color: var(--input-text-color);\n position: absolute;\n font-size: 1.4em;\n transform: translateY(-50%);\n transform-origin: top left;\n top: 50%;\n transition: 0.125s ease-in;\n opacity: 0.7;\n pointer-events: none;\n\n :host(.is-invalid) & {\n color: var(--invalid-msg-color);\n }\n\n :host(.has-value) & {\n transform: translateY(-110%);\n font-size: 0.9em;\n }\n\n :host(.has-focus.has-multiple) &,\n :host(.has-value.has-multiple) & {\n transform: translateY(-75%);\n font-size: 0.9em;\n }\n\n :host(.has-multiple) & {\n top: 1.5em;\n }\n\n & ~ .native-select-wrap {\n font-size: 1.1em;\n }\n}\n\n.label {\n @include padding(0, 0, var(--padding-bottom));\n\n color: var(--label-color);\n font-size: var(--label-font-size);\n line-height: 1;\n\n .placeholder {\n opacity: 0;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n }\n\n :host(.has-value) & {\n .placeholder {\n opacity: 0.5;\n }\n }\n\n :host(.has-focus) & {\n color: var(--label-color--focus);\n }\n\n :host(.is-invalid) & {\n color: var(--label-color--invalid);\n }\n}\n\n.more {\n @include margin(4px, 0, var(--padding-bottom), 3px);\n\n height: 1em;\n position: relative;\n}\n\n.helper,\n.error {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.helper {\n color: var(--help-msg-color);\n font-style: italic;\n\n :host([show-inline-error]:not([show-inline-error='false']).is-invalid) & {\n opacity: 0;\n }\n}\n\n.error {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n\n :host(.is-invalid) & {\n opacity: 1;\n }\n}\n\n.select {\n @include text-inherit();\n @include border-radius(var(--input-border-radius));\n\n width: 100%;\n padding: 0 !important;\n position: relative;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n\n :host(.has-focus) & {\n z-index: 10;\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n }\n\n :host(.is-invalid) & {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n }\n\n :host(.is-invalid.has-focus) & {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n }\n}\n\n// Native Select\n// --------------------------------------------------\n\n.native-select-wrap {\n display: flex;\n align-items: center;\n}\n\n.select-mask {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.native-select {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n box-sizing: border-box;\n transition: 0.3s ease opacity;\n appearance: none;\n // line-height: 1.3;\n margin: 0;\n line-height: 2.5em;\n min-height: 2.5em;\n\n :host(.legacy) & {\n box-sizing: content-box;\n }\n\n :host(.masked) & {\n opacity: 0;\n position: absolute;\n left: 0;\n top: 0;\n }\n\n :host(.has-float-label) & {\n opacity: 0;\n padding-top: 1.8em;\n }\n\n :host(.has-value.has-float-label) & {\n opacity: 1;\n }\n\n &:-webkit-autofill {\n background-color: transparent;\n }\n\n &:invalid {\n box-shadow: none;\n }\n\n &::-ms-clear {\n display: none;\n }\n\n &::-ms-expand {\n display: none;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n :host(.has-multiple) & {\n display: none;\n }\n\n option {\n color: black;\n }\n}\n\n// multi stuff\n\n.multi {\n &-wrap {\n @include padding(\n 0,\n calc(1.9em + var(--padding-end)),\n calc(var(--padding-bottom) / 2),\n 0\n );\n\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n max-width: 100%;\n\n :host(.has-clr-btn) & {\n @include padding(\n 0,\n calc(2.6em + (var(--padding-end) * 2) + (var(--padding-end) * 2)),\n calc(var(--padding-bottom) / 2),\n 0\n );\n }\n\n :host(.has-float-label) & {\n padding-top: 1.3em;\n }\n }\n\n &-input {\n @include text-inherit();\n @include padding(\n calc(var(--padding-top) / 2),\n var(--padding-end),\n 0,\n var(--padding-start)\n );\n\n min-width: 50px;\n max-width: 100%;\n max-height: 100%;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n // line-height: calc(2.8em - var(--padding-top));\n min-height: calc(2.8em - var(--padding-top));\n box-sizing: border-box;\n\n :host(.legacy) & {\n box-sizing: content-box;\n }\n\n &:last-child {\n flex: 1;\n }\n }\n\n &-select-box {\n position: absolute;\n background: #{$layer-bg-color};\n min-width: calc(100% + (var(--input-border-width) * 2));\n z-index: #{$layer-index-dropdown};\n margin: 0;\n font-size: 1.15em;\n line-height: 1.4;\n max-height: 50vh;\n overflow-y: auto;\n overscroll-behavior: none;\n transition: opacity 0.2s ease;\n opacity: 0;\n box-sizing: border-box;\n border-radius: #{$layer-border-radius};\n box-shadow: #{$layer-shadow-large};\n padding: var(--padding-top) 0 var(--padding-bottom);\n border: #{$layer-border-style};\n\n &--open {\n opacity: 1;\n }\n\n li {\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n font-size: var(--input-font-size);\n cursor: pointer;\n list-style: none;\n color: var(--input-text-color);\n\n :host(.nano-color) & {\n color: black;\n }\n\n &:hover,\n &:focus {\n color: var(--color--focus-contrast);\n outline: none;\n background: rgba(var(--multi-input-value-bg), 0.2);\n\n :host(.nano-color) & {\n background: current-color(base, 0.2);\n }\n }\n }\n }\n\n &-value {\n @include margin(4px, 0, 0, 4px);\n\n background: rgba(var(--multi-input-value-bg), 0.8);\n color: var(--multi-input-value-text-color);\n border: 2px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.3em 0.5em;\n border-radius: 3px;\n line-height: 1;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n font-weight: 600;\n letter-spacing: 1px;\n\n span {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n line-height: 1.4;\n }\n }\n\n &-value-remove {\n @include margin(0);\n @include background-position(center);\n @include padding(0, 0, 0, 0.5em);\n\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n appearance: none;\n display: flex;\n align-items: center;\n top: 0;\n font-size: 1em;\n\n nano-icon {\n --color: var(--multi-input-value-text-color);\n }\n }\n}\n\n// Clear Input Icon\n// --------------------------------------------------\n\n.select-down-icon {\n @include margin(0);\n @include background-position(center);\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n color: var(--input-text-color);\n font-size: 1.4em;\n right: 0;\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n :host(.rtl) & {\n right: unset;\n left: 0;\n }\n\n :host(.has-multiple) & {\n pointer-events: all;\n }\n\n :host(.masked) & {\n position: relative;\n }\n}\n\n.select-clear-icon {\n @include margin(0);\n @include background-position(center);\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n font-size: 1.4em;\n color: var(--clear-btn-color);\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n visibility: hidden;\n appearance: none;\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n height: 100%;\n right: calc(1.4em + var(--padding-end));\n\n &:hover {\n color: var(--clear-btn-color--hover);\n }\n\n :host(.rtl) & {\n right: unset;\n left: calc(1.4em + var(--padding-end));\n }\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n :host(.has-value) & {\n visibility: visible;\n }\n\n nano-icon {\n --color: inherit;\n }\n}\n\n// Input Has focus\n// --------------------------------------------------\n// When the select has focus, then the select cover should be hidden\n\n// :host(.has-focus) {\n// pointer-events: none;\n// }\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n pointer-events: auto;\n}\n","import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\n\nimport {\n Color,\n SelectChangeEventDetail,\n InputChangeEventDetail,\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\nimport {\n testLegacyStyle,\n debounceEvent,\n closestElement,\n createColorClasses,\n} from '../../utils';\nimport Popover from '../../utils/popover';\n\n/*\n The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n \n @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select\n /\n@Component({\n tag: 'nano-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class Select implements ComponentInterface {\n private nativeSelect?: HTMLSelectElement;\n private multiInput?: HTMLInputElement;\n private multiList?: HTMLUListElement;\n private selectWrap?: HTMLDivElement;\n private listItems: Array<HTMLLIElement> = [];\n private valueItems: Array<HTMLSpanElement> = [];\n private dragVal: string;\n private mo?: MutationObserver;\n private popover: Popover;\n\n private selectId = `nano-select-${selectIds++}`;\n private rtl: boolean = false;\n private currLiIndex: number = -1;\n private inputSearchVal: string = '';\n private watchValue: boolean = true;\n private onInit: boolean = true;\n\n @State() currInsertIndex: number = 0;\n @State() availOpts = [];\n @State() showErrorMsg = false;\n @State() errorMessage: string = '';\n @State() hasFocus = false;\n @State() listOpen = false;\n @State() isLegacy: boolean = 'registerElement' in document;\n @State() hasLabelSlot: boolean = false;\n @State() hasHelperSlot: boolean = false;\n @State() hasIconSlot: boolean = false;\n\n @Element() el!: HTMLNanoSelectElement;\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set.\n /\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, the user cannot interact with the select.\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop({ reflect: true }) showInlineError = true;\n\n /\n String to place within a label element.\n /\n @Prop() label!: string;\n\n /\n Visually hide the label - but make it accessible.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n Enable floating label behaviour. Will disable placeholder if set.\n /\n @Prop() floatLabel: boolean = false;\n\n /\n If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n /\n @Prop() multiple?: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.selectId + '-name';\n\n /\n Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n The initial size of the control.\n /\n @Prop() size?: number;\n\n /\n Maximum number of options that can be selected when multiple is true\n /\n @Prop() max?: number;\n\n /\n Minimum number of options that can be selected when multiple is true\n /\n @Prop() min?: number;\n\n /\n The form element to associate the select with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n in multiple mode, allow users to enter their own values\n /\n @Prop() allowCustomValues: boolean = false;\n\n /\n The value of the select.\n /\n @Prop({ mutable: true }) value?: string \| Array<string \| null> = this.multiple\n ? []\n : '';\n\n /\n You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]\n /\n @Prop({ mutable: true }) options: Array<\n string \| { label: string; value?: string }\n > = [];\n\n /\n If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n /\n @Prop() clearSelect = false;\n\n /\n Hide the native select element and cover with a value 'mask'.\n * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n /\n @Prop() mask = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n /\n @Prop() debounce = 0;\n\n /\n Whether to use native <select> elements. Setting to false will use a similar UI as multiple=\"true\"\n /\n @Prop() native = true;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n }\n\n // @Watch('options')\n @Watch('required')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n @Watch('validateOn')\n @Watch('readonly')\n protected shouldValidate() {\n if (this.onInit) return;\n if (this.invalid) this.showErrorMsg = this.invalid = false;\n\n this.customValidate();\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n /\n Update the native select element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n if (!this.watchValue) return;\n\n if (this.multiple) {\n if (typeof this.value === 'string' && !!this.value.length)\n this.value = this.value.split(',');\n if (\n this.value === null \|\|\n (typeof this.value === 'string' && !this.value.length)\n )\n this.value = [];\n\n if (this.currInsertIndex > this.value.length - 1)\n this.currInsertIndex = this.value.length - 1;\n } else if (typeof this.value !== 'string' && this.value && this.value[0])\n this.value = this.value[0];\n\n this.setNativeValue();\n this.setAvailOpts();\n setTimeout((_) => this.shouldValidate(), 20);\n this.nanoChange.emit({ value: this.value });\n\n if (this.onInit) return;\n }\n\n @Watch('options')\n protected optionsChanged() {\n this.setAvailOpts();\n if (this.hasFocus) this.openList();\n }\n\n /\n Setup or rip down custom combobox when select is switched from mutliple\n /\n @Watch('multiple')\n protected multiChange() {\n this.switchValue();\n\n if (this.multiple) this.setupMulti();\n else if (this.popover) this.popover.destroy();\n }\n\n private setupMulti() {\n setTimeout(() => {\n this.setAvailOpts();\n this.popover = new Popover(this.selectWrap, this.multiList, {\n placement: 'bottom-start',\n skidding: 0,\n distance: 0,\n onTransitionEnd: () => {\n if (!this.listOpen) {\n this.multiList.scrollTop = 0;\n }\n },\n });\n }, 20);\n }\n\n @Watch('listOpen')\n listOpenChange() {\n if (this.listOpen) this.popover.show();\n else this.popover.hide();\n }\n\n /\n Emitted when the value has changed.\n /\n @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n /\n Emitted when the select loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the select has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the select has been created.\n * @internal\n /\n @Event() nanoDidLoad!: EventEmitter<void>;\n\n /\n Emitted when the select has been removed.\n * @internal\n /\n @Event() nanoDidUnload!: EventEmitter<void>;\n\n /\n Emitted when a keyboard input occurred on a multiple=\"true\" input\n /\n @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) this.showInlineValidation();\n return {\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n };\n }\n\n /\n Sets focus on the specified `nano-select`. Use this method instead of the global\n * `select.focus()`.\n /\n @Method()\n async setFocus() {\n if (this.nativeSelect && !this.multiple) this.nativeSelect.focus();\n else if (this.multiInput) this.multiInput.focus();\n }\n\n /\n Returns the native `<select>` element used under the hood.\n /\n @Method()\n getSelectElement(): Promise<HTMLSelectElement> {\n return Promise.resolve(this.nativeSelect!);\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n /\n @Method()\n async showError(message: string) {\n if (this.nativeSelect) {\n this.nativeSelect.setCustomValidity(message);\n this.nativeSelect.reportValidity();\n }\n }\n\n / Logic /\n\n // sets the available options of a multi select.\n // Removes ones already selected\n // Filters one if user starts to search\n private setAvailOpts() {\n if (!this.multiple) return;\n\n this.availOpts = this.options.filter((opt) => {\n let toFind = typeof opt === 'string' ? opt : opt['value'];\n let strFilter =\n typeof opt === 'string' ? opt : opt['label'] \|\| opt['value'];\n\n if (!toFind) return false;\n return (\n !(this.value as Array<string>).includes(toFind) &&\n (!this.multiInput \|\|\n strFilter.toLowerCase().indexOf(this.inputSearchVal.toLowerCase()) >\n -1)\n );\n });\n }\n\n private getNativeValue(): string \| Array<string> {\n const nsl = this.nativeSelect;\n if (!nsl) return '';\n\n if (!this.multiple)\n return nsl.options[nsl.selectedIndex] &&\n nsl.options[nsl.selectedIndex].hasAttribute('value')\n ? nsl.options[nsl.selectedIndex].value\n : '';\n else {\n return Array.from(nsl.options).map((opt) => {\n if (opt.selected && opt.hasAttribute('value')) return opt.value;\n });\n }\n }\n\n private setNativeValue() {\n const nsl = this.nativeSelect;\n if (!nsl) return null;\n if (!this.multiple) nsl.value = this.value as string;\n else {\n Array.from(this.nativeSelect.options)\n .filter((opt) => {\n if (typeof this.value === 'string') return opt.value === this.value;\n else\n return this.value.find((val) => {\n if (typeof val === 'string') return val === this.value;\n else if (val['value']) return val === val['value'];\n });\n })\n .map((opt) => {\n opt.selected = true;\n });\n }\n }\n\n private isValidValues() {\n const nsl = this.nativeSelect;\n if (!nsl) return null;\n\n const selected = this.nativeSelect.querySelectorAll('option:checked');\n const values = Array.from(selected).map(\n (el: HTMLOptionElement) => el.value \|\| null\n );\n\n if (this.multiple) {\n return values.reduce((accumulator, currentValue) => {\n if (!accumulator) return false;\n return !!this.options.find((opt) =>\n opt['value'] ? opt['value'] === currentValue : opt === currentValue\n );\n }, true);\n } else {\n return this.options.find((opt) =>\n opt['value'] ? opt['value'] === values[0] : opt === values[0]\n );\n }\n }\n\n private customValidate = () => {\n this.nativeSelect.setCustomValidity('');\n\n // add custom validations 'cos html5 validations are a bit rubbish on selects\n if (this.required && !this.getNativeValue().length) {\n this.nativeSelect.setCustomValidity('Please fill in this field.');\n return true;\n }\n if (\n this.getNativeValue().length &&\n !this.allowCustomValues &&\n !this.isValidValues()\n ) {\n this.nativeSelect.setCustomValidity(\n 'Please choose an item from this field.'\n );\n return true;\n }\n if (this.max && this.getNativeValue().length > this.max) {\n this.nativeSelect.setCustomValidity(\n `Only up to ${this.max} values are allowed.`\n );\n return true;\n }\n if (this.min && this.getNativeValue().length < this.min) {\n this.nativeSelect.setCustomValidity(\n `You must select a minimum of ${this.min} values.`\n );\n return true;\n }\n return false;\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this.invalid = false;\n this.showErrorMsg = false;\n this.errorMessage = '';\n\n if (!this.nativeSelect.validity.valid) {\n this.errorMessage = this.nativeSelect.validationMessage;\n this.invalid = true;\n this.showErrorMsg = true;\n }\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n private handleInvalid = (ev: Event) => {\n this.invalid = true;\n\n if (this.validateOn === 'submit')\n this.invalid = this.showErrorMsg = this.customValidate();\n if (this.showInlineError) ev.preventDefault();\n\n setTimeout((_) => this.showInlineValidation(ev), 20);\n };\n\n private openList() {\n if (!this.multiple) return;\n if (\n (this.availOpts.length \|\|\n (!!this.inputSearchVal.length && this.allowCustomValues)) &&\n (!this.max \|\| (this.max && this.value.length < this.max))\n )\n this.listOpen = true;\n else this.listOpen = false;\n }\n\n private addValue(value) {\n if (!this.multiple) return;\n if (this.value && this.value.length && this.value.includes(value)) return;\n if (this.max && this.value.length === this.max) return;\n\n this.currInsertIndex++;\n this.value = [\n ...this.value.slice(0, this.currInsertIndex),\n value,\n ...this.value.slice(this.currInsertIndex),\n ];\n\n this.inputSearchVal = '';\n\n this.setAvailOpts();\n\n this.selectWrap.clientWidth; // force reflow\n this.setFocus();\n this.openList();\n }\n\n private removeValue(toFind?: string) {\n if (!this.multiple \|\| !this.value.length) return;\n\n if (!toFind) toFind = this.value[this.value.length - 1];\n this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n if (this.currInsertIndex > this.value.length - 1)\n this.currInsertIndex = this.value.length - 1;\n\n this.selectWrap.clientWidth; // force reflow\n this.setFocus();\n this.openList();\n }\n\n private switchValue() {\n this.watchValue = false;\n if (this.multiple) {\n if (typeof this.value === 'string' && !!this.value.length)\n this.value = this.value.split(',');\n else this.value = [];\n\n this.currInsertIndex = Math.max(this.value.length - 1, 0);\n } else if (typeof this.value !== 'string' && this.value && this.value[0])\n this.value = this.value[0];\n this.watchValue = true;\n }\n\n private isSelected(value: string) {\n if (this.multiple)\n return (this.value as Array<string>).find((val) => val === value);\n else value === this.value;\n }\n\n private getLabel(val: string) {\n let foundVal = this.options.find((opt) => {\n return opt['value'] ? opt['value'] === val : opt === val;\n });\n if (!foundVal) return null;\n return foundVal['label'] ? foundVal['label'] : foundVal;\n }\n\n private slotChangeObserver() {\n const mo = (this.mo = new MutationObserver((mrs: MutationRecord[]) =>\n this.processSlottedContent(mrs)\n ));\n mo.observe(this.el, { childList: true, subtree: true });\n }\n\n private processSlottedContent(mutations?: MutationRecord[]) {\n // see if we have label / helper content\n this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n this.hasIconSlot = !!this.el.querySelector('[slot=\"icon\"]');\n\n if (!mutations) {\n // find legacy select. Take attrs and apply to our element\n let existingselect = this.el.querySelector(\n 'select:not([class=\"sc-nano-select\"])'\n );\n if (existingselect) {\n Array.from(existingselect.attributes)\n .filter((attr) => attr.specified && attr.nodeName in this)\n .map((attr) => (this[attr.nodeName] = attr.nodeValue));\n }\n\n // find legacy label. Apply to our element\n let existingLabel = this.el.querySelector(\n 'label:not([class=\"sc-nano-select\"])'\n );\n if (existingLabel) this.label = this.label \|\| existingLabel.innerHTML;\n\n // find legacy slotted options. Apply them and add any relevant values\n let legacyOpts = this.el.querySelectorAll(\n 'option:not([class=\"sc-nano-select\"])'\n );\n\n this.watchValue = false;\n if (legacyOpts && legacyOpts.length) {\n let options = [];\n legacyOpts.forEach((option: HTMLOptionElement) => {\n options.push({\n label: option.label \|\| option.innerText,\n value: option.value,\n });\n if (!option.selected \|\| !option.value) return;\n\n if (this.multiple) (this.value as Array<string>).push(option.value);\n else this.value = option.value;\n });\n this.options = options;\n }\n\n if (legacyOpts.length \|\| existingLabel \|\| existingselect) {\n // empty all legacy slotted stuff\n let children = this.el.querySelectorAll('[slot=\"legacy\"]');\n if (children) children.forEach((n) => n.parentNode.removeChild(n));\n }\n\n this.watchValue = true;\n }\n\n if (\n mutations &&\n !Array.from(mutations[0].addedNodes).find(\n (node) => node.nodeName.toLowerCase() === 'nano-select-option'\n )\n )\n return;\n\n // find nano-select-options\n let nanoOpts = this.el.querySelectorAll('nano-select-option');\n\n if (nanoOpts && nanoOpts.length) {\n let options = [];\n nanoOpts.forEach((option: HTMLNanoSelectOptionElement) => {\n options.push({\n label: option.label \|\| option.innerText,\n value: option.value,\n });\n if (!option.selected \|\| !option.value) return;\n\n if (this.multiple) (this.value as Array<string>).push(option.value);\n else this.value = option.value;\n });\n this.options = options;\n }\n\n this.setAvailOpts();\n }\n\n /* Event handling /\n\n private onChange = (ev?: Event) => {\n if (!this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n this.value = this.getNativeValue();\n };\n\n private onBlur = () => {\n if (this.multiple) {\n this.currLiIndex = -1;\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n }\n this.hasFocus = false;\n\n setTimeout(() => {\n if (this.validateOn === 'dirty' && !this.listOpen && !this.hasFocus)\n this.showInlineValidation();\n }, 20);\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n if (this.multiple) {\n this.currLiIndex = -1;\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n this.openList();\n }\n\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private clearSelectValue = (ev?: Event) => {\n if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n if (this.multiple) {\n this.value = [];\n let options = this.nativeSelect.querySelectorAll('option');\n if (options.length) options.forEach((n) => n.remove());\n this.currInsertIndex = -1;\n this.setAvailOpts();\n } else this.value = '';\n\n this.onChange();\n };\n\n private onClick = () => {\n this.setFocus();\n this.openList();\n };\n\n / Multi event handlers /\n\n private onMultiInputBlur = () => {\n if (this.allowCustomValues) return;\n this.inputSearchVal = '';\n this.setAvailOpts();\n };\n\n private onDragStart = (ev: MouseEvent) => {\n let ele = ev.target as HTMLSpanElement;\n this.dragVal = ele.dataset.value;\n };\n\n private onDragEnd = (ev) => {\n this.dragVal = null;\n ev.preventDefault();\n };\n\n private onDragLeave = (ev: MouseEvent) => {\n let ele = ev.target as HTMLSpanElement;\n let spanVal: string =\n ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n if (\n !spanVal \|\|\n this.dragVal === spanVal \|\|\n !this.value.includes(this.dragVal)\n ) {\n ev.preventDefault();\n return;\n }\n\n let to = this.value.indexOf(spanVal);\n let from = this.value.indexOf(this.dragVal);\n let tmpArr = this.value as Array<string>;\n let tmpVal = tmpArr[to];\n\n tmpArr[to] = tmpArr[from];\n tmpArr[from] = tmpVal;\n this.value = [...tmpArr];\n };\n\n private onMultiInput = (ev) => {\n this.inputSearchVal = ev.target.value;\n this.setAvailOpts();\n this.openList();\n this.nanoSearchChange.emit({ value: ev.target.value });\n };\n\n private getActiveOpt() {\n return this.multiList.querySelector('.has-focus') as HTMLLIElement;\n }\n\n private onOptFocus = (ev: FocusEvent) => {\n let activeEle = this.getActiveOpt();\n if (activeEle) activeEle.classList.remove('has-focus');\n (ev.target as HTMLElement).classList.add('has-focus');\n };\n\n private onHostClick = () => {\n setTimeout((_) => {\n if (!this.multiple \|\| this.hasFocus) return;\n this.setFocus();\n }, 20);\n };\n\n private handleDocumentMouseDown = (ev: MouseEvent) => {\n const target = ev.target as HTMLElement;\n if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n this.listOpen = false;\n this.onBlur();\n }\n };\n\n private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n if (!this.multiple) return;\n\n if (!this.inputSearchVal) {\n let rm: HTMLSpanElement;\n\n switch (ev.key) {\n case 'Backspace':\n if (this.multiInput.previousElementSibling)\n rm = this.multiInput.previousElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value \|\| null);\n break;\n\n case 'Delete':\n if (this.multiInput.nextElementSibling)\n rm = this.multiInput.nextElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value \|\| null);\n break;\n\n case 'ArrowLeft':\n case 'ArrowRight':\n if (!this.value.length) break;\n\n if (ev.key === 'ArrowLeft' && this.multiInput.previousSibling)\n this.currInsertIndex--;\n if (ev.key === 'ArrowRight' && this.multiInput.nextSibling)\n this.currInsertIndex++;\n\n setTimeout(() => {\n this.multiInput.focus();\n }, 20);\n ev.preventDefault();\n break;\n }\n }\n\n // navigated to component via keyboard. Open with down.\n if (this.hasFocus && !this.listOpen && ev.key === 'ArrowDown') {\n this.openList();\n this.currLiIndex = -1;\n }\n\n // Close when tabbing outside of element\n if (this.hasFocus && ev.key === 'Tab') {\n setTimeout(() => {\n if (\n document.activeElement &&\n closestElement(\n this.el.tagName.toLowerCase(),\n document.activeElement\n ) !== this.el\n ) {\n this.listOpen = false;\n this.onBlur();\n return;\n }\n });\n }\n\n // list open, navigate items with arrows\n if (this.listOpen) {\n const selectedItem = this.getActiveOpt();\n let testIndex = this.listItems.indexOf(selectedItem) \|\| this.currLiIndex;\n\n switch (ev.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n ev.preventDefault();\n\n if (ev.key === 'ArrowDown') testIndex++;\n else if (ev.key === 'ArrowUp') testIndex--;\n\n if (testIndex < 0) {\n this.currLiIndex = 0;\n this.multiInput.focus();\n return;\n }\n\n let foundIndex = this.listItems[testIndex]\n ? testIndex\n : this.currLiIndex;\n setTimeout(() => {\n this.listItems[foundIndex].focus();\n this.currLiIndex = foundIndex;\n }, 20);\n return;\n case 'Enter':\n case ' ':\n if (this.listItems[this.currLiIndex]) {\n this.addValue(this.listItems[this.currLiIndex].dataset.value);\n ev.preventDefault();\n }\n return;\n case 'Escape':\n this.listOpen = false;\n return;\n }\n }\n\n if (this.currLiIndex > -1) ev.preventDefault();\n };\n\n / Stencil Component lifecycle hooks */\n\n connectedCallback() {\n this.debounceChanged();\n\n if (!Build.isBrowser) return;\n\n this.el.dispatchEvent(\n new CustomEvent('nanoDidLoad', {\n detail: this.el,\n })\n );\n testLegacyStyle(this.el);\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('nanoDidUnload', {\n detail: this.el,\n })\n );\n\n if (!Build.isBrowser) return;\n if (this.mo) this.mo.disconnect();\n if (this.popover) this.popover.destroy();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n if (this.multiple) this.setupMulti();\n this.customValidate();\n }\n\n componentWillLoad() {\n this.switchValue();\n this.processSlottedContent();\n this.onInit = false;\n }\n\n private renderLabel(labelId: string, position?: 'float') {\n let classes: CssClassMap = {};\n if (position === 'float') {\n classes = { 'placeholder-as-label': true };\n } else {\n classes = { label: true, 'visually-hide': this.hideLabel };\n }\n if (!this.label && !this.hasLabelSlot) return;\n\n return (\n <label class={classes} htmlFor={this.selectId} id={labelId}>\n {this.label && this.label}\n {!this.label && !!this.hasLabelSlot && <slot name=\"label\" />}\n </label>\n );\n }\n\n render() {\n const labelId = this.selectId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot\n ? this.selectId + '-moreId'\n : '';\n const listId = this.selectId + '-list';\n\n this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n this.listItems = [];\n this.valueItems = [];\n\n if (\n this.placeholder &&\n (!this.options[0] \|\| this.options[0]['label'] !== this.placeholder)\n ) {\n this.options.unshift({ label: this.placeholder, value: '' });\n }\n\n let optionMenu = this.listOpen;\n\n let valueMarkup;\n if (this.multiple) {\n let input = (\n <input\n class=\"multi-input\"\n id={this.selectId}\n ref={(input) => (this.multiInput = input)}\n disabled={this.disabled}\n autoFocus={this.autofocus}\n autocomplete=\"off\"\n onInput={this.onMultiInput}\n value={this.inputSearchVal}\n onTouchStart={this.onClick}\n onMouseDown={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onMultiInputBlur}\n placeholder={\n this.placeholder && !this.floatLabel && !this.value.length\n ? this.placeholder\n : ''\n }\n role={this.multiple ? 'combobox' : ''}\n aria-labelledby={labelId + ' ' + moreId}\n aria-controls={listId}\n aria-expanded={optionMenu ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n />\n );\n\n if (!!this.value.length) {\n valueMarkup = (this.value as Array<string>).map((val, i) => {\n let label = this.options.find((opt) => {\n return opt['value'] ? opt['value'] === val : opt === val;\n });\n label = label && label['label'] ? label['label'] : val;\n\n let toReturn = (\n <span\n onDragStart={this.onDragStart}\n onDragLeave={this.onDragLeave}\n onDragEnd={this.onDragEnd}\n draggable\n data-value={val}\n ref={(span) => this.valueItems.push(span)}\n class=\"multi-value\"\n >\n <span>{label}</span>\n <button\n class=\"multi-value-remove\"\n type=\"button\"\n tabindex=\"-1\"\n onTouchEnd={() => {\n this.removeValue(val);\n }}\n onMouseUp={() => {\n this.removeValue(val);\n }}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n </span>\n );\n\n if (i === 0 && this.currInsertIndex < 0) toReturn = [input, toReturn];\n else if (i === this.currInsertIndex) toReturn = [toReturn, input];\n return toReturn;\n });\n } else valueMarkup = input;\n }\n\n return (\n <Host\n type={this.multiple ? 'select-multiple' : 'select-one'}\n aria-disabled={this.disabled ? 'true' : null}\n class={{\n ...createColorClasses(this.color),\n 'has-value': !!this.value.length \|\| !!this.inputSearchVal.length,\n 'has-focus': this.hasFocus,\n 'is-invalid': this.invalid,\n 'has-label': this.label !== null && !this.floatLabel,\n 'has-float-label': this.label !== null && this.floatLabel,\n rtl: this.rtl,\n 'has-multiple': this.multiple,\n 'multi-list-open': this.listOpen,\n 'has-clr-btn': this.clearSelect,\n masked: this.mask,\n legacy: this.isLegacy,\n }}\n onClick={this.onHostClick}\n >\n {!this.floatLabel && this.renderLabel(labelId)}\n <div class=\"select\" ref={(div) => (this.selectWrap = div)}>\n {this.floatLabel && this.renderLabel(labelId, 'float')}\n <div\n class={{\n 'native-select-wrap': true,\n 'native-select-wrap--multiple': this.multiple,\n }}\n >\n {!this.multiple && this.mask && (\n <div class=\"select-mask\">\n {this.getLabel(this.value as string)}\n </div>\n )}\n {this.multiple && [\n <div class=\"multi-wrap\">{valueMarkup}</div>,\n <ul\n role=\"listbox\"\n ref={(ul) => (this.multiList = ul)}\n aria-multiselectable=\"true\"\n aria-required={this.required}\n aria-expanded={optionMenu ? 'true' : 'false'}\n aria-hidden={!optionMenu}\n hidden={!optionMenu}\n id={listId}\n class={{\n 'multi-select-box': true,\n 'multi-select-box--open': optionMenu,\n }}\n >\n {this.allowCustomValues && this.inputSearchVal.length > 0 && (\n <li\n data-value={this.inputSearchVal}\n role=\"option\"\n tabindex=\"-1\"\n ref={(li) => this.listItems.push(li)}\n onMouseDown={() => {\n this.addValue(this.inputSearchVal);\n }}\n onFocus={this.onOptFocus}\n >\n Add {this.inputSearchVal}\n </li>\n )}\n {this.availOpts.map((option) => {\n let optval, label;\n if (option['value']) {\n optval = option['value'];\n label = option['label'] \|\| option['value'];\n } else if (typeof option === 'string') {\n optval = option;\n label = optval;\n }\n if (!optval) return;\n return (\n <li\n role=\"option\"\n key={optval}\n data-value={optval}\n ref={(li) => this.listItems.push(li)}\n tabindex=\"-1\"\n aria-selected={this.isSelected(optval) ? 'true' : 'false'}\n onMouseDown={() => {\n this.addValue(optval);\n }}\n onFocus={this.onOptFocus}\n >\n {label}\n </li>\n );\n })}\n </ul>,\n <select\n id={this.selectId + '-hidden'}\n class=\"native-select\"\n ref={(select) => (this.nativeSelect = select)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n form={this.form}\n multiple={this.multiple}\n name={this.name}\n required={this.required}\n onInvalid={this.handleInvalid}\n >\n {(this.value as Array<string>).map((val) => {\n return (\n <option value={val} selected>\n {val}\n </option>\n );\n })}\n </select>,\n ]}\n {!this.multiple && (\n <select\n id={this.selectId}\n class=\"native-select\"\n ref={(select) => (this.nativeSelect = select)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n form={this.form}\n autoFocus={this.autofocus}\n multiple={this.multiple}\n name={this.name}\n required={this.required}\n size={this.size}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onInvalid={this.handleInvalid}\n onChange={this.onChange}\n >\n {this.options.map((option, i) => {\n if (option['value'] \|\| option['label'])\n return (\n <option\n key={option['label'] + i}\n label={option['label']}\n value={option['value']}\n selected={\n option['value'] === this.value \|\|\n (!this.value && !option['value'])\n }\n disabled={!option['value'] && this.required}\n >\n {option['label'] ? option['label'] : option['value']}\n </option>\n );\n else\n return (\n <option\n key={(option as string) + i}\n value={option as string}\n selected={option === this.value}\n >\n {option}\n </option>\n );\n })}\n <slot name=\"legacy\" />\n </select>\n )}\n {this.clearSelect && !this.readonly && !this.disabled && (\n <button\n type=\"button\"\n class=\"select-clear-icon\"\n tabindex=\"-1\"\n onTouchEnd={this.clearSelectValue}\n onMouseUp={this.clearSelectValue}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n <div\n onTouchEnd={this.onClick}\n onMouseUp={this.onClick}\n class=\"select-down-icon\"\n >\n {this.hasIconSlot ? (\n <slot name=\"icon\" />\n ) : (\n <nano-icon name=\"regular/chevron-down\"></nano-icon>\n )}\n </div>\n </div>\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"helper\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n\nlet selectIds = 0;\n"]}