@nanoporetech-digital/components 2.8.0 → 2.9.0

package/dist/nano-components/p-39a5280e.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,s){function a(t){try{l(i.next(t))}catch(e){s(e)}}function r(t){try{l(i["throw"](t))}catch(e){s(e)}}function l(t){t.done?n(t.value):o(t.value).then(a,r)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return l([t,e])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,o&&(s=a[0]&2?o["return"]:a[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,a[1])).done)return s;if(o=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){n.label=a[1];break}if(a[0]===6&&n.label<s[1]){n.label=s[1];s=a;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(a);break}if(s[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(r){a=[6,r];o=0}finally{i=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,i=e.length,o=t.length;n<i;n++,o++)t[o]=e[n];return t};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-ef053a2f.system.js","./p-1d13dbdf.system.js","./p-1f2b5241.system.js","./p-09d2d944.system.js"],(function(t){"use strict";var e,n,i,o,s,a,r,l,u,c,p;return{setters:[function(t){e=t.r;n=t.c;i=t.f;o=t.h;s=t.e;a=t.g},function(t){r=t.r},function(t){l=t.d},function(t){u=t.g},function(t){c=t.g},function(t){p=t.g}],execute:function(){var d=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function h(t){var e;if(t.id){e=document.querySelector("label[for='"+t.id+"']")}if(!e){e=t.closest("label")}return e}var f=0;var b=t("nano_datalist",function(){function t(t){var i=this;e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.nanoDeselect=n(this,"nanoDeselect",7);this.nanoOptionsUpdated=n(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId="nano-datalist-"+f++;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this.actvOptEles=[];this.canOpen=true;this.optionIds=[];this.selected=[];this._dropDownConfig={skidding:-1};this.options=[];this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.optSelected=function(t){t.stopPropagation();i.changeInputValue(t.detail);r((function(){return i.inputChange()}));if(i.type==="select")i.shouldOpen=false};this.handleShow=function(){return __awaiter(i,void 0,void 0,(function(){return __generator(this,(function(t){if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement();return[2]}))}))};this.inputClick=function(){i.shouldOpen=true;i.manageDropdownDisplay()};this.inputKeydown=function(t){var e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")i.shouldOpen=false;return}if(i.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||i.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=window.setTimeout((function(){i.typeToSelect="";i.typeToSelectTimeout=0}),750);i.typeToSelect+=t.key;i.setOptStartsWith()}return}i.shouldOpen=true;i.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key))i.shouldFocus=true};this.optionKeyDown=function(t){var e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")i.connectedInput.focus();return}var n=["Delete","Backspace"];if(i.type!=="select"&&(!i.exactMatch||n.includes(t.key))){i.connectedInput.focus()}};this.inputChange=l(this.inputChange.bind(this),50)}Object.defineProperty(t.prototype,"allOptEles",{get:function(){return this._allOptEles},set:function(t){var e=this;var n;this._allOptEles=t;if((n=this.connectedInput)===null||n===void 0?void 0:n.value)return;t.forEach((function(t){if(t.selected&&!e.selected.includes(t.value)){e.changeInputValue(t)}}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"dropDownConfig",{get:function(){return this._dropDownConfig},set:function(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeOptions",{get:function(){return this.allOptEles},enumerable:false,configurable:true});t.prototype.openWatcher=function(){var t=this;i((function(){t.nanoDropdown.open=t.open;t.connectedInput.setAttribute("aria-expanded",t.open.toString())}))};t.prototype.watchInputChange=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;return __generator(this,(function(n){switch(n.label){case 0:if(!(t=this.host.closest("nano-input")))return[3,2];this.isNanoInput=true;e=this;return[4,t.getInputElement()];case 1:e.connectedInput=n.sent();return[3,3];case 2:if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(this.input instanceof HTMLElement){this.connectedInput=this.input}n.label=3;case 3:return[2]}}))}))};t.prototype.manageSlotChangeListener=function(){var t=this;var e;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((e=this.options)===null||e===void 0?void 0:e.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}i((function(){var e;t.allOptEles=t.options.flatMap((function(e,n){if(e.value||e.label){var i=Object.assign(document.createElement("nano-option"),{label:e.label,value:e.value,ariaPosinset:n,ariaSetsize:t.options.length,selected:e.selected,id:t.listId+"-option-"+n,textContent:e.label?e.label:e.value,slot:"internal-opts"});t.host.append(i);return i}}));if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=__spreadArray([],t.allOptEles)}))}};t.prototype.watchTypeChange=function(){if(!this.connectedInput)return;var t={closeOnSelect:false};var e="both";var n=false;switch(this.type){case"selctMulti":break;case"select":e="list";n=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=n};t.prototype.manageInputEvents=function(t,e){var n=this;var o;if(!!e){var s=e.closest("nano-input");if(s){s.removeEventListener("nanoChange",this.inputChange)}e.removeEventListener("change",this.inputChange);e.removeEventListener("click",this.inputClick);e.removeEventListener("keydown",this.inputKeydown);e.removeEventListener("input",this.inputChange);this.inputLabel=null;i((function(){e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(!!t){var s=t.closest("nano-input");if(s){s.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((o=t===null||t===void 0?void 0:t.labels)===null||o===void 0?void 0:o.item(0))||h(t);i((function(){n.host.id=n.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",n.listId);t.setAttribute("aria-owns",n.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}};t.prototype.watchActvOptChange=function(){var t=this;var e;var n=0;var o=((e=this.connectedInput)===null||e===void 0?void 0:e.value)||"";var s=[];i((function(){t.allOptEles.forEach((function(e,i){if(t.actvOptEles.includes(e)){n++;e.setAttribute("aria-posinset",n+"");e.setAttribute("aria-setsize",t.actvOptEles.length+"");e.hidden=false;t.isSelected(e,o)}else{e.removeAttribute("aria-posinset");e.removeAttribute("aria-setsize");e.hidden=true;e.selected=false}e.id=t.listId+"-option-"+i;s.push(e.id)}));t.optionIds=s}))};t.prototype.manageCanOpen=function(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false};t.prototype.manageDropdownDisplay=function(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false};t.prototype.fireActiveOptsEvent=function(){this.nanoOptionsUpdated.emit(this.actvOptEles)};t.prototype.isSelected=function(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false};Object.defineProperty(t.prototype,"dropwdownOpen",{get:function(){if(!this.nanoDropdown||!this.open)return false;return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"exactMatch",{get:function(){var t=this;return this.allOptEles.find((function(e){return t.connectedInput.value===e.value}))},enumerable:false,configurable:true});t.prototype.changeInputValue=function(t){var e;var n;if(this.selected.includes(t.value)){this.selected=this.selected.filter((function(e){return e!==t.value}));n=this.nanoDeselect.emit(t)}else{this.selected=__spreadArray([],this.selected);n=this.nanoSelect.emit(t)}if(!n.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;var i=new window.Event("change");(e=this.connectedInput)===null||e===void 0?void 0:e.dispatchEvent(i)}};t.prototype.setOptStartsWith=function(){var t=this;var e=function(e){return e.toLowerCase().substring(0,t.typeToSelect.length)===t.typeToSelect};var n=this.allOptEles.find((function(t){return t.value.trim().length>0&&!t.disabled&&(e(t.textContent)||e(t.value)||e(t.label)||e(t.filterMeta))}));if(n)this.changeInputValue(n)};t.prototype.processSlottedContent=function(){var t=this;r((function(){var e;t.allOptEles=Array.from(t.host.querySelectorAll("nano-option"));t.hasNoResult=!!t.host.querySelector('[slot="no-result"]');if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=t.allOptEles}))};t.prototype.inputChange=function(){var t=this;if(this.disableFilter){this.actvOptEles=this.allOptEles;return}var e=this.connectedInput.value;var n=e.trim().toLowerCase();var i=false;var o=[];var s=function(t){return t.toLowerCase().indexOf(n)>-1};this.allOptEles.forEach((function(n){if((e===n.value||e===n.label)&&t.type!=="selctMulti"){n.selected=true;i=true}else t.isSelected(n,e)}));this.allOptEles.forEach((function(t){if(!n.length||i){o.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(s(t.textContent)||s(t.value)||s(t.label)||s(t.filterMeta))){o.push(t)}}));this.isFiltered=n.length&&!i;this.actvOptEles=o};t.prototype.connectedCallback=function(){this.watchInputChange()};t.prototype.componentDidLoad=function(){this.manageSlotChangeListener();this.openWatcher()};t.prototype.componentDidRender=function(){var t=this;setTimeout((function(){if(!t.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",t.host)}),500)};t.prototype.render=function(){var t=this;return o(s,{role:"listbox","aria-owns":this.optionIds.join(" "),"aria-label":"Select options from the list below"},o("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:function(e){return t.nanoDropdown=e},dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:function(e){return t.open=false}}),o("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:function(e){return t.listBox=e}},o("slot",{name:"list-top"}),!this.options.length&&o("slot",null),!!this.options.length&&o("slot",{name:"internal-opts"}),o("slot",{name:"list-bottom"})),o("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},o("slot",{name:"no-result"})),!!this.actvOptEles&&o("div",{"aria-live":"polite",role:"status",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}},enumerable:false,configurable:true});return t}());b.style=d;var g=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}";var v=!!document.head.attachShadow;var m=t("nano_menu",function(){function t(t){var i=this;e(this,t);this.nanoFocus=n(this,"nanoFocus",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoSelect=n(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.type="menu";this.handleFocus=function(){i.setActiveFocusItem(i.selectedItem||i.getItems[0]);i._hasFocus=true;i.nanoFocus.emit()};this.handleClick=function(t){var e=t.target;var n=e.closest("nano-nav-item");if(n&&!n.disabled){i.nanoSelect.emit(n)}};this.handleKeyDown=function(t){clearTimeout(i.ignoreMouseTimeout);i.ignoreMouseTimeout=setTimeout((function(){return i.ignoreMouseEvents=false}),500);i.ignoreMouseEvents=true;switch(t.key){case" ":if(i.activeItem)i.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":var e=i.getItems;var n=i.activeItem;var o=e.indexOf(n);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){o++}else if(t.key==="ArrowUp"){o--}else if(t.key==="Home"||t.key==="PageUp"){o=0}else if(t.key==="End"||t.key==="PageDown"){o=e.length-1}if(o<0)o=e.length-1;if(o>e.length-1)o=0;i.setActiveFocusItem(e[o]);if(e[o])e[o].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=setTimeout((function(){return i.typeToSelect=""}),750);i.typeToSelect+=t.key;var e=i.getItems;for(var s=0,a=e;s<a.length;s++){var r=a[s];var l=r.shadowRoot.querySelector("slot:not([name])");var u=c(l).toLowerCase().trim();if(u.substring(0,i.typeToSelect.length)===i.typeToSelect){i.setActiveFocusItem(r);break}}}};this.handleMouseOver=function(t){var e=t.target;var n=e.closest("nano-nav-item")||e.closest("nano-option");if(n&&!i.ignoreMouseEvents){i.setActiveFocusItem(n)}}}Object.defineProperty(t.prototype,"hasFocus",{get:function(){return this._hasFocus},enumerable:false,configurable:true});t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true});return[2]}))}))};t.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur();return[2]}))}))};t.prototype.showActiveElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"});return[2]}))}))};t.prototype.resetActiveItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.getItems.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex","-1")}));return[2]}))}))};Object.defineProperty(t.prototype,"getItems",{get:function(){var t;var e=this.el.querySelectorAll("nano-nav-item.secondary-open");if(e.length){var n=e[e.length-1];t=Array.from(n.querySelectorAll("nano-nav-item, nano-option"))}else{t=u(this.el,"nano-nav-item, nano-option","slot")}return t.filter((function(t){return!t.disabled&&!t.hidden}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeItem",{get:function(){var t=p();return this.getItems.find((function(e){return e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"selectedItem",{get:function(){return this.getItems.find((function(t){return t.selected}))},enumerable:false,configurable:true});t.prototype.setActiveFocusItem=function(t,e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(o){n=this.getItems;i=!t||t.disabled?n.find((function(t){return t.selected}))||n[0]:t;n.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex",t===i?"0":"-1")}));if(!e)return[2];if(i){i.setFocus?i.setFocus():i.focus()}else this.menu.focus();return[2]}))}))};t.prototype.handleBlur=function(t){var e=this;if(!this.hasFocus)return;var n=t;var i;if(n.key){if(n.key!=="Tab")return;i=p()&&p().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((function(t){return t===e.el}));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}};t.prototype.render=function(){var t;var e=this;return o(s,{class:{legacy:!v}},o("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,role:this.type,ref:function(t){return e.menu=t},part:"base",class:(t={menu:true},t["menu--"+this.type]=true,t["menu--has-focus"]=this.hasFocus,t),tabIndex:-1},o("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());m.style=g;var y=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-right:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__start ::slotted(:last-child){margin-right:unset;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-left:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__end ::slotted(:first-child){margin-left:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;}}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0.6em;top:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";var w=0;var x=t("nano_option",function(){function t(t){e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.optId="nano-option-"+w++;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=l(this.handleClick.bind(this),5)}t.prototype.valueChanged=function(){if(!this.value||!this.value.length)this.value=this.labelContent};t.prototype.labelChanged=function(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value};t.prototype.handleKeyDown=function(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)};t.prototype.handleClick=function(){if(this.disabled)return;this.nanoSelect.emit(this.host)};Object.defineProperty(t.prototype,"labelContent",{get:function(){return u(this.host,"*:not([slot])",false).map((function(t){return t.textContent})).join(" ").trim()},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){this.valueChanged();this.labelChanged()};t.prototype.render=function(){return o(s,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},o("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},o("div",{part:"check-icon",class:"option__check"},o("slot",{name:"check-icon"},o("nano-icon",{name:"light/check","aria-hidden":"true"}))),o("div",{part:"start",class:"option__start"},o("slot",{name:"start"})),o("div",{part:"label",class:"option__label"},o("slot",null,this.label||this.value)),o("div",{part:"end",class:"option__end"},o("slot",{name:"end"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"],label:["labelChanged"]}},enumerable:false,configurable:true});return t}());x.style=y}}}));
+//# sourceMappingURL=p-39a5280e.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","exports","class_1","hostRef","_this","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","actvOptEles","canOpen","optionIds","selected","_dropDownConfig","skidding","options","type","open","disableFilter","disabled","optSelected","e","stopPropagation","changeInputValue","detail","raf","inputChange","shouldOpen","handleShow","__awaiter","listBox","setFocus","showActiveElement","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","optionKeyDown","connectedInput","focus","deleteKeys","exactMatch","debounce","bind","Object","defineProperty","prototype","opts","_a","value","forEach","opt","ddc","assign","allOptEles","openWatcher","writeTask","nanoDropdown","setAttribute","toString","watchInputChange","nanoInput","host","_b","getInputElement","_c","sent","input","HTMLElement","manageSlotChangeListener","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","__spreadArray","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","dropDownConfig","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","hasNoResult","fireActiveOptsEvent","nanoOptionsUpdated","emit","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","connectedCallback","componentDidLoad","componentDidRender","console","warn","render","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","_","dlist__menu","dlist__menu--open","dropwdownOpen","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","CANSHADOW","head","attachShadow","Menu","class_2","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","preventDefault","scrollIntoView","block","_i","items_1","shadowRoot","getTextContent","handleMouseOver","menu","preventScroll","removeFocus","blur","resetActiveItem","tagName","map","opened","ctx","getDirectChildren","activeElement","getActiveElement","getAttribute","classList","contains","handleBlur","hasFocus","kev","found","composedPath","nanoBlur","legacy","onClick","onMouseOver","onFocus","part","optionCss","Option","class_3","optId","valueChanged","labelContent","labelChanged","componentWillLoad","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get($colors, palegrey)};\n  */\n\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --padding-start: #{$spacing-xlarge};\n  --padding-end: #{$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get($colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control `readonly`.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (this.input instanceof HTMLElement) {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (!!this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      // add imperative `options`\n      writeTask(() => {\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'selctMulti':\n        // dwConfig.closeOnSelect = false;\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        dwConfig = { closeOnSelect: true, placement: 'center' };\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (!!oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      oldInput.removeEventListener('change', this.inputChange);\n      oldInput.removeEventListener('click', this.inputClick);\n      oldInput.removeEventListener('keydown', this.inputKeydown);\n      oldInput.removeEventListener('input', this.inputChange);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (!!newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    raf(() => this.inputChange());\n\n    if (this.type === 'select') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    raf(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    } else if (this.type === 'select') this.listBox.showActiveElement();\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-owns={this.optionIds.join(' ')}\n        aria-label=\"Select options from the list below\"\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={(_) => (this.open = false)}\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            {!this.options.length && <slot />}\n            {!!this.options.length && <slot name=\"internal-opts\" />}\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get($colors, blue--faded)};\n  --bg-color-focus: #{map.get($colors, blue--faded)};\n  --bg-color-selected: #{map.get($colors, blue--faded)};\n  --color-hover: #{map.get($colors, blue)};\n  --color-selected: #{map.get($colors, blue)};\n  --color-focus: #{map.get($colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\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 found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{$spacing-small};\n   * @prop --padding-bottom: Defaults to #{$spacing-small};\n   * @prop --padding-start: Defaults to #{$spacing-small};\n   * @prop --padding-end: Defaults to #{$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{$input-text-color});\n  --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --color-disabled: #{map.get($colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  background: var(--bg);\n\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      @include margin(null, 0.5em, null, null);\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      @include margin(null, null, null, 0.5em);\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    left: 0.6em;\n    top: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { OptionInterface } from '../../interface';\nimport { debounce, getDirectChildren } from '../../utils';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if (!this.value || !this.value.length) this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-44c08842.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(t,n,e,i){function a(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,o){function r(t){try{s(i.next(t))}catch(n){o(n)}}function l(t){try{s(i["throw"](t))}catch(n){o(n)}}function s(t){t.done?e(t.value):a(t.value).then(r,l)}s((i=i.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(n){return s([t,n])}}function s(r){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;a=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){e=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){e.label=r[1];break}if(r[0]===6&&e.label<o[1]){e.label=o[1];o=r;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(r);break}if(o[2])e.ops.pop();e.trys.pop();continue}r=n.call(t,e)}catch(l){r=[6,l];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-6eb25600.system.js","./p-ef053a2f.system.js","./p-1d13dbdf.system.js","./p-89edc042.system.js"],(function(t){"use strict";var n,e,i,a,o,r,l,s,p,c,u;return{setters:[function(t){n=t.r;e=t.c;i=t.h;a=t.e;o=t.g},function(t){r=t.r},function(t){l=t.F;s=t.a},function(t){p=t.a},function(t){c=t.c},function(t){u=t.c}],execute:function(){var d='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-input{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-input{opacity:1}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper.sc-nano-input{display:none}.form-ctrl__wrapper.sc-nano-input{display:block}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:1}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__helper-end.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.75em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}';var h=0;var f=t("nano_input",function(){function t(t){var i=this;n(this,t);this.nanoInput=e(this,"nanoInput",7);this.nanoChange=e(this,"nanoChange",7);this.nanoBlur=e(this,"nanoBlur",7);this.nanoFocus=e(this,"nanoFocus",7);this.nanoDidLoad=e(this,"nanoDidLoad",7);this.nanoDidUnload=e(this,"nanoDidUnload",7);this.nanoValidate=e(this,"nanoValidate",7);this.inputId="nano-input-"+h++;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.errorMessage="";this.datalist=null;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=function(t){if(i.validateOn==="submitThenDirty")i.validateOn="dirty";if(!i.nativeInput.validity.valid){if(i.showInlineError){if(t)t.preventDefault();i.errorMessage=i.nativeInput.validationMessage}i._invalid=true}else i._invalid=false;i.nanoValidate.emit({isValid:!i._invalid,errorMessage:i.nativeInput.validationMessage,originalEvent:t})};this.onInput=function(t){var n=t.target;i.value=(n===null||n===void 0?void 0:n.value)||"";i.nanoInput.emit(t)};this.onBlur=function(){i.hasFocus=false;i.focusChanged();if(i.validateOn==="dirty")i.validate();i.nanoBlur.emit()};this.onFocus=function(){i.hasFocus=true;i.focusChanged();i.nanoFocus.emit()};this.onKeydown=function(){if(i.shouldClearOnEdit()){if(i.didBlurAfterEdit&&i.hasValue()){i.clearTextInput()}i.didBlurAfterEdit=false}};this.clearTextInput=function(t){if(i.clearInput&&!i.readonly&&!i.disabled&&t){t.preventDefault();t.stopPropagation()}i.value="";i.nativeInput.value="";var n=new window.Event("change");i.nativeInput.dispatchEvent(n)}}Object.defineProperty(t.prototype,"nativeInputWrap",{get:function(){return this._nativeInputWrap},set:function(t){if(this._nativeInputWrap===t)return;this._nativeInputWrap=t;this.setDataListOpts()},enumerable:false,configurable:true});t.prototype.setDataListOpts=function(){if(!this.datalist)return;var t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign({},t),{skidding:-1,tetherTo:this.nativeInputWrap})};Object.defineProperty(t.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});t.prototype.shouldValidate=function(){var t=this;if(!this.hasRendered)return;setTimeout((function(){if(t.validateOn==="dirty")t.validate()}),20)};t.prototype.valueChanged=function(){var t=this;this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}setTimeout((function(){if(t.validateOn==="dirty")t.validate()}),20)};t.prototype.debounceChanged=function(){this.nanoChange=p(this.nanoChange,this.debounce)};t.prototype.reportValidity=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(t)this.validate();return[2,{isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage}]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}return[2]}))}))};t.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};t.prototype.showError=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}return[2]}))}))};t.prototype.onReset=function(t){var n=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!n||t.target!==this.el.closest("form"))return;this.value=""};t.prototype.handleBlur=function(t){var n=this;if(!this.hasFocus)return;var e=t;var i;r((function(){if(e.key){if(e.key!=="Tab")return;i=document.activeElement}else i=t.target;if(c(n.el.tagName.toLowerCase(),i)!==n.el){n.onBlur()}}))};t.prototype.shouldClearOnEdit=function(){var t=this,n=t.type,e=t.clearOnEdit;return e===undefined?n==="password":e};t.prototype.getValue=function(){return this.value||""};t.prototype.focusChanged=function(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}};t.prototype.hasValue=function(){return this.getValue().length>0};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.el,{childList:true,subtree:true})};t.prototype.processSlottedContent=function(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(!!this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}};t.prototype.connectedCallback=function(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}};t.prototype.disconnectedCallback=function(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){var t=this;this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((function(n){return t.setFocus()}),300)};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this;var n=this.getValue();var e=this.inputId+"-lbl";var o=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";var r=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";var p=function(t){var n=t.el,e=t.floatLabel,i=t.label,a=t.errorMessage,o=t.type,r=t.showInlineError,l=t.hasHelperSlot,s=t.hasLabelSlot,p=t.hideLabel,c=t.placeholder,u=t.maxlength,d=t.charCount,h=t.showCharCount,f=t.rtl,b=t.hasHelperEndSlot;return{el:n,floatLabel:e,label:i,errorMessage:a,type:o,showInlineError:r,hasHelperSlot:l,hasLabelSlot:s,hideLabel:p,placeholder:c,maxlength:u,charCount:d,showCharCount:h,rtl:f,hasHelperEndSlot:b}}(this);var c=Object.assign(Object.assign({},p),{labelId:e,moreId:o,helperEndId:r,hasValue:this.hasValue(),controlId:this.inputId});var d=function(n){var e=n.clearInput,i=n.readonly,a=n.disabled;return{clearInput:e,readonly:i,disabled:a,clearControl:t.clearInput}}(this);return i(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},u(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},i(l,Object.assign({},c),i(s,Object.assign({},d,{onClearText:this.clearTextInput,control:this.el,ref:function(n){return t.nativeInputWrap=n}}),this.type!=="textarea"&&i("input",{id:this.inputId,class:"input__native-ctrl",ref:function(n){return t.nativeInput=n},"aria-labelledby":e+" "+o+" "+r,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:function(n){return t.nativeInput=n},"aria-labelledby":e+" "+o+" "+r,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate})),i("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}},enumerable:false,configurable:true});return t}());f.style=d}}}));
+//# sourceMappingURL=p-44c08842.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/input/input.scss?tag=nano-input&encapsulation=scoped","src/components/input/input.tsx"],"names":["inputCss","inputIds","Input","exports","class_1","hostRef","_this","this","inputId","didBlurAfterEdit","rtl","charCount","hasRendered","hasFocus","hasLabelSlot","hasHelperSlot","hasHelperEndSlot","errorMessage","datalist","_invalid","autocapitalise","autocomplete","autocorrect","autofocus","clearInput","debounce","disabled","validateOn","showInlineError","hideLabel","floatLabel","name","readonly","required","spellcheck","type","value","resize","rows","showCharCount","validate","ev","nativeInput","validity","valid","preventDefault","validationMessage","nanoValidate","emit","isValid","originalEvent","onInput","input","target","nanoInput","onBlur","focusChanged","nanoBlur","onFocus","nanoFocus","onKeydown","shouldClearOnEdit","hasValue","clearTextInput","stopPropagation","event","window","Event","dispatchEvent","Object","defineProperty","prototype","_nativeInputWrap","ele","setDataListOpts","currDWConfig","dropDownConfig","assign","skidding","tetherTo","nativeInputWrap","shouldValidate","setTimeout","valueChanged","nanoChange","length","style","height","scrollHeight","debounceChanged","debounceEvent","reportValidity","validateFirst","setFocus","focus","click","getInputElement","Promise","resolve","showError","message","setCustomValidity","onReset","e","form","document","querySelector","el","closest","handleBlur","kev","raf","key","activeElement","closestElement","tagName","toLowerCase","_a","clearOnEdit","undefined","getValue","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","console","warn","connectedCallback","CustomEvent","detail","disconnectedCallback","componentDidLoad","_","componentWillLoad","render","labelId","moreId","helperEndId","ownerDocument","dir","compWrapOptions","label","placeholder","maxlength","wrapOptions","controlId","controlOptions","clearControl","h","Host","aria-disabled","class","createColorClasses","color","has-value","has-focus","is-invalid","FormControlWrap","FormControl","onClearText","control","ref","id","aria-labelledby","accept","autoCapitalize","autoComplete","autoCorrect","autoFocus","inputMode","inputmode","min","max","minLength","minlength","maxLength","multiple","pattern","readOnly","step","size","onChange","onKeyDown","onInvalid","input__native-ctrl","input__resizable"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\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  color: currentColor;\n  display: block;\n}\n\n:host(.nano-color) {\n  color: current-color(base);\n\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n}\n\n.input__native-ctrl {\n  @include text-inherit();\n\n  padding-left: unset;\n  padding-right: unset;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-inline-start: var(--padding-start);\n  padding-inline-end: var(--padding-end);\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  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  &::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  &.input__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: 0.25em;\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n\n    .has-float-label & {\n      padding-top: 1.75em;\n    }\n  }\n\n  :host([readonly]:not([readonly='false'])) & {\n    user-select: none;\n  }\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  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  ControlValidity,\n  ControlValidityEventDetail,\n  InputChangeEventDetail,\n  TextFieldTypes,\n} from '../../interface';\nimport {\n  debounceEvent,\n  closestElement,\n  createColorClasses,\n  raf,\n} from '../../utils';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\n\nlet inputIds = 0;\n\n/**\n * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)\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 - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information\n */\n@Component({\n  tag: 'nano-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class Input implements ComponentInterface {\n  private nativeInput?: HTMLInputElement | HTMLTextAreaElement;\n  private inputId = `nano-input-${inputIds++}`;\n  private didBlurAfterEdit = false;\n  private rtl: boolean = false;\n  private mo?: MutationObserver;\n  private charCount = 0;\n  private hasRendered = false;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. User get/set to set datalist options\n  private _nativeInputWrap: HTMLElement;\n  private get nativeInputWrap() {\n    return this._nativeInputWrap;\n  }\n  private set nativeInputWrap(ele: HTMLElement) {\n    if (this._nativeInputWrap === ele) return;\n    this._nativeInputWrap = ele;\n    this.setDataListOpts();\n  }\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasHelperSlot = false;\n  @State() hasHelperEndSlot = false;\n  @State() errorMessage: string = '';\n  @State() datalist: HTMLNanoDatalistElement = null;\n\n  @Watch('datalist')\n  setDataListOpts() {\n    if (!this.datalist) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      skidding: -1,\n      tetherTo: this.nativeInputWrap,\n    };\n  }\n\n  @Element() el!: HTMLNanoInputElement;\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. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n   */\n  @Prop() accept?: string;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalise: 'none' | 'sentences' | 'words' | 'characters' =\n    'none';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: 'on' | 'off' = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n   */\n  @Prop() clearOnEdit?: boolean;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search';\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively you may use a 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   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\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;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a 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   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop({ reflect: true }) type: TextFieldTypes = 'text';\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   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.\n   */\n  @Prop() resize: 'true' | 'false' | 'auto' = 'auto';\n\n  /**\n   * relevant to type=\"textarea\". Default number of rows to show\n   */\n  @Prop() rows = 2;\n\n  /**\n   * relevant to type=\"textarea\".\n   */\n  @Prop() showCharCount = false;\n\n  @Watch('minlength')\n  @Watch('maxlength')\n  @Watch('min')\n  @Watch('max')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('validateOn')\n  @Watch('readonly')\n  @Watch('pattern')\n  @Watch('inputmode')\n  protected shouldValidate() {\n    if (!this.hasRendered) return;\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.nanoChange.emit({ value: this.value });\n    this.charCount = this.value.length;\n\n    if (this.type === 'textarea' && this.resize === 'auto') {\n      this.nativeInput.style.height = 'auto';\n      if (this.value.length)\n        this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';\n    }\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() nanoInput!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.validate();\n    return {\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n      this.nativeInput.click();\n    }\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.nativeInput);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeInput) {\n      this.nativeInput.setCustomValidity(message);\n      this.validate();\n    }\n  }\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.value = '';\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 = document.activeElement;\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 shouldClearOnEdit() {\n    const { type, clearOnEdit } = this;\n    return clearOnEdit === undefined ? type === 'password' : clearOnEdit;\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private validate = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    if (!this.nativeInput.validity.valid) {\n      if (this.showInlineError) {\n        if (ev) ev.preventDefault();\n        this.errorMessage = this.nativeInput.validationMessage;\n      }\n      this._invalid = true;\n    } else this._invalid = false;\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private onInput = (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    this.value = input?.value || '';\n    this.nanoInput.emit(ev);\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.focusChanged();\n    if (this.validateOn === 'dirty') this.validate();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusChanged();\n    this.nanoFocus.emit();\n  };\n\n  private onKeydown = () => {\n    if (this.shouldClearOnEdit()) {\n      // Did the input value change after it was blurred and edited?\n      if (this.didBlurAfterEdit && this.hasValue()) {\n        // Clear the input\n        this.clearTextInput();\n      }\n\n      // Reset the flag\n      this.didBlurAfterEdit = false;\n    }\n  };\n\n  private clearTextInput = (ev?: Event) => {\n    if (this.clearInput && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    this.value = '';\n    this.nativeInput.value = '';\n    const event = new window.Event('change');\n    this.nativeInput.dispatchEvent(event);\n  };\n\n  private focusChanged() {\n    // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n    if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n      this.didBlurAfterEdit = true;\n    }\n  }\n\n  private hasValue(): boolean {\n    return this.getValue().length > 0;\n  }\n\n  private slotChangeObserver() {\n    if (!Build.isBrowser) return;\n\n    if (this.mo) this.mo.disconnect();\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 / button content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n    this.datalist = this.el.querySelector('nano-datalist:not([slot])');\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"inline-button\"]')) {\n      console.warn(\n        'The `inline-button` slot was renamed to `end` in v2 - please update your code',\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  connectedCallback() {\n    this.debounceChanged();\n    if (Build.isBrowser) {\n      this.el.dispatchEvent(\n        new CustomEvent('nanoDidLoad', {\n          detail: this.el,\n        })\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (Build.isBrowser) {\n      document.dispatchEvent(\n        new CustomEvent('nanoDidUnload', {\n          detail: this.el,\n        })\n      );\n    }\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.hasRendered = true;\n    if (this.autofocus) setTimeout((_) => this.setFocus(), 300);\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';\n    const helperEndId = this.hasHelperEndSlot ? this.inputId + '-helper' : '';\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      type,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      maxlength,\n      charCount,\n      showCharCount,\n      rtl,\n      hasHelperEndSlot,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      type,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      maxlength,\n      charCount,\n      showCharCount,\n      rtl,\n      hasHelperEndSlot,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: this.hasValue(),\n      controlId: this.inputId,\n    };\n\n    const controlOptions = (({ clearInput, readonly, disabled }) => ({\n      clearInput,\n      readonly,\n      disabled,\n      clearControl: this.clearInput,\n    }))(this);\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        dir={this.rtl ? 'rtl' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': this.hasValue(),\n          'has-focus': this.hasFocus,\n          'is-invalid': this._invalid,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearTextInput}\n            control={this.el}\n            ref={(el) => (this.nativeInputWrap = el)}\n          >\n            {this.type !== 'textarea' && (\n              <input\n                id={this.inputId}\n                class=\"input__native-ctrl\"\n                ref={(input) => (this.nativeInput = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                accept={this.accept}\n                autoCapitalize={this.autocapitalise}\n                autoComplete={this.autocomplete}\n                autoCorrect={this.autocorrect}\n                autoFocus={this.autofocus}\n                inputMode={this.inputmode}\n                form={this.form}\n                min={this.min}\n                max={this.max}\n                minLength={this.minlength}\n                maxLength={this.maxlength}\n                multiple={this.multiple}\n                name={this.name}\n                pattern={this.pattern}\n                placeholder={this.placeholder}\n                readOnly={this.readonly}\n                required={this.required}\n                spellcheck={this.spellcheck}\n                step={this.step}\n                size={this.size}\n                type={this.type}\n                value={value}\n                onInput={this.onInput}\n                onChange={this.onInput}\n                onFocus={this.onFocus}\n                onKeyDown={this.onKeydown}\n                onInvalid={this.validate}\n              />\n            )}\n            {this.type === 'textarea' && (\n              <textarea\n                rows={this.floatLabel ? 1 : this.rows}\n                id={this.inputId}\n                class={{\n                  'input__native-ctrl': true,\n                  input__resizable: this.resize === 'true',\n                }}\n                ref={(input) => (this.nativeInput = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                autoCapitalize={this.autocapitalise}\n                autoCorrect={this.autocorrect}\n                autoFocus={this.autofocus}\n                inputMode={this.inputmode}\n                form={this.form}\n                minLength={this.minlength}\n                maxLength={this.maxlength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readOnly={this.readonly}\n                required={this.required}\n                spellcheck={this.spellcheck}\n                value={value}\n                onInput={this.onInput}\n                onChange={this.onInput}\n                onFocus={this.onFocus}\n                onKeyDown={this.onKeydown}\n                onInvalid={this.validate}\n              ></textarea>\n            )}\n          </FormControl>\n          <slot />\n        </FormControlWrap>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-6eb25600.system.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js"],(function(l){"use strict";var e;return{setters:[function(l){e=l.h}],execute:function(){var r=function(l){var r=l.label,a=l.hasLabelSlot,t=l.controlId,s=l.labelId,o=l.floatLabel,n=l.placeholder,c=l.hideLabel,i=l.hasValue,_=l.rtl,d=l.showCharCount,f=l.maxlength,u=l.charCount;if(!r&&!a)return;if(o){return e("label",{class:"form-ctrl__float-label",htmlFor:t,id:s},r&&r,!r&&a&&e("slot",{name:"label"}),d&&e("span",{class:"form-ctrl__label-charcount"},f?" "+u+"/"+f:" "+u))}else{return e("label",{class:{"form-ctrl__label":true,"visually-hide":c},htmlFor:t,id:s},e("div",{class:"form-ctrl__label-wrap"},n&&i&&_&&e("span",{class:"form-ctrl__label-placeholder"},n," / "),e("span",{class:"form-ctrl__labeltext"},r&&r,!r&&a&&e("slot",{name:"label"})),n&&i&&!_&&e("span",{class:"form-ctrl__label-placeholder"}," / ",n)),d&&e("span",{class:"form-ctrl__label-charcount"},f?f-u+" left":u+" characters"))}};var a=l("F",(function(l,a){var t=l.rtl,s=l.floatLabel,o=l.label,n=l.moreId,c=l.helperEndId,i=l.type,_=l.hasHelperSlot,d=l.showInlineError,f=l.errorMessage,u=l.hasHelperEndSlot;var m=u?"nano-resize-observe":"div";return e(m,{states:"350w has-enough-width",class:{"has-label":o!==null&&!s,"has-float-label":o!==null&&s,"has-helper-end":u,rtl:t,"form-ctrl":true}},e("div",{class:"form-ctrl__wrapper"},!s?r(Object.assign({},l)):"",e("div",{class:{"form-ctrl__input":true,"form-ctrl__textarea":i==="textarea"}},s&&r(Object.assign(Object.assign({},l),{rtl:t})),a),d||_?e("div",{class:"form-ctrl__more",id:n},!!d?e("div",{class:"form-ctrl__error","aria-live":"polite"},f):"",e("div",{class:"form-ctrl__helper"},e("slot",{name:"helper"}))):""),u?e("div",{class:"form-ctrl__helper-end",id:c},e("slot",{name:"helper-end"})):"")}));var t=l("a",(function(l,r){var a=l.clearControl,t=l.onClearText,s=l.readonly,o=l.disabled,n=l.control,c=l.ref,i=l.endSlot,_=l.endValueSlot,d=l.startSlot;var f=function(){n.setFocus()};return e("div",{class:"form-ctrl__input-wrap",ref:function(l){if(c)c(l)}},e("span",{class:"form-ctrl__slot-start"},e("slot",{name:"start"}),d),r,a&&!s&&!o&&e("button",{type:"button",class:"icon form-ctrl__clear-btn",tabindex:"-1",onTouchStart:t,onMouseDown:t},e("nano-icon",{name:"light/times"})),e("span",{class:"form-ctrl__slot-value-end",onClick:f},e("slot",{name:"value-end"}),_),e("span",{class:"form-ctrl__slot-end"},e("slot",{name:"end"}),i))}))}}}));
+//# sourceMappingURL=p-6eb25600.system.js.map

package/dist/nano-components/p-6eb25600.system.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/form-control/form-control.tsx"],"names":["renderLabel","_a","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","form-ctrl__label","visually-hide","FormControlWrap","exports","props","children","moreId","helperEndId","type","hasHelperSlot","showInlineError","errorMessage","hasHelperEndSlot","MainTag","states","has-label","has-float-label","has-helper-end","form-ctrl","Object","assign","form-ctrl__input","form-ctrl__textarea","aria-live","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/nano-components/p-6f94d755.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as e,i,h as s,e as o,g as r}from"./p-ab5813a7.js";import{i as a}from"./p-debd9efc.js";import{d as n}from"./p-1da5f8df.js";let h=class{constructor(i){t(this,i);this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let e=false;Object.keys(this.appliedStates).forEach((i=>{let s;if(i==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[i].forEach(((o,r)=>{if(s>=r&&o.applied===false){o.applied=true;t[i].set(r,o);e=true}else if(s<r&&o.applied===true){o.applied=false;t[i].set(r,o);e=true}}))}));if(e)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=["is-ready"]}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;if(!this.ro)this.attachRO();const t=t=>{const e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((e=>{e=e.trim();if(e.includes(" ")){const[i,...s]=e.split(" ");const{bp:o,dir:r}=t(i);this.appliedStates[r].set(o,{states:s,applied:false})}else{const{bp:i,dir:s}=t(e);this.appliedStates[s].set(i,{applied:false})}}))}applyChanges(t){let e=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{if(!t.states)return;t.states.map((i=>{if(t.applied)e.push(i);else e=e.filter((t=>t!==i))}))}))}));this.classNames=["is-ready",...e];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};Object.keys(t).forEach((i=>{t[i].forEach(((t,s)=>{e[s+i]=t.applied}))}));return e}attachRO(){this.ro=new a((t=>{for(const e of t){this.currentWidth=e.contentRect.width;this.currentHeight=e.contentRect.height}}));this.ro.observe(this.host)}connectedCallback(){this.assessChanges=n(this.assessChanges,50)}componentDidLoad(){if(!this.states)return;if(!this.currentWidth||!this.currentHeight){i((()=>{const{width:t,height:e}=this.host.getBoundingClientRect();this.currentWidth=t;this.currentHeight=e}))}this.statesChanged()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return s(o,{class:{[this.classNames.join(" ")]:true}},s("slot",null))}get host(){return r(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style=":host { display: inline-block } div { height: 100%; }";const l=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";let d=class{constructor(e){t(this,e);this.animated=true}render(){return s("div",{class:{skeleton:true,animate:this.animated}},s("div",{class:"skeleton__indicator"}))}};d.style=l;export{h as nano_resize_observe,d as nano_skeleton};
+//# sourceMappingURL=p-6f94d755.entry.js.map

package/dist/nano-components/p-6f94d755.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","includes","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","host","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":";;;8IAiCaA,EAAa,MAL1BC,YAAAC,0EAYWC,KAAAC,WAAuB,GA2CxBD,KAAAE,cAAgB,KACtB,IAAKF,KAAKG,eAAiBH,KAAKI,cAAe,OAC/C,MAAMC,EAA2B,CAAEC,EAAG,IAAIC,IAAOC,EAAG,IAAID,KACxD,IAAIE,EAAa,MAEjBC,OAAOC,KAAKX,KAAKY,eAAeC,SAASC,IACvC,IAAIC,EACJ,GAAID,IAAY,IAAKC,EAAMf,KAAKI,mBAC3BW,EAAMf,KAAKG,aAEhBH,KAAKY,cAAcE,GAASD,SAC1B,CAACG,EAA4BC,KAC3B,GAAIF,GAAOE,GAAMD,EAAME,UAAY,MAAO,CACxCF,EAAME,QAAU,KAChBb,EAAcS,GAASK,IAAIF,EAAID,GAC/BP,EAAa,UACR,GAAIM,EAAME,GAAMD,EAAME,UAAY,KAAM,CAC7CF,EAAME,QAAU,MAChBb,EAAcS,GAASK,IAAIF,EAAID,GAC/BP,EAAa,YAKrB,GAAIA,EAAYT,KAAKoB,aAAaf,QAC7B,IAAKL,KAAKC,WAAWoB,SAAS,YACjCrB,KAAKC,WAAa,CAAC,aA1DvBH,mBACEE,KAAKE,gBAIPJ,gBACE,IAAKE,KAAKsB,OAAQ,OAClB,IAAKtB,KAAKuB,GAAIvB,KAAKwB,WAEnB,MAAMC,EAAWC,IACf,MAAMC,EAAWD,EAAME,MAAM,SAASC,QAAQC,GAAOA,EAAGC,SACxD,MAAO,CAAEd,GAAIe,SAASL,EAAS,IAAKM,IAAKN,EAAS,KAEpD3B,KAAKY,cAAgB,CAAEN,EAAG,IAAIC,IAAOC,EAAG,IAAID,KAG5CP,KAAKsB,OAAOM,MAAM,KAAKM,KAAKC,IAC1BA,EAAKA,EAAGC,OACR,GAAID,EAAGd,SAAS,KAAM,CACpB,MAAOgB,KAAQC,GAAWH,EAAGP,MAAM,KACnC,MAAMX,GAAEA,EAAEgB,IAAEA,GAAQR,EAAQY,GAC5BrC,KAAKY,cAAcqB,GAAwBd,IAAIF,EAAI,CACjDK,OAAQgB,EACRpB,QAAS,YAEN,CACL,MAAMD,GAAEA,EAAEgB,IAAEA,GAAQR,EAAQU,GAC5BnC,KAAKY,cAAcqB,GAAwBd,IAAIF,EAAI,CAAEC,QAAS,YAkC5DpB,aAAayC,GACnB,IAAItC,EAAa,IAAID,KAAKC,YAC1BS,OAAOC,KAAK4B,GAAS1B,SAASC,IAC5ByB,EAAQzB,GAASD,SAASG,IACxB,IAAKA,EAAMM,OAAQ,OACnBN,EAAMM,OAAOY,KAAKC,IAChB,GAAInB,EAAME,QAASjB,EAAWuC,KAAKL,QAC9BlC,EAAaA,EAAW4B,QAAQY,GAAOA,IAAON,aAIzDnC,KAAKC,WAAa,CAAC,cAAeA,GAClCD,KAAK0C,sBAAsBC,KAAK3C,KAAK4C,YAAYL,IAG3CzC,YAAY+C,GAClB,MAAMC,EAAS,GACfpC,OAAOC,KAAKkC,GAAWhC,SAASC,IAC9B+B,EAAU/B,GAASD,SAAQ,CAACG,EAA4BC,KACtD6B,EAAO7B,EAAKH,GAAWE,EAAME,cAGjC,OAAO4B,EAGDhD,WACNE,KAAKuB,GAAK,IAAIwB,GAAgBC,IAC5B,IAAK,MAAMC,KAASD,EAAS,CAC3BhD,KAAKG,aAAe8C,EAAMC,YAAYC,MACtCnD,KAAKI,cAAgB6C,EAAMC,YAAYE,WAG3CpD,KAAKuB,GAAG8B,QAAQrD,KAAKsD,MAGvBxD,oBACEE,KAAKE,cAAgBqD,EAASvD,KAAKE,cAAe,IAGpDJ,mBACE,IAAKE,KAAKsB,OAAQ,OAClB,IAAKtB,KAAKG,eAAiBH,KAAKI,cAAe,CAC7CoD,GAAS,KACP,MAAML,MAAEA,EAAKC,OAAEA,GAAWpD,KAAKsD,KAAKG,wBACpCzD,KAAKG,aAAegD,EACpBnD,KAAKI,cAAgBgD,KAGzBpD,KAAK0D,gBAGP5D,uBACE,GAAIE,KAAKuB,GAAIvB,KAAKuB,GAAGoC,aAGvB7D,SACE,OACEQ,EAACsD,EAAI,CACHC,MAAO,CACL/D,CAACE,KAAKC,WAAW6D,KAAK,MAAO,OAG/BxD,EAAA,OAAA,+NC9KR,MAAMyD,EAAc,qsCCYPC,EAAQ,MALrBlE,YAAAC,aAOUC,KAAAiE,SAAW,KAEnBnE,SACE,OACEQ,EAAA,MAAA,CACEuD,MAAO,CACLK,SAAU,KACVC,QAASnE,KAAKiE,WAGhB3D,EAAA,MAAA,CAAKuD,MAAM","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-84767e87.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as n,h as i,e as a,g as e}from"./p-ab5813a7.js";import{r as o}from"./p-289aa03f.js";import{F as r,a as s}from"./p-a6c84740.js";import{a as l}from"./p-1da5f8df.js";import{c as p}from"./p-b619500f.js";import{c}from"./p-d99437a6.js";const h='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-input{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-input{opacity:1}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper.sc-nano-input{display:none}.form-ctrl__wrapper.sc-nano-input{display:block}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:1}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__helper-end.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.75em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}';let d=0;let u=class{constructor(i){t(this,i);this.nanoInput=n(this,"nanoInput",7);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoValidate=n(this,"nanoValidate",7);this.inputId=`nano-input-${d++}`;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.errorMessage="";this.datalist=null;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(t)t.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:t})};this.onInput=t=>{const n=t.target;this.value=(n===null||n===void 0?void 0:n.value)||"";this.nanoInput.emit(t)};this.onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};this.onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}this.value="";this.nativeInput.value="";const n=new window.Event("change");this.nativeInput.dispatchEvent(n)}}get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(t){if(this._nativeInputWrap===t)return;this._nativeInputWrap=t;this.setDataListOpts()}setDataListOpts(){if(!this.datalist)return;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign({},t),{skidding:-1,tetherTo:this.nativeInputWrap})}get invalid(){return this._invalid}shouldValidate(){if(!this.hasRendered)return;setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}setTimeout((()=>{if(this.validateOn==="dirty")this.validate()}),20)}debounceChanged(){this.nanoChange=l(this.nanoChange,this.debounce)}async reportValidity(t){if(t)this.validate();return{isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage}}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(t){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}}onReset(t){const n=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!n||t.target!==this.el.closest("form"))return;this.value=""}handleBlur(t){if(!this.hasFocus)return;const n=t;let i;o((()=>{if(n.key){if(n.key!=="Tab")return;i=document.activeElement}else i=t.target;if(p(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:t,clearOnEdit:n}=this;return n===undefined?t==="password":n}getValue(){return this.value||""}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(!!this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((t=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const t=this.getValue();const n=this.inputId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const o=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const l=(({el:t,floatLabel:n,label:i,errorMessage:a,type:e,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:p,maxlength:c,charCount:h,showCharCount:d,rtl:u,hasHelperEndSlot:f})=>({el:t,floatLabel:n,label:i,errorMessage:a,type:e,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:p,maxlength:c,charCount:h,showCharCount:d,rtl:u,hasHelperEndSlot:f}))(this);const p=Object.assign(Object.assign({},l),{labelId:n,moreId:e,helperEndId:o,hasValue:this.hasValue(),controlId:this.inputId});const h=(({clearInput:t,readonly:n,disabled:i})=>({clearInput:t,readonly:n,disabled:i,clearControl:this.clearInput}))(this);return i(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},c(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},i(r,Object.assign({},p),i(s,Object.assign({},h,{onClearText:this.clearTextInput,control:this.el,ref:t=>this.nativeInputWrap=t}),this.type!=="textarea"&&i("input",{id:this.inputId,class:"input__native-ctrl",ref:t=>this.nativeInput=t,"aria-labelledby":n+" "+e+" "+o,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:t,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:t=>this.nativeInput=t,"aria-labelledby":n+" "+e+" "+o,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:t,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate})),i("slot",null)))}get el(){return e(this)}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};u.style=h;export{u as nano_input};
+//# sourceMappingURL=p-84767e87.entry.js.map