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

package/dist/nano-components/nano-date-picker_2.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{r as n,c as t,a as e,d as i}from"./index-CFYZ-ZOT.js";import{h as a,t as o}from"./renderer-LJzCFyMt.js";import{i as s,g as r,b as l,D as c,p as d,d as h,s as u,e as p,f as b,h as f,j as _,k as m,l as v,a as y}from"./date-utils-BZYdjI1P.js";import{c as g}from"./dom-CF0Ycs9M.js";import{a as k}from"./throttle-C93FMm2Z.js";import{F as x,a as w}from"./form-control-DXPQniNX.js";const z={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},D=({focusedDay:n,today:t,day:e,onDaySelect:i,onKeyboardNavigation:o,focusedDayRef:r,inRange:l,disabled:c,isSelected:d})=>{const h=s(e,t),u=s(e,n),p=e.getMonth()!==n.getMonth()||c,b=!l;return a("button",{class:{"duet-date__day":!0,"is-outside":b,"is-disabled":p,"is-today":h},tabIndex:u?0:-1,onClick:function(n){i(n,e)},onKeyDown:o,disabled:b,type:"button","aria-pressed":d?"true":"false",ref:n=>{u&&n&&r&&r(n)}},a("span",{"aria-hidden":"true"},e.getDate()),a("span",{class:"duet-date__vhidden"},e.toLocaleDateString(void 0,{day:"numeric",month:"long"})))},C=({selectedDate:n,focusedDate:t,labelledById:e,localization:i,firstDayOfWeek:o,min:c,max:d,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:p,onMouseDown:b,onFocusIn:f,isDateDisabled:_})=>{const m=new Date,v=r(t,o);return a("table",{class:"duet-date__table",role:"grid","aria-labelledby":e,onFocusin:f,onMouseDown:b},a("thead",null,a("tr",null,(g=o,k=n=>a("th",{class:"duet-date__table-header",scope:"col"},a("span",{"aria-hidden":"true"},n.substring(0,2)),a("span",{class:"duet-date__vhidden"},n)),(y=i.dayNames).map(((n,t)=>k(y[(t+g)%y.length])))))),a("tbody",null,function(n){const t=[];for(let e=0;e<n.length;e+=7)t.push(n.slice(e,e+7));return t}(v).map((e=>a("tr",{class:"duet-date__row"},e.map((e=>a("td",{class:"duet-date__cell",role:"gridcell","aria-selected":s(e,n)?"true":void 0},a(D,{day:e,today:m,focusedDay:t,inRange:l(e,c,d),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:p,disabled:_(e),isSelected:s(e,n)})))))))));var y,g,k};let S=0;const I=class{constructor(e){n(this,e),this.nanoDatePicked=t(this,"nanoDatePicked",7)}dateId="nano-datepicker-"+S++;monthSelectId=this.dateId+"-month";yearSelectId=this.dateId+"-year";dialogLabelId=this.dateId+"-dialog";firstFocusableElement;monthSelectNode;focusedDayNode;focusTimeoutId;initialTouchX=null;initialTouchY=null;get host(){return e(this)}activeFocus=!1;focusedDay=new Date;_selectedDate="";get selectedDate(){return this._selectedDate}set selectedDate(n){"string"==typeof n?(n=n.split("T")[0],this._selectedDate=n):this._selectedDate=""}min="";max="";firstDayOfWeek=c.Monday;localization=z;isDateDisabled=()=>!1;isModal=!1;firstFocusEle;nanoDatePicked;async setFocus(n=!1){this.setFocusedDay(d(this.selectedDate)||new Date),n?setTimeout((()=>this.focusedDayNode.focus()),20):(clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout((()=>{this.monthSelectNode.focus()}),20))}handleSelectedDateChange(){this.setFocus(!0)}enableActiveFocus=()=>{this.activeFocus=!0};disableActiveFocus=()=>{this.activeFocus=!1};addDays(n){this.setFocusedDay(h(this.focusedDay,n))}addMonths(n){this.setMonth(this.focusedDay.getMonth()+n)}addYears(n){this.setYear(this.focusedDay.getFullYear()+n)}startOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(p(this.focusedDay,this.firstDayOfWeek))}setMonth(n){const t=b(f(this.focusedDay),n),e=_(t),i=b(this.focusedDay,n);this.setFocusedDay(m(i,t,e))}setYear(n){const t=v(f(this.focusedDay),n),e=_(t),i=v(this.focusedDay,n);this.setFocusedDay(m(i,t,e))}setFocusedDay(n){this.focusedDay=m(n,d(this.min),d(this.max))}handleTouchStart=n=>{const t=n.changedTouches[0];this.initialTouchX=t.pageX,this.initialTouchY=t.pageY};handleTouchMove=n=>{n.preventDefault()};handleTouchEnd=n=>{const t=n.changedTouches[0],e=t.pageX-this.initialTouchX,i=t.pageY-this.initialTouchY;Math.abs(e)>=70&&Math.abs(i)<=70&&this.addMonths(e<0?1:-1),this.initialTouchY=null,this.initialTouchX=null};handleNextMonthClick=n=>{n.preventDefault(),this.addMonths(1)};handlePreviousMonthClick=n=>{n.preventDefault(),this.addMonths(-1)};handleKeyboardNavigation=n=>{if("Tab"===n.key&&!n.shiftKey&&this.isModal){n.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;return void(t.setFocus?t.setFocus():t.focus())}let t=!0;switch(n.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":n.shiftKey?this.addYears(-1):this.addMonths(-1);break;case"PageDown":n.shiftKey?this.addYears(1):this.addMonths(1);break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=!1}t&&(n.preventDefault(),this.enableActiveFocus())};handleDaySelect=(n,t)=>{const e=!this.isDateDisabled(t);l(t,d(this.min),d(this.max))&&e&&(t.getMonth()===this.focusedDay.getMonth()?this.setValue(t):this.setFocusedDay(t))};handleMonthSelect=n=>{this.setMonth(parseInt(n.target.value,10))};handleYearSelect=n=>{this.setYear(parseInt(n.target.value,10))};setValue(n){this.selectedDate=y(n),this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:n})}processFocusedDayNode=n=>{this.focusedDayNode=n,this.activeFocus&&setTimeout((()=>n.focus()),0)};componentWillLoad(){this.handleSelectedDateChange()}render(){const n=d(this.selectedDate),t=(n||this.focusedDay).getFullYear(),e=this.focusedDay.getMonth(),o=this.focusedDay.getFullYear(),s=d(this.min),r=d(this.max),c=null!=s&&s.getMonth()===e&&s.getFullYear()===o,h=null!=r&&r.getMonth()===e&&r.getFullYear()===o;let u=t-10,p=t+10;return s&&(u=s.getFullYear()),r&&(p=r.getFullYear()),a(i,{key:"476708135e014efc8662dcfdd6877bfa21ef6f31",class:"nano-date-picker"},a("div",{key:"4ff36de5c9e6c86fa26638db70514f12fad96262",class:"duet-date"},a("div",{key:"544a676f3354fc3cd0a6c0f1fd8610d47c5c586b",class:{"duet-date__dialog":!0,"is-active":!0},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},a("div",{key:"94665c51ab3ee801e6affb6be91076777f329665",class:"duet-date__dialog-content"},a("div",{key:"3e014e07dd3f43808bdb99fbc79c6f81958328ac",class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),a("div",{key:"6759c71255f8ff0c05a56e118ad628afc7f1af43",class:"duet-date__header",onFocusin:this.disableActiveFocus},a("div",{key:"b0688e27b47a95fbb8c051d0680975741547762e"},a("h2",{key:"1bb4b0035cc07304248c496c55077a88d43d57f5",id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[e]," ",this.focusedDay.getFullYear()),a("label",{key:"e740c878525a794eaac04b44c4770edaa5a1d780",htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),a("div",{key:"658b004a5ae3e50070a2683f92c68b924246a4e9",class:"duet-date__select"},a("select",{key:"3a99660e9c05ca78d5945b4a8dd581f3fcd64fff",id:this.monthSelectId,class:"duet-date__select--month",ref:n=>this.firstFocusableElement=this.monthSelectNode=n,onChange:this.handleMonthSelect},this.localization.monthNames.map(((n,t)=>a("option",{key:n,value:t,selected:t===e,disabled:!l(new Date(o,t,1),s?f(s):null,r?_(r):null)},n)))),a("div",{key:"6c9f19bbd85e2d6bd16e06b87507599a77f3b8e0",class:"duet-date__select-label","aria-hidden":"true"},a("span",{key:"94813adbb53c491d53045106a0e97e68ecc8a257"},this.localization.monthNamesShort[e]),a("nano-icon",{key:"d6d867b3732097902ac0b537d055ec0eb6dbb11f",name:"light/chevron-down"}))),a("label",{key:"a77adf78db5d8f2ec2998526c2d5d2882fb01a24",htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),a("div",{key:"fe5d77c1f3d5cb7bc8ba2befd232b001fcafa8da",class:"duet-date__select"},a("select",{key:"3585692273f5bdfdb58e1e265bb6b754708cb69a",id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect},function(n,t){const e=[];for(let i=n;i<=t;i++)e.push(i);return e}(u,p).map((n=>a("option",{key:n,selected:n===o},n)))),a("div",{key:"ce1137c980183ccffc195f83bdc5147de3f8194b",class:"duet-date__select-label","aria-hidden":"true"},a("span",{key:"a5d3e28fdbb1b4192f51da8009cce094558db3c0"},this.focusedDay.getFullYear()),a("nano-icon",{key:"0958bff2d269607480fb9475f4a58df147885f4b",name:"light/chevron-down"})))),a("div",{key:"d49585f3b292ba85ed013e52a5a042cb55601937",class:"duet-date__nav"},a("button",{key:"1f3f492d1965e6416a5fac52db0ecba7864b8df7",class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:c,type:"button"},a("nano-icon",{key:"abe59d338029675ad55a5e7faab8170ca2c2af2f",name:"light/chevron-left"}),a("span",{key:"7d59fa5d95085c6d66d93f95c953e9a2f74b8a5f",class:"duet-date__vhidden"},this.localization.prevMonthLabel)),a("button",{key:"a895a7b901ca21fa32710c3a187ce263cf105908",class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},a("nano-icon",{key:"b8737eb28e5ad5873f40523a557745a338aa5277",name:"light/chevron-right"}),a("span",{key:"2c98c7be89ce30939c647f7faea1c531fa0d38a9",class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),a("div",{key:"42284a65a7e2bb5302cd75a61f19a691ea1236bd"},a(C,{key:"d548838275eecb1a2dff47851e9fd57c9f49f691",selectedDate:n,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:s,max:r,isDateDisabled:this.isDateDisabled}))))))}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};I.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--active-color:var(--nano-color-primary-1000);--active-text-color:var(--nano-color-base-0);--inactive-color:var(--nano-color-neutral-300);display:block;font-size:16px;background:var(--nano-color-neutral-50)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{min-inline-size:290px;padding:var(--nano-spacing-md);position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center;padding:0 0 3px}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:not(.is-disabled):active{background:color-mix(in srgb, var(--active-color), black 20%);color:var(--active-text-color)}.duet-date__day:focus-visible{outline:var(--nano-focus-ring);outline-offset:-1px;z-index:2}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.8;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--nano-spacing-md);inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus-visible,.duet-date__next:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__prev:active,.duet-date__next:active{background:color-mix(in srgb, var(--inactive-color), black 20%)}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.7}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select:focus-visible:focus+.duet-date__select-label{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__select-label{align-items:center;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';let M=0;const F=class{nativeInput;inputId="nano-input-"+M++;didBlurAfterEdit=!1;rtl=!1;mo;charCount=0;hasRendered=!1;pickerDropdown;picker;pickerCloseBtn;_nativeInputWrap;get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(n){this._nativeInputWrap!==n&&(this._nativeInputWrap=n,this.setDataListOpts())}constructor(e){n(this,e),this.nanoInput=t(this,"nanoInput",7),this.nanoChange=t(this,"nanoChange",7),this.nanoBlur=t(this,"nanoBlur",7),this.nanoFocus=t(this,"nanoFocus",7),this.nanoDidLoad=t(this,"nanoDidLoad",7),this.nanoDidUnload=t(this,"nanoDidUnload",7),this.nanoValidate=t(this,"nanoValidate",7),this.handleBlur=this.handleBlur.bind(this)}hasFocus=!1;hasLabelSlot=!1;hasHelperSlot=!1;hasHelperEndSlot=!1;errorMessage="";datalist=null;setDataListOpts(){this.datalist&&(this.datalist.dropDownConfig={distance:10,...this.datalist.dropDownConfig||{},skidding:-1,tetherTo:this.nativeInputWrap})}get el(){return e(this)}get invalid(){return this._invalid}_invalid=null;get validityMessage(){return this.nativeInput?this.nativeInput.validationMessage:""}accept;autocapitalise="none";autocomplete="off";autocorrect="off";autofocus=!1;clearable=!1;clearOnEdit;debounce=0;debounceChanged(){this.nanoChange=k(this.nanoChange,this.debounce)}disabled=!1;inputmode;validateOn="submitThenDirty";showInlineError=!0;_label="";get label(){return this.required&&!this._label.endsWith("*")?this._label+" *":this._label}set label(n){this._label=n}alwaysShowPlaceholder=!1;hideLabel=!1;floatLabel=!1;max;maxlength;min;minlength;multiple;name=this.inputId;pattern;placeholder;readonly=!1;required=!1;spellcheck=!1;step;size;type="text";form;value="";valueChanged(){this.nanoChange.emit({value:this.value}),this.charCount=this.value?.length||0,"textarea"===this.type&&"auto"===this.resize&&(this.nativeInput.style.height="auto",this.value?.length&&(this.nativeInput.style.height=this.nativeInput.scrollHeight+"px")),"date"===this.type&&(this.isDateDisabled(this.valueAsDate)?this.nativeInput.setCustomValidity("Date selected is not available."):"Date selected is not available."===this.nativeInput.validationMessage&&this.nativeInput.setCustomValidity("")),requestAnimationFrame((()=>{"dirty"===this.validateOn&&this.validate()}))}get valueAsNumber(){return"textarea"===this.type?NaN:this.nativeInput?.valueAsNumber||NaN}get valueAsDate(){return"textarea"===this.type?null:new Date(this.value)||null}showCharCount=!1;shouldValidate(){this.hasRendered&&requestAnimationFrame((()=>{"dirty"===this.validateOn&&this.validate()}))}resize="auto";rows=2;showPicker=!0;isDateDisabled=()=>!1;initialPickerDate;closeAfterPicked=!0;pickerOptions={};nanoInput;nanoChange;nanoBlur;nanoFocus;nanoDidLoad;nanoDidUnload;nanoValidate;async reportValidity(n){return new Promise((t=>{n&&this.validate(),setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){this.nativeInput&&(this.nativeInput.focus(),this.nativeInput.click())}async select(){this.nativeInput&&this.nativeInput.select()}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(n){this.nativeInput&&(this.nativeInput.setCustomValidity(n),this.validate())}onReset(n){(this.form?document.querySelector("#"+this.form):this.el.closest("form"))&&n.target===this.el.closest("form")&&(this.value="")}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(n instanceof KeyboardEvent&&t.key){if("Tab"!==t.key)return;e=document.activeElement}else e=n instanceof FocusEvent?document.activeElement:n.target;g(this.el.tagName.toLowerCase(),e)!==this.el&&this.onBlur()}))}shouldClearOnEdit(){const{type:n,clearOnEdit:t}=this;return void 0===t?"password"===n:t}getValue(){return this.value||""}validate=n=>{"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.nativeInput.validity.valid?this._invalid=!1:(this.showInlineError&&(n&&n.preventDefault(),this.errorMessage=this.nativeInput.validationMessage),this._invalid=!0),this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:n})};onInput=n=>{const t=n.target;this.value=t?.value||"",this.nanoInput.emit(n)};onBlur=()=>{this.hasFocus=!1,this.focusChanged(),"dirty"===this.validateOn&&this.validate(),this.nanoBlur.emit()};onFocus=n=>{"date"===this.type&&n.preventDefault(),this.hasFocus=!0,this.focusChanged(),this.nanoFocus.emit()};onKeydown=n=>{"date"===this.type&&[" "].includes(n.key)&&(n.preventDefault(),this.showPicker&&this.pickerDropdown?.show()),this.shouldClearOnEdit()&&(this.didBlurAfterEdit&&this.hasValue()&&this.clearTextInput(),this.didBlurAfterEdit=!1)};clearTextInput=n=>{this.clearable&&!this.readonly&&!this.disabled&&n&&(n.preventDefault(),n.stopPropagation()),this.value="",this.nativeInput.value="";const t=new window.Event("change");this.nativeInput.dispatchEvent(t)};focusChanged(){!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()&&(this.didBlurAfterEdit=!0)}hasValue(){return this.getValue().length>0}slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.el,{childList:!0,subtree:!0})}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(`${o("nano-datalist")}:not([slot])`)}connectedCallback(){this.debounceChanged(),this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el})),this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver(),this.hasRendered=!0,this.autofocus&&setTimeout((()=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const n=this.getValue(),t=this.inputId+"-lbl",e=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"",o=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl="rtl"===this.el.ownerDocument.dir;const s={...(({el:n,floatLabel:t,label:e,alwaysShowPlaceholder:i,errorMessage:a,type:o,showInlineError:s,hasHelperSlot:r,hasLabelSlot:l,hideLabel:c,placeholder:d,maxlength:h,charCount:u,showCharCount:p,rtl:b,hasHelperEndSlot:f})=>({el:n,floatLabel:t,label:e,alwaysShowPlaceholder:i,errorMessage:a,type:o,showInlineError:s,hasHelperSlot:r,hasLabelSlot:l,hideLabel:c,placeholder:d,maxlength:h,charCount:u,showCharCount:p,rtl:b,hasHelperEndSlot:f}))(this),labelId:t,moreId:e,helperEndId:o,hasValue:this.hasValue(),controlId:this.inputId},r=(({clearable:n,readonly:t,disabled:e})=>({clearable:n,readonly:t,disabled:e,clearControl:this.clearable}))(this);return a(i,{key:"1601bf765681a833b22c05294a1c8d9b5c6be5ee","aria-disabled":this.disabled?"true":null,class:{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":!0===this._invalid,"is-valid":!1===this._invalid,"nano-input":!0}},a("div",{key:"3db99291d328de9684137597706b79e4f24b65e2",style:{width:"100%"}},a(x,{key:"df525275b5c35b9ae3fdc793766a9af759740076",...s,class:{"has-helper":this.hasHelperSlot,"has-error":!!this.errorMessage&&this.showInlineError&&!0===this._invalid}},a(w,{key:"8f25ff2340431b2ea29d5063877ad376ec229758",...r,onClearText:this.clearTextInput,control:this.el,ref:n=>this.nativeInputWrap=n,showInlineError:this.showInlineError,endSlot:this.showPicker&&"date"===this.type&&!this.readonly&&!this.disabled&&[a("nano-dropdown",{slot:"end",dialogTitle:"Choose a date",class:"input__date-dropdown",part:"date__dropdown",placement:"bottom-end",skidding:10,distance:12,ref:n=>this.pickerDropdown=n,onNanoAfterShow:()=>this.picker.setFocus(!0)},a("nano-icon-button",{label:"Open date picker",iconName:"light/calendar-days",slot:"trigger",class:"input__date-trigger"}),a("div",null,a("div",{class:"date-field__close-bar"},a("nano-icon-button",{label:"Close date picker",iconName:"light/xmark",class:"input__date-close",onClick:n=>{n.target.closest("nano-dropdown")?.hide()},ref:n=>this.pickerCloseBtn=n})),a("nano-date-picker",{part:"date__picker",ref:n=>{this.picker=n,this.picker.firstFocusEle=this.pickerCloseBtn},...this.pickerOptions,isDateDisabled:this.isDateDisabled,onNanoDatePicked:n=>{this.value=n.detail.value,this.pickerDropdown?.hide()},min:this.min,max:this.max,"is-modal":!0,selectedDate:this.value||this.initialPickerDate||void 0})))]},"textarea"!==this.type&&a("input",{key:"97734d0168a049af1b22e4517db5e58d25a75b13",id:this.inputId,class:"input__native-ctrl",ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+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:n,onInput:this.onInput,onClick:n=>n.preventDefault(),onChange:this.onInput,onFocus:this.onFocus,onBlur:this.handleBlur,onKeyDown:this.onKeydown,onInvalid:this.validate}),"textarea"===this.type&&a("textarea",{key:"b1780aa8cf51d8b7440825d461d89e8746fcd96d",rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":!0,input__resizable:"true"===this.resize},ref:n=>this.nativeInput=n,"aria-labelledby":t+" "+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:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate,onBlur:this.handleBlur}))),a("slot",{key:"fa333ee624b824af60a8a79d09720e231e8d455c"})))}static get watchers(){return{datalist:["setDataListOpts"],debounce:["debounceChanged"],value:["valueChanged"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],type:["shouldValidate"]}}};F.style='.sc-nano-input-h, *.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-input-h, *.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.sc-nano-input-h, *.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-input-h, *.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }slot-fb.sc-nano-input {\n  display: contents !important;\n}\n\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-input-h:not([disabled=false])::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\n}\n\n.form-ctrl.sc-nano-input {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n  display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.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 {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1em;\n  transform: translateY(-50%);\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.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 {\n  transform: none;\n  font-size: 0.75em;\n  opacity: 0.7;\n  inset-block-start: var(--padding-top);\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.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 {\n  opacity: 1;\n}\n\n.form-ctrl__label.sc-nano-input {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: var(--nano-font-size-2xs);\n  opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\n}\n\n.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 {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.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 {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n  block-size: 1em;\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-input .form-ctrl__more.sc-nano-input, .has-error.sc-nano-input .form-ctrl__more.sc-nano-input {\n  display: block;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--more-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false] .form-ctrl__helper.sc-nano-input, [disabled]).is-invalid.sc-nano-input-h .form-ctrl__helper.sc-nano-input {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-style: italic;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style) var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;\n}\n.form-ctrl__input.sc-nano-input:focus-visible, .form-ctrl__input.sc-nano-input:focus-within, .has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  border-color: var(--color-invalid);\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-input-h .form-ctrl__input-wrap.sc-nano-input {\n  align-items: start;\n}\n\n.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 {\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: center;\n  inline-size: auto;\n  padding-inline-end: var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.form-ctrl__clear-btn.sc-nano-input:empty, .form-ctrl__slot-end.sc-nano-input:empty, .form-ctrl__slot-start.sc-nano-input:empty, .form-ctrl__slot-value-end.sc-nano-input:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-input {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-input {\n  padding-inline-end: 0;\n}\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .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 > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-input-s > :not(slot-fb) {\n  padding-inline: unset;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .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 > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-input-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > * {\n  margin-inline: var(--padding-start) 0;\n}\n\n.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-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  padding-inline: 0 var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.form-ctrl__validation-icon.sc-nano-input {\n  padding-block: var(--padding-top) var(--padding-bottom);\n  padding-inline-end: var(--padding-end);\n  display: grid;\n  grid-template-areas: "overlay";\n}\n.sc-nano-input-h:not(.is-invalid .form-ctrl__validation-icon.sc-nano-input, .is-valid).sc-nano-input-h .form-ctrl__validation-icon.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-input, .form-ctrl__success-icon.sc-nano-input {\n  color: var(--color-valid);\n  opacity: 0;\n  transition: 0.3s ease-out opacity;\n  grid-area: overlay;\n}\n\n.is-valid.sc-nano-input-h .form-ctrl__success-icon.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-input {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-input-h .form-ctrl__error-icon.sc-nano-input {\n  opacity: 1;\n}\n\n.sc-nano-input-h {\n  \n  --placeholder-color: var(--nano-color-neutral-1000);\n  --padding-top: var(--nano-spacing-sm);\n  --padding-end: var(--nano-spacing-sm);\n  --padding-bottom: var(--nano-spacing-sm);\n  --padding-start: var(--nano-spacing-sm);\n  --color-invalid: var(--nano-color-danger-1100);\n  --color-valid: var(--nano-color-success-1000);\n  --input-font-size: var(--nano-font-size-sm);\n  --input-text-color: var(--nano-color-base-1000);\n  --input-border-width: 1px;\n  --input-border-color: var(--nano-color-neutral-300);\n  --input-border-radius: 0px;\n  --input-invalid-border-hint-width: 2px;\n  --input-border-style: solid var(--input-border-color);\n  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);\n  --input-bg-color: var(--nano-color-base-0);\n  --invalid-msg-color: var(--color-invalid);\n  --help-msg-color: var(--nano-color-base-1000);\n  --more-font-size: var(--nano-font-size-2xs);\n  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);\n  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-color-base-1000);\n  --label-font-size: var(--nano-font-size-xs);\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n[type=date].sc-nano-input-h .input__date-trigger.sc-nano-input {\n  color: var(--nano-color-primary-1200);\n}\n[type=date].sc-nano-input-h .input__date-dropdown.sc-nano-input {\n  --overflow: visible;\n}\n[type=date].sc-nano-input-h .input__date-close.sc-nano-input {\n  position: absolute;\n  inset-inline-end: 0;\n  inset-block: 0;\n  opacity: 0;\n  z-index: 2;\n}\n[type=date].sc-nano-input-h .input__date-close.sc-nano-input:focus {\n  opacity: 1;\n}\n@supports selector(::-moz-placeholder) {\n  [type=date].sc-nano-input-h .form-ctrl__input-wrap.sc-nano-input {\n    justify-content: end;\n    min-block-size: 2.5em;\n  }\n  [type=date].sc-nano-input-h .input__native-ctrl.sc-nano-input {\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n  [type=date].sc-nano-input-h .input__date-dropdown.sc-nano-input {\n    background-color: var(--nano-color-base-0);\n  }\n}\n\n.input__native-ctrl.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  appearance: none;\n  -webkit-rtl-ordering: logical;\n  padding-block: 0;\n  padding-inline: var(--padding-start) 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  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n  background-color: transparent;\n}\n.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 {\n  appearance: none;\n}\n.input__native-ctrl.sc-nano-input::-webkit-calendar-picker-indicator {\n  display: none;\n}\n.input__native-ctrl.sc-nano-input::-webkit-datetime-edit {\n  display: block;\n  padding: 0;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n  box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n  display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 1.5em;\n  padding-block: calc(var(--padding-top) - 3px) 0.5em;\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n  -webkit-user-select: none;\n          user-select: none;\n}';export{I as nano_date_picker,F as nano_input}

package/dist/nano-components/nano-details.entry.js

@@ -1,5 +1,4 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import{r as e,c as t,g as r,B as o,a as i}from"./index-6cc72cd9.js";import{d as s}from"./transitions-c09bd7f6.js";import{h as a}from"./renderer-4bc3e2dc.js";const n=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const d=n;const h=class{constructor(r){e(this,r);this.nanoOpened=t(this,"nanoOpened",7);this.nanoClosed=t(this,"nanoClosed",7);this.nanoAfterOpened=t(this,"nanoAfterOpened",7);this.nanoAfterClosed=t(this,"nanoAfterClosed",7)}hasStartSlot;hasEndSlot;mo;stateChanging=false;bodyEl;detailsEl;headerEl;contentEl;cacheHeight;get host(){return r(this)}label="";open=false;disabled=false;noHandle=false;iconRotation=90;useCacheHeight=false;nanoOpened;nanoClosed;nanoAfterOpened;nanoAfterClosed;toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}onKeyDown=e=>{if(this.stateChanging||this.disabled)return;switch(e.key){case"Enter":case" ":e.preventDefault();this.open=!this.open;break;case"ArrowUp":e.preventDefault();this.open=false;break;case"ArrowDown":e.preventDefault();this.open=true;break}};onMouseDown=e=>{e.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};hide(){const e=this.nanoClosed.emit(this.open);if(e.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));setTimeout((()=>{this.bodyEl.style.height="0px"}))}show(){const e=this.nanoOpened.emit();this.detailsEl.open=true;if(e.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!o.isBrowser)return;this.mo=new MutationObserver((e=>{if(this.stateChanging)return;for(const t of e){if(t.type==="attributes"&&t.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return a(i,{key:"ee6fb3abfaf15e07a18d399514e8447d63512ce4",class:"nano-details"},a("details",{key:"9478907ce6d6e8363c66df27e45e05a22705d38c",part:"base",ref:e=>this.detailsEl=e,class:{details:true,open:this.open,disabled:this.disabled}},a("summary",{key:"717ed7a624692dfce885436025e45cd011d9af5a",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:e=>this.headerEl=e,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?a("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},a("slot",{name:"icon-start"})):"",a("div",{key:"9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad",part:"label",class:"label"},this.label?this.label:a("slot",{name:"label"})),this.hasEndSlot?a("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},a("slot",{name:"icon-end"})):""),a("div",{key:"89311fc1194ca178843b5b751c48740b26689eaa",part:"body",class:"body",ref:e=>this.bodyEl=e,tabindex:"-1",role:"region","aria-labelledby":"header"},a("div",{key:"b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61",part:"content",ref:e=>this.contentEl=e,class:"content",id:"content"},a("slot",{key:"4735f3166e91d58152564a4f1b423e77900fd84f"})))))}static get watchers(){return{open:["toggleClick"]}}};h.style=d;export{h as nano_details};
-//# sourceMappingURL=nano-details.entry.js.map
+import{r as t,c as e,d as i}from"./index-CFYZ-ZOT.js";import{h as n}from"./renderer-LJzCFyMt.js";import{H as a}from"./slot-DBzVpliZ.js";const o=class{constructor(i){t(this,i),this.nanoOpen=e(this,"nanoOpen",7),this.nanoClose=e(this,"nanoClose",7),this.nanoAfterOpen=e(this,"nanoAfterOpen",7),this.nanoAfterClose=e(this,"nanoAfterClose",7)}mo;stateChanging=!1;slotCtrl=new a(this,"icon-start","icon-end");detailsEl;headerEl;_bodyEl;get bodyEl(){return this._bodyEl}set bodyEl(t){this.bodyEl&&this.bodyEl===this._bodyEl||(this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd),t.addEventListener("transitionend",this.handleTransitionEnd),this._bodyEl=t)}label="";open=!1;disabled=!1;size="medium";nanoOpen;nanoClose;nanoAfterOpen;nanoAfterClose;toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}onKeyDown=t=>{if(!this.stateChanging&&!this.disabled)switch(t.key){case"Enter":case" ":t.preventDefault(),this.open=!this.open;break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.open=!1;break;case"ArrowDown":case"ArrowRight":t.preventDefault(),this.open=!0}};onMouseDown=t=>{t.preventDefault(),this.headerEl.focus(),this.stateChanging||this.disabled||(this.open=!this.open)};handleTransitionEnd=t=>{"opacity"===t.propertyName&&t.composedPath().find((t=>t===this.bodyEl))&&(this.open?(this.nanoAfterOpen.emit(),requestAnimationFrame((()=>this.stateChanging=!1))):(this.detailsEl.open=!1,this.nanoAfterClose.emit(),requestAnimationFrame((()=>this.stateChanging=!1))))};hide(){if(this.nanoClose.emit(this.open).defaultPrevented)return this.open=!0,void(this.detailsEl.open=!0)}show(){const t=this.nanoOpen.emit();if(this.detailsEl.open=!0,t.defaultPrevented)return this.open=!1,void(this.detailsEl.open=!1)}attachMo(){!this.mo&&this.detailsEl&&(this.mo=new MutationObserver((t=>{if(!this.stateChanging)for(const e of t)"attributes"===e.type&&"open"===e.attributeName&&(this.open=this.detailsEl.open)})),this.mo.observe(this.detailsEl,{attributes:!0}))}componentDidLoad(){this.open&&this.detailsEl.setAttribute("open","true"),this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return n(i,{key:"dfe08b9736512e4f2e7e77b6e08f391e570f7d35",class:"nano-details"},n("details",{key:"aee47095a745ec92d97e3eb2a09f1765fbad251d",part:"base",ref:t=>this.detailsEl=t,class:{details:!0,disabled:this.disabled}},n("summary",{key:"b15a83c3386171f212a68cf456eb9ba6296917c2",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.slotCtrl.has("icon-start")&&n("span",{key:"c29db27dc0c74a8053c035421b0738eee1d72945",part:"icon icon--start",class:"icon icon--start"},n("slot",{key:"99381aa8452aac30498cfb27148c9e507e07989e",name:"icon-start"})),n("div",{key:"59068fae315b9cd0427987eb59e03f2cd219e45a",part:"label",class:"label"},this.label?this.label:n("slot",{name:"label"})),n("span",{key:"8eb4304e5c0da199ef6ad7a9730f92130072afd8",part:"icon icon--end",class:"icon icon--end"},n("slot",this.open?{name:"icon-collapse"}:{name:"icon-expand"}),n("slot",{key:"a8c2b9213b96787007a85faf64d42436729bc6e4",name:"icon-end"},!this.slotCtrl.has("icon-start")&&!this.slotCtrl.has("icon-end")&&!this.slotCtrl.has("icon-expand")&&!this.slotCtrl.has("icon-collapse")&&n("nano-icon",{key:"bfb3677f307b23b4947c80d7173b63ce51b83c70",class:"default-icon",name:"light/chevron-down"})))),n("div",{key:"dad8f7fbf316facfc2a505edf0041fb259d78d5b",part:"body",class:"body",ref:t=>this.bodyEl=t,role:"region","aria-labelledby":"header"},n("div",{key:"988b4a6201029002ab76004375955eaa87542ed9",class:"content-wrapper"},n("div",{key:"159483b132abfc6d7edf87771af0f3c2c0e077bd",part:"content",class:"content",id:"content"},n("slot",{key:"8bb9bbca225bca84bc1efd2c617372f490985bc1"}))))))}static get watchers(){return{open:["toggleClick"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";export{o as nano_details}

package/dist/nano-components/nano-dialog.entry.js

@@ -1,5 +1,4 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,c as o,g as e,a as i}from"./index-6cc72cd9.js";import{h as t}from"./renderer-4bc3e2dc.js";import{M as n}from"./modal-02828a39.js";import{l as r,u as s}from"./scroll-1afc6a4e.js";import{h as d}from"./slot-1cd90e53.js";import{C as l}from"./component-store-199a9fd8.js";import"./tabbable-44932eb7.js";import"./dom-fafdec9a.js";import"./throttle-df960210.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";const c=h;let f=0;const b=class{constructor(e){a(this,e);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.nanoInitialFocus=o(this,"nanoInitialFocus",7);this.nanoRequestClose=o(this,"nanoRequestClose",7)}componentId=`dialog-${++f}`;modal;willShow=false;willHide=false;originalTrigger;overlay;dialog;get panel(){return this._panel}set panel(a){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}a.addEventListener("transitionend",this.handleTransitionEnd);this._panel=a}_panel;get host(){return e(this)}noDismiss=false;hasFooter=false;hidden=true;showRibbon=true;open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}label;noHeader=false;noFooter=false;noUserDismiss=false;storeId;storeMethod="url-hash";hoist=false;handleHoistChange(){if("popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow){return}const a=this.nanoShow.emit();if(a.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.hidden=false;this.open=true;this.modal.activate();if(typeof this.dialog?.showPopover==="function"){this.dialog.showPopover()}r(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const a=this.nanoHide.emit();if(a.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}setTimeout((()=>{if(!this.open&&typeof this.dialog?.hidePopover==="function"){this.dialog.hidePopover()}s(this.host)}),300)}handleKeyDown=a=>{if(a.key==="Escape"){this.requestClose()}};requestClose=()=>{const a=this.nanoRequestClose.emit();if(!a.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};handleTransitionEnd=a=>{if(a.propertyName==="opacity"&&a.composedPath().find((a=>a===this.panel||a===this.overlay))){this.willShow=false;this.willHide=false;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit();if(!this.open){this.dialog.hidden=true;this.hidden=true}}};handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};stopVideos(){const a=Array.from(this.host.querySelectorAll("iframe,video"));a.forEach((a=>{if(a.tagName.toLowerCase()==="video")a.pause();else{const o=a.src;a.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){s(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return t(i,{key:"ecd2ed516be353ff67709a8091bb4bf3efe6f250",class:"nano-dialog"},t("div",{key:"c461f3cb97b4bec6409eddf83934cba04d3f649d",part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},t("div",{key:"e54d7cf6106039f4d6c19357576de9da241970ab",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),t("div",{key:"0e5faa8f6c97e584e1c3f2ffe079b7548466f5f1",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":!this.hidden?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:-1},t("div",{key:"3a51d64ddd77f662e2aaea65d5f7ddf0895fb334",class:"dialog__body-wrap"},!this.noHeader&&t("nano-sticker",{key:"43e5d67892f8afeeef5d6528407888175fcedd64"},t("header",{key:"229b41c3da0bdf7af0d2ff7670059d5213e80f6a",part:"header",class:"dialog__header"},t("span",{key:"2432a5424e4307610d9ea546f9fd95010ea15f4f",part:"title",class:"dialog__title",id:`${this.componentId}-title`},t("slot",{key:"fa310058f83f77addd68ebffe137dfe98dd21d02",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&t("nano-icon-button",{key:"628a2209cc13e3b2b97512debfa5c4495ab63ff3",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),t("div",{key:"081b6c433700ebfdd17919f007a2a15dc48a9510",part:"body",class:"dialog__body"},t("slot",{key:"704d5a44e1c47d7de9b67b5911bba385991e0c95"})),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&t("nano-sticker",{key:"908ca9562cd246cc520c396725b68026cd610a26",position:"bottom"},t("footer",{key:"9c5c2a8e3c8851b729453a1ac1a35cfeac240302",part:"footer",class:"dialog__footer"},t("slot",{key:"e2b48e7a7ef217c06ee6600f8b2000e3a0906a38",name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&t("button",{key:"f99cee27f04c252ace3fb9f4305013f10cce07fc",class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};b.style=c;export{b as nano_dialog};
-//# sourceMappingURL=nano-dialog.entry.js.map
+import{r as o,c as a,a as i,d as t}from"./index-CFYZ-ZOT.js";import{h as e}from"./renderer-LJzCFyMt.js";import{M as n}from"./modal-B50PWCuY.js";import{l as s,u as r}from"./scroll-BRRzrkAi.js";import{H as d}from"./slot-DBzVpliZ.js";import{C as l}from"./component-store-DqCSKpAK.js";import{g as h}from"./tabbable-BpHwrUYt.js";import"./dom-CF0Ycs9M.js";import"./throttle-C93FMm2Z.js";let c=0;const f=class{constructor(i){o(this,i),this.nanoShow=a(this,"nanoShow",7),this.nanoAfterShow=a(this,"nanoAfterShow",7),this.nanoHide=a(this,"nanoHide",7),this.nanoAfterHide=a(this,"nanoAfterHide",7),this.nanoInitialFocus=a(this,"nanoInitialFocus",7),this.nanoRequestClose=a(this,"nanoRequestClose",7)}componentId="dialog-"+ ++c;modal;willShow=!1;willHide=!1;originalTrigger;overlay;dialog;slotCtrl=new d(this,"footer");get panel(){return this._panel}set panel(o){this._panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd),o.addEventListener("transitionend",this.handleTransitionEnd),this._panel=o}_panel;get host(){return i(this)}noDismiss=!1;hidden=!0;showRibbon=!0;open=!1;handleOpenChange(){this.open?this.show():this.hide()}label;noHeader=!1;noUserDismiss=!1;storeId;storeMethod="url-hash";hoist=!1;handleHoistChange(){"popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host)||document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow)return;if(this.nanoShow.emit().defaultPrevented)return void(this.open=!1);this.dialog&&(this.dialog.hidden=!1),this.originalTrigger=document.activeElement,this.willShow=!0,this.hidden=!1,this.open=!0,this.modal.activate(),"function"==typeof this.dialog?.showPopover&&this.dialog.showPopover(),s(this.host);const o=this.host.querySelector("[autofocus]");o&&o.removeAttribute("autofocus"),this.host.addEventListener("nanoAfterShow",(()=>{this.nanoInitialFocus.emit().defaultPrevented||(o||h(this.host,!0,!0,!0)[0]||this.panel).focus({preventScroll:!0})}),{once:!0})}async hide(){if(this.willHide)return;if(this.nanoHide.emit().defaultPrevented)return void(this.open=!0);this.willHide=!0,this.open=!1,this.modal.deactivate(),this.stopVideos();const o=this.originalTrigger;o&&(o.setFocus&&"function"==typeof o.setFocus?o.setFocus():o.focus()),setTimeout((()=>{this.open||"function"!=typeof this.dialog?.hidePopover||this.dialog.hidePopover(),r(this.host)}),300)}handleKeyDown=o=>{"Escape"===o.key&&this.requestClose()};requestClose=()=>{this.nanoRequestClose.emit().defaultPrevented||this.noUserDismiss?(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250)):this.hide()};handleTransitionEnd=o=>{"opacity"===o.propertyName&&o.composedPath().find((o=>o===this.panel||o===this.overlay))&&(this.willShow=!1,this.willHide=!1,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open||(this.dialog.hidden=!0,this.hidden=!0))};stopVideos(){Array.from(this.host.querySelectorAll("iframe,video")).forEach((o=>{"video"===o.tagName.toLowerCase()?o.pause():o.src=o.src}))}connectedCallback(){this.handleHoistChange(),this.modal=new n(this.host)}componentWillLoad(){this.storeId&&l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open,this.open&&(this.show(),this.nanoAfterShow.emit())}disconnectedCallback(){r(this.host),this.panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"40e8bc877fd5b34bbc02b9ab28a331d6bf81415a",class:"nano-dialog"},e("div",{key:"3d8c4f2b68831a42039e597d532e2efe680082df",part:"base",class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.slotCtrl.has("footer"),"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:o=>this.dialog=o,popover:"manual"},e("div",{key:"48ec09fb5c08830fd9f4f54e528ce47d16dcf60e",part:"overlay",class:"dialog__overlay",ref:o=>this.overlay=o,onClick:this.requestClose}),e("div",{key:"9b28aef25fc3054e329e87293e1f24b1f7bd4f63",ref:o=>this.panel=o,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.hidden?"true":"false","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:-1},e("div",{key:"a25853d8c1d11e52235d6d9300cc39e529b3306f",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"111ee49da4468e834046ecef442873d7956a9a8f"},e("header",{key:"5f40b8920bd3b7ddac34d08593752cdc58a64f4f",part:"header",class:"dialog__header"},e("span",{key:"2f35793fb4c9009db7321c27feed4448c5a67ada",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"0b5de133cf8f63237cccafb96fbe635c82bdf8fb",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"d517fbc641ba1e35040f08e1ba53b56d2e2f1fcd",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"d09658d8fa0c306068e4ccf77dbae233e345a648",part:"body",class:"dialog__body"},e("slot",{key:"46ef0d9c1ca1a136e15baa859a19b7e46e467d3c"})),this.slotCtrl.has("footer")&&e("nano-sticker",{key:"86dc8c994c6e3d3f7677ce9c032a3a1b9433a5e3",position:"bottom"},e("footer",{key:"6876b4a53b64469170ee81c6d442e217c844596f",part:"footer",class:"dialog__footer"},e("slot",{key:"faff1e531b53fc1895ade69bcdf8360ceedfa619",name:"footer"})))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-neutral-75);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";export{f as nano_dialog}

package/dist/nano-components/nano-dropdown_2.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{r as t,c as i,a as o,d as e}from"./index-CFYZ-ZOT.js";import{f as n,g as s}from"./active-element-C1pBwzyj.js";import{P as a}from"./popover-D1cBIHdr.js";import{a as r,g as h}from"./tabbable-BpHwrUYt.js";import{t as d,h as l}from"./renderer-LJzCFyMt.js";import{g as p}from"./dom-CF0Ycs9M.js";import{g as c}from"./slot-DBzVpliZ.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," "].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," "].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"dd4615946390485d5ad05ff0fbf3714474c38b9b",class:"nano-dropdown"},l("div",{key:"9a60642705315c41efaad525f087397b458caf2a",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"861f59e5d50c956d53ce75d16ca5430bfb339d26",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"55e3a353ffd07ca586468bbc213d415484e4427f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"3ac2f6fde7117cf7421ac53e1786c4da59fd4e6c",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"ff5d8d1248c1434aad2c8f042f208ff3d418f1a4",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0},this.dialogTitle&&l("span",{key:"e71c3b8e09d6b8cf359470872a70da8794a221db",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"a9349e44064f7bbd4b32b3658c203575fe39c804"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:var(--nano-spacing-sm) 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l1);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const f=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this._hasFocus=!0,this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"f3908b74fc21b630402f06fac95a75f5a6b2ff27",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"451b5fb6151135ab4cb73d9141086be43d9eaf93",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"37f40b06d1dc66c46130468c3de79dfeeb38c29c",onSlotchange:this.handleSlotContent})))}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,f as nano_menu}

package/dist/nano-components/nano-field-validator.entry.js

@@ -1,5 +1,4 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,g as s,a as e}from"./index-6cc72cd9.js";import{c as a}from"./index-f5f7b950.js";import{t as h,h as n}from"./renderer-4bc3e2dc.js";const r=class{constructor(s){t(this,s);this.nanoPayloadChange=i(this,"nanoPayloadChange",7);this.nanoSubmit=i(this,"nanoSubmit",7);this.nanoInvalid=i(this,"nanoInvalid",7)}get host(){return s(this)}submitted=false;userForm;userFormChange(){if(this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(!t)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}_activeForm;mo;allFields=[];nanoFields;plainFields;nanoFieldSelector=`\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;hasSetStore=false;internalValidate=false;validateOn="submitThenDirty";validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName.toLowerCase()===h("nano-checkbox")){const i=t.closest(h("nano-checkbox-group"));if(i)i.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}scrollToInvalid=true;get dirty(){return this._dirty}_dirty=false;get valid(){return this._valid}_valid;get store(){return this._store}_store;get payload(){return this._store?.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e;let a;if(s){if(i.validationMessage){e=i;s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage;this.internalValidate=true;if(s.valid&&!e.checkValidity())s.valid=false;this.internalValidate=false}else if(i.validityMessage){a=i;s.validityMessage=a.validityMessage.length?a.validityMessage:a.validityMessage;if(s.valid&&a.invalid)s.valid=false}if(!s.fields.find((t=>t===i)))s.fields.push(i)}let h;let n;if(i.checkValidity){e=i;this.internalValidate=true;h=e.checkValidity();this.internalValidate=false;n=e.validationMessage}else{a=i;h=!a.invalid;n=a.validityMessage}t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:false,valid:h,validityMessage:n})}));return t}extraFieldSelector="input, select, textarea";validation;async setStore(t){this.hasSetStore=true;Object.entries(t).forEach((([t,i])=>{this.store.state[t]=i}))}async setCustomValidity(t,i){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s)await this.setFieldError(s,i)}))).finally((()=>{this.scrollToFirstInvalid(i)}))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}async scrollToFirstInvalid(t=true){if(!t&&!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}nanoPayloadChange;nanoSubmit;nanoInvalid;attachSlotObserver(){if(this.mo)return;const t=this.mo=new MutationObserver((t=>{const i=this.host.querySelector("form");if(i&&i!==this.activeForm)this.activeForm=i;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));let i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length));i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length));if(![...t,...i].filter((t=>!this.allFields.includes(t))).length)return;this.nanoFields=t;this.plainFields=i;this.allFields=[...t,...i];this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields,true);this.nanoPayloadChange.emit(this._store.state)}storeToFields(t){t.forEach((t=>{const i=this.getName(t);if(!i.length||typeof this._store.state[i]==="undefined")return;if(t.tagName.toLowerCase()===h("nano-checkbox")||["radio","checkbox"].includes(t.type)){const s=this.allFields.filter((i=>this.getName(t)===this.getName(i)));if(s[0].type==="radio"||s[0].type==="segment"||s[0].type==="segment-pill"){s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}else if(Array.isArray(this._store.state[i])){s.forEach((t=>{if(this._store.state[i]?.includes(t.value))t.checked=true;else t.checked=false}))}else{s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}return}if(t.tagName.toLowerCase()===h("nano-file-upload")){const s=t;if(!s.files?.length)s.files=this._store.state[i];return}t.value=this._store.state[i]}))}getValidityTarget(t){let i=t;if(t.tagName.toLowerCase()===h("nano-checkbox")){const s=t.closest(h("nano-checkbox-group"));i=s||t}return i}fieldsToStore(t,i=false){t.forEach((t=>{const s=this.getName(t);if(!s.length)return;if(!!this._store.state[s]&&this.hasSetStore&&i){return}if(t.tagName.toLowerCase()===h("nano-checkbox")||["radio","checkbox"].includes(t.type)){const i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)this._store.state[s]=i.value}else if(this.allFields.filter((t=>this.getName(t)===s&&(t.tagName.toLowerCase()===h("nano-checkbox")||t.type==="checkbox"))).length>1){const t=Array.isArray(this._store.state[s])?this._store.state[s]:[];if(i.checked){if(!this._store.state[s]?.includes(i.value)){this._store.state[s]=[...t,i.value]}}else{this._store.state[s]=t.filter((t=>t!==i.value))}}else{if(i.checked)this._store.state[s]=i.value;else this._store.state[s]=""}return}if(t.tagName.toLowerCase()===h("nano-file-upload")){const i=t;if(!this.fileStateEqual(s,i))this._store.state[s]=i.files;return}this._store.state[s]=t.value}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);if(!s)return;await Promise.all(Object.entries(s).map((async([t,i])=>i.fields.map((async s=>{const e=this.allFields.find((t=>this.getName(t)===s));const a=this.getValidityTarget(e);if((a.validityMessage||a.validationMessage)===t&&i.valid){await this.setFieldError(a,"")}else if(!i.valid){await this.setFieldError(a,t)}})))))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t;await this.validate(i,s)}),undefined)}async setFieldError(t,i){const s=this.getValidityTarget(t);if(s["showError"]){await s.showError(i)}else if(s["setError"])await s.setError(i);else s.setCustomValidity(i)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s&&(s.tagName.toLowerCase()===h("nano-checkbox")||["radio","checkbox"].includes(s.type))){this.storeToFields([s])}else if(s&&(s.tagName.toLowerCase()===h("nano-file-upload")&&!this.fileStateEqual(t,s)||s.tagName.toLowerCase()!==h("nano-file-upload")&&s.value!==i)){this.storeToFields([s])}if(this.validateOn==="dirty"&&this.dirty){this.internalValidate=true;await this.validateAllFields();this._valid=this.activeForm.checkValidity();this.internalValidate=false}this.nanoPayloadChange.emit(this._store.state)};handleFieldChange(t){if(!this.nanoFields?.includes(t.target))return;this._dirty=true;this.fieldsToStore([t.target])}handlePlainFieldChange(t){if(!this.plainFields.includes(t.target))return;this.fieldsToStore([t.target])}handleFormInvalid=async t=>{if(!this.plainFields.includes(t.target)){t.preventDefault()}this._valid=false;if(this.internalValidate)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this.validateOn==="submit"){if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid(false);this.nanoInvalid.emit()};async handleSubmit(t){t.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid(false);return}this.submitForm()}connectedCallback(){this.userForm=this.host.querySelector("form");this._store=a({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields();this.attachSlotObserver();this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return n(e,{key:"0ef73112ee49ff435479e13de36f9097b501eb37",class:"nano-field-validator"},this.userForm&&n("slot",{key:"f95060fd93124376d66412b53c51f529680ed2c8"}),!this.userForm&&n("form",{key:"05494f5dfdba499b092d12f39a87ebbabd402ea4",ref:t=>this.activeForm=t},n("slot",{key:"bbf842a53b0945e07798dbce9bb928ee34045a63"})))}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{r as nano_field_validator};
-//# sourceMappingURL=nano-field-validator.entry.js.map
+import{r as t,c as i,a as s,B as e,d as h}from"./index-CFYZ-ZOT.js";import{c as a}from"./index-DxKBolVo.js";import{t as n,h as o}from"./renderer-LJzCFyMt.js";const r=class{constructor(s){t(this,s),this.nanoPayloadChange=i(this,"nanoPayloadChange",7),this.nanoSubmit=i(this,"nanoSubmit",7),this.nanoInvalid=i(this,"nanoInvalid",7)}get host(){return s(this)}submitted=!1;userForm;userFormChange(){this.userForm&&(this.activeForm=this.userForm)}get activeForm(){return this._activeForm}set activeForm(t){t&&(this._activeForm&&this._activeForm.removeEventListener("invalid",this.handleFormInvalid,!0),t.addEventListener("invalid",this.handleFormInvalid,!0),this._activeForm=t)}_activeForm;mo;allFields=[];nanoFields;plainFields;nanoFieldSelector="\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  ";hasSetStore=!1;internalValidate=!1;validateOn="submitThenDirty";validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName.toLowerCase()===n("nano-checkbox")){const i=t.closest(n("nano-checkbox-group"));i&&(i.validateOn=this.validateOn)}else t.validateOn=this.validateOn}))}scrollToInvalid=!0;get dirty(){return this._dirty}_dirty=!1;get valid(){return this._valid}_valid;get store(){return this._store}_store;get payload(){return this._store?.state}get showValidation(){return"dirty"===this.validateOn&&this.dirty||this.submitted}get validationState(){const t=[];return this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e,h,a,n;s&&(i.validationMessage?(e=i,s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage,this.internalValidate=!0,s.valid&&!e.checkValidity()&&(s.valid=!1),this.internalValidate=!1):i.validityMessage&&(h=i,s.validityMessage=h.validityMessage,s.valid&&h.invalid&&(s.valid=!1)),s.fields.find((t=>t===i))||s.fields.push(i)),i.checkValidity?(e=i,this.internalValidate=!0,a=e.checkValidity(),this.internalValidate=!1,n=e.validationMessage):(h=i,a=!h.invalid,n=h.validityMessage),t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:!1,valid:a,validityMessage:n})})),t}extraFieldSelector="input, select, textarea";validation;async setStore(t){this.hasSetStore=!0,Object.entries(t).forEach((([t,i])=>{this.store.state[t]=i}))}async setCustomValidity(t,i){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));s&&await this.setFieldError(s,i)}))).finally((()=>{this.scrollToFirstInvalid(i)}))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}async scrollToFirstInvalid(t=!0){(t||this.scrollToInvalid)&&setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));t&&t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}nanoPayloadChange;nanoSubmit;nanoInvalid;attachSlotObserver(){this.mo||e.isServer||(this.mo=new MutationObserver((()=>{const t=this.host.querySelector("form");t&&t!==this.activeForm&&(this.activeForm=t),this.setupFields()}))).observe(this.host,{childList:!0,attributes:!0,attributeFilter:["name"],subtree:!0})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector)),i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length)),i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length)),[...t,...i].filter((t=>!this.allFields.includes(t))).length&&(this.nanoFields=t,this.plainFields=i,this.allFields=[...t,...i],this.storeToFields(this.allFields),this.validateOnChange(),this.fieldsToStore(this.allFields,!0),this.nanoPayloadChange.emit(this._store.state))}storeToFields(t){t.forEach((t=>{const i=this.getName(t);if(i.length&&void 0!==this._store.state[i])if(t.tagName.toLowerCase()===n("nano-checkbox")||["radio","checkbox"].includes(t.type)){const s=this.allFields.filter((i=>this.getName(t)===this.getName(i)));"radio"===s[0].type||"segment"===s[0].type?s.forEach((t=>{t.checked=this._store.state[i]===t.value})):Array.isArray(this._store.state[i])?s.forEach((t=>{t.checked=!!this._store.state[i]?.includes(t.value)})):s.forEach((t=>{t.checked=this._store.state[i]===t.value}))}else if(t.tagName.toLowerCase()!==n("nano-file-upload"))t.value=this._store.state[i];else{const s=t;s.files?.length||(s.files=this._store.state[i])}}))}getValidityTarget(t){let i=t;return t.tagName.toLowerCase()===n("nano-checkbox")&&(i=t.closest(n("nano-checkbox-group"))||t),i}fieldsToStore(t,i=!1){t.forEach((t=>{const s=this.getName(t);if(s.length&&!(this._store.state[s]&&this.hasSetStore&&i))if(t.tagName.toLowerCase()===n("nano-checkbox")||["radio","checkbox"].includes(t.type)){const i=t;if("radio"===i.type||"segment"===i.type)i.checked&&(this._store.state[s]=i.value);else if(this.allFields.filter((t=>this.getName(t)===s&&(t.tagName.toLowerCase()===n("nano-checkbox")||"checkbox"===t.type))).length>1){const t=Array.isArray(this._store.state[s])?this._store.state[s]:[];i.checked?this._store.state[s]?.includes(i.value)||(this._store.state[s]=[...t,i.value]):this._store.state[s]=t.filter((t=>t!==i.value))}else this._store.state[s]=i.checked?i.value:""}else if(t.tagName.toLowerCase()!==n("nano-file-upload"))this._store.state[s]=t.value;else{const i=t;this.fileStateEqual(s,i)||(this._store.state[s]=i.files)}}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);s&&await Promise.all(Object.entries(s).map((async([t,i])=>i.fields.map((async s=>{const e=this.allFields.find((t=>this.getName(t)===s)),h=this.getValidityTarget(e);(h.validityMessage||h.validationMessage)===t&&i.valid?await this.setFieldError(h,""):i.valid||await this.setFieldError(h,t)})))))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t,await this.validate(i,s)}),void 0)}async setFieldError(t,i){const s=this.getValidityTarget(t);s.showError?await s.showError(i):s.setError?await s.setError(i):s.setCustomValidity(i)}submitForm(){this.nanoSubmit.emit().defaultPrevented||this.activeForm.submit()}handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));(s&&(s.tagName.toLowerCase()===n("nano-checkbox")||["radio","checkbox"].includes(s.type))||s&&(s.tagName.toLowerCase()===n("nano-file-upload")&&!this.fileStateEqual(t,s)||s.tagName.toLowerCase()!==n("nano-file-upload")&&s.value!==i))&&this.storeToFields([s]),"dirty"===this.validateOn&&this.dirty&&(this.internalValidate=!0,await this.validateAllFields(),this._valid=this.activeForm.checkValidity(),this.internalValidate=!1),this.nanoPayloadChange.emit(this._store.state)};handleFieldChange(t){this.nanoFields?.includes(t.target)&&(this._dirty=!0,this.fieldsToStore([t.target]))}handlePlainFieldChange(t){this.plainFields.includes(t.target)&&this.fieldsToStore([t.target])}handleFormInvalid=async t=>{this.plainFields.includes(t.target)||t.preventDefault(),this._valid=!1,this.internalValidate||("submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.submitted=!0,await this.validateAllFields(),this.internalValidate=!0,this._valid=this.activeForm.checkValidity(),this.internalValidate=!1,"submit"===this.validateOn&&this._valid?this.submitForm():(this.scrollToFirstInvalid(!1),this.nanoInvalid.emit()))};async handleSubmit(t){t.preventDefault(),"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.submitted=!0,await this.validateAllFields(),this.internalValidate=!0,this._valid=this.activeForm.checkValidity(),this.internalValidate=!1,this._valid?this.submitForm():this.scrollToFirstInvalid(!1)}connectedCallback(){this.userForm=this.host.querySelector("form:not(.sc-nano-field-validator)"),this._store=a({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields(),this.attachSlotObserver(),this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){this.mo&&this.mo.disconnect(),this._store.reset(),this.activeForm&&this.activeForm.removeEventListener("invalid",this.handleFormInvalid,!0)}render(){return o(h,{key:"b1951fc1c5a049a49106a5974e99d37282f0397d",class:"nano-field-validator"},this.userForm&&o("slot",{key:"1d90fc2ed42128f067aeb7b5b17a88865f77c556"}),!this.userForm&&o("form",{key:"46c933b7363a248de93550a576cbe121174ea68d",ref:t=>this.activeForm=t},o("slot",{key:"335fbe05634148c438a69a31e7f48debe80146bc"})))}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{r as nano_field_validator}

package/dist/nano-components/nano-file-upload.entry.js

@@ -1,5 +1,4 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import{r as o,c as i,g as a,a as n}from"./index-6cc72cd9.js";import{h as e}from"./renderer-4bc3e2dc.js";const l='.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:"";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}';const t=l;let s=0;let r=()=>new DataTransfer;try{r()}catch{try{r=()=>new ClipboardEvent("").clipboardData;r()}catch{r=null}}const d=class{constructor(a){o(this,a);this.nanoChange=i(this,"nanoChange",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoValidate=i(this,"nanoValidate",7)}inputEl;publicInputEl;mo;fileInputId=`nano-file-upload-${s++}`;canChangeFileList=!!r;removeFiles=[];hasHelperSlot;hasLabelSlot;errorMessage="";isDragging=false;fileList=[];fileListChange(){if(this.canChangeFileList){this.publicInputEl.value="";this.inputEl.files=this.arrToFileList(this.fileList.map((o=>o.file)));setTimeout((()=>{this.nanoChange.emit({value:this.value,files:this.files})}),20)}}hasFocus;get host(){return a(this)}name;accept;capture;maxFileSize=1;maxFiles=1;label;placeholder="Choose a file...";hideLabel=false;required=false;disabled=false;clearInput=false;showInlineError=true;validateOn="submit";form;shouldValidate(){if(!this.inputEl)return;this.validate();requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.showInlineValidation()}))}_invalid=false;get invalid(){return this._invalid}get validityMessage(){if(!this.inputEl)return"";return this.inputEl.validationMessage}get files(){return this.inputEl?Array.from(this.inputEl.files).map((o=>{o.objectURL=URL.createObjectURL(o);return o})):[]}set files(o){this.addNewFiles(this.arrToFileList(o))}get value(){return this.inputEl?this.inputEl.value:""}set value(o){if(o===""&&this.inputEl){this.fileList=[];this.inputEl.value=""}}nanoChange;nanoFocus;nanoBlur;nanoValidate;async reportValidity(o){if(o){this.validate();this.showInlineValidation()}return{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){if(this.inputEl)this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(o){if(this.inputEl){this.inputEl.setCustomValidity(o);this.validate();this.showInlineValidation()}}globalClickHandler(o){if(!this.hasFocus)return;if(o.composedPath().every((o=>o!==this.host)))this.onBlur()}globalKeydownHandler(o){if(!this.hasFocus||o.key!=="Tab")return;if(o.target!==this.inputEl)this.onBlur()}onReset(o){const i=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!i||o.target!==this.host.closest("form"))return;this.value=""}onClearClick=()=>{this.value=""};onBlur=()=>{this.hasFocus=false;this.validate();if(this.validateOn==="dirty")this.showInlineValidation();this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};arrToFileList(o){const i=r();for(let a=0,n=o.length;a<n;a++)i.items.add(o[a]);return i.files}checkFileSize(o){return o/1e6<=this.maxFileSize}checkFileType(o){if(!this.accept)return true;return this.accept.match(o)&&this.accept.match(o).length>0}validate=()=>{this.errorMessage="";this.inputEl.setCustomValidity("");let o;if(!this.inputEl.validity.valid){o=this.inputEl.validationMessage}else{this.fileList.forEach((i=>{o=null;if(!this.checkFileSize(i.file.size)){o="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb"}else if(!this.checkFileType(i.file.type))o=`File type is not allowed (${this.accept})`;i.validationMessage=o;i.valid=!o}));if(this.fileList.length>this.maxFiles)o=`Maxinum number of files exceeded (${this.maxFiles})`}if(o)this.inputEl.setCustomValidity(o)};showInlineValidation(o){if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.errorMessage="";if(!this.inputEl.validity.valid){this.errorMessage=this.inputEl.validationMessage;this._invalid=true}this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:o})}slotChangeObserver(){if(this.mo)this.mo.disconnect();const o=this.mo=new MutationObserver((()=>this.processSlottedContent()));o.observe(this.host,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(o){const i=Array.from(o).map((o=>({file:o,location:URL.createObjectURL(o),valid:true,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const o=i.filter((o=>!this.fileList.find((i=>i.file.name===o.file.name))));this.fileList=[...this.fileList,...o]}else this.fileList=i}onInvalid=o=>{if(this.showInlineError)o.preventDefault();this.validate();this.showInlineValidation(o)};onFileChoose=o=>{const i=o.target.files;if(i&&i.length)this.addNewFiles(o.target.files)};onFileRemoveFileClick=(o,i)=>{if(!this.canChangeFileList)return;this.removeFiles.push(i);o.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active")};onFileRemoveAnim=()=>{if(!this.canChangeFileList||!this.removeFiles.length)return;this.fileList=this.fileList.filter((o=>!this.removeFiles.find((i=>i===o))));try{this.removeFiles.forEach((o=>o.location?URL.revokeObjectURL(o.location):""))}catch(o){console.error(o)}this.removeFiles=[]};onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};onDragStop=o=>{o.preventDefault();o.stopPropagation();this.isDragging=false};onDragStart=o=>{o.preventDefault();o.stopPropagation();this.isDragging=true};onDrop=o=>{this.onDragStop(o);if(o.dataTransfer.files&&o.dataTransfer.files.length)this.addNewFiles(o.dataTransfer.files)};disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}FileUploadInput=(o,i)=>{const a=this.fileInputId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[e("div",{class:"file-upload__"+o+"-wrap"},e("label",{class:`file-upload__`+o,htmlFor:this.fileInputId,id:a,onDrop:o=>{this.onDrop(o);this.onDragStop(o)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},(!!this.label||this.hasLabelSlot&&o!=="drop")&&e("div",{class:`file-upload__label ${this.hideLabel?"visually-hide":""}`},!!this.label&&!!this.label.length?this.label:"",!this.label&&this.hasLabelSlot&&o!=="drop"&&e("slot",{name:"label"})),o==="drop"&&e("div",{class:"file-upload__drop-area"},e("div",null,this.hasLabelSlot&&e("slot",{name:"label"})),e("div",null,"Drag and drop or ",e("span",null,"browse"))),o==="btn"&&e("div",{class:`file-upload__button button--keyline button--icon-start ${this.hasFocus?"button--focus":""}`},e("div",{class:`file-upload__btn-content`},e("nano-icon",{name:"regular/cloud-arrow-up"}),e("span",null,this.fileList.length?this.fileList[0].file.name:this.placeholder),!!this.value&&this.clearInput&&!this.disabled&&e("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"-1",onClick:this.onClearClick},e("nano-icon",{name:"light/xmark"})))),e("input",{"aria-labelledby":a+" "+n+" "+i,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?undefined:this.name,form:this.form,ref:o=>{if(this.canChangeFileList){this.publicInputEl=o;return}this.inputEl=o},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),e("input",{name:!this.canChangeFileList?undefined:this.name,form:this.form,ref:o=>{if(!this.canChangeFileList)return;this.inputEl=o},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:true,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?e("div",{class:"file-upload__more",id:n},this.showInlineError&&!!this.errorMessage.length?e("div",{class:"file-upload__error"},this.errorMessage):"",e("div",{class:"file-upload__help"},e("slot",{name:"helper"}))):""]};button=()=>this.FileUploadInput("btn");dropArea=()=>{const o=this.fileInputId+"-list";return[this.FileUploadInput("drop",o),e("output",{class:"file-upload__list-wrap",id:o},!!this.fileList&&this.fileList.length>0&&e("ul",{class:"file-upload__list list"},this.fileList.map((o=>e("li",{key:o.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:o=>this.onFileRemoveAnim()},e("span",{class:"list-title"},o.file.name),!o.valid&&e("nano-tooltip",{content:o.validationMessage,placement:"left"},e("nano-icon-button",{class:"list-button list-error",iconName:"light/triangle-exclamation",label:"File error"})),this.canChangeFileList&&e("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:o.location}),this.canChangeFileList&&e("nano-icon-button",{onClick:i=>this.onFileRemoveFileClick(i,o),class:"list-button list-button--remove",iconName:"light/xmark",label:"Remove file"}))))))]};render(){return e(n,{key:"1af0c1ae1d5c87a627b50cf9ab35599892043df2",class:"nano-file-upload"},e("div",{key:"52db999aa429cd6a5976976b25c4861e6b9aee1d",class:{"file-upload":true,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":this._invalid}},this.maxFiles>1?e(this.dropArea,null):e(this.button,null)))}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"]}}};d.style=t;export{d as nano_file_upload};
-//# sourceMappingURL=nano-file-upload.entry.js.map
+import{r as o,c as i,a,d as n}from"./index-CFYZ-ZOT.js";import{h as l}from"./renderer-LJzCFyMt.js";let e=0,t=()=>new DataTransfer;try{t()}catch{try{t=()=>new ClipboardEvent("").clipboardData,t()}catch{t=null}}const s=class{constructor(a){o(this,a),this.nanoChange=i(this,"nanoChange",7),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoValidate=i(this,"nanoValidate",7)}inputEl;publicInputEl;mo;fileInputId="nano-file-upload-"+e++;canChangeFileList=!!t;removeFiles=[];hasHelperSlot;hasLabelSlot;errorMessage="";isDragging=!1;fileList=[];fileListChange(){this.canChangeFileList&&(this.publicInputEl.value="",this.inputEl.files=this.arrToFileList(this.fileList.map((o=>o.file))),setTimeout((()=>{this.nanoChange.emit({value:this.value,files:this.files})}),20))}hasFocus;get host(){return a(this)}name;accept;capture;maxFileSize=1;maxFiles=1;label;placeholder="Choose a file...";hideLabel=!1;required=!1;disabled=!1;clearInput=!1;showInlineError=!0;validateOn="submit";form;shouldValidate(){this.inputEl&&(this.validate(),requestAnimationFrame((()=>{"dirty"===this.validateOn&&this.showInlineValidation()})))}_invalid=!1;get invalid(){return this._invalid}get validityMessage(){return this.inputEl?this.inputEl.validationMessage:""}get files(){return this.inputEl?Array.from(this.inputEl.files).map((o=>(o.objectURL=URL.createObjectURL(o),o))):[]}set files(o){this.addNewFiles(this.arrToFileList(o))}get value(){return this.inputEl?this.inputEl.value:""}set value(o){""===o&&this.inputEl&&(this.fileList=[],this.inputEl.value="")}nanoChange;nanoFocus;nanoBlur;nanoValidate;async reportValidity(o){return o&&(this.validate(),this.showInlineValidation()),{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){this.inputEl&&this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(o){this.inputEl&&(this.inputEl.setCustomValidity(o),this.validate(),this.showInlineValidation())}globalClickHandler(o){this.hasFocus&&o.composedPath().every((o=>o!==this.host))&&this.onBlur()}globalKeydownHandler(o){this.hasFocus&&"Tab"===o.key&&o.target!==this.inputEl&&this.onBlur()}onReset(o){(this.form?document.querySelector("#"+this.form):this.host.closest("form"))&&o.target===this.host.closest("form")&&(this.value="")}onClearClick=()=>{this.value=""};onBlur=()=>{this.hasFocus=!1,this.validate(),"dirty"===this.validateOn&&this.showInlineValidation(),this.nanoBlur.emit()};onFocus=()=>{this.hasFocus=!0,this.nanoFocus.emit()};arrToFileList(o){const i=t();for(let a=0,n=o.length;a<n;a++)i.items.add(o[a]);return i.files}checkFileSize(o){return o/1e6<=this.maxFileSize}checkFileType(o){return!this.accept||this.accept.match(o)&&this.accept.match(o).length>0}validate=()=>{let o;this.errorMessage="",this.inputEl.setCustomValidity(""),this.inputEl.validity.valid?(this.fileList.forEach((i=>{o=null,this.checkFileSize(i.file.size)?this.checkFileType(i.file.type)||(o=`File type is not allowed (${this.accept})`):o="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb",i.validationMessage=o,i.valid=!o})),this.fileList.length>this.maxFiles&&(o=`Maxinum number of files exceeded (${this.maxFiles})`)):o=this.inputEl.validationMessage,o&&this.inputEl.setCustomValidity(o)};showInlineValidation(o){"submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this._invalid=!1,this.errorMessage="",this.inputEl.validity.valid||(this.errorMessage=this.inputEl.validationMessage,this._invalid=!0),this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:o})}slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]'),this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(o){const i=Array.from(o).map((o=>({file:o,location:URL.createObjectURL(o),valid:!0,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const o=i.filter((o=>!this.fileList.find((i=>i.file.name===o.file.name))));this.fileList=[...this.fileList,...o]}else this.fileList=i}onInvalid=o=>{this.showInlineError&&o.preventDefault(),this.validate(),this.showInlineValidation(o)};onFileChoose=o=>{const i=o.target.files;i&&i.length&&this.addNewFiles(o.target.files)};onFileRemoveFileClick=(o,i)=>{this.canChangeFileList&&(this.removeFiles.push(i),o.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active"))};onFileRemoveAnim=()=>{if(this.canChangeFileList&&this.removeFiles.length){this.fileList=this.fileList.filter((o=>!this.removeFiles.find((i=>i===o))));try{this.removeFiles.forEach((o=>o.location?URL.revokeObjectURL(o.location):""))}catch(o){console.error(o)}this.removeFiles=[]}};onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};onDragStop=o=>{o.preventDefault(),o.stopPropagation(),this.isDragging=!1};onDragStart=o=>{o.preventDefault(),o.stopPropagation(),this.isDragging=!0};onDrop=o=>{this.onDragStop(o),o.dataTransfer.files&&o.dataTransfer.files.length&&this.addNewFiles(o.dataTransfer.files)};disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}FileUploadInput=(o,i)=>{const a=this.fileInputId+"-lbl",n=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[l("div",{class:"file-upload__"+o+"-wrap"},l("label",{class:"file-upload__"+o,htmlFor:this.fileInputId,id:a,onDrop:o=>{this.onDrop(o),this.onDragStop(o)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},(!!this.label||this.hasLabelSlot&&"drop"!==o)&&l("div",{class:"file-upload__label "+(this.hideLabel?"visually-hide":"")},this.label&&this.label.length?this.label:"",!this.label&&this.hasLabelSlot&&"drop"!==o&&l("slot",{name:"label"})),"drop"===o&&l("div",{class:"file-upload__drop-area"},l("div",null,this.hasLabelSlot&&l("slot",{name:"label"})),l("div",null,"Drag and drop or ",l("span",null,"browse"))),"btn"===o&&l("div",{class:"file-upload__button button--keyline button--icon-start "+(this.hasFocus?"button--focus":"")},l("div",{class:"file-upload__btn-content"},l("nano-icon",{name:"regular/cloud-arrow-up"}),l("span",null,this.fileList.length?this.fileList[0].file.name:this.placeholder),!!this.value&&this.clearInput&&!this.disabled&&l("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"-1",onClick:this.onClearClick},l("nano-icon",{name:"light/xmark"})))),l("input",{"aria-labelledby":a+" "+n+" "+i,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?void 0:this.name,form:this.form,ref:o=>{this.canChangeFileList?this.publicInputEl=o:this.inputEl=o},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),l("input",{name:this.canChangeFileList?this.name:void 0,form:this.form,ref:o=>{this.canChangeFileList&&(this.inputEl=o)},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:!0,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?l("div",{class:"file-upload__more",id:n},this.showInlineError&&this.errorMessage.length?l("div",{class:"file-upload__error"},this.errorMessage):"",l("div",{class:"file-upload__help"},l("slot",{name:"helper"}))):""]};button=()=>this.FileUploadInput("btn");dropArea=()=>{const o=this.fileInputId+"-list";return[this.FileUploadInput("drop",o),l("output",{class:"file-upload__list-wrap",id:o},!!this.fileList&&this.fileList.length>0&&l("ul",{class:"file-upload__list list"},this.fileList.map((o=>l("li",{key:o.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:()=>this.onFileRemoveAnim()},l("span",{class:"list-title"},o.file.name),!o.valid&&l("nano-tooltip",{content:o.validationMessage,placement:"left"},l("nano-icon-button",{class:"list-button list-error",iconName:"light/triangle-exclamation",label:"File error"})),this.canChangeFileList&&l("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:o.location}),this.canChangeFileList&&l("nano-icon-button",{onClick:i=>this.onFileRemoveFileClick(i,o),class:"list-button list-button--remove",iconName:"light/xmark",label:"Remove file"}))))))]};render(){return l(n,{key:"2bd95bf5d3c725d84679a373eac2f87b491ae2bd",class:"nano-file-upload"},l("div",{key:"026b77c3165ea04d5ed9a2f8536fd5089ed3ee8e",class:{"file-upload":!0,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":this._invalid}},l(this.maxFiles>1?this.dropArea:this.button,null)))}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"]}}};s.style='.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:"";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled,.sc-nano-file-upload:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus,.button--focus).sc-nano-file-upload,.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}';export{s as nano_file_upload}

package/dist/nano-components/nano-footer.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import{r as n,a as e,h as a}from"./index-CFYZ-ZOT.js";import{a as o}from"./style-BrRDhFfF.js";const t=class{constructor(e){n(this,e)}get host(){return e(this)}componentWillLoad(){o(this.host.shadowRoot)}render(){return a("footer",{key:"6c5f9e943485a21b7c19a1c1173816151450a7a7",class:"footer"},a("div",{key:"4f412bbb7737f5f8225729e2109b688ccc800989",class:"upper"},a("div",{key:"dd53490055399eafe7599aca856dd0ca79ba21fb",class:"top"},a("div",{key:"c8103cf1bcd74ce025924fc975849573051368d0",class:"top-start"},a("slot",{key:"924b1f7d97a15e4afa0126f7c03fe525f97f92ba",name:"top-start_heading"}),a("slot",{key:"3feb30f6395b9acbdd670cd656321ea751a4e81a",name:"top-start_content"})),a("div",{key:"5dd035af59487992c2da47b7b61012da97cfeec4",class:"top-center"},a("slot",{key:"aecc20ee6792c8912cd330724af3a75cfcd487af",name:"top-center_heading"}),a("slot",{key:"f30e4dae00d45df2afb7a419daf875843ad61a50",name:"top-center_content"})),a("div",{key:"824feef5a5f50b461904096752bdb4aeefd84d99",class:"top-end"},a("slot",{key:"7f06ff962236e057b640460097881646e2d8b1b2",name:"top-end_heading"}),a("slot",{key:"5e2412c74e444c570f5ea46b756d2e3369f12215",name:"top-end_content"})))),a("div",{key:"77cb498fde6fb578e3c5a249ca6c3db5c88206d1",class:"lower nano-theme-dark"},a("div",{key:"7f2e8024df8f7470443d0048eefd8978d203f727",class:"middle"},a("div",{key:"18c334b18c07c0ee2416cb646c5f5287c091bdb3",class:"middle-start"},a("img",{key:"be83911db58e7a75566a2d495b843427a7d1fa0a",src:"/nano-assets/img/ont-logo-light.svg",alt:"Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.",height:"46"})),a("div",{key:"a7b84187146146325db5cb990d53650ebfaf5741",class:"middle-center"},a("a",{key:"d2edfbc2e1034a9378be6291bf290af6d0e36119",href:"https://x.com/nanopore",target:"_blank"},a("nano-icon",{key:"8e8cb317194b2dd9277599c38b525128d94d69c0",name:"brands/x-twitter",size:"large",ariaLabel:"X (formerly Twitter)"})),a("a",{key:"07091f28412bf31e853c5c51d6448631a7e47b33",href:"https://bsky.app/profile/nanoporetech.com",target:"_blank"},a("nano-icon",{key:"8e5f4e5b2d13ce77df193d4a38743d6225f667d6",name:"brands/bluesky",size:"large",ariaLabel:"Bluesky"})),a("a",{key:"2561aa967f77b1ac0618c02fe1e78c270d8f82f7",href:"https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig",target:"_blank"},a("nano-icon",{key:"27ac4933b66ff7027c3f45bc001d0e311055cf0a",name:"brands/youtube",size:"large",ariaLabel:"YouTube"})),a("a",{key:"2b46f3651b32439997c4f1020d89901bcf6679a8",href:"https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/",target:"_blank"},a("nano-icon",{key:"0f25dc9636ece933dbc00911d0e0c36735203666",name:"brands/facebook",size:"large",ariaLabel:"Facebook"})),a("a",{key:"541bef691993ace5b8c270e82d08984baace7964",href:"https://www.linkedin.com/company/oxford-nanopore-technologies",target:"_blank"},a("nano-icon",{key:"bb4a4104c3a39375d1f50c7c8aca1561a66d9c28",name:"brands/linkedin",size:"large",ariaLabel:"LinkedIn"})),a("a",{key:"4817a0798d5ab0586a20c40a14de73280ce749e3",href:"https://www.instagram.com/oxfordnanopore",target:"_blank"},a("nano-icon",{key:"dea3b9c4bc6100f73a3769999779ab4e6f343193",name:"brands/instagram",size:"large",ariaLabel:"Instagram"}))),a("div",{key:"151bbc03ca7c9fbdb14cf355dd4ff61c6fba1e36",class:"middle-end"},a("slot",{key:"241922e25dbe52e5a6e5b9b661c037f3faa004f5",name:"middle-end"}))),a("div",{key:"08489f7cb75832e26fe862987d19bbdc03b8ff23",class:"bottom"},a("div",{key:"1e2cfb25bbb0f6a60399b344f83a091677d848d7",class:"bottom-start"},a("slot",{key:"ce19389f907a75fb43a533a7ca200670b136ad86",name:"bottom-start"},a("p",{key:"5d6d5135e67276a81f290e91d7753b9b2b4964ce"},"© 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))),a("div",{key:"db091f94e130553a106a71071988b2c591a943ab",class:"bottom-end"},a("slot",{key:"6b6642608e571e9d1690de419727476b27e1514f",name:"bottom-end"})))))}};t.style=":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  background-color: var(--nano-color-base-rgb-1000);\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-base-0);\n  color: var(--nano-color-base-1000);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 912px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";export{t as nano_footer}