@nanoporetech-digital/components 5.1.2 → 5.1.3

package/dist/nano-components/p-7759d185.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{w as t,r as i,c as s,d as e,h,a as n,g as r}from"./p-f6a8467a.js";import{d as o}from"./p-842cf127.js";import{d as a}from"./p-9746b0a5.js";const l=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{position:relative;display:block}.sortable__live-region{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const d={horizontal:{x:1,y:0},vertical:{x:0,y:1}};let c=0;const f=class{handleItemSelectorChange(){this.refreshKeyboardHandles()}handleHandleSelectorChange(){this.refreshKeyboardHandles();this.attachMutationObserver()}handleCreateKeyboardHandleChange(){this.refreshKeyboardHandles()}handleSortableHostElement(t,i){if(i)this.removeEventHandlers(i);this.addEventHandlers();this.refreshKeyboardHandles();this.attachMutationObserver();if(this.sortableHostElement){this.sortableHostElement.style.position="relative"}}async refreshKeyboardHandles(){var t,i,s;if(this.handleSelector){if((t=this.keyboardHandleMap)===null||t===void 0?void 0:t.size){this.keyboardHandleMap.clear()}this.sortableHost.querySelectorAll(this.handleSelector).forEach((t=>{if(!t.getAttribute("aria-describedby"))t.setAttribute("aria-describedby",this.sortableId);const i=t.closest(this.itemSelector);if(i)this.keyboardHandleMap.set(t,i)}));return}if((i=this.keyboardHandleMap)===null||i===void 0?void 0:i.size){(s=this.keyboardHandleMap)===null||s===void 0?void 0:s.forEach(((t,i)=>i.remove()));this.keyboardHandleMap.clear()}this.sortableHost.querySelectorAll(this.itemSelector).forEach(((t,i)=>{const s=this.createKeyboardHandle(i,t);if(!s){console.error("`createKeyboardHandle` *must* return the handle element it creates");return}this.keyboardHandleMap.set(s,t);s.setAttribute("aria-describedby",this.sortableId)}))}get sortableHost(){if(this.sortableHostElement)return this.sortableHostElement;return this.host}addAriaMsg(t){this.ariaTextList=[...this.ariaTextList,t];setTimeout((()=>{const i=this.ariaTextList.indexOf(t);this.ariaTextList.splice(i,1);this.ariaTextList=[...this.ariaTextList]}),1e4)}updateUserSelectStyle(t){this.host.style.userSelect=t;this.host.style.MozUserSelect=t;this.host.style.msUserSelect=t;this.host.style.webkitUserSelect=t}hitTest(t,i){const{left:s,top:e,width:h,height:n}=t.getBoundingClientRect();const r=s+h/2;const o=e+n/2;return i.filter((t=>{const{left:i,right:s,top:e,bottom:h}=t.getBoundingClientRect();return!(r<i||r>s||o<e||o>h)}))}isAnimating(t){return this.animatedElements.indexOf(t)!==-1}animateNode(i,s=0,e=0){if(!i.animate){return}this.animatedElements.push(i);i.style.willChange="transform";t((()=>{this.animationPromise=new Promise((t=>{i.animate([{transform:`translate3d(${s}px, ${e}px, 0)`},{transform:"none"}],this.animationTiming).addEventListener("finish",(()=>{const s=this.animatedElements.indexOf(i);i.style.willChange="";if(s!==-1){this.animatedElements.splice(s,1)}t();delete this.animationPromise}),{once:true})}))}))}insertAtTarget(t,i){if(!t||!i)return;let s=[];if(this.animationEnabled){s=this.sortableNodes.map((t=>({x:t.offsetLeft,y:t.offsetTop})))}if(!t.isConnected||!i.isConnected)return;if(this.dropzoneNodes.indexOf(i)>-1){i.append(t)}else{const s=t.compareDocumentPosition(i);let e;if(s&this.host.DOCUMENT_POSITION_FOLLOWING){e=i.parentNode===t.parentNode?"afterend":"beforebegin"}if(s&this.host.DOCUMENT_POSITION_PRECEDING){e=i.parentNode===t.parentNode?"beforebegin":"afterend"}if(e)i.insertAdjacentElement(e,t)}if(this.animationEnabled){this.sortableNodes.forEach(((t,i)=>{const{x:e,y:h}=s[i];const n=e-t.offsetLeft;const r=h-t.offsetTop;if(n!==0||r!==0){this.animateNode(t,n,r)}}))}}reset(){if(this.draggedElementClone!==undefined&&this.draggedElementClone.parentNode!==null){this.draggedElementClone.parentNode.removeChild(this.draggedElementClone)}if(this.draggedElement&&this.draggedElement.parentNode&&this.draggedElementOrigin){this.draggedElement.classList.remove(this.placeholderClass)}if(this.dropzoneActiveClass&&this.dropzoneNodes.length){this.dropzoneNodes.forEach((t=>t.classList.remove(this.dropzoneActiveClass)))}delete this.draggedElementClone;delete this.draggedElement;this.dropzoneNodes=[];this.sortableNodes=[];this.animatedElements=[];this.dragRequestPending=false;this.updateUserSelectStyle("")}createClone(t){const i=t.cloneNode(true);if(t.id)i.id="clone__"+i.id;Array.from(i.children).forEach(((i,s)=>{const e=i;const h=t.children.item(s);if(h){e.style.width=`${h.offsetWidth}px`}}));const{offsetLeft:s,offsetTop:e,offsetWidth:h,offsetHeight:n}=t;Object.assign(i.style,{position:"absolute",left:`calc(${s}px - var(--grab-offset-x, 0px))`,top:`calc(${e}px - var(--grab-offset-y, 0px))`,height:this.dragResize?`${n}px`:undefined,width:this.dragResize?`${h}px`:undefined,willChange:"transform,opacity"});i.classList.add(this.draggedClass);return t.parentNode.appendChild(i)}addListeners(t,i,s,e){i.split(" ").forEach((i=>t.addEventListener(i,s,e)))}removeEventHandlers(t){t=t||this.sortableHost;t.removeEventListener("mousedown",this.handleTrack);t.removeEventListener("touchstart",this.handleTrack);t.removeEventListener("keydown",this.handleKeydown)}addEventHandlers(t){t=t||this.sortableHost;this.addListeners(t,"mousedown touchstart",this.handleTrack,{passive:true});t.addEventListener("keydown",this.handleKeydown)}attachMutationObserver(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=undefined}this.mutationObserver=new MutationObserver((()=>{const t=Array.from(this.keyboardHandleMap.values());const i=Array.from(this.sortableHost.querySelectorAll(this.itemSelector));if(t.length!==i.length||!!i.find((i=>!t.includes(i)))){this.refreshKeyboardHandles()}}));this.mutationObserver.observe(this.sortableHost,{subtree:true,childList:true})}handleKeydown(t){const i=t.target;let s;let e;if(this.handleSelector){s=i.closest(this.handleSelector);e=i.closest(this.itemSelector)}else{e=this.keyboardHandleMap.get(i);s=i}if(!s||!e)return;const h=t=>{this.keyboardSortActive=t;this.draggedElement=t?e:undefined;e.classList.toggle(this.draggedClass,t);s.classList.toggle(this.handleDraggedClass,t);if(t){this.addAriaMsg(this.grabbedHelperText(e));document.addEventListener("mousedown",(()=>h(false)),{once:true})}else{this.addAriaMsg(this.droppedHelperText(e))}};if([" ","Space","Enter"].includes(t.key)){t.preventDefault();if(!this.keyboardSortActive){h(true);this.sortableNodes=Array.from(this.sortableHost.querySelectorAll(this.itemSelector))||[];const t=this.nanoGrabbed.emit({element:e,index:this.sortableNodes.indexOf(e)});if(t.defaultPrevented){h(false);return}}else{h(false);this.nanoDropped.emit({element:e})}return}if(!this.keyboardSortActive)return;if(["Escape","Tab"].includes(t.key))h(false);let n=["Home","End"];if(!this.orientation||this.orientation==="horizontal")n=[...n,"ArrowRight","ArrowLeft"];if(!this.orientation||this.orientation==="vertical")n=[...n,"ArrowUp","ArrowDown"];if(!n.includes(t.key))return;t.preventDefault();this.sortableNodes=Array.from(this.sortableHost.querySelectorAll(this.itemSelector))||[];this.dropzoneNodes=Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector))||[];const r=this.sortableNodes.indexOf(this.draggedElement);let o=-1;if(this.dropzoneNodes.length){const t=this.draggedElement.closest(this.dropzoneSelector);o=this.dropzoneNodes.indexOf(t);o=o>-1?o:-1}const a=r-1<0&&o>-1?this.dropzoneNodes[o-1]:this.sortableNodes[r-1];const l=r+1===this.sortableNodes.length&&o>-1?this.dropzoneNodes[o+1]:this.sortableNodes[r+1];if(t.key==="Home"){this.insertAtTarget(this.draggedElement,this.sortableNodes[0])}if(t.key==="End"){this.insertAtTarget(this.draggedElement,this.sortableNodes[this.sortableNodes.length-1])}if(["ArrowRight","ArrowDown"].includes(t.key)){this.insertAtTarget(this.draggedElement,l)}if(["ArrowLeft","ArrowUp"].includes(t.key)){this.insertAtTarget(this.draggedElement,a)}this.finishOrder();this.draggedElement=e;const d=()=>{requestAnimationFrame((()=>{typeof s["setFocus"]==="function"?s.setFocus():s.focus()}))};if(this.animationPromise)this.animationPromise.then((()=>d()));else d()}handleTrack(t){if(this.dragRequestPending||t.button&&t.button!==1)return;const i=t=>{if(t.cancelable)t.preventDefault();clearTimeout(this.mouseDownTimer)};const s=()=>{clearTimeout(this.mouseDownTimer);document.removeEventListener("touchmove",i);document.removeEventListener("contextmenu",this.finishOrder)};s();this.mouseDownTimer=window===null||window===void 0?void 0:window.setTimeout((()=>{if(!this.trackStart(t))return;document.addEventListener("touchmove",i,{passive:false});document.addEventListener("contextmenu",this.finishOrder);this.addAriaMsg(this.grabbedHelperText(this.draggedElement));o(this.sortableHost,{initialEvent:t,relative:true,onMove:(t,i)=>{this.trackMove(t,i)},onStop:()=>{this.nanoDropped.emit({element:this.draggedElement});s();const t=()=>{this.addAriaMsg(this.droppedHelperText(this.draggedElement));requestAnimationFrame((()=>this.finishOrder()))};if(this.animationPromise){this.animationPromise.then((()=>t()))}else t()}})}),150);this.addListeners(document,"mouseup touchend touchmove",(()=>clearTimeout(this.mouseDownTimer)),{once:true})}trackStart(t){const i=t.target;let s;if(this.handleSelector){s=i.closest(this.handleSelector);if(!s)return;s.classList.add(this.handleDraggedClass)}const e=i.closest(this.itemSelector);if(!e)return false;this.sortableNodes=Array.from(this.sortableHost.querySelectorAll(this.itemSelector))||[];const h=this.nanoGrabbed.emit({element:e,index:this.sortableNodes.indexOf(e)});if(h.defaultPrevented)return false;t.preventDefault();this.updateUserSelectStyle("none");this.dragRequestPending=true;this.draggedElement=e;this.dropzoneNodes=Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector))||[];this.draggedElementClone=this.createClone(e);this.draggedElementOrigin=e.nextSibling;this.animatedElements=[];this.draggedElement.classList.add(this.placeholderClass);return true}constructor(h){i(this,h);this.nanoOrderChange=s(this,"nanoOrderChange",7);this.nanoGrabbed=s(this,"nanoGrabbed",7);this.nanoDropped=s(this,"nanoDropped",7);this.dragRequestPending=false;this.sortableNodes=[];this.dropzoneNodes=[];this.animatedElements=[];this.keyboardHandleMap=new Map;this.sortableId=`nano-sortable-${c++}`;this.finishOrder=()=>{if(!this.draggedElement)return;const t=Array.from(this.sortableHost.querySelectorAll(this.itemSelector)).filter((t=>t!==this.draggedElementClone));const i=this.sortableNodes.indexOf(this.draggedElement);const s=t.indexOf(this.draggedElement);if(this.handleSelector){const t=this.draggedElement.querySelector(this.handleSelector);t.classList.remove(this.handleDraggedClass)}if(i!==s){const e=this.nanoOrderChange.emit({element:this.draggedElement,originalIndex:i,targetIndex:s});if(e.defaultPrevented){this.animationPromise=new Promise((s=>{setTimeout((()=>{this.insertAtTarget(this.draggedElement,t[i]);this.reset();this.dragRequestPending=false;s()}),200)}));return}this.addAriaMsg(this.reorderHelperText(this.draggedElement,t,s+1))}this.reset();this.dragRequestPending=false};this.trackMove=(i,s)=>{if(!this.draggedElementClone){return}if(this.orientation){i=i*d[this.orientation].x;s=s*d[this.orientation].y}t((()=>{Object.assign(this.draggedElementClone.style,{transform:`translate3d(${i}px, ${s}px, 0)`})}));let h=this.hitTest(this.draggedElementClone,this.sortableNodes)[0];let n;if(this.dropzoneSelector&&this.dropzoneActiveClass){e((()=>{n=this.draggedElement.closest(this.dropzoneSelector);t((()=>{this.dropzoneNodes.filter((t=>t!==n)).forEach((t=>t.classList.remove(this.dropzoneActiveClass)));n.classList.add(this.dropzoneActiveClass)}))}))}if(!h&&this.dropzoneNodes.length){h=this.hitTest(this.draggedElementClone,this.dropzoneNodes)[0];if(this.draggedElement.closest(this.dropzoneSelector)===h)return}if(h&&h!==this.draggedElement&&!this.isAnimating(h)){this.insertAtTarget(this.draggedElement,h)}};this.itemSelector="li";this.handleSelector=undefined;this.dropzoneSelector=undefined;this.helperText='Press "Space" or "Enter" to enable element reordering and use the arrow keys to reorder items.'+'Press "Escape" to cancel reordering. Alternatively, use your mouse to drag / reorder.';this.itemDescriptor=t=>`"${t===null||t===void 0?void 0:t.textContent.trim()}"`;this.grabbedHelperText=t=>`${this.itemDescriptor(t)} grabbed`;this.droppedHelperText=t=>`${this.itemDescriptor(t)} dropped`;this.reorderHelperText=(t,i,s)=>`The list has been reordered, ${this.itemDescriptor(t)} is now item ${s} of ${i.length}`;this.createKeyboardHandle=(t,i)=>{const s=`\n      <nano-icon-button\n        slot="end"\n        icon-name="light/arrows"\n        class="nano-sortable__keyboard-handle visually-hidden"\n        label="Re-order this item"\n      ></nano-icon-button>`;const e=globalThis.document.createElement("div");e.innerHTML=s;const h=e.children[0];i.append(h);return h};this.sortableHostElement=undefined;this.animationEnabled=true;this.draggedClass="nano-sortable__dragged";this.handleDraggedClass="nano-sortable__handle-dragged";this.placeholderClass="nano-sortable__placeholder";this.dropzoneActiveClass="";this.animationTiming={duration:200,easing:"ease-out"};this.orientation=undefined;this.dragResize=false;this.keyboardSortActive=false;this.ariaTextList=[];this.handleTrack=this.handleTrack.bind(this);this.handleKeydown=this.handleKeydown.bind(this);this.refreshKeyboardHandles=this.refreshKeyboardHandles.bind(this);this.refreshKeyboardHandles=a(this.refreshKeyboardHandles,500)}connectedCallback(){this.addEventHandlers();this.refreshKeyboardHandles();this.attachMutationObserver();if(!this.host.querySelector(`#${this.sortableId}`)){this.host.insertAdjacentHTML("beforeend",`<div class="visually-hidden" id="${this.sortableId}">${this.helperText}</div>`)}}disconnectedCallback(){var t;this.removeEventHandlers();(t=this.host.querySelector(`#${this.sortableId}`))===null||t===void 0?void 0:t.remove();if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=undefined}}render(){return h(n,null,h("div",{class:"sortable__live-region","aria-live":"polite","aria-relevant":"additions","aria-atomic":"true",role:"log",part:"announcements"},this.ariaTextList.map((t=>h("div",null,t)))),h("slot",null))}get host(){return r(this)}static get watchers(){return{itemSelector:["handleItemSelectorChange"],handleSelector:["handleHandleSelectorChange"],createKeyboardHandle:["handleCreateKeyboardHandleChange"],sortableHostElement:["handleSortableHostElement"]}}};f.style=l;export{f as nano_sortable};
+//# sourceMappingURL=p-7759d185.entry.js.map

