@nanoporetech-digital/components 2.14.0 → 2.14.2

package/dist/nano-components/p-0a1d463e.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{k as t,j as i,r as s,c as e,h,e as n,g as r}from"./p-b5c33aff.js";const a=(t,i,s)=>{const e=t.get(i);if(!e){t.set(i,[s])}else if(!e.includes(s)){e.push(s)}};const o=(t,i)=>{let s;return(...e)=>{if(s){clearTimeout(s)}s=setTimeout((()=>{s=0;t(...e)}),i)}};const l=t=>!("isConnected"in t)||t.isConnected;const u=o((t=>{for(let i of t.keys()){t.set(i,t.get(i).filter(l))}}),2e3);const c=()=>{if(typeof t!=="function"){return{}}const s=new Map;return{dispose:()=>s.clear(),get:i=>{const e=t();if(e){a(s,i,e)}},set:t=>{const e=s.get(t);if(e){s.set(t,e.filter(i))}u(s)},reset:()=>{s.forEach((t=>t.forEach(i)));u(s)}}};const f=(t,i=((t,i)=>t!==i))=>{let s=new Map(Object.entries(t!==null&&t!==void 0?t:{}));const e={dispose:[],get:[],set:[],reset:[]};const h=()=>{s=new Map(Object.entries(t!==null&&t!==void 0?t:{}));e.reset.forEach((t=>t()))};const n=()=>{e.dispose.forEach((t=>t()));h()};const r=t=>{e.get.forEach((i=>i(t)));return s.get(t)};const a=(t,h)=>{const n=s.get(t);if(i(h,n,t)){s.set(t,h);e.set.forEach((i=>i(t,h,n)))}};const o=typeof Proxy==="undefined"?{}:new Proxy(t,{get(t,i){return r(i)},ownKeys(t){return Array.from(s.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,i){return s.has(i)},set(t,i,s){a(i,s);return true}});const l=(t,i)=>{e[t].push(i);return()=>{d(e[t],i)}};const u=(i,s)=>{const e=l("set",((t,e)=>{if(t===i){s(e)}}));const h=l("reset",(()=>s(t[i])));return()=>{e();h()}};const c=(...t)=>{const i=t.reduce(((t,i)=>{if(i.set){t.push(l("set",i.set))}if(i.get){t.push(l("get",i.get))}if(i.reset){t.push(l("reset",i.reset))}if(i.dispose){t.push(l("dispose",i.dispose))}return t}),[]);return()=>i.forEach((t=>t()))};const f=t=>{const i=s.get(t);e.set.forEach((s=>s(t,i,i)))};return{state:o,get:r,set:a,on:l,onChange:u,use:c,dispose:n,reset:h,forceUpdate:f}};const d=(t,i)=>{const s=t.indexOf(i);if(s>=0){t[s]=t[t.length-1];t.length--}};const y=(t,i)=>{const s=f(t,i);s.use(c());return s};let m=class{constructor(t){s(this,t);this.nanoPayloadChange=e(this,"nanoPayloadChange",7);this.nanoSubmit=e(this,"nanoSubmit",7);this.nanoInvalid=e(this,"nanoInvalid",7);this.submitted=false;this.allFields=[];this.nanoFieldSelector=`\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;this.internalValidate=false;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this.extraFieldSelector="input, select, textarea";this.handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s&&(s.tagName==="NANO-FILE-UPLOAD"&&!this.fileStateEqual(t,s)||s.tagName!=="NANO-FILE-UPLOAD"&&s.value!==i)){this.storeToFields([s])}if(this.validateOn==="dirty"&&this.dirty){this.internalValidate=true;await this.validateAllFields();this._valid=this.activeForm.checkValidity();this.internalValidate=false}this.nanoPayloadChange.emit(this._store.state)};this.handleFieldChange=t=>{if(!this.nanoFields.includes(t.target))return;this._dirty=true;this.fieldsToStore([t.target])};this.handlePlainFieldChange=t=>{if(!this.plainFields.includes(t.target))return;this.fieldsToStore([t.target])};this.handleFormInvalid=async t=>{if(!this.plainFields.includes(t.target)){t.preventDefault()}this._valid=false;if(this.internalValidate)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this.validateOn==="submit"){if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid();this.nanoInvalid.emit()};this.handleSubmit=async t=>{t.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return}this.submitForm()}}userFormChange(){if(!!this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(!t)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName==="NANO-CHECKBOX"){const i=t.closest("nano-checkbox-group");if(i)i.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}get dirty(){return this._dirty}get valid(){return this._valid}get store(){return this._store}get payload(){return this._store.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e;let h;if(s){if(i.validationMessage){e=i;s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage;this.internalValidate=true;if(s.valid&&!e.checkValidity())s.valid=false;this.internalValidate=false}else if(i.validityMessage){h=i;s.validityMessage=h.validityMessage.length?h.validityMessage:h.validityMessage;if(s.valid&&h.invalid)s.valid=false}if(!s.fields.find((t=>t===i)))s.fields.push(i)}let n;let r;if(i.checkValidity){e=i;this.internalValidate=true;n=e.checkValidity();this.internalValidate=false;r=e.validationMessage}else{h=i;n=!h.invalid;r=h.validityMessage}t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:false,valid:n,validityMessage:r})}));return t}async setStore(t){Object.entries(t).forEach((([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s)this.store.state[t]=i}))}async setCustomValidity(t){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(!!s)await this.setFieldError(s,i)})))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}attachSlotObserver(){if(!!this.mo)return;const t=this.mo=new MutationObserver((t=>{const i=this.host.querySelector("form");if(i&&i!==this.activeForm)this.activeForm=i;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));let i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length));i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length));if(![...t,...i].filter((t=>!this.allFields.includes(t))).length)return;this.nanoFields=t;this.plainFields=i;this.allFields=[...t,...i];this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields);this.nanoPayloadChange.emit(this._store.state)}storeToFields(t){t.forEach((t=>{var i;const s=this.getName(t);if(!s.length||typeof this._store.state[s]==="undefined")return;if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){let i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(this._store.state[s]===i.value)i.checked=true;else i.checked=false}else if(Array.isArray(this._store.state[s])){if(this._store.state[s].includes(i.value))i.checked=true;else i.checked=false}else{if(this._store.state[s]===i.value)i.checked=true;else i.checked=false}return}if(t.tagName==="NANO-FILE-UPLOAD"){const e=t;if(!((i=e.files)===null||i===void 0?void 0:i.length))e.files=this._store.state[s];return}t.value=this._store.state[s]}))}fieldsToStore(t){t.forEach((t=>{const i=this.getName(t);if(!i.length)return;if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){let s=t;if(s.type==="radio"||s.type==="segment"||s.type==="segment-pill"){if(s.checked)this._store.state[i]=s.value}else if(this.allFields.filter((t=>this.getName(t)===i&&(t.tagName==="NANO-CHECKBOX"||t.type==="checkbox"))).length>1){const t=Array.isArray(this._store.state[i])?this._store.state[i]:[];if(s.checked){if(!this._store.state[i].includes(s.value)){this._store.state[i]=[...t,s.value]}}else{this._store.state[i]=t.filter((t=>t!==s.value))}}else{if(s.checked)this._store.state[i]=s.value;else this._store.state[i]=""}return}if(t.tagName==="NANO-FILE-UPLOAD"){const s=t;if(!this.fileStateEqual(i,s))this._store.state[i]=s.files;return}this._store.state[i]=t.value}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);if(!s)return;await Promise.all(Object.entries(s).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));let e=s;if(s.tagName==="NANO-CHECKBOX"){const t=s.closest("nano-checkbox-group");e=t||s}if((e.validityMessage||e.validationMessage)===i.msg&&i.valid){await this.setFieldError(e,"")}else if(!i.valid){await this.setFieldError(e,i.msg)}})))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t;await this.validate(i,s)}),undefined)}async setFieldError(t,i){if(t["showError"]){await t.showError(i)}else if(t["setError"])await t.setError(i);else t.setCustomValidity(i)}scrollToFirstInvalid(){if(!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}connectedCallback(){this.userForm=this.host.querySelector("form");this._store=y({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields();this.attachSlotObserver();this.host.addEventListener("nanoChange",this.handleFieldChange);this.host.addEventListener("input",this.handlePlainFieldChange);this.host.addEventListener("change",this.handlePlainFieldChange);this.host.addEventListener("submit",this.handleSubmit);this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("input",this.handlePlainFieldChange);this.host.removeEventListener("change",this.handlePlainFieldChange);this.host.removeEventListener("submit",this.handleSubmit);this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return h(n,null,this.userForm&&h("slot",null),!this.userForm&&h("form",{ref:t=>this.activeForm=t},h("slot",null)))}get host(){return r(this)}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{m as nano_field_validator};
-//# sourceMappingURL=p-0a1d463e.entry.js.map

package/dist/nano-components/p-0a1d463e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/@stencil/store/dist/index.mjs","src/components/field-validator/field-validator.tsx"],"names":["appendToMap","map","propName","value","items","get","set","includes","push","debounce","fn","ms","timeoutId","args","clearTimeout","setTimeout","isConnected","maybeElement","cleanupElements","key","keys","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","forEach","elms","createObservableMap","defaultState","shouldUpdate","a","b","states","Object","entries","handlers","cb","oldValue","state","Proxy","[object Object]","_","Array","from","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","unSet","newValue","unReset","use","subscriptions","unsubs","reduce","subscription","unsub","array","item","index","indexOf","length","createStore","FieldValidator","hostRef","this","submitted","allFields","nanoFieldSelector","internalValidate","validateOn","scrollToInvalid","_dirty","extraFieldSelector","handleStoreChange","async","newVal","found","find","field","getName","tagName","fileStateEqual","storeToFields","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","handleFieldChange","ev","nanoFields","target","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","userForm","_activeForm","form","removeEventListener","addEventListener","cbg","closest","valid","store","payload","showValidation","validationState","v","name","pf","nf","validationMessage","validityMessage","invalid","fields","f","val","validity","Promise","all","err","setFieldError","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","querySelectorAll","validateOnChange","fieldName","type","checked","isArray","ff","_a","files","currentArr","JSON","stringify","validation","res","o","validityTarget","msg","memo","validate","undefined","showError","setError","setCustomValidity","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","requestAnimationFrame","attachSlotObserver","disconnect","h","Host","ref"],"mappings":"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","sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(defaultState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        const unReset = on('reset', () => cb(defaultState[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport {\n  NanoFormEles,\n  PlainFormEles,\n  NanoFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n  PlainFormEvent,\n} from '../../interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() submitted = false;\n  @State() userForm: HTMLFormElement;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n\n  // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.nanoFields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form state as a stencil store. */\n  @Prop() get store() {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user. @readonly */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === this.getName(field));\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: this.getName(field),\n        value: this._store.state[this.getName(field)],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    Object.entries(state).forEach(([key, val]) => {\n      const found = this.allFields.find((field) => this.getName(field) === key);\n      if (found) this.store.state[key] = val;\n    });\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n   */\n  @Method()\n  async setCustomValidity(validity: { [key: string]: string }) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        if (!!field) await this.setFieldError(field, err);\n      })\n    );\n  }\n\n  /**\n   * Clear all custom validation.\n   * @param validity\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\n    );\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  @Watch('extraFieldSelector')\n  attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form && form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /**\n   * During spec tests, mockelement props aren't set - only attributes.\n   * This irons out that kink\n   * @param field\n   * @returns\n   */\n  private getName(field: PlainFormEles | NanoFormEles) {\n    return field.name || field.getAttribute('name');\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n    plainFields = plainFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        let cb = field as HTMLNanoCheckboxElement;\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // single radio type control\n          if (this._store.state[fieldName] === cb.value) cb.checked = true;\n          else cb.checked = false;\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          if (this._store.state[fieldName].includes(cb.value))\n            cb.checked = true;\n          else cb.checked = false;\n        } else {\n          // single checkbox like control\n          if (this._store.state[fieldName] === cb.value) cb.checked = true;\n          else cb.checked = false;\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (!fieldName.length) return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        let cb = field as HTMLNanoCheckboxElement;\n\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // radio type control - only one can be checked\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n        } else if (\n          this.allFields.filter(\n            (f) =>\n              this.getName(f) === fieldName &&\n              (f.tagName === 'NANO-CHECKBOX' ||\n                (f as HTMLInputElement).type === 'checkbox')\n          ).length > 1\n        ) {\n          // multiple checkbox type control\n          const currentArr = Array.isArray(this._store.state[fieldName])\n            ? this._store.state[fieldName]\n            : [];\n          if (cb.checked) {\n            // checked\n            if (!this._store.state[fieldName].includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\n            this._store.state[fieldName] = currentArr.filter(\n              (v) => v !== cb.value\n            );\n          }\n        } else {\n          // single checkbox - on or off\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n          else this._store.state[fieldName] = '';\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this._store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([key, o]) => {\n        // switch on/off validation messages\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        let validityTarget:\n          | PlainFormEles\n          | NanoFormEles\n          | HTMLNanoCheckboxGroupElement = field;\n\n        if (field.tagName === 'NANO-CHECKBOX') {\n          // if we have a checkbox-group, set the validation message there\n          const cbg = field.closest('nano-checkbox-group');\n          validityTarget = cbg || field;\n        }\n\n        if (\n          ((validityTarget as NanoFormEles).validityMessage ||\n            (validityTarget as PlainFormEles).validationMessage) === o.msg &&\n          o.valid\n        ) {\n          // status is now valid - clear the error\n          await this.setFieldError(validityTarget, '');\n        } else if (!o.valid) {\n          // status is invalid. Set the error\n          await this.setFieldError(validityTarget, o.msg);\n        }\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this._store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n    msg: string\n  ) {\n    if (field['showError']) {\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    } else if (field['setError'])\n      await (field as HTMLNanoCheckboxElement).setError(msg);\n    else (field as PlainFormEles).setCustomValidity(msg);\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => this.getName(field) === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      found &&\n      ((found.tagName === 'NANO-FILE-UPLOAD' &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))\n    ) {\n      this.storeToFields([found]);\n    }\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handleFieldChange = (ev: NanoFormEvent) => {\n    if (!this.nanoFields.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handlePlainFieldChange = (ev: PlainFormEvent) => {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('input', this.handlePlainFieldChange);\n      this.host.addEventListener('change', this.handlePlainFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('input', this.handlePlainFieldChange);\n    this.host.removeEventListener('change', this.handlePlainFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    this._store.reset();\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-a1108493.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","notification","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","hasHelperEndSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","requestAnimationFrame","setValue","e","value","detail","includes","slice","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","inputCtrl","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","_datalist","validityMessage","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","Object","assign","tetherTo","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","form","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","helperEndId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","getLabel","id","aria-labelledby","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically 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\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    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-stretch: expanded;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n    font-stretch: expanded;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 0;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n\n  .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      top: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        top: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * 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      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              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              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\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\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: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  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  min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-top: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\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: inherit;\n  }\n\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-top: var(--padding-top);\n    padding-bottom: 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-top: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.select__mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    @include padding(\n      0,\n      0,\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    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    min-height: calc(2.5em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-top: 5px;\n    margin-inline-start: var(--padding-start);\n    margin-inline-end: -3px;\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.2em 0.5em;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.2;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.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(38%);\n    top: 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 {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  debounceEvent,\n  createColorClasses,\n  closestElement,\n  raf,\n  getActiveElement,\n  debounce,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-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\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/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.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    this.nativeSelect.setCustomValidity('');\n\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    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    // breaking change introduced in v2. Rm in v3\n    if (\n      !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n    ) {\n      console.warn(\n        'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  private getLabel(toFind: string) {\n    let 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    raf(() => {\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    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.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    raf(() => (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 && this.multiple && !!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    let 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"]}

package/dist/nano-components/p-e8c4ca40.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","exports","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","notification","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","class_2","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","hasHelperEndSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","requestAnimationFrame","setValue","e","value","detail","includes","__spreadArray","slice","removeValue","toFind","filter","val","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","inputCtrl","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","Object","defineProperty","_inputCtrl","input","setDataListOpts","_selectWrap","_datalist","split","Array","isArray","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","selectWrap","currDWConfig","assign","tetherTo","reportValidity","validateFirst","Promise","resolve","getSelectElement","showError","message","find","options","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","getLabel","onReset","form","handleBlur","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","helperEndId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","id","aria-labelledby","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically 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\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    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-stretch: expanded;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n    font-stretch: expanded;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 0;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n\n  .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      top: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        top: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * 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      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              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              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\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\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: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  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  min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-top: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\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: inherit;\n  }\n\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-top: var(--padding-top);\n    padding-bottom: 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-top: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.select__mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    @include padding(\n      0,\n      0,\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    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    min-height: calc(2.5em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-top: 5px;\n    margin-inline-start: var(--padding-start);\n    margin-inline-end: -3px;\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.2em 0.5em;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.2;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.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(38%);\n    top: 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 {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  debounceEvent,\n  createColorClasses,\n  closestElement,\n  raf,\n  getActiveElement,\n  debounce,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-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\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/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.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    this.nativeSelect.setCustomValidity('');\n\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    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    // breaking change introduced in v2. Rm in v3\n    if (\n      !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n    ) {\n      console.warn(\n        'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  private getLabel(toFind: string) {\n    let 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    raf(() => {\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    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.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    raf(() => (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 && this.multiple && !!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    let 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"]}