package/dist/nano-components/p-7759d185.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sortableCss","orientationMap","horizontal","x","y","vertical","sortableIds","Sortable","handleItemSelectorChange","this","refreshKeyboardHandles","handleHandleSelectorChange","attachMutationObserver","handleCreateKeyboardHandleChange","handleSortableHostElement","_newVal","oldVal","removeEventHandlers","addEventHandlers","sortableHostElement","style","position","async","handleSelector","_a","keyboardHandleMap","size","clear","sortableHost","querySelectorAll","forEach","handle","getAttribute","setAttribute","sortableId","sortEle","closest","itemSelector","set","_b","_c","_ele","remove","ele","i","createKeyboardHandle","console","error","host","addAriaMsg","msg","ariaTextList","setTimeout","mIdx","indexOf","splice","updateUserSelectStyle","userSelect","MozUserSelect","msUserSelect","webkitUserSelect","hitTest","node","targets","left","l","top","t","width","w","height","h","getBoundingClientRect","filter","item","right","bottom","isAnimating","animatedElements","animateNode","dx","dy","animate","push","willChange","writeTask","animationPromise","Promise","resolve","transform","animationTiming","addEventListener","index","once","insertAtTarget","target","offsets","animationEnabled","sortableNodes","map","offsetLeft","offsetTop","isConnected","dropzoneNodes","append","nodeComparison","compareDocumentPosition","DOCUMENT_POSITION_FOLLOWING","parentNode","DOCUMENT_POSITION_PRECEDING","insertAdjacentElement","sortableNode","reset","draggedElementClone","undefined","removeChild","draggedElement","draggedElementOrigin","classList","placeholderClass","dropzoneActiveClass","length","dze","dragRequestPending","createClone","clone","cloneNode","id","Array","from","children","nodeChild","clonedNodeChild","originalNodeChild","offsetWidth","offsetHeight","Object","assign","dragResize","add","draggedClass","appendChild","addListeners","el","events","fn","opts","split","e","removeEventListener","handleTrack","handleKeydown","passive","mutationObserver","disconnect","MutationObserver","currHandles","values","newHandles","find","includes","observe","subtree","childList","targetElement","foundHandle","get","activateSort","isActive","keyboardSortActive","toggle","handleDraggedClass","grabbedHelperText","document","droppedHelperText","key","preventDefault","nanoGrabbedEv","nanoGrabbed","emit","element","defaultPrevented","nanoDropped","moveKeys","orientation","dropzoneSelector","currIdx","curDzIdx","curDropzone","prevEle","nextEle","finishOrder","focus","requestAnimationFrame","setFocus","then","button","handleMove","cancelable","clearTimeout","mouseDownTimer","resetTrack","window","trackStart","drag","initialEvent","relative","onMove","trackMove","onStop","didStop","targetHandle","nextSibling","constructor","hostRef","Map","updated","originalIndex","targetIndex","querySelector","orderChangeEv","nanoOrderChange","reorderHelperText","activeDropzone","readTask","textContent","trim","itemDescriptor","elements","_number","_element","handleTpl","div","globalThis","createElement","innerHTML","duration","easing","bind","nanoDebounce","connectedCallback","insertAdjacentHTML","helperText","disconnectedCallback","render","Host","class","role","part","str"],"sources":["./src/components/sortable/sortable.scss?tag=nano-sortable&encapsulation=shadow","./src/components/sortable/sortable.tsx"],"sourcesContent":["@use '../../global/style/utilities/globals' as g;\n\n:host {\n  position: relative;\n  display: block;\n}\n\n.sortable__live-region {\n  @include g.visually-hide();\n}\n","import {\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Component,\n  ComponentInterface,\n  Watch,\n  Method,\n  State,\n  Host,\n  readTask,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { nanoDebounce } from '../..';\n\n// Orientation map to limit dragging to horizontal or vertical.\nconst orientationMap = {\n  horizontal: { x: 1, y: 0 },\n  vertical: { x: 0, y: 1 },\n};\n\nlet sortableIds = 0;\n\n/**\n * An accessible and flexible re-order / sort utility component.\n *\n *- Drag and drop via mouse, touch or keyboard\n *- Live announcements for screen readers\n *- Works with or without an explicit handle (although with is preferable)\n\n * @part announcements - the a11y, live region. Visually hidden by default\n *\n * @slot - The default slot containing any items you might want to sort\n */\n@Component({\n  tag: 'nano-sortable',\n  shadow: true,\n  styleUrl: 'sortable.scss',\n})\nexport class Sortable implements ComponentInterface {\n  /// Public API & surface ///\n\n  /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */\n  @Prop() itemSelector = 'li';\n  @Watch('itemSelector')\n  handleItemSelectorChange() {\n    this.refreshKeyboardHandles();\n  }\n\n  /** A css query selector which matches an element *within* the `itemSelector` element\n   * which will act like a drag handle. **Note** For keyboard a11y it's recommended\n   * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */\n  @Prop() handleSelector?: string;\n  @Watch('handleSelector')\n  handleHandleSelectorChange() {\n    this.refreshKeyboardHandles();\n    this.attachMutationObserver();\n  }\n\n  /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\n   * At that point, you will not be able to drag items back to the original group.\n   * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.\n   */\n  @Prop() dropzoneSelector?: string;\n\n  /** Accessibility helper text applied to handle controls */\n  @Prop() helperText =\n    'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n    'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.';\n\n  /**\n   * As a sortable element is interacted with, announcements are made to screen readers\n   * - informing the user what is changing.\n   * By default, the text from the element is extracted to describe the interacted with element.\n   * Use this function to provide a more meaningful, concise item descriptor\n   * @param el the element being interacted with\n   * @returns a string, describing the element being interacted with\n   */\n  @Prop() itemDescriptor = (el: Element) => `\"${el?.textContent.trim()}\"`;\n\n  /**\n   * Used to generate a screen reader live update, informing the user of the current element being grabbed.\n   * @param el the element that has been grabbed by the user\n   * @returns a string, describing the element being grabbed\n   */\n  @Prop() grabbedHelperText = (el: Element) =>\n    `${this.itemDescriptor(el)} grabbed`;\n\n  /**\n   * Used to generate a screen reader live update, informing the user of the current element being dropped.\n   * @param el the element that has been dropped by the user\n   * @returns a string, describing the element that has been dropped\n   */\n  @Prop() droppedHelperText = (el: Element) =>\n    `${this.itemDescriptor(el)} dropped`;\n\n  /**\n   *  Used to generate a screen reader live update, informing the user when items have been reordered.\n   * @param el the element that has been reordered by the user\n   * @param elements the elements in the sortable list\n   * @param position the new position of the dropped element\n   * @returns a string, describing the element being dropped\n   */\n  @Prop() reorderHelperText = (\n    el: Element,\n    elements: Element[],\n    position: number\n  ) =>\n    `The list has been reordered, ${this.itemDescriptor(\n      el\n    )} is now item ${position} of ${elements.length}`;\n\n  /**\n   * A function that should attach a keyboard accessible control.\n   * When a `handleSelector` is not used - to allow keyboard accessibility -\n   * `createKeyboardHandle` should render a focusable element.\n   *\n   * If your sortable item is itself focusable,\n   * you must use this function to render a control *outside* of the focusable element.\n   * @param _number\n   * @param _element\n   * @returns a function that attaches a keyboard accessible handle control element.\n   * The function itself *must* return the handle element.\n   */\n  @Prop() createKeyboardHandle = (_number: number, _element: Element) => {\n    const handleTpl = /* html */ `\n      <nano-icon-button\n        slot=\"end\"\n        icon-name=\"light/arrows\"\n        class=\"nano-sortable__keyboard-handle visually-hidden\"\n        label=\"Re-order this item\"\n      ></nano-icon-button>`;\n    const div = globalThis.document.createElement('div');\n    div.innerHTML = handleTpl;\n\n    const handle = div.children[0] as HTMLElement;\n    _element.append(handle);\n    return handle;\n  };\n  @Watch('createKeyboardHandle')\n  handleCreateKeyboardHandleChange() {\n    this.refreshKeyboardHandles();\n  }\n\n  /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\n   * Note that the `sortableHostElement` element css `position` will be set to `relative` */\n  @Prop() sortableHostElement?: HTMLElement;\n  @Watch('sortableHostElement')\n  handleSortableHostElement(_newVal?, oldVal?: HTMLElement) {\n    if (oldVal) this.removeEventHandlers(oldVal);\n\n    this.addEventHandlers();\n    this.refreshKeyboardHandles();\n    this.attachMutationObserver();\n\n    if (this.sortableHostElement) {\n      // sortable host must have position relative\n      this.sortableHostElement.style.position = 'relative';\n    }\n  }\n\n  /** Items being sorted will animate into place */\n  @Prop() animationEnabled = true;\n\n  /** Use this class to change how the element looks whilst being sorted */\n  @Prop() draggedClass = 'nano-sortable__dragged';\n\n  /** Use this class to change how the handle looks whilst being sorted */\n  @Prop() handleDraggedClass = 'nano-sortable__handle-dragged';\n\n  /** Use this class to change how the element looks when acting as a placeholder */\n  @Prop() placeholderClass = 'nano-sortable__placeholder';\n\n  /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */\n  @Prop() dropzoneActiveClass?: string = '';\n\n  /** The css animation timing applied when `animationEnabled` is `true` */\n  @Prop() animationTiming: any = { duration: 200, easing: 'ease-out' };\n\n  /** The axis to lock dragging elements to. `undefined` means any axis */\n  @Prop() orientation?: 'horizontal' | 'vertical';\n\n  /** Dragged items by default, will take whatever default css is applied in situ.\n   * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\n   * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.  */\n  @Prop() dragResize = false;\n\n  /** Fired when an the order changes. Use this to update any underlying data model.\n   * `event.preventDefault()` to prevent the element being moved; will revert to original position. */\n  @Event() nanoOrderChange: EventEmitter<{\n    element: HTMLElement;\n    originalIndex: number;\n    targetIndex: number;\n  }>;\n\n  /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n   * `event.preventDefault()` to prevent the element being picked-up. */\n  @Event() nanoGrabbed: EventEmitter<{ element: HTMLElement; index: number }>;\n\n  /** Fired when a sortable element is dropped after having been picked up. */\n  @Event() nanoDropped: EventEmitter<{ element: HTMLElement }>;\n\n  /** If sortable elements change dynamically, use this method to add handle controls to new elements */\n  @Method()\n  async refreshKeyboardHandles() {\n    if (this.handleSelector) {\n      if (this.keyboardHandleMap?.size) {\n        this.keyboardHandleMap.clear();\n      }\n\n      this.sortableHost\n        .querySelectorAll<HTMLElement>(this.handleSelector)\n        .forEach((handle) => {\n          if (!handle.getAttribute('aria-describedby'))\n            handle.setAttribute('aria-describedby', this.sortableId);\n          const sortEle = handle.closest<HTMLElement>(this.itemSelector);\n          if (sortEle) this.keyboardHandleMap.set(handle, sortEle);\n        });\n      return;\n    }\n\n    if (this.keyboardHandleMap?.size) {\n      this.keyboardHandleMap?.forEach((_ele, handle) => handle.remove());\n      this.keyboardHandleMap.clear();\n    }\n    this.sortableHost\n      .querySelectorAll<HTMLElement>(this.itemSelector)\n      .forEach((ele, i) => {\n        const handle = this.createKeyboardHandle(i, ele);\n        if (!handle) {\n          console.error(\n            '`createKeyboardHandle` *must* return the handle element it creates'\n          );\n          return;\n        }\n        this.keyboardHandleMap.set(handle, ele);\n        handle.setAttribute('aria-describedby', this.sortableId);\n      });\n  }\n\n  /// Private state & logic ///\n\n  @Element() host: HTMLNanoSortableElement;\n  private dragRequestPending = false;\n  private draggedElement?: HTMLElement;\n  private draggedElementClone?: HTMLElement;\n  private draggedElementOrigin?: HTMLElement;\n  private sortableNodes: HTMLElement[] = [];\n  private dropzoneNodes: HTMLElement[] = [];\n  private animatedElements: HTMLElement[] = [];\n  private animationPromise?: Promise<void>;\n  private keyboardHandleMap: Map<HTMLElement, HTMLElement> = new Map();\n  private sortableId = `nano-sortable-${sortableIds++}`;\n  private mouseDownTimer: number;\n  private mutationObserver: MutationObserver;\n\n  @State() keyboardSortActive = false;\n  @State() ariaTextList: string[] = [];\n\n  /**\n   * Get instance of sortable host.\n   * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`\n   */\n  get sortableHost() {\n    if (this.sortableHostElement) return this.sortableHostElement;\n    return this.host;\n  }\n\n  /**\n   * Queues aria messages which are then displayed in a 'live' region.\n   * Messages are cleared after 10s\n   * @param msg aria message to announce\n   */\n  private addAriaMsg(msg: string) {\n    this.ariaTextList = [...this.ariaTextList, msg];\n\n    setTimeout(() => {\n      const mIdx = this.ariaTextList.indexOf(msg);\n      this.ariaTextList.splice(mIdx, 1);\n      this.ariaTextList = [...this.ariaTextList];\n    }, 10000);\n  }\n\n  /**\n   * Try to stop text highlight whilst dragging\n   * @param userSelect\n   */\n  private updateUserSelectStyle(userSelect: '' | 'none') {\n    this.host.style.userSelect = userSelect;\n    // @ts-ignore\n    this.host.style.MozUserSelect = userSelect;\n    // @ts-ignore\n    this.host.style.msUserSelect = userSelect;\n    this.host.style.webkitUserSelect = userSelect;\n  }\n\n  /**\n   * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the\n   * given targets. Returns an array of matches.\n   * @param node\n   * @param targets\n   * @returns all the items that currently intersect with the target node\n   */\n  private hitTest(node: HTMLElement, targets: HTMLElement[]): HTMLElement[] {\n    const {\n      left: l,\n      top: t,\n      width: w,\n      height: h,\n    } = node.getBoundingClientRect();\n    const x = l + w / 2;\n    const y = t + h / 2;\n\n    return targets.filter((item) => {\n      const { left, right, top, bottom } = item.getBoundingClientRect();\n      return !(x < left || x > right || y < top || y > bottom);\n    });\n  }\n\n  /**\n   * Returns a boolean indicating whether the node is currently in an animation.\n   * @param node\n   * @returns whether a node is currently animating or not\n   */\n  private isAnimating(node: HTMLElement) {\n    return this.animatedElements.indexOf(node) !== -1;\n  }\n\n  /**\n   * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as\n   * if nodes animate from their old to their new position in the dom. */\n  private animateNode(node: HTMLElement, dx = 0, dy = 0) {\n    if (!node.animate) {\n      return;\n    }\n\n    // keep a stack of currently animating nodes to exclude as drag & drop targets.\n    this.animatedElements.push(node);\n\n    node.style.willChange = 'transform';\n\n    // animate from dx/dy (old node position) to none (new node position)\n    writeTask(() => {\n      this.animationPromise = new Promise((resolve) => {\n        node\n          .animate(\n            [\n              { transform: `translate3d(${dx}px, ${dy}px, 0)` },\n              { transform: 'none' },\n            ],\n            this.animationTiming\n          )\n          .addEventListener(\n            'finish',\n            () => {\n              const index = this.animatedElements.indexOf(node);\n              node.style.willChange = '';\n\n              if (index !== -1) {\n                // splice out when done to unlock as a valid target\n                this.animatedElements.splice(index, 1);\n              }\n\n              resolve();\n              delete this.animationPromise;\n            },\n            { once: true }\n          );\n      });\n    });\n  }\n\n  /**\n   * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;\n   * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very\n   * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because\n   * of this dom update */\n  private insertAtTarget(node: Element, target: HTMLElement) {\n    if (!node || !target) return;\n\n    let offsets: any[] = [];\n    if (this.animationEnabled) {\n      offsets = this.sortableNodes.map((item) => ({\n        x: item.offsetLeft,\n        y: item.offsetTop,\n      }));\n    }\n\n    if (!node.isConnected || !target.isConnected) return;\n\n    if (this.dropzoneNodes.indexOf(target) > -1) {\n      target.append(node);\n    } else {\n      const nodeComparison = node.compareDocumentPosition(target);\n      let position;\n\n      if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {\n        position =\n          target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';\n      }\n      if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {\n        position =\n          target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';\n      }\n      if (position) target.insertAdjacentElement(position, node);\n    }\n\n    if (this.animationEnabled) {\n      this.sortableNodes.forEach((sortableNode, i) => {\n        const { x, y } = offsets[i];\n        const dx = x - sortableNode.offsetLeft;\n        const dy = y - sortableNode.offsetTop;\n        if (dx !== 0 || dy !== 0) {\n          this.animateNode(sortableNode, dx, dy);\n        }\n      });\n    }\n  }\n\n  private reset() {\n    if (\n      this.draggedElementClone !== undefined &&\n      this.draggedElementClone.parentNode !== null\n    ) {\n      this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);\n    }\n\n    if (\n      this.draggedElement &&\n      this.draggedElement.parentNode &&\n      this.draggedElementOrigin\n    ) {\n      this.draggedElement.classList.remove(this.placeholderClass);\n    }\n\n    if (this.dropzoneActiveClass && this.dropzoneNodes.length) {\n      this.dropzoneNodes.forEach((dze) =>\n        dze.classList.remove(this.dropzoneActiveClass)\n      );\n    }\n\n    delete this.draggedElementClone;\n    delete this.draggedElement;\n\n    this.dropzoneNodes = [];\n    this.sortableNodes = [];\n    this.animatedElements = [];\n    this.dragRequestPending = false;\n    this.updateUserSelectStyle('');\n  }\n\n  /**\n   * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.\n   * Clone styles are added onto the style object directly, since the ::slotted()\n   * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep\n   * @param node html node to clone\n   * @returns the cloned html node\n   */\n  private createClone(node: HTMLElement): HTMLElement {\n    const clone = node.cloneNode(true) as HTMLElement;\n    if (node.id) clone.id = 'clone__' + clone.id;\n\n    /**\n     * Bugfix for table row sorting.\n     * During dragging table rows shrink, so we manually set them width of original node.\n     */\n    Array.from(clone.children).forEach((nodeChild: HTMLElement, index) => {\n      const clonedNodeChild = nodeChild;\n      const originalNodeChild = node.children.item(index) as HTMLElement;\n\n      if (originalNodeChild) {\n        clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;\n      }\n    });\n    const {\n      offsetLeft: x,\n      offsetTop: y,\n      offsetWidth: w,\n      offsetHeight: h,\n    } = node;\n\n    Object.assign(clone.style, {\n      position: 'absolute',\n      left: `calc(${x}px - var(--grab-offset-x, 0px))`,\n      top: `calc(${y}px - var(--grab-offset-y, 0px))`,\n      height: this.dragResize ? `${h}px` : undefined,\n      width: this.dragResize ? `${w}px` : undefined,\n      willChange: 'transform,opacity',\n    });\n\n    clone.classList.add(this.draggedClass);\n\n    return node.parentNode!.appendChild(clone);\n  }\n\n  /// Event handlers ///\n\n  private addListeners(\n    el: Element | Document,\n    events: string,\n    fn: (e: Event) => void,\n    opts?: AddEventListenerOptions\n  ) {\n    events\n      .split(' ')\n      .forEach((e) =>\n        el.addEventListener(e as keyof HTMLElementEventMap, fn, opts)\n      );\n  }\n\n  private removeEventHandlers(ele?: HTMLElement) {\n    ele = ele || this.sortableHost;\n    ele.removeEventListener('mousedown', this.handleTrack);\n    ele.removeEventListener('touchstart', this.handleTrack);\n    ele.removeEventListener('keydown', this.handleKeydown);\n  }\n\n  private addEventHandlers(ele?: HTMLElement) {\n    ele = ele || this.sortableHost;\n    this.addListeners(ele, 'mousedown touchstart', this.handleTrack, {\n      passive: true,\n    });\n    ele.addEventListener('keydown', this.handleKeydown);\n  }\n\n  /**\n   * Watch for any changes in grab-able handle elements.\n   */\n  private attachMutationObserver() {\n    if (!Build.isBrowser) return;\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = undefined;\n    }\n\n    this.mutationObserver = new MutationObserver(() => {\n      const currHandles = Array.from(this.keyboardHandleMap.values());\n      const newHandles = Array.from(\n        this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n      );\n\n      // simple test for equality\n      if (\n        currHandles.length !== newHandles.length ||\n        !!newHandles.find((h) => !currHandles.includes(h))\n      ) {\n        this.refreshKeyboardHandles();\n      }\n    });\n    this.mutationObserver.observe(this.sortableHost, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const targetElement = e.target as HTMLElement;\n    let foundHandle: HTMLElement;\n    let sortEle: HTMLElement;\n\n    if (this.handleSelector) {\n      foundHandle = targetElement.closest(this.handleSelector);\n      sortEle = targetElement.closest(this.itemSelector);\n    } else {\n      sortEle = this.keyboardHandleMap.get(targetElement);\n      foundHandle = targetElement;\n    }\n\n    // have we found a handle and matching sort element from the keydown element\n    if (!foundHandle || !sortEle) return;\n\n    const activateSort = (isActive: boolean) => {\n      this.keyboardSortActive = isActive;\n      this.draggedElement = isActive ? sortEle : undefined;\n      sortEle.classList.toggle(this.draggedClass, isActive);\n      foundHandle.classList.toggle(this.handleDraggedClass, isActive);\n\n      if (isActive) {\n        this.addAriaMsg(this.grabbedHelperText(sortEle));\n        document.addEventListener('mousedown', () => activateSort(false), {\n          once: true,\n        });\n      } else {\n        this.addAriaMsg(this.droppedHelperText(sortEle));\n      }\n    };\n\n    // start editing this element's order?\n    if ([' ', 'Space', 'Enter'].includes(e.key)) {\n      e.preventDefault();\n\n      if (!this.keyboardSortActive) {\n        // grabbed the element\n        activateSort(true);\n\n        this.sortableNodes =\n          Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||\n          [];\n        const nanoGrabbedEv = this.nanoGrabbed.emit({\n          element: sortEle,\n          index: this.sortableNodes.indexOf(sortEle),\n        });\n\n        if (nanoGrabbedEv.defaultPrevented) {\n          activateSort(false);\n          return;\n        }\n      } else {\n        // dropped the element\n        activateSort(false);\n        this.nanoDropped.emit({ element: sortEle });\n      }\n      return;\n    }\n    if (!this.keyboardSortActive) return;\n\n    // Tabbing away from this handle - deactivate\n    if (['Escape', 'Tab'].includes(e.key)) activateSort(false);\n\n    let moveKeys = ['Home', 'End'];\n    if (!this.orientation || this.orientation === 'horizontal')\n      moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];\n    if (!this.orientation || this.orientation === 'vertical')\n      moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];\n\n    if (!moveKeys.includes(e.key)) return;\n\n    // move the element with the keyboard\n    e.preventDefault();\n\n    /** Collect all elements that have drag positions.\n     * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */\n\n    this.sortableNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n    this.dropzoneNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n      [];\n    const currIdx = this.sortableNodes.indexOf(this.draggedElement);\n    let curDzIdx: number = -1;\n\n    if (this.dropzoneNodes.length) {\n      const curDropzone = this.draggedElement.closest<HTMLElement>(\n        this.dropzoneSelector\n      );\n      curDzIdx = this.dropzoneNodes.indexOf(curDropzone);\n      curDzIdx = curDzIdx > -1 ? curDzIdx : -1;\n    }\n\n    /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */\n    const prevEle =\n      currIdx - 1 < 0 && curDzIdx > -1\n        ? this.dropzoneNodes[curDzIdx - 1]\n        : this.sortableNodes[currIdx - 1];\n    const nextEle =\n      currIdx + 1 === this.sortableNodes.length && curDzIdx > -1\n        ? this.dropzoneNodes[curDzIdx + 1]\n        : this.sortableNodes[currIdx + 1];\n\n    if (e.key === 'Home') {\n      this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);\n    }\n    if (e.key === 'End') {\n      this.insertAtTarget(\n        this.draggedElement,\n        this.sortableNodes[this.sortableNodes.length - 1]\n      );\n    }\n    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {\n      this.insertAtTarget(this.draggedElement, nextEle);\n    }\n    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {\n      this.insertAtTarget(this.draggedElement, prevEle);\n    }\n\n    this.finishOrder();\n    this.draggedElement = sortEle;\n\n    const focus = () => {\n      requestAnimationFrame(() => {\n        typeof foundHandle['setFocus'] === 'function'\n          ? (foundHandle as HTMLNanoIconButtonElement).setFocus()\n          : foundHandle.focus();\n      });\n    };\n\n    // replace focus to handle so we don't 'drop' the element\n    if (this.animationPromise) this.animationPromise.then(() => focus());\n    else focus();\n  }\n\n  /** Tracks a pointer from touchstart/mousedown to touchend/mouseup. */\n  private handleTrack(e: PointerEvent) {\n    // ignore if we've started dragging or right click\n    if (this.dragRequestPending || (e.button && e.button !== 1)) return;\n\n    // ignore touchmove events (namespace it so we can remove it)\n    const handleMove = (e: Event) => {\n      if (e.cancelable) e.preventDefault();\n      clearTimeout(this.mouseDownTimer);\n    };\n\n    // remove temporary events and reset timer\n    const resetTrack = () => {\n      clearTimeout(this.mouseDownTimer);\n      document.removeEventListener('touchmove', handleMove);\n      document.removeEventListener('contextmenu', this.finishOrder);\n    };\n    resetTrack();\n\n    // start a timer - only start dragging if pressed for 150ms\n    this.mouseDownTimer = window?.setTimeout(() => {\n      // ignore if this is not a valid drag target\n      if (!this.trackStart(e)) return;\n\n      // ignore touchmove events (they scroll the screen)\n      document.addEventListener('touchmove', handleMove, {\n        passive: false,\n      });\n      // cancel if user presses and holds (without move) for context menu\n      document.addEventListener('contextmenu', this.finishOrder);\n\n      this.addAriaMsg(this.grabbedHelperText(this.draggedElement));\n\n      drag(this.sortableHost, {\n        initialEvent: e,\n        relative: true,\n        onMove: (x, y) => {\n          this.trackMove(x, y);\n        },\n        onStop: () => {\n          this.nanoDropped.emit({ element: this.draggedElement });\n          resetTrack();\n\n          const didStop = () => {\n            this.addAriaMsg(this.droppedHelperText(this.draggedElement));\n            requestAnimationFrame(() => this.finishOrder());\n          };\n          if (this.animationPromise) {\n            this.animationPromise.then(() => didStop());\n          } else didStop();\n        },\n      });\n    }, 150);\n\n    // reset track timer & cancel DnD on mouseup / touchend / touchmove\n    this.addListeners(\n      document,\n      'mouseup touchend touchmove',\n      () => clearTimeout(this.mouseDownTimer),\n      { once: true }\n    );\n  }\n\n  /**\n   * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.\n   * OR If a handleSelector is defined, a node matching this selector must be clicked instead\n   * @returns boolean - whether tracking for this event should continue or not\n   */\n  private trackStart(e: Event) {\n    const targetElement = e.target as HTMLElement;\n    let targetHandle: HTMLElement;\n\n    // If we have a handle set, return now if not being pressed\n    if (this.handleSelector) {\n      targetHandle = targetElement.closest(this.handleSelector);\n\n      if (!targetHandle) return;\n      targetHandle.classList.add(this.handleDraggedClass);\n    }\n\n    // Check that we've found the target element via itemSelector\n    const node = targetElement.closest<HTMLElement>(this.itemSelector);\n    if (!node) return false;\n\n    this.sortableNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n    const nanoGrabbedEv = this.nanoGrabbed.emit({\n      element: node,\n      index: this.sortableNodes.indexOf(node),\n    });\n    if (nanoGrabbedEv.defaultPrevented) return false;\n\n    // Element found... start everything\n    e.preventDefault();\n    this.updateUserSelectStyle('none');\n    this.dragRequestPending = true;\n    this.draggedElement = node;\n    this.dropzoneNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n      [];\n    this.draggedElementClone = this.createClone(node);\n    this.draggedElementOrigin = node.nextSibling as HTMLElement;\n    this.animatedElements = [];\n    this.draggedElement!.classList.add(this.placeholderClass);\n    return true;\n  }\n\n  /** Ends re-ordering */\n  private finishOrder = () => {\n    if (!this.draggedElement) return;\n\n    const updated = Array.from(\n      this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n    ).filter((ele) => ele !== this.draggedElementClone);\n    const originalIndex = this.sortableNodes.indexOf(this.draggedElement);\n    const targetIndex = updated.indexOf(this.draggedElement);\n\n    if (this.handleSelector) {\n      const targetHandle = this.draggedElement.querySelector(\n        this.handleSelector\n      );\n      targetHandle.classList.remove(this.handleDraggedClass);\n    }\n\n    if (originalIndex !== targetIndex) {\n      const orderChangeEv = this.nanoOrderChange.emit({\n        element: this.draggedElement,\n        originalIndex,\n        targetIndex,\n      });\n\n      if (orderChangeEv.defaultPrevented) {\n        /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */\n        this.animationPromise = new Promise((resolve) => {\n          setTimeout(() => {\n            this.insertAtTarget(this.draggedElement, updated[originalIndex]);\n            this.reset();\n            this.dragRequestPending = false;\n            resolve();\n          }, 200);\n        });\n        return;\n      }\n      this.addAriaMsg(\n        this.reorderHelperText(this.draggedElement, updated, targetIndex + 1)\n      );\n    }\n\n    this.reset();\n    this.dragRequestPending = false;\n  };\n\n  /**\n   * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is\n   * the insert point for updated sorting */\n  private trackMove = (x: number, y: number) => {\n    if (!this.draggedElementClone) {\n      return;\n    }\n\n    if (this.orientation) {\n      x = x * orientationMap[this.orientation].x;\n      y = y * orientationMap[this.orientation].y;\n    }\n\n    writeTask(() => {\n      Object.assign(this.draggedElementClone!.style, {\n        transform: `translate3d(${x}px, ${y}px, 0)`,\n      });\n    });\n\n    let target = this.hitTest(this.draggedElementClone!, this.sortableNodes)[0];\n    let activeDropzone: HTMLElement;\n\n    if (this.dropzoneSelector && this.dropzoneActiveClass) {\n      readTask(() => {\n        activeDropzone = this.draggedElement.closest(this.dropzoneSelector);\n\n        writeTask(() => {\n          this.dropzoneNodes\n            .filter((dze) => dze !== activeDropzone)\n            .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));\n          activeDropzone.classList.add(this.dropzoneActiveClass);\n        });\n      });\n    }\n\n    // didn't find a target - let's test to see if we can use a drop-zone instead\n    if (!target && this.dropzoneNodes.length) {\n      target = this.hitTest(this.draggedElementClone!, this.dropzoneNodes)[0];\n      if (this.draggedElement.closest(this.dropzoneSelector) === target) return;\n    }\n\n    if (\n      // if clone intersects with a valid target,\n      target &&\n      // other than its own origin,\n      target !== this.draggedElement &&\n      // and the target isn't currently animating, which causes false hit tests,\n      !this.isAnimating(target)\n    ) {\n      this.insertAtTarget(this.draggedElement!, target);\n    }\n  };\n\n  /// Component lifecycle ///\n\n  constructor() {\n    this.handleTrack = this.handleTrack.bind(this);\n    this.handleKeydown = this.handleKeydown.bind(this);\n    this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);\n    this.refreshKeyboardHandles = nanoDebounce(\n      this.refreshKeyboardHandles,\n      500\n    );\n  }\n\n  connectedCallback() {\n    this.addEventHandlers();\n    this.refreshKeyboardHandles();\n    this.attachMutationObserver();\n\n    if (Build.isBrowser && !this.host.querySelector(`#${this.sortableId}`)) {\n      // inject a light-dom / a11y description that we can connect sortable items to\n      this.host.insertAdjacentHTML(\n        'beforeend',\n        `<div class=\"visually-hidden\" id=\"${this.sortableId}\">${this.helperText}</div>`\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventHandlers();\n    this.host.querySelector(`#${this.sortableId}`)?.remove();\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"sortable__live-region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions\"\n          aria-atomic=\"true\"\n          role=\"log\"\n          part=\"announcements\"\n        >\n          {this.ariaTextList.map((str) => (\n            <div>{str}</div>\n          ))}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-9c4efe14.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,h as t,i as e,c as i,a as s,g as a}from"./p-f6a8467a.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-f6de2d5d.js";import{g as h}from"./p-f88fa15c.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-9746b0a5.js";import{F as f,a as v}from"./p-71057181.js";const m=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var n;return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:(n=this.myAccountUser)===null||n===void 0?void 0:n.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,"open",false);this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,"open",true);this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(o(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=r(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(s,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  -webkit-padding-end: 0;\n          padding-inline-end: 0;\n  -webkit-padding-start: var(--padding-start);\n          padding-inline-start: var(--padding-start);\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  -webkit-padding-after: var(--padding-bottom);\n          padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  -webkit-margin-end: 5px;\n          margin-inline-end: 5px;\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  -webkit-margin-end: 0;\n          margin-inline-end: 0;\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  -webkit-padding-start: 0 !important;\n          padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  -webkit-padding-start: 0 !important;\n          padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  -webkit-padding-start: var(--padding-start);\n          padding-inline-start: var(--padding-start);\n  -webkit-padding-end: var(--padding-end);\n          padding-inline-end: var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-height: 2.1em;\n  -webkit-padding-before: 1.4em;\n          padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  -webkit-padding-before: 1.8em;\n          padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  -webkit-padding-before: 1em;\n          padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-width: 50px;\n  width: 100%;\n  max-height: 100%;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow: hidden;\n  line-height: 1;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  -webkit-padding-start: 0.5em;\n          padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  -webkit-appearance: none;\n          appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=n=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const i=this.value.indexOf(e);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(n){if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},n),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(n){const t=this.options.find((t=>{var e;return!t.disabled&&((e=t.value)===null||e===void 0?void 0:e.length)&&t.value===n}));return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(l(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:n,moreId:e,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask})},t(f,Object.assign({},o),t(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,i)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,i){const s=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+i});if(!this.value.length)return s;return this.value.map(((n,e)=>{let i=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value"},t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})));if(e===0&&this.currInsertIndex<0)i=[s,i];else if(e===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
+//# sourceMappingURL=p-9c4efe14.entry.js.map

package/dist/nano-components/p-9c4efe14.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GlobalNavUserProfile","render","this","myAccountUser","h","href","userProfileUrl","class","src","_a","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","navItemCss","NavItem","hasSecondarySlot","animating","closeSecondary","async","didOpen","open","displayTransition","secondaryDiv","nanoClosing","emit","secondaryMenu","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","hasAnchorEle","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","focus","openChange","didOpenChange","document","activeElement","body","preventScroll","tabIndex","nanoClose","panelIO","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","nanoOpen","handleClose","e","composedPath","some","connectedCallback","secondaryEle","querySelector","link","getDirectChildren","addEventListener","isInGlobalNav","isInMenuDrawer","isInMenu","parentElement","disconnectedCallback","removeEventListener","Host","selected","disabled","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","part","ref","a","onFocus","notification","div","selectCss","selectIds","Select","inputCtrl","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","ele","datalist","_datalist","constructor","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","validityMessage","split","Array","isArray","options","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","currDWConfig","dropDownConfig","Object","assign","tetherTo","validateFirst","Promise","resolve","getSelectElement","message","find","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","getLabel","onReset","form","handleBlur","kev","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","componentDidLoad","componentWillLoad","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","createColorClasses","color","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","id","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","span","push","tabindex","onTouchEnd","onMouseUp"],"sources":["./src/components/global-nav/global-nav-user-profile.tsx","./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"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string;\n\n  // Render output\n\n  render() {\n    return (\n      !!this.myAccountUser && (\n        <a href={this.userProfileUrl} class=\"user-profile\">\n          <div class=\"left\">\n            <div class=\"avatar-container\">\n              <img\n                class=\"avatar\"\n                src={this.myAccountUser?.small_avatar_url}\n                alt=\"User Avatar\"\n                height={75}\n                width={75}\n              />\n              {this.myAccountUser.is_nanopore_user && (\n                <img\n                  class=\"logo-small\"\n                  src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n                  alt=\"Nanopore Logo\"\n                />\n              )}\n            </div>\n\n            <div class=\"user-details\">\n              <span class=\"name\">{this.myAccountUser.name}</span>\n\n              <span class=\"bio\">\n                {this.myAccountUser.job_title} at {this.myAccountUser.company}\n              </span>\n            </div>\n          </div>\n\n          <div class=\"right\">\n            <div class=\"chevron-right\">\n              <nano-icon\n                slot=\"icon-end\"\n                name=\"light/chevron-right\"\n                aria-label=\"navigate to ...\"\n              ></nano-icon>\n            </div>\n          </div>\n        </a>\n      )\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n    border-radius: inherit;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline-start: var(--padding-start);\n      padding-inline-end: 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline-end: var(--padding-end);\n      padding-inline-start: 0;\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\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-visible,\n  a:focus-visible {\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    box-shadow: #{$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\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    box-shadow: #{$control-focus-style};\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    padding-inline-start: 0;\n    padding-inline-end: var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, currentcolor);\n    min-height: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 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    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\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    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\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    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12 90 113);\n      height: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\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\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a) {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\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 rgb(0 0 0 / 15%);\n    inset-inline: 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    padding-block-start: calc(var(--padding-top) / 2);\n    padding-inline-end: 0;\n    padding-block-end: calc(var(--padding-bottom) / 2);\n    padding-inline-start: var(--padding-start);\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentcolor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-end: var(--padding-end);\n    padding-inline-start: 0;\n    text-align: start;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    inset-inline: auto 0;\n    inset-block: 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    padding-inline:\n      var(--secondary-padding-start, var(--padding-start))\n      var(--secondary-padding-end, var(--padding-end));\n    padding-block:\n      var(--secondary-padding-top, var(--padding-top))\n      var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\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  Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { 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 * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\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 secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() hasAnchorEle: boolean = false;\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\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   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\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      setTimeout(() => {\n        if (\n          !this.fromHover &&\n          (!document.activeElement || document.activeElement === document.body)\n        )\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      /* the secondary 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        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  @Listen('click', { target: 'body' })\n  @Listen('keyup', { target: 'body' })\n  handleClose(e: MouseEvent | KeyboardEvent) {\n    if (!this.didOpen || !this.hasSecondarySlot) return;\n    if (!e.composedPath().some((el) => el === this.secondaryDiv))\n      this.toggleSecondary();\n  }\n\n  private closeSecondary = async () => {\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n    this.open = false;\n    await displayTransition(this.secondaryDiv, 'open', false);\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = false;\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n\n    if (!this.hasSecondarySlot || this.didOpen) return;\n    this.open = true;\n    await displayTransition(this.secondaryDiv, 'open', true);\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    this.didOpen = true;\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    const 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  };\n\n  connectedCallback() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren<HTMLAnchorElement | HTMLButtonElement>(\n      this.el,\n      'a, button'\n    )[0];\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    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  disconnectedCallback(): void {\n    this.btn.removeEventListener('click', this.toggleSecondary);\n    this.btn.removeEventListener('focus', this.handleFocus);\n    this.btn.removeEventListener('blur', this.handleHostBlur);\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        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\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              part=\"ctrl ctrl--button\"\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\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\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  /**\n   * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.\n   */\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus:\n    #{$input-border-style} var(\n      --nano-color-tint,\n      #{nano-color(\n        primary,\n        tint\n      )}\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\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  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-width: 50px;\n    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    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    height: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgb(var(--multi-input-value-bg) / 80%);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-height: calc(2.5em - 8px);\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1;\n    }\n  }\n\n  &-value-remove {\n    @include background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    inset-block-start: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\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    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeSelect.validationMessage,\n        });\n      }, 50);\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.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (\n      !this.nativeSelect ||\n      !!this.customError ||\n      !this.nativeSelect['setCustomValidity']\n    )\n      return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    if (!window['MutationObserver']) return;\n\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getLabel(toFind: string) {\n    const label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const 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    const ele = ev.target as HTMLSpanElement;\n    const 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    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues &&\n              this.multiple &&\n              !!this.inputSearchVal && (\n                <nano-option\n                  slot=\"list-top\"\n                  value={this.inputSearchVal}\n                  selected={false}\n                  label={this.inputSearchVal}\n                  onNanoSelect={() => this.inputCtrl.focus()}\n                >\n                  <span slot=\"check-icon\"></span>\n                  Add '{this.inputSearchVal}'\n                </nano-option>\n              )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/datalist/datalist.d.ts

@@ -85,6 +85,7 @@ export declare class DataList implements ComponentInterface {
   private changeInputValue;
   private optSelected;
   private setOptStartsWith;
+  private removeEventListeners;
   private processSlottedContent;
   private handleShow;
   private handleHide;

package/dist/types/components/nav-item/nav-item.d.ts

@@ -116,7 +116,7 @@ export declare class NavItem implements ComponentInterface {
   private handleMouseEnter;
   private handleMouseLeave;
   private handleClick;
-  componentWillLoad(): void;
   connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): any;
 }

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-13T01:03:55",
+  "timestamp": "2023-07-13T16:29:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",