@nanoporetech-digital/components 1.13.21 → 1.15.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","_a","ClipboardEvent","clipboardData","_b","FileUpload","exports","class_1","hostRef","_this","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","nanoBlur","emit","onFocus","nanoFocus","ev","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","nanoValidate","isValid","originalEvent","onInvalid","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","onInputChange","nanoChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","name","tabindex","onClick","aria-labelledby","multiple","undefined","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","prototype","fileListChange","arrToFileList","shouldValidate","setTimeout","Object","defineProperty","Array","from","objectURL","URL","createObjectURL","val","reportValidity","validateFirst","invalid","setFocus","focus","getInputElement","Promise","resolve","showError","message","globalClickHandler","composedPath","every","node","host","globalKeydownHandler","i","len","items","add","match","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","querySelector","newFiles","findFile","__spreadArray","disconnectedCallback","componentDidLoad","componentWillLoad","render","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":"utDAAA,IAAMA,EAAgB,q/cCsBtB,IAAIC,EAAe,EAEnB,IAAIC,EAAkB,WAAM,OAAA,IAAIC,cAChC,IACED,IACA,MAAAE,GACA,IACEF,EAAkB,WAAM,OAAA,IAAIG,eAAe,IAAIC,eAC/CJ,IACA,MAAAK,GACAL,EAAkB,UAsBTM,EAAUC,EAAA,mBAAA,WALvB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,yKASUA,KAAAC,YAAc,oBAAoBb,IAClCY,KAAAE,oBAAsBb,EACtBW,KAAAG,YAAgC,GAI/BH,KAAAI,aAAuB,KACvBJ,KAAAK,WAAa,MACbL,KAAAM,SAA6B,GA8B9BN,KAAAO,YAAsB,EAGtBP,KAAAQ,SAAmB,EAMnBR,KAAAS,YAAsB,mBAGtBT,KAAAU,UAAsB,MAGtBV,KAAAW,SAAW,MAGMX,KAAAY,SAAW,MAI5BZ,KAAAa,WAAa,MAGIb,KAAAc,gBAAkB,KAGlBd,KAAAe,WACvB,SAiBOf,KAAAgB,SAAW,MAwGZhB,KAAAiB,aAAe,WACrBlB,EAAKmB,MAAQ,IAGPlB,KAAAmB,OAAS,WACfpB,EAAKqB,SAAW,MAChB,GAAIrB,EAAKgB,aAAe,QAAShB,EAAKsB,WACtCtB,EAAKuB,SAASC,QAGRvB,KAAAwB,QAAU,WAChBzB,EAAKqB,SAAW,KAChBrB,EAAK0B,UAAUF,QAmBTvB,KAAAqB,SAAW,SAACK,GAClB3B,EAAKK,aAAe,KACpBL,EAAK4B,QAAQC,kBAAkB,IAC/B,IAAIC,EAEJ,GAAI9B,EAAKgB,aAAe,kBAAmBhB,EAAKgB,WAAa,QAE7D,IAAKhB,EAAK4B,QAAQG,SAASC,MAAO,CAChC,GAAIhC,EAAKe,gBACPf,EAAKK,aAAeL,EAAK4B,QAAQK,sBAC9B,CACLjC,EAAKO,SAAS2B,SAAQ,SAACC,GACrBL,EAAQ,KACR,IAAK9B,EAAKoC,cAAcD,EAASE,KAAKC,MAAO,CAC3CR,EACE,gDACA9B,EAAKQ,YACL,UACG,IAAKR,EAAKuC,cAAcJ,EAASE,KAAKG,MAC3CV,EAAQ,6BAA6B9B,EAAKyC,OAAM,IAElD,IAAKzC,EAAKK,cAAgByB,EAAO9B,EAAKK,aAAeyB,EACrDK,EAASF,kBAAoBH,EAC7BK,EAASH,OAASF,KAEpB,GAAI9B,EAAKO,SAASmC,OAAS1C,EAAKS,SAC9BT,EAAKK,aAAe,qCAAqCL,EAAKS,SAAQ,IAG1E,KAAMT,EAAKK,aAAc,CACvBL,EAAKiB,SAAW,KAChBjB,EAAK4B,QAAQC,kBAAkB7B,EAAKK,kBAC/B,CACLL,EAAKiB,SAAW,MAGlBjB,EAAK2C,aAAanB,KAAK,CACrBoB,SAAU5C,EAAKiB,SACfZ,aAAcL,EAAK4B,QAAQK,kBAC3BY,cAAelB,KAyCX1B,KAAA6C,UAAY,SAACnB,GACnB3B,EAAKsB,SAASK,GACd,GAAI3B,EAAKe,gBAAiBY,EAAGoB,kBAGvB9C,KAAA+C,aAAe,SAACC,GACtB,IAAMC,EAASD,EAAEE,OAA4BD,MAC7C,GAAIA,GAASA,EAAMR,OACjB1C,EAAKoD,YAAaH,EAAEE,OAA4BD,QAG5CjD,KAAAoD,sBAAwB,SAACJ,EAAUZ,GACzC,IAAKrC,EAAKG,kBAAmB,OAC7BH,EAAKI,YAAYkD,KAAKjB,GAErBY,EAAEE,OACAI,QAAQ,mCACRC,UAAUC,OAAO,mCAGdxD,KAAAyD,iBAAmB,WACzB,IAAK1D,EAAKG,oBAAsBH,EAAKI,YAAYsC,OAAQ,OACzD1C,EAAKO,SAAWP,EAAKO,SAASoD,QAC5B,SAACxB,GAAa,OAACnC,EAAKI,YAAYwD,MAAK,SAACC,GAAW,OAAAA,IAAW1B,QAE9DnC,EAAKI,YAAc,IAGbH,KAAA6D,cAAgB,WACtB9D,EAAK+D,WAAWvC,KAAK,CAAEL,MAAOnB,EAAKmB,MAAO+B,MAAOlD,EAAKkD,SAGhDjD,KAAA+D,WAAa,SAACf,GACpBA,EAAEF,iBACFE,EAAEgB,kBACFjE,EAAKM,WAAa,OAGZL,KAAAiE,YAAc,SAACjB,GACrBA,EAAEF,iBACFE,EAAEgB,kBACFjE,EAAKM,WAAa,MAGZL,KAAAkE,OAAS,SAAClB,GAChBjD,EAAKgE,WAAWf,GAChB,GAAIA,EAAEmB,aAAalB,OAASD,EAAEmB,aAAalB,MAAMR,OAC/C1C,EAAKoD,YAAYH,EAAEmB,aAAalB,QAiB5BjD,KAAAoE,gBAAkB,SACxBC,EACAC,GAEA,IAAMC,EAAUxE,EAAKE,YAAc,OACnC,IAAMuE,EACJzE,EAAKe,iBAAmBf,EAAK0E,cACzB1E,EAAKE,YAAc,QACnB,GAEN,MAAO,CACLyE,EAAA,MAAA,CAAKC,MAAO,gBAAkBN,EAAU,SACtCK,EAAA,QAAA,CACEC,MAAO,gBAAkBN,EACzBO,QAAS7E,EAAKE,YACd4E,GAAIN,EACJL,OAAQ,SAAClB,GACPjD,EAAKmE,OAAOlB,GACZjD,EAAKgE,WAAWf,IAElB8B,UAAW/E,EAAKgE,WAChBgB,YAAahF,EAAKgE,WAClBiB,YAAajF,EAAKkE,YAClBgB,WAAYlF,EAAKkE,aAEjBS,EAAA,MAAA,CACEC,MAAO,uBACL5E,EAAKW,WAAa2D,IAAY,OAAS,gBAAkB,KAG1DtE,EAAKmF,OAASnF,EAAKmF,OAClBnF,EAAKmF,OAASnF,EAAKoF,cAAgBT,EAAA,OAAA,CAAMU,KAAK,WAEjDf,IAAY,QACXK,EAAA,MAAA,CAAKC,MAAM,0BAAwB,oBACXD,EAAA,OAAA,KAAA,WAGzBL,IAAY,OACXK,EAAA,MAAA,CACEC,MAAO,2DACL5E,EAAKqB,SAAW,gBAAkB,KAGpCsD,EAAA,MAAA,CAAKC,MAAO,4BACVD,EAAA,YAAA,CAAWU,KAAK,yBAChBV,EAAA,OAAA,OACK3E,EAAKO,SAASmC,OACb1C,EAAKO,SAAS,GAAG8B,KAAKgD,KACtBrF,EAAKU,eAERV,EAAKmB,OAASnB,EAAKc,aAAed,EAAKa,UACxC8D,EAAA,SAAA,CACEnC,KAAK,SACLoC,MAAM,8BACNU,SAAS,KACTC,QAASvF,EAAKkB,cAEdyD,EAAA,YAAA,CAAWU,KAAK,mBAM1BV,EAAA,QAAA,CAAAa,kBACmBhB,EAAU,IAAMC,EAAS,IAAMF,EAChD/B,KAAK,OACLsC,GAAI9E,EAAKE,YACTuC,OAAQzC,EAAKyC,OACbmC,MAAM,qBACNa,SAAUzF,EAAKS,SAAW,EAC1BI,SAAUb,EAAKa,SACfwE,KAAMrF,EAAKG,kBAAoBuF,UAAY1F,EAAKqF,KAChDM,IAAK,SAACC,GACJ,GAAI5F,EAAKG,kBAAmB,CAC1BH,EAAK6F,cAAgBD,EACrB,OAEF5F,EAAK4B,QAAUgE,GAEjBE,SAAU9F,EAAKgD,aACfvB,QAASzB,EAAKyB,QACdsE,QAAS/F,EAAK8D,iBAGlBa,EAAA,QAAA,CACEU,MAAOrF,EAAKG,kBAAoBuF,UAAY1F,EAAKqF,KACjDM,IAAK,SAACC,GACJ,IAAK5F,EAAKG,kBAAmB,OAC7BH,EAAK4B,QAAUgE,GAEjBpD,KAAK,OACLsC,GAAI9E,EAAKE,YAAc,UACvB8F,UAAW,EACXP,SAAU,KACVb,MAAM,qBACN/D,SAAUb,EAAKa,SACfD,SAAUZ,EAAKY,SACf6B,OAAQzC,EAAKyC,OACbK,UAAW9C,EAAK8C,UAChBgD,SAAU9F,EAAK8D,iBAGnB9D,EAAKe,iBAAmBf,EAAK0E,cAC3BC,EAAA,MAAA,CAAKC,MAAM,oBAAoBE,GAAIL,GAChCzE,EAAKe,gBACJ4D,EAAA,MAAA,CAAKC,MAAM,sBAAsB5E,EAAKK,cAAmB,GAI3DsE,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAMU,KAAK,aAET,KAOJpF,KAAAgG,OAAS,WACf,OAAOjG,EAAKqE,gBAAgB,QAGtBpE,KAAAiG,SAAW,WACjB,IAAM3B,EAASvE,EAAKE,YAAc,QAClC,MAAO,CACLF,EAAKqE,gBAAgB,OAAQE,GAC7BI,EAAA,SAAA,CAAQC,MAAM,yBAAyBE,GAAIP,KACtCvE,EAAKO,UAAYP,EAAKO,SAASmC,OAAS,GACzCiC,EAAA,KAAA,CAAIC,MAAM,0BACP5E,EAAKO,SAAS4F,KAAI,SAAC9D,GAClB,OACEsC,EAAA,KAAA,CACEyB,IAAK/D,EAAKA,KAAKgD,KACfT,MAAM,kEACNyB,eAAgB,SAACC,GAAM,OAAAtG,EAAK0D,qBAE5BiB,EAAA,OAAA,CAAMC,MAAM,cAAcvC,EAAKA,KAAKgD,OAClChD,EAAKL,OACL2C,EAAA,eAAA,CACE4B,QAASlE,EAAKJ,kBACduE,UAAU,QAEV7B,EAAA,mBAAA,CACEC,MAAM,yBACN6B,SAAS,6BACTtB,MAAM,gBAIXnF,EAAKG,mBACJwE,EAAA,mBAAA,CACEC,MAAM,gCACNpC,KAAK,SACLiE,SAAS,YACTtB,MAAM,YACNhC,OAAO,SACPuD,KAAMrE,EAAKsE,WAGd3G,EAAKG,mBACJwE,EAAA,mBAAA,CACEY,QAAS,SAACtC,GAAM,OAAAjD,EAAKqD,sBAAsBJ,EAAGZ,IAC9CuC,MAAM,kCACN6B,SAAS,cACTtB,MAAM,wBAvgB1BrF,EAAA8G,UAAAC,eAAA,WACE,GAAI5G,KAAKE,kBAAmB,CAC1BF,KAAK4F,cAAc1E,MAAQ,GAC3BlB,KAAK2B,QAAQsB,MAAQjD,KAAK6G,cACxB7G,KAAKM,SAAS4F,KAAI,SAAC9D,GAAS,OAAAA,EAAKA,SAEnCpC,KAAK8D,WAAWvC,KAAK,CAAEL,MAAOlB,KAAKkB,MAAO+B,MAAOjD,KAAKiD,UA6DhDpD,EAAA8G,UAAAG,eAAA,WAAA,IAAA/G,EAAAC,KACR,IAAKA,KAAK2B,QAAS,OACnBoF,YAAW,WACT,GAAIhH,EAAKgB,aAAe,QAAShB,EAAKsB,aACrC,KAML2F,OAAAC,eACIpH,EAAA8G,UAAA,UAAO,KADX,WAEE,OAAO3G,KAAKgB,+CAOdgG,OAAAC,eACIpH,EAAA8G,UAAA,QAAK,KADT,WAEE,OAAO3G,KAAK2B,QACRuF,MAAMC,KAAKnH,KAAK2B,QAAQsB,OAAOiD,KAAI,SAAC9D,GAClCA,EAAKgF,UAAYC,IAAIC,gBAAgBlF,GACrC,OAAOA,KAET,yCAMN4E,OAAAC,eACIpH,EAAA8G,UAAA,QAAK,KADT,WAEE,OAAO3G,KAAK2B,QAAU3B,KAAK2B,QAAQT,MAAQ,QAE7C,SAAUqG,GACR,GAAIA,IAAQ,IAAMvH,KAAK2B,QAAS,CAC9B3B,KAAKM,SAAW,GAChBN,KAAK2B,QAAQT,MAAQ,0CAyBnBrB,EAAA8G,UAAAa,eAAN,SAAqBC,wFACnB,GAAIA,EAAezH,KAAKqB,WACxB,MAAA,CAAA,EAAO,CACLsB,SAAU3C,KAAK0H,QACftH,aAAcJ,KAAK2B,QAAQK,2BAOzBnC,EAAA8G,UAAAgB,SAAN,gGACE,GAAI3H,KAAK2B,QAAS3B,KAAK2B,QAAQiG,yBAKjC/H,EAAA8G,UAAAkB,gBAAA,WACE,OAAOC,QAAQC,QAAQ/H,KAAK2B,UAMxB9B,EAAA8G,UAAAqB,UAAN,SAAgBC,wFACd,GAAIjI,KAAK2B,QAAS,CAChB3B,KAAK2B,QAAQC,kBAAkBqG,GAC/BjI,KAAKqB,4BAOTxB,EAAA8G,UAAAuB,mBAAA,SAAmBlF,GAAnB,IAAAjD,EAAAC,KACE,IAAKA,KAAKoB,SAAU,OACpB,GAAI4B,EAAEmF,eAAeC,OAAM,SAACC,GAAS,OAAAA,IAAStI,EAAKuI,QAAOtI,KAAKmB,UAIjEtB,EAAA8G,UAAA4B,qBAAA,SAAqBvF,GACnB,IAAKhD,KAAKoB,UAAY4B,EAAEmD,MAAQ,MAAO,OACvC,GAAInD,EAAEE,SAAWlD,KAAK2B,QAAS3B,KAAKmB,UAoB9BtB,EAAA8G,UAAAE,cAAA,SAAc5D,GACpB,IAAM3C,EAAWjB,IACjB,IAAK,IAAImJ,EAAI,EAAGC,EAAMxF,EAAMR,OAAQ+F,EAAIC,EAAKD,IAC3ClI,EAASoI,MAAMC,IAAI1F,EAAMuF,IAC3B,OAAOlI,EAAS2C,OAGVpD,EAAA8G,UAAAxE,cAAA,SAAcE,GACpB,OAAOA,EAAO,KAAWrC,KAAKO,aAGxBV,EAAA8G,UAAArE,cAAA,SAAcC,GACpB,IAAKvC,KAAKwC,OAAQ,OAAO,KACzB,OAAOxC,KAAKwC,OAAOoG,MAAMrG,IAASvC,KAAKwC,OAAOoG,MAAMrG,GAAME,OAAS,GA8C7D5C,EAAA8G,UAAAkC,mBAAA,WAAA,IAAA9I,EAAAC,KACN,GAAIA,KAAK8I,GAAI9I,KAAK8I,GAAGC,aACrB,IAAMD,EAAM9I,KAAK8I,GAAK,IAAIE,kBAAiB,WACzC,OAAAjJ,EAAKkJ,2BAEPH,EAAGI,QAAQlJ,KAAKsI,KAAM,CAAEa,UAAW,KAAMC,QAAS,QAG5CvJ,EAAA8G,UAAAsC,sBAAA,WAENjJ,KAAKmF,eAAiBnF,KAAKsI,KAAKe,iBAAiB,kBACjDrJ,KAAKyE,gBAAkBzE,KAAKsI,KAAKgB,cAAc,oBAGzCzJ,EAAA8G,UAAAxD,YAAA,SAAYF,GAAZ,IAAAlD,EAAAC,KACN,IAAMM,EAA6B4G,MAAMC,KAAKlE,GAAOiD,KAAI,SAAC9D,GACxD,MAAO,CACLA,KAAMA,EACNsE,SAAUW,IAAIC,gBAAgBlF,GAC9BL,MAAO,KACPC,kBAAmB,SAMvB,GAAIhC,KAAKE,mBAAqBF,KAAKQ,SAAW,EAAG,CAC/C,IAAM+I,EAAWjJ,EAASoD,QACxB,SAAC8F,GACC,OAACzJ,EAAKO,SAASqD,MAAK,SAACvB,GAAS,OAAAA,EAAKA,KAAKgD,OAASoE,EAASpH,KAAKgD,WAEnEpF,KAAKM,SAAQmJ,cAAAA,cAAA,GAAOzJ,KAAKM,UAAaiJ,QACjCvJ,KAAKM,SAAWA,GAyDzBT,EAAA8G,UAAA+C,qBAAA,WACE,GAAI1J,KAAK8I,GAAI9I,KAAK8I,GAAGC,cAGvBlJ,EAAA8G,UAAAgD,iBAAA,WACE3J,KAAK6I,sBAGPhJ,EAAA8G,UAAAiD,kBAAA,WACE5J,KAAKiJ,yBAqLPpJ,EAAA8G,UAAAkD,OAAA,WACE,OACEnF,EAACoF,EAAI,KACHpF,EAAA,MAAA,CACEC,MAAO,CACLoF,cAAe,KACfC,wBAAyBhK,KAAKK,WAC9B4J,qBAAsBjK,KAAKoB,SAC3B8I,uBAAwBlK,KAAKgB,WAG9BhB,KAAKQ,SAAW,EAAIkE,EAAC1E,KAAKiG,SAAQ,MAAMvB,EAAC1E,KAAKgG,OAAM,odA5iBxC","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{$input-help-color};\n\n   * @prop --label-color: Default value #{$label-color};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n   * @prop --label-font-size: Default value #{$label-font-size};\n   * @prop --label-padding: Default value #{$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{$color-blue--faded};\n   * @prop --drop-text: Default value #{$color-dimgrey};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n   * @prop --drop-border-width: Default value 2px;\n   * @prop --drop-border-radius: Default value 5px;\n   * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{nano-color(primary, base)};\n   * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n   * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n   * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n   * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n   * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n   * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n   */\n\n  min-height: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n  --label-color--invalid: #{$label-color-invalid};\n  --drop-bg: #{$color-blue--faded};\n  --drop-text: #{darken($color-dimgrey, 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{$input-background-color--invalid};\n  --drop-border--invalid: #{nano-color(danger, base, null, true)};\n  --btn-bg: #{nano-color(primary, base)};\n  --btn-text: #{nano-color(primary, contrast)};\n  --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n  --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n  --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n  --btn-padding-start: var(--nano-btn-padding-start, 1em);\n  --btn-padding-end: var(--nano-btn-padding-end, 1em);\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\n.file-upload {\n  $self: &;\n\n  /* Common */\n\n  &__label {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__input {\n    display: none;\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    height: 1em;\n\n    @include margin(\n      calc(var(--label-padding) / 2),\n      0,\n      var(--label-padding),\n      3px\n    );\n\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    top: 0;\n    left: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .file-upload--invalid & {\n      opacity: 0;\n    }\n  }\n\n  /* Drop area / Multi file upload */\n\n  &__drop {\n    position: relative;\n    width: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-height: var(--drop-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9em;\n    position: relative;\n    transition: background-color 0.15s ease-in-out;\n    padding: 0.5rem;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.7;\n    }\n\n    .file-upload--invalid & {\n      background-color: var(--drop-bg--invalid);\n    }\n\n    .file-upload--dragging & {\n      background-color: #{$color-white};\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: var(--drop-border-radius);\n      border-width: var(--drop-border-width);\n      border-color: rgba(var(--drop-border-tint), 0.5);\n      border-style: dashed;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      transition:\n        top 0.1s ease-in-out,\n        bottom 0.1s ease-in-out,\n        left 0.1s ease-in-out,\n        right 0.1s ease-in-out;\n\n      .file-upload--invalid & {\n        border-color: rgba(var(--drop-border--invalid), 1);\n      }\n\n      .file-upload--dragging & {\n        top: 5px;\n        bottom: 5px;\n        left: 5px;\n        right: 5px;\n      }\n    }\n\n    span {\n      color: rgba(var(--drop-border-tint), 1);\n      text-decoration: underline;\n      border-radius: 2px;\n      z-index: 1;\n      cursor: pointer;\n      position: relative;\n\n      .file-upload--focus & {\n        box-shadow: #{$control-focus-style};\n      }\n    }\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    &-wrap {\n      position: relative;\n      top: -4px;\n    }\n\n    &-item {\n      width: 100%;\n      margin: 0 0 2px;\n      display: flex;\n      align-items: center;\n      transform: translateZ(0);\n      animation: hideListItem 0.3s ease-in-out forwards;\n\n      @keyframes hideListItem {\n        0% {\n          opacity: 1;\n          transform: translateY(0);\n          transform: translateZ(0);\n        }\n\n        100% {\n          opacity: 0;\n          transform: translateY(10px);\n          transform: translateZ(0);\n        }\n      }\n\n      &--active {\n        animation: showListItem 0.3s ease-in-out forwards;\n\n        @keyframes showListItem {\n          0% {\n            opacity: 0;\n            transform: translateY(10px);\n            transform: translateZ(0);\n          }\n\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n            transform: translateZ(0);\n          }\n        }\n      }\n    }\n\n    .list-title {\n      background: white;\n      border-radius: 5px;\n      padding: 5px 5px;\n      margin-right: 2px;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      font-size: 0.9em;\n      color: var(--help-msg-color);\n    }\n\n    .list-button {\n      background: white;\n      border-radius: 5px;\n      margin: 2px;\n    }\n\n    .list-error {\n      --color: rgba(var(--drop-border--invalid), 1);\n    }\n  }\n\n  /* Button display / Single file upload */\n\n  &__button {\n    @include button-base;\n    @include button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{nano-color(primary, shade)}\n    );\n\n    --nano-btn-icon-size: var(--btn-icon-size);\n    --nano-btn-line-height: var(--btn-icon-size);\n    --nano-btn-padding-top: var(--btn-padding-top);\n    --nano-btn-padding-bottom: var(--btn-padding-bottom);\n    --nano-btn-padding-start: var(--btn-padding-start);\n    --nano-btn-padding-end: var(--btn-padding-end);\n\n    max-width: 100%;\n    font-size: 0.9em;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.4;\n    }\n\n    .file-upload--dragging & {\n      --nano-btn-border-style: dashed;\n    }\n    #{$self}__clear-btn {\n      @include margin(0);\n\n      font-size: inherit;\n      padding: 0;\n      border: 0;\n      outline: none;\n      background-color: transparent;\n      display: flex;\n      align-items: stretch;\n      width: auto;\n      color: var(--clear-btn-color);\n\n      :host(.is-invalid) & {\n        color: var(--clear-btn-color--invalid);\n      }\n\n      nano-icon {\n        @include margin(0, 0, 0, 0.4rem);\n      }\n    }\n    #{$self}__btn-content {\n      display: flex;\n      align-items: center;\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        min-width: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  VNode,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport {\n  ControlValidity,\n  ControlValidityEventDetail,\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n  getDataTransfer();\n} catch {\n  try {\n    getDataTransfer = () => new ClipboardEvent('').clipboardData;\n    getDataTransfer();\n  } catch {\n    getDataTransfer = null;\n  }\n}\n\ninterface FileValidation {\n  file: File;\n  valid: boolean;\n  validationMessage?: string;\n  location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n *   - Drag and Drop\n *   - Validation options\n *   - Preview and manage multiple files\n */\n@Component({\n  tag: 'nano-file-upload',\n  styleUrl: 'file-upload.scss',\n  scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n  private inputEl: HTMLInputElement;\n  private publicInputEl: HTMLInputElement;\n  private mo!: MutationObserver;\n  private fileInputId = `nano-file-upload-${fileInputIds++}`;\n  private canChangeFileList = !!getDataTransfer;\n  private removeFiles: FileValidation[] = [];\n\n  @State() hasHelperSlot: boolean;\n  @State() hasLabelSlot: boolean;\n  @State() errorMessage: string = null;\n  @State() isDragging = false;\n  @State() fileList: FileValidation[] = [];\n  @Watch('fileList')\n  fileListChange() {\n    if (this.canChangeFileList) {\n      this.publicInputEl.value = '';\n      this.inputEl.files = this.arrToFileList(\n        this.fileList.map((file) => file.file)\n      );\n      this.nanoChange.emit({ value: this.value, files: this.files });\n    }\n  }\n  @State() hasFocus: boolean;\n\n  @Element() host: HTMLNanoFileUploadElement;\n\n  // public props\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair. */\n  @Prop() name!: string;\n\n  /** The accept attribute value is a string that defines the file types the file input should accept.\n   * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` */\n  @Prop() accept?: string;\n\n  /** Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n   * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n   * the user agent may fall back to its preferred default mode. */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** The maximum file size allowed per file (Megabytes) */\n  @Prop() maxFileSize: number = 1;\n\n  /** The maximum file size allowed per file (bytes).  */\n  @Prop() maxFiles: number = 1;\n\n  /** String to place within a label element. */\n  @Prop() label!: string;\n\n  /** Placeholder only used within single file uploads. */\n  @Prop() placeholder: string = 'Choose a file...';\n\n  /** Visually hide the label - but make it accessible. */\n  @Prop() hideLabel?: boolean = false;\n\n  /** If `true`, the user must select a file to upload before submitting a form. */\n  @Prop() required = false;\n\n  /** If `true`, the user cannot interact with the select. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** If `true`, a clear icon will appear in the input when there is a value.\n   * Clicking it clears the input. Only used within single file uploads. */\n  @Prop() clearInput = false;\n\n  /** Whether to show validation errors underneath input */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /** When should the field perform validation */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('validateOn')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n    setTimeout(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    }, 20);\n  }\n\n  @State() _invalid = false;\n  /** This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n\n  /** A File array that lists every selected file.\n   * Has an added `objectURL` property returning a `DOMString`\n   * containing an object URL that can be used to reference the contents of the specified source\n   * This list has no more than one member unless the multiple attribute is specified. @readonly */\n  @Prop()\n  get files(): FileWithUrl[] {\n    return this.inputEl\n      ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n          file.objectURL = URL.createObjectURL(file);\n          return file;\n        })\n      : [];\n  }\n\n  /** A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n   * If the user selected multiple files, the value represents the first file in the list of files they selected.\n   * You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''` */\n  @Prop()\n  get value() {\n    return this.inputEl ? this.inputEl.value : '';\n  }\n  set value(val: string) {\n    if (val === '' && this.inputEl) {\n      this.fileList = [];\n      this.inputEl.value = '';\n    }\n  }\n\n  // Events\n\n  /** Emitted when the value has changed. */\n  @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n  /** Emited when the checkbox is focused */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emited when the checkbox is blurred */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public methods\n\n  /** Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }` */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.validate();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.inputEl.validationMessage,\n    };\n  }\n\n  /** Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`. */\n  @Method()\n  async setFocus() {\n    if (this.inputEl) this.inputEl.focus();\n  }\n\n  /** Returns the native `<input>` element used under the hood */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.inputEl!);\n  }\n\n  /** Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   * @param message */\n  @Method()\n  async showError(message: string) {\n    if (this.inputEl) {\n      this.inputEl.setCustomValidity(message);\n      this.validate();\n    }\n  }\n\n  // Listeners\n\n  @Listen('click', { target: 'window' })\n  globalClickHandler(e: Event) {\n    if (!this.hasFocus) return;\n    if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n  }\n\n  @Listen('keydown', { target: 'window' })\n  globalKeydownHandler(e: KeyboardEvent) {\n    if (!this.hasFocus || e.key !== 'Tab') return;\n    if (e.target !== this.inputEl) this.onBlur();\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    if (this.validateOn === 'dirty') this.validate();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private arrToFileList(files: File[]): FileList {\n    const fileList = getDataTransfer();\n    for (var i = 0, len = files.length; i < len; i++)\n      fileList.items.add(files[i]);\n    return fileList.files;\n  }\n\n  private checkFileSize(size: number): boolean {\n    return size / 1000000 <= this.maxFileSize;\n  }\n\n  private checkFileType(type: string): boolean {\n    if (!this.accept) return true;\n    return this.accept.match(type) && this.accept.match(type).length > 0;\n  }\n\n  private validate = (ev?: Event) => {\n    this.errorMessage = null;\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    if (!this.inputEl.validity.valid) {\n      if (this.showInlineError)\n        this.errorMessage = this.inputEl.validationMessage;\n    } else {\n      this.fileList.forEach((fileItem) => {\n        error = null;\n        if (!this.checkFileSize(fileItem.file.size)) {\n          error =\n            'Maximum file size exceeded. Max file size is ' +\n            this.maxFileSize +\n            'Mb';\n        } else if (!this.checkFileType(fileItem.file.type))\n          error = `File type is not allowed (${this.accept})`;\n\n        if (!this.errorMessage && error) this.errorMessage = error;\n        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        this.errorMessage = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (!!this.errorMessage) {\n      this._invalid = true;\n      this.inputEl.setCustomValidity(this.errorMessage);\n    } else {\n      this._invalid = false;\n    }\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.inputEl.validationMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have slot content\n    this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n  }\n\n  private addNewFiles(files: FileList) {\n    const fileList: FileValidation[] = Array.from(files).map((file) => {\n      return {\n        file: file,\n        location: URL.createObjectURL(file),\n        valid: true,\n        validationMessage: null,\n      };\n    });\n\n    // if we have a list and we're in a browser that can amend files\n    // append files to the list, otherwise replace\n    if (this.canChangeFileList && this.maxFiles > 1) {\n      const newFiles = fileList.filter(\n        (findFile) =>\n          !this.fileList.find((file) => file.file.name === findFile.file.name)\n      );\n      this.fileList = [...this.fileList, ...newFiles];\n    } else this.fileList = fileList;\n  }\n\n  // event handlers & hooks\n\n  private onInvalid = (ev: Event) => {\n    this.validate(ev);\n    if (this.showInlineError) ev.preventDefault();\n  };\n\n  private onFileChoose = (e: Event) => {\n    const files = (e.target as HTMLInputElement).files;\n    if (files && files.length)\n      this.addNewFiles((e.target as HTMLInputElement).files);\n  };\n\n  private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n    if (!this.canChangeFileList) return;\n    this.removeFiles.push(file);\n\n    (e.target as HTMLElement)\n      .closest('.file-upload__list-item--active')\n      .classList.remove('file-upload__list-item--active');\n  };\n\n  private onFileRemoveAnim = () => {\n    if (!this.canChangeFileList || !this.removeFiles.length) return;\n    this.fileList = this.fileList.filter(\n      (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n    );\n    this.removeFiles = [];\n  };\n\n  private onInputChange = () => {\n    this.nanoChange.emit({ value: this.value, files: this.files });\n  };\n\n  private onDragStop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private onDragStart = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n  };\n\n  private onDrop = (e: DragEvent) => {\n    this.onDragStop(e);\n    if (e.dataTransfer.files && e.dataTransfer.files.length)\n      this.addNewFiles(e.dataTransfer.files);\n  };\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private FileUploadInput = (\n    eleType: 'drop' | 'btn',\n    listId?: string\n  ): VNode[] => {\n    const labelId = this.fileInputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.fileInputId + '-more'\n        : '';\n\n    return [\n      <div class={'file-upload__' + eleType + '-wrap'}>\n        <label\n          class={`file-upload__` + eleType}\n          htmlFor={this.fileInputId}\n          id={labelId}\n          onDrop={(e) => {\n            this.onDrop(e);\n            this.onDragStop(e);\n          }}\n          onDragEnd={this.onDragStop}\n          onDragLeave={this.onDragStop}\n          onDragEnter={this.onDragStart}\n          onDragOver={this.onDragStart}\n        >\n          <div\n            class={`file-upload__label ${\n              this.hideLabel || eleType !== 'drop' ? 'visually-hide' : ''\n            }`}\n          >\n            {this.label && this.label}\n            {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n          </div>\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              Drap and drop or&nbsp;<span>browse</span>\n            </div>\n          )}\n          {eleType === 'btn' && (\n            <div\n              class={`file-upload__button button--keyline button--icon-start ${\n                this.hasFocus ? 'button--focus' : ''\n              }`}\n            >\n              <div class={`file-upload__btn-content`}>\n                <nano-icon name=\"regular/cloud-upload\" />\n                <span>\n                  {!!this.fileList.length\n                    ? this.fileList[0].file.name\n                    : this.placeholder}\n                </span>\n                {!!this.value && this.clearInput && !this.disabled && (\n                  <button\n                    type=\"button\"\n                    class=\"icon file-upload__clear-btn\"\n                    tabindex=\"-1\"\n                    onClick={this.onClearClick}\n                  >\n                    <nano-icon name=\"light/times\"></nano-icon>\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n          <input\n            aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n            type=\"file\"\n            id={this.fileInputId}\n            accept={this.accept}\n            class=\"file-upload__input\"\n            multiple={this.maxFiles > 1}\n            disabled={this.disabled}\n            name={this.canChangeFileList ? undefined : this.name}\n            ref={(input) => {\n              if (this.canChangeFileList) {\n                this.publicInputEl = input;\n                return;\n              }\n              this.inputEl = input;\n            }}\n            onChange={this.onFileChoose}\n            onFocus={this.onFocus}\n            onReset={this.onInputChange}\n          />\n        </label>\n        <input\n          name={!this.canChangeFileList ? undefined : this.name}\n          ref={(input) => {\n            if (!this.canChangeFileList) return;\n            this.inputEl = input;\n          }}\n          type=\"file\"\n          id={this.fileInputId + '-hidden'}\n          tabIndex={-1}\n          multiple={true}\n          class=\"file-upload__input\"\n          disabled={this.disabled}\n          required={this.required}\n          accept={this.accept}\n          onInvalid={this.onInvalid}\n          onChange={this.onInputChange}\n        />\n      </div>,\n      this.showInlineError || this.hasHelperSlot ? (\n        <div class=\"file-upload__more\" id={moreId}>\n          {this.showInlineError ? (\n            <div class=\"file-upload__error\">{this.errorMessage}</div>\n          ) : (\n            ''\n          )}\n          <div class=\"file-upload__help\">\n            <slot name=\"helper\" />\n          </div>\n        </div>\n      ) : (\n        ''\n      ),\n    ];\n  };\n\n  private button = (): VNode[] => {\n    return this.FileUploadInput('btn');\n  };\n\n  private dropArea = (): VNode[] => {\n    const listId = this.fileInputId + '-list';\n    return [\n      this.FileUploadInput('drop', listId),\n      <output class=\"file-upload__list-wrap\" id={listId}>\n        {!!this.fileList && this.fileList.length > 0 && (\n          <ul class=\"file-upload__list list\">\n            {this.fileList.map((file) => {\n              return (\n                <li\n                  key={file.file.name}\n                  class=\"file-upload__list-item file-upload__list-item--active list-item\"\n                  onAnimationEnd={(_) => this.onFileRemoveAnim()}\n                >\n                  <span class=\"list-title\">{file.file.name}</span>\n                  {!file.valid && (\n                    <nano-tooltip\n                      content={file.validationMessage}\n                      placement=\"left\"\n                    >\n                      <nano-icon-button\n                        class=\"list-button list-error\"\n                        iconName=\"light/exclamation-triangle\"\n                        label=\"File error\"\n                      />\n                    </nano-tooltip>\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      class=\"list-button list-button--view\"\n                      type=\"button\"\n                      iconName=\"light/eye\"\n                      label=\"View file\"\n                      target=\"_blank\"\n                      href={file.location}\n                    />\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      onClick={(e) => this.onFileRemoveFileClick(e, file)}\n                      class=\"list-button list-button--remove\"\n                      iconName=\"light/times\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload': true,\n            'file-upload--dragging': this.isDragging,\n            'file-upload--focus': this.hasFocus,\n            'file-upload--invalid': this._invalid,\n          }}\n        >\n          {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-27520572.entry.js → p-b3131821.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o}from"./p-f55560d3.js";let s=class{constructor(o){t(this,o),this.optId="nano-option-"+i++,this.label="",this.value="",this.selected=!1,this.disabled=!1}render(){return o("div",{id:this.optId,role:"option","data-value":this.value,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},o("slot",{name:"start"}),this.label?this.label:o("slot",null),o("slot",{name:"end"}))}},i=0;s.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none !important}:host *{display:none !important}";export{s as nano_select_option}
-//# sourceMappingURL=p-27520572.entry.js.map
+import{r as t,h as o}from"./p-bb0619e6.js";let s=class{constructor(o){t(this,o),this.optId="nano-option-"+i++,this.label="",this.value="",this.selected=!1,this.disabled=!1}render(){return o("div",{id:this.optId,role:"option","data-value":this.value,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},o("slot",{name:"start"}),this.label?this.label:o("slot",null),o("slot",{name:"end"}))}},i=0;s.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none !important}:host *{display:none !important}";export{s as nano_select_option}
+//# sourceMappingURL=p-b3131821.entry.js.map

package/dist/nano-components/{p-e24d3e8a.entry.js → p-b7a58722.entry.js}

@@ -1,2 +1,2 @@
-import{r,c as a,h as n,e,g as t}from"./p-f55560d3.js";import{c as o,a as s}from"./p-c930d4f5.js";import{c as i}from"./p-d3af43d2.js";import{a as g}from"./p-0e826935.js";let b=class{constructor(n){r(this,n),this.nanoChange=a(this,"nanoChange",7),this.nanoStyle=a(this,"nanoStyle",7),this.nanoFocus=a(this,"nanoFocus",7),this.nanoBlur=a(this,"nanoBlur",7),this.noUpdate=!1,this.hasFocus=!1,this.ratioA=0,this.ratioB=0,this.debounce=0,this.name="",this.dualKnobs=!1,this.min=0,this.max=100,this.pin=!1,this.snaps=!1,this.step=1,this.ticks=!1,this.disabled=!1,this.value=0,this.clampBounds=r=>o(this.min,r,this.max),this.ensureValueInBounds=r=>this.dualKnobs?{lower:this.clampBounds(r.lower),upper:this.clampBounds(r.upper)}:this.clampBounds(r),this.handleKeyboard=(r,a)=>{let n=this.step;n=n>0?n:1,n/=this.max-this.min,a||(n*=-1),"A"===r?this.ratioA=o(0,this.ratioA+n,1):this.ratioB=o(0,this.ratioB+n,1),this.updateValue()},this.onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.nanoBlur.emit(),this.emitStyle())},this.onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.nanoFocus.emit(),this.emitStyle())}}debounceChanged(){this.nanoChange=g(this.nanoChange,this.debounce)}minChanged(){this.noUpdate||this.updateRatio()}maxChanged(){this.noUpdate||this.updateRatio()}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled),this.emitStyle()}valueChanged(r){this.noUpdate||this.updateRatio(),r=this.ensureValueInBounds(r),this.nanoChange.emit({value:r})}connectedCallback(){this.updateRatio(),this.debounceChanged(),this.disabledChanged()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}async componentDidLoad(){const r=this.rangeSlider;r&&(this.gesture=(await __sc_import_nano_components("./p-9f25f107.js")).createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:r=>this.onStart(r),onMove:r=>this.onMove(r),onEnd:r=>this.onEnd(r)}),this.gesture.enable(!this.disabled))}getValue(){const r=this.value||0;return this.dualKnobs?"object"==typeof r?r:{lower:0,upper:r}:"object"==typeof r?r.upper:r}emitStyle(){this.nanoStyle.emit({interactive:!0,"interactive-disabled":this.disabled})}onStart(r){const a=this.rect=this.rangeSlider.getBoundingClientRect(),n=r.currentX;let e=o(0,(n-a.left)/a.width,1);"rtl"===document.dir&&(e=1-e),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-e)<Math.abs(this.ratioB-e)?"A":"B",this.setFocus(this.pressedKnob),this.update(n)}onMove(r){this.update(r.currentX)}onEnd(r){this.update(r.currentX),this.pressedKnob=void 0}update(r){const a=this.rect;let n=o(0,(r-a.left)/a.width,1);"rtl"===document.dir&&(n=1-n),this.snaps&&(n=c(d(n,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=n:this.ratioB=n,this.updateValue()}get valA(){return d(this.ratioA,this.min,this.max,this.step)}get valB(){return d(this.ratioB,this.min,this.max,this.step)}get ratioLower(){return this.dualKnobs?Math.min(this.ratioA,this.ratioB):0}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const r=this.getValue(),{min:a,max:n}=this;this.dualKnobs?(this.ratioA=c(r.lower,a,n),this.ratioB=c(r.upper,a,n)):this.ratioA=c(r,a,n)}updateValue(){this.noUpdate=!0;const{valA:r,valB:a}=this;this.value=this.dualKnobs?{lower:Math.min(r,a),upper:Math.max(r,a)}:r,this.noUpdate=!1}setFocus(r){if(this.el.shadowRoot){const a=this.el.shadowRoot.querySelector("A"===r?".range-knob-a":".range-knob-b");a&&a.focus()}}render(){const{min:r,max:a,step:t,el:o,handleKeyboard:g,pressedKnob:b,disabled:d,pin:l,ratioLower:u,ratioUpper:p}=this,m="rtl"===document.dir,k=m?"right":"left",f=r=>({[k]:r[k]}),v={[k]:100*u+"%",[m?"left":"right"]:100-100*p+"%"},w=[];if(this.snaps&&this.ticks)for(let n=r;n<=a;n+=t){const e=c(n,r,a),t={ratio:e,active:e>=u&&e<=p};t[k]=100*e+"%",w.push(t)}return s(!0,o,this.name,JSON.stringify(this.getValue()),d),n(e,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:i(this.color,{"range-disabled":d,"range-pressed":void 0!==b,"range-has-pin":l,"range-snaps":this.snaps})},n("div",{class:"range-wrap"},n("slot",{name:"start"}),n("div",{class:"range-slider",ref:r=>this.rangeSlider=r},w.map((r=>n("span",{style:f(r),role:"presentation",class:{"range-tick":!0,"range-tick-active":r.active},part:r.active?"tick-active":"tick"}))),n("div",{class:"range-bar",role:"presentation",part:"bar"}),n("div",{class:"range-bar range-bar-active",role:"presentation",style:v,part:"bar-active"}),h(m,{knob:"A",pressed:"A"===b,value:this.valA,ratio:this.ratioA,pin:l,disabled:d,handleKeyboard:g,min:r,max:a}),this.dualKnobs&&h(m,{knob:"B",pressed:"B"===b,value:this.valB,ratio:this.ratioB,pin:l,disabled:d,handleKeyboard:g,min:r,max:a})),n("slot",{name:"end"})))}get el(){return t(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const h=(r,{knob:a,value:e,ratio:t,min:o,max:s,disabled:i,pressed:g,pin:b,handleKeyboard:h})=>{const d=r?"right":"left";return n("div",{onKeyDown:r=>{const n=r.key;"ArrowLeft"===n||"ArrowDown"===n?(h(a,!1),r.preventDefault(),r.stopPropagation()):"ArrowRight"!==n&&"ArrowUp"!==n||(h(a,!0),r.preventDefault(),r.stopPropagation())},class:{"range-knob-handle":!0,"range-knob-a":"A"===a,"range-knob-b":"B"===a,"range-knob-pressed":g,"range-knob-min":e===o,"range-knob-max":e===s},style:(()=>{const r={};return r[d]=100*t+"%",r})(),role:"slider",tabindex:i?-1:0,"aria-valuemin":o,"aria-valuemax":s,"aria-disabled":i?"true":null,"aria-valuenow":e},b&&n("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(e)),n("div",{class:"range-knob",role:"presentation",part:"knob"}))},d=(r,a,n,e)=>{let t=(n-a)*r;return e>0&&(t=Math.round(t/e)*e+a),o(a,t,n)},c=(r,a,n)=>o(0,(r-a)/(n-a),1);b.style='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #0084a9);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #0084a9);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';export{b as nano_range}
-//# sourceMappingURL=p-e24d3e8a.entry.js.map
+import{r,c as a,h as n,e,g as t}from"./p-bb0619e6.js";import{c as o,a as s}from"./p-ed2efbeb.js";import{c as i}from"./p-d3af43d2.js";import{a as g}from"./p-0e826935.js";let b=class{constructor(n){r(this,n),this.nanoChange=a(this,"nanoChange",7),this.nanoStyle=a(this,"nanoStyle",7),this.nanoFocus=a(this,"nanoFocus",7),this.nanoBlur=a(this,"nanoBlur",7),this.noUpdate=!1,this.hasFocus=!1,this.ratioA=0,this.ratioB=0,this.debounce=0,this.name="",this.dualKnobs=!1,this.min=0,this.max=100,this.pin=!1,this.snaps=!1,this.step=1,this.ticks=!1,this.disabled=!1,this.value=0,this.clampBounds=r=>o(this.min,r,this.max),this.ensureValueInBounds=r=>this.dualKnobs?{lower:this.clampBounds(r.lower),upper:this.clampBounds(r.upper)}:this.clampBounds(r),this.handleKeyboard=(r,a)=>{let n=this.step;n=n>0?n:1,n/=this.max-this.min,a||(n*=-1),"A"===r?this.ratioA=o(0,this.ratioA+n,1):this.ratioB=o(0,this.ratioB+n,1),this.updateValue()},this.onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.nanoBlur.emit(),this.emitStyle())},this.onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.nanoFocus.emit(),this.emitStyle())}}debounceChanged(){this.nanoChange=g(this.nanoChange,this.debounce)}minChanged(){this.noUpdate||this.updateRatio()}maxChanged(){this.noUpdate||this.updateRatio()}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled),this.emitStyle()}valueChanged(r){this.noUpdate||this.updateRatio(),r=this.ensureValueInBounds(r),this.nanoChange.emit({value:r})}connectedCallback(){this.updateRatio(),this.debounceChanged(),this.disabledChanged()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}async componentDidLoad(){const r=this.rangeSlider;r&&(this.gesture=(await __sc_import_nano_components("./p-9f25f107.js")).createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:r=>this.onStart(r),onMove:r=>this.onMove(r),onEnd:r=>this.onEnd(r)}),this.gesture.enable(!this.disabled))}getValue(){const r=this.value||0;return this.dualKnobs?"object"==typeof r?r:{lower:0,upper:r}:"object"==typeof r?r.upper:r}emitStyle(){this.nanoStyle.emit({interactive:!0,"interactive-disabled":this.disabled})}onStart(r){const a=this.rect=this.rangeSlider.getBoundingClientRect(),n=r.currentX;let e=o(0,(n-a.left)/a.width,1);"rtl"===document.dir&&(e=1-e),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-e)<Math.abs(this.ratioB-e)?"A":"B",this.setFocus(this.pressedKnob),this.update(n)}onMove(r){this.update(r.currentX)}onEnd(r){this.update(r.currentX),this.pressedKnob=void 0}update(r){const a=this.rect;let n=o(0,(r-a.left)/a.width,1);"rtl"===document.dir&&(n=1-n),this.snaps&&(n=c(d(n,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=n:this.ratioB=n,this.updateValue()}get valA(){return d(this.ratioA,this.min,this.max,this.step)}get valB(){return d(this.ratioB,this.min,this.max,this.step)}get ratioLower(){return this.dualKnobs?Math.min(this.ratioA,this.ratioB):0}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const r=this.getValue(),{min:a,max:n}=this;this.dualKnobs?(this.ratioA=c(r.lower,a,n),this.ratioB=c(r.upper,a,n)):this.ratioA=c(r,a,n)}updateValue(){this.noUpdate=!0;const{valA:r,valB:a}=this;this.value=this.dualKnobs?{lower:Math.min(r,a),upper:Math.max(r,a)}:r,this.noUpdate=!1}setFocus(r){if(this.el.shadowRoot){const a=this.el.shadowRoot.querySelector("A"===r?".range-knob-a":".range-knob-b");a&&a.focus()}}render(){const{min:r,max:a,step:t,el:o,handleKeyboard:g,pressedKnob:b,disabled:d,pin:l,ratioLower:u,ratioUpper:p}=this,m="rtl"===document.dir,k=m?"right":"left",v=r=>({[k]:r[k]}),f={[k]:100*u+"%",[m?"left":"right"]:100-100*p+"%"},w=[];if(this.snaps&&this.ticks)for(let n=r;n<=a;n+=t){const e=c(n,r,a),t={ratio:e,active:e>=u&&e<=p};t[k]=100*e+"%",w.push(t)}return s(!0,o,this.name,JSON.stringify(this.getValue()),d),n(e,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:i(this.color,{"range-disabled":d,"range-pressed":void 0!==b,"range-has-pin":l,"range-snaps":this.snaps})},n("div",{class:"range-wrap"},n("slot",{name:"start"}),n("div",{class:"range-slider",ref:r=>this.rangeSlider=r},w.map((r=>n("span",{style:v(r),role:"presentation",class:{"range-tick":!0,"range-tick-active":r.active},part:r.active?"tick-active":"tick"}))),n("div",{class:"range-bar",role:"presentation",part:"bar"}),n("div",{class:"range-bar range-bar-active",role:"presentation",style:f,part:"bar-active"}),h(m,{knob:"A",pressed:"A"===b,value:this.valA,ratio:this.ratioA,pin:l,disabled:d,handleKeyboard:g,min:r,max:a}),this.dualKnobs&&h(m,{knob:"B",pressed:"B"===b,value:this.valB,ratio:this.ratioB,pin:l,disabled:d,handleKeyboard:g,min:r,max:a})),n("slot",{name:"end"})))}get el(){return t(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const h=(r,{knob:a,value:e,ratio:t,min:o,max:s,disabled:i,pressed:g,pin:b,handleKeyboard:h})=>{const d=r?"right":"left";return n("div",{onKeyDown:r=>{const n=r.key;"ArrowLeft"===n||"ArrowDown"===n?(h(a,!1),r.preventDefault(),r.stopPropagation()):"ArrowRight"!==n&&"ArrowUp"!==n||(h(a,!0),r.preventDefault(),r.stopPropagation())},class:{"range-knob-handle":!0,"range-knob-a":"A"===a,"range-knob-b":"B"===a,"range-knob-pressed":g,"range-knob-min":e===o,"range-knob-max":e===s},style:(()=>{const r={};return r[d]=100*t+"%",r})(),role:"slider",tabindex:i?-1:0,"aria-valuemin":o,"aria-valuemax":s,"aria-disabled":i?"true":null,"aria-valuenow":e},b&&n("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(e)),n("div",{class:"range-knob",role:"presentation",part:"knob"}))},d=(r,a,n,e)=>{let t=(n-a)*r;return e>0&&(t=Math.round(t/e)*e+a),o(a,t,n)},c=(r,a,n)=>o(0,(r-a)/(n-a),1);b.style='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';export{b as nano_range}
+//# sourceMappingURL=p-b7a58722.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/range/range.tsx","src/components/range/range.scss?tag=nano-range&encapsulation=scoped"],"names":["Range","[object Object]","hostRef","this","noUpdate","hasFocus","ratioA","ratioB","debounce","name","dualKnobs","min","max","pin","snaps","step","ticks","disabled","value","clampBounds","clamp","ensureValueInBounds","lower","upper","handleKeyboard","knob","isIncrease","updateValue","onBlur","nanoBlur","emit","emitStyle","onFocus","nanoFocus","nanoChange","debounceEvent","updateRatio","gesture","enable","debounceChanged","disabledChanged","destroy","undefined","rangeSlider","__sc_import_nano_components","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","nanoStyle","interactive","interactive-disabled","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","getValue","shadowRoot","knobEl","querySelector","focus","isRTL","start","tickStyle","tick","barStyle","active","push","renderHiddenInput","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","color","range-disabled","range-pressed","range-has-pin","range-snaps","ref","rangeEl","map","style","role","range-tick","range-tick-active","part","renderKnob","pressed","onKeyDown","key","preventDefault","stopPropagation","range-knob-handle","range-knob-a","range-knob-b","range-knob-pressed","range-knob-min","range-knob-max","knobStyle","tabindex","aria-valuemin","aria-valuemax","aria-disabled","aria-valuenow","round"],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\nimport { clamp, debounceEvent, renderHiddenInput } from '../../utils';\nimport { createColorClasses } from '../../utils/theme';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(\n      true,\n      el,\n      this.name,\n      JSON.stringify(this.getValue()),\n      disabled\n    );\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  &::slotted(ion-icon[slot]),\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  &::slotted([slot='start']),\n  ::slotted([slot='start']) {\n    @include margin(0, 14px, 0, 0);\n\n    font-size: 0.9em;\n  }\n\n  &::slotted([slot='end']),\n  ::slotted([slot='end']) {\n    @include margin(0, 0, 0, 14px);\n\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  @include border-radius(var(--bar-border-radius));\n  @include position(\n    calc((var(--height) - var(--bar-height)) / 2),\n    null,\n    null,\n    0\n  );\n\n  :host(.range-snaps) & {\n    @include border-radius(\n      var(--bar-border-radius),\n      0,\n      0,\n      var(--bar-border-radius)\n    );\n  }\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n}\n\n.range-bar-active {\n  bottom: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  @include border-radius(var(--knob-border-radius));\n  @include position(\n    calc(50% - var(--knob-size) / 2),\n    null,\n    null,\n    calc(50% - var(--knob-size) / 2)\n  );\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  @include position(\n    calc((var(--height) - var(--knob-handle-size)) / 2),\n    null,\n    null,\n    0\n  );\n  @include margin-horizontal(calc(0px - var(--knob-handle-size) / 2), null);\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  top: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    @include border-radius(\n      var(--bar-border-radius),\n      0,\n      0,\n      var(--bar-border-radius)\n    );\n  }\n\n  &:last-of-type {\n    @include border-radius(\n      0,\n      var(--bar-border-radius),\n      var(--bar-border-radius),\n      0\n    );\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    @include position(0.25em, null, null, 50%);\n\n    margin-left: -1.08em;\n\n    @include multi-dir() {\n      /* stylelint-disable-next-line property-blacklist */\n      border-radius: 50% 50% 50% 0;\n    }\n\n    @include rtl() {\n      /* stylelint-disable-next-line property-blacklist */\n      left: unset;\n    }\n\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n"]}

package/dist/nano-components/p-bb0619e6.js

@@ -0,0 +1,2 @@
+const t="nano-components";let e,n,s,o=!1,l=!1,i=!1,r=null,c=!1;const f="undefined"!=typeof window?window:{},u=f.CSS,a=f.document||{head:{}},h=f.HTMLElement||class{},d={t:0,o:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,s)=>t.addEventListener(e,n,s),rel:(t,e,n,s)=>t.removeEventListener(e,n,s),ce:(t,e)=>new CustomEvent(t,e)},b=(()=>(a.head.attachShadow+"").indexOf("[native")>-1)(),m=t=>Promise.resolve(t),p=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(t){}return!1})(),$=(t,e,n)=>{n&&n.map((([n,s,o])=>{const l=j(t,n),i=y(e,o),r=O(n);d.ael(l,s,i,r),(e.l=e.l||[]).push((()=>d.rel(l,s,i,r)))}))},y=(t,e)=>n=>{try{256&t.t?t.i[e](n):(t.u=t.u||[]).push([e,n])}catch(s){At(s,t.h||null)}},j=(t,e)=>8&e?f:16&e?a.body:t,O=t=>0!=(2&t),v="http://www.w3.org/1999/xlink",w=new WeakMap,g=t=>"sc-"+t.m,_={},k=t=>"object"==(t=typeof t)||"function"===t,T=(t,e,...n)=>{let s=null,o=null,l=null,i=!1,r=!1,c=[];const f=e=>{for(let n=0;n<e.length;n++)s=e[n],Array.isArray(s)?f(s):null!=s&&"boolean"!=typeof s&&((i="function"!=typeof t&&!k(s))&&(s+=""),i&&r?c[c.length-1].p+=s:c.push(i?C(null,s):s),r=i)};if(f(n),e){e.key&&(o=e.key),e.name&&(l=e.name);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}if("function"==typeof t)return t(null===e?{}:e,c,x);const u=C(t,null);return u.$=e,c.length>0&&(u.j=c),u.O=o,u.v=l,u},C=(t,e)=>({t:0,g:t,p:e,_:null,j:null,$:null,O:null,v:null}),M={},x={forEach:(t,e)=>t.map(E).forEach(e),map:(t,e)=>t.map(E).map(e).map(S)},E=t=>({vattrs:t.$,vchildren:t.j,vkey:t.O,vname:t.v,vtag:t.g,vtext:t.p}),S=t=>{if("function"==typeof t.vtag){const e=Object.assign({},t.vattrs);return t.vkey&&(e.key=t.vkey),t.vname&&(e.name=t.vname),T(t.vtag,e,...t.vchildren||[])}const e=C(t.vtag,t.vtext);return e.$=t.vattrs,e.j=t.vchildren,e.O=t.vkey,e.v=t.vname,e},L=(t,e,n,s,o,l)=>{if(n!==s){let r=Ut(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,o=N(n),l=N(s);e.remove(...o.filter((t=>t&&!l.includes(t)))),e.add(...l.filter((t=>t&&!o.includes(t))))}else if("style"===e){for(const e in n)s&&null!=s[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in s)n&&s[e]===n[e]||(e.includes("-")?t.style.setProperty(e,s[e]):t.style[e]=s[e])}else if("key"===e);else if("ref"===e)s&&s(t);else if(r||"o"!==e[0]||"n"!==e[1]){const f=k(s);if((r||f&&null!==s)&&!o)try{if(t.tagName.includes("-"))t[e]=s;else{let o=null==s?"":s;"list"===e?r=!1:null!=n&&t[e]==o||(t[e]=o)}}catch(i){}let u=!1;c!==(c=c.replace(/^xlink\:?/,""))&&(e=c,u=!0),null==s||!1===s?!1===s&&""!==t.getAttribute(e)||(u?t.removeAttributeNS(v,e):t.removeAttribute(e)):(!r||4&l||o)&&!f&&(s=!0===s?"":s,u?t.setAttributeNS(v,e,s):t.setAttribute(e,s))}else e="-"===e[2]?e.slice(3):Ut(f,c)?c.slice(2):c[2]+e.slice(3),n&&d.rel(t,e,n,!1),s&&d.ael(t,e,s,!1)}},H=/\s/,N=t=>t?t.split(H):[],R=(t,e,n,s)=>{const o=11===e._.nodeType&&e._.host?e._.host:e._,l=t&&t.$||_,i=e.$||_;for(s in l)s in i||L(o,s,l[s],void 0,n,e.t);for(s in i)L(o,s,l[s],i[s],n,e.t)},P=t=>{const e=t.cloneNode;t.cloneNode=function(t){const n=this,s=e.call(n,!1);if(t){let t,e,o=0,l=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si","s-sf","s-sfc","s-hsf"];for(;o<n.__childNodes.length;o++)t=n.__childNodes[o]["s-nr"],e=l.every((t=>!n.__childNodes[o][t])),t&&s.__appendChild(t.cloneNode(!0)),e&&s.__appendChild(n.__childNodes[o].cloneNode(!0))}return s}},D=t=>{class e extends Array{item(t){return this[t]}}const n=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");n&&Object.defineProperty(t,"__childNodes",n);let s=Object.getOwnPropertyDescriptor(Element.prototype,"children");s||(s=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"children")),s&&Object.defineProperty(t,"__children",s);const o=Object.getOwnPropertyDescriptor(Element.prototype,"childElementCount");o&&Object.defineProperty(t,"__childElementCount",o),Object.defineProperty(t,"children",{get(){return this.childNodes.flatMap((t=>1===t.nodeType?t:[]))}}),Object.defineProperty(t,"childElementCount",{get:()=>t.children.length}),n&&Object.defineProperty(t,"childNodes",{get(){const t=this.__childNodes,n=new e;for(let e=0;e<t.length;e++){const s=t[e]["s-nr"];s&&n.push(s)}return n}})},U=t=>{let e=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML");e||(e=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML")),e&&Object.defineProperty(t,"__innerHTML",e),Object.defineProperty(t,"innerHTML",{get:function(){let t="";return this.childNodes.forEach((e=>t+=e.outerHTML||e.textContent)),t},set:function(t){this.childNodes.forEach((t=>{t["s-ol"]&&t["s-ol"].remove(),t.remove()})),this.insertAdjacentHTML("beforeend",t)}})},A=t=>{let e=Object.getOwnPropertyDescriptor(Element.prototype,"innerText");e||(e=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerText")),e&&Object.defineProperty(t,"__innerText",e),Object.defineProperty(t,"innerText",{get:function(){let t="";return this.childNodes.forEach((e=>t+=e.innerText||e.textContent.trimEnd())),t},set:function(t){this.childNodes.forEach((t=>{t["s-ol"]&&t["s-ol"].remove(),t.remove()})),this.insertAdjacentHTML("beforeend",t)}})},W=t=>{const e=Object.getOwnPropertyDescriptor(Node.prototype,"textContent");e&&Object.defineProperty(t,"__textContent",e),Object.defineProperty(t,"textContent",{get:function(){let t="";return this.childNodes.forEach((e=>t+=e.textContent||"")),t},set:function(t){this.childNodes.forEach((t=>{t["s-ol"]&&t["s-ol"].remove(),t.remove()})),this.insertAdjacentHTML("beforeend",t)}})},B=t=>{t&&!t.__remove&&(t.__remove=t.remove||!0,F(t.parentNode),t.remove=function(){return this.parentNode?this.parentNode.removeChild(this):this.__remove()})},F=t=>{t&&!t.__removeChild&&(t.__removeChild=t.removeChild,t.removeChild=function(t){if(t["s-sn"]){const e=X(this.__childNodes||this.childNodes,t["s-sn"]);return this.__removeChild(t),void(e&&e["s-hsf"]&&tt(this))}return this.__removeChild(t)})},q=t=>{t.__appendChild||(t.__appendChild=t.appendChild,t.appendChild=function(t){const e=t["s-sn"]=Q(t),n=X(this.__childNodes,e);if(n){const s=document.createTextNode("");s["s-nr"]=t,n["s-cr"].parentNode&&n["s-cr"].parentNode.__appendChild(s),t["s-ol"]=s,B(t);const o=Y(n,e),l=o[o.length-1];return l.parentNode.insertBefore(t,l.nextSibling),F(t.parentNode),void(n["s-hsf"]&&tt(n.parentNode))}return 1===t.nodeType&&t.getAttribute("slot")&&this.__childNodes&&(t.hidden=!0),this.__appendChild(t)})},V=t=>{t.__prepend||(t.__prepend=t.prepend,t.prepend=function(...t){t.forEach((t=>{"string"==typeof t&&(t=this.ownerDocument.createTextNode(t));const e=t["s-sn"]=Q(t),n=X(this.__childNodes,e);if(n){const s=document.createTextNode("");s["s-nr"]=t,n["s-cr"].parentNode&&n["s-cr"].parentNode.__appendChild(s),t["s-ol"]=s,B(t);const o=Y(n,e)[0];return o.parentNode.insertBefore(t,o.nextSibling),F(t.parentNode),void(n["s-hsf"]&&tt(n.parentNode))}return 1===t.nodeType&&t.getAttribute("slot")&&this.__childNodes&&(t.hidden=!0),this.__prepend(t)}))})},z=t=>{t.__append||(t.__append=t.append,t.append=function(...t){t.forEach((t=>{"string"==typeof t&&(t=this.ownerDocument.createTextNode(t)),this.appendChild(t)}))})},G=t=>{t.__replaceChildren||(t.__replaceChildren=t.replaceChildren,t.replaceChildren=function(...t){const e=X(this.__childNodes,"");e&&(Y(e,"").forEach((t=>{t["s-sr"]||t.remove()})),this.append(...t))})},I=t=>{t.__insertAdjacentHTML||(t.__insertAdjacentHTML=t.insertAdjacentHTML,t.insertAdjacentHTML=function(t,e){if("afterbegin"!==t&&"beforeend"!==t)return this.__insertAdjacentHTML(t,e);const n=this.ownerDocument.createElement("_");let s;if(n.innerHTML=e,"afterbegin"===t)for(;s=n.firstChild;)this.prepend(s);else if("beforeend"===t)for(;s=n.firstChild;)this.append(s)})},J=t=>{t.__insertAdjacentText||(t.__insertAdjacentText=t.insertAdjacentText,t.insertAdjacentText=function(t,e){this.insertAdjacentHTML(t,e)})},K=t=>{t.__insertAdjacentElement||(t.__insertAdjacentElement=t.insertAdjacentElement,t.insertAdjacentElement=function(t,e){if("afterbegin"!==t&&"beforeend"!==t)return this.__insertAdjacentElement(t,e);"afterbegin"===t?this.prepend(e):"beforeend"===t&&this.append(e)})},Q=t=>t["s-sn"]||1===t.nodeType&&t.getAttribute("slot")||t.slot||"",X=(t,e)=>{let n,s=0;if(!t)return null;for(;s<t.length;s++){if(n=t[s],n["s-sr"]&&n["s-sn"]===e)return n;if(n=X(n.childNodes,e),n)return n}return null},Y=(t,e)=>{const n=[t];for(;(t=t.nextSibling)&&t["s-sn"]===e;)n.push(t);return n},Z=(t,e)=>{if(!t["s-hsf"])return;let n=t;for(;(n=n.previousSibling||n.parentNode)&&n.tagName!==t["s-hn"];)n["s-sr"]&&e&&n["s-psn"]&&n["s-psn"]===t["s-sn"]?Z(n,!0):n["s-sn"]===t["s-sn"]&&(1===n.nodeType?(n.hidden=e,n.style.display=e?"none":""):n["s-sfc"]&&(e?(n["s-sfc"]=n.textContent,n.textContent=""):""===n.textContent.trim()&&(n.textContent=n["s-sfc"])))},tt=t=>{let e,n,s,o,l,i,r=t.__childNodes||t.childNodes;for(n=0,s=r.length;n<s;n++){if(e=r[n],e["s-sr"])for(l=e["s-sn"],Z(e,!1),o=0;o<s;o++)if(i=r[o].nodeType,!r[o]["s-sf"])if(r[o]["s-hn"]!==e["s-hn"]||""!==l){if(1===i&&l===r[o]["s-sn"]){Z(e,!0),B(r[o]);break}}else if(r[o]["s-sn"]===l&&(1===i||3===i&&""!==r[o].textContent.trim())){Z(e,!0),B(r[o]);break}tt(e)}},et=(t,l,r,c)=>{let f,u,h,d=l.j[r],b=0;if(o||(i=!0,"slot"===d.g&&(e&&c.classList.add(e+"-s"),d.t|=d.j?2:1)),null!==d.p)f=d._=a.createTextNode(d.p);else if(3&d.t)f=d._=a.createTextNode("");else if(f=d._=a.createElement(d.g),R(null,d,!1),null!=e&&f["s-si"]!==e&&f.classList.add(f["s-si"]=e),d.j)for(b=0;b<d.j.length;++b)u=et(t,d,b,f),u&&(f.__appendChild?f.__appendChild(u):f.appendChild(u));if(f["s-hn"]=s,3&d.t){if(f["s-sr"]=!0,f["s-cr"]=n,f["s-sn"]=d.v||"",l.v&&(f["s-psn"]=l.v),2&d.t&&d.j)for(b=0;b<d.j.length;++b){let e=1===f.nodeType?f:c;for(;1!==e.nodeType;)e=e.parentNode;u=et(t,d,b,e),u["s-sf"]=f["s-hsf"]=!0,void 0===u["s-sn"]&&(u["s-sn"]=d.v||""),3===u.nodeType&&(u["s-sfc"]=u.textContent),u&&(e.__appendChild?e.__appendChild(u):e.appendChild(u))}h=t&&t.j&&t.j[r],h&&h.g===d.g&&t._&&nt(t._,!1)}return f},nt=(t,e)=>{d.t|=1;const n=t.__childNodes||t.childNodes;for(let o=n.length-1;o>=0;o--){const t=n[o];t["s-hn"]!==s&&t["s-ol"]&&(ct(t).insertBefore(t,rt(t)),t["s-ol"].remove(),t["s-ol"]=void 0,i=!0),e&&nt(t,e)}d.t&=-2},st=(t,e,n,o,l,i)=>{let r,c=t["s-cr"]&&t["s-cr"].parentNode||t;for(c.shadowRoot&&c.tagName===s&&(c=c.shadowRoot);l<=i;++l)o[l]&&(r=et(null,n,l,t),r&&(o[l]._=r,c.insertBefore(r,rt(e))))},ot=t=>{let e,n,s,o=t.__childNodes||t.childNodes;for(n=0,s=o.length;n<s;n++)e=o[n],e["s-ol"]?e["s-hn"]&&(e["s-hn"]=void 0):ot(e)},lt=(t,e,n,s,o)=>{for(;e<=n;++e)(s=t[e])&&(o=s._,dt(s),l=!0,ot(o),o["s-ol"]?o["s-ol"].remove():nt(o,!0),o.remove())},it=(t,e)=>t.g===e.g&&("slot"===t.g?t.v===e.v:t.O===e.O),rt=t=>t&&t["s-ol"]||t,ct=t=>(t["s-ol"]?t["s-ol"]:t).parentNode,ft=(t,e)=>{const n=e._=t._,s=t.j,o=e.j,i=e.p;let r;null===i?("slot"===e.g||R(t,e,!1),null!==s&&null!==o?((t,e,n,s)=>{let o,i,r,c,f,u,a,h,d,b=0,m=0,p=0,$=0,y=0,j=e.length-1,O=e[0],v=e[j],w=s.length-1,g=s[0],_=s[w],k=[],T={};for(;b<=j&&m<=w;)if(null==O)O=e[++b];else if(null==v)v=e[--j];else if(null==g)g=s[++m];else if(null==_)_=s[--w];else if(it(O,g))ft(O,g),O=e[++b],g=s[++m];else if(it(v,_))ft(v,_),v=e[--j],_=s[--w];else if(it(O,_))"slot"!==O.g&&"slot"!==_.g||nt(O._.parentNode,!1),ft(O,_),t.insertBefore(O._,v._.nextSibling),O=e[++b],_=s[--w];else if(it(v,g))"slot"!==O.g&&"slot"!==_.g||nt(v._.parentNode,!1),ft(v,g),t.insertBefore(v._,O._),v=e[--j],g=s[++m];else{for(p=-1,$=b;$<=j;++$)if(e[$]&&null!==e[$].O&&e[$].O===g.O){p=$;break}p>=0?(i=e[p],i.g!==g.g?o=et(e&&e[m],n,p,t):(ft(i,g),e[p]=void 0,o=i._),g=s[++m]):(o=et(e&&e[m],n,m,t),g=s[++m]),o&&ct(O._).insertBefore(o,rt(O._))}if(b>j?st(t,null==s[w+1]?null:s[w+1]._,n,s,m,w):m>w&&lt(e,b,j),t.parentNode&&n._["s-hsf"]){for(r=t.parentNode.__childNodes||t.parentNode.childNodes,c=r.length-1,$=0;$<=c;++$)a=r[$],a["s-hsf"]?k.push(a):a["s-sf"]&&(T[a["s-sn"]]||(T[a["s-sn"]]=[]),T[a["s-sn"]].push(a));for(f=k.length-1,$=0;$<=f;++$)if(h=k[$],T[h["s-sn"]])for(u=T[h["s-sn"]].length-1,y=0;y<=u;++y)d=T[h["s-sn"]][y],h.parentNode.insertBefore(d,h);l=!0}})(n,s,e,o):null!==o?(null!==t.p&&(n.textContent=""),st(n,null,e,o,0,o.length-1)):null!==s&&lt(s,0,s.length-1)):(r=n["s-cr"])?r.parentNode.textContent=i:t.p!==i&&(n.textContent=i,n["s-sf"]&&(n["s-sfc"]=i))},ut=[],at=t=>{let e,n,s,o,i,r,c=0,f=t.__childNodes||t.childNodes,u=f.length;for(;c<u;c++){if(e=f[c],e["s-sr"]&&(n=e["s-cr"])&&n.parentNode)for(e["s-hsf"]&&(l=!0),s=n.parentNode.__childNodes||n.parentNode.childNodes,o=e["s-sn"],r=s.length-1;r>=0;r--)n=s[r],n["s-cn"]||n["s-nr"]||n["s-hn"]===e["s-hn"]||(ht(n,o)?(i=ut.find((t=>t.k===n)),l=!0,n["s-sn"]=n["s-sn"]||o,i?i.T=e:ut.push({T:e,k:n}),n["s-sr"]&&ut.map((t=>{ht(t.k,n["s-sn"])&&(i=ut.find((t=>t.k===n)),i&&!t.T&&(t.T=i.T))}))):ut.some((t=>t.k===n))||ut.push({k:n}));1===e.nodeType&&at(e)}},ht=(t,e)=>1===t.nodeType?null===t.getAttribute("slot")&&""===e||t.getAttribute("slot")===e:t["s-sn"]===e||""===e,dt=t=>{t.$&&t.$.ref&&t.$.ref(null),t.j&&t.j.map(dt)},bt=t=>Rt(t).h,mt=(t,e,n)=>{const s=bt(t);return{emit:t=>pt(s,e,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:t})}},pt=(t,e,n)=>{const s=d.ce(e,n);return t.dispatchEvent(s),s},$t=(t,e)=>{e&&!t.C&&e["s-p"]&&e["s-p"].push(new Promise((e=>t.C=e)))},yt=(t,e)=>{if(t.t|=16,!(4&t.t))return $t(t,t.M),Qt((()=>jt(t,e)));t.t|=512},jt=(t,e)=>{const n=t.h,s=t.i;let o;return e&&(t.t|=256,t.u&&(t.u.map((([t,e])=>Tt(s,t,e,n))),t.u=null),o=Tt(s,"componentWillLoad",void 0,n)),Ct(o,(()=>Ot(t,s,e)))},Ot=async(t,e,n)=>{const s=t.h,o=s["s-rc"];n&&(t=>{const e=t.S,n=t.h,s=e.t,o=((t,e)=>{let n=g(e),s=Ft.get(n);if(t=11===t.nodeType?t:a,s)if("string"==typeof s){let e,o=w.get(t=t.head||t);o||w.set(t,o=new Set),o.has(n)||(e=a.createElement("style"),e.innerHTML=s,t.insertBefore(e,t.querySelector("link")),o&&o.add(n))}else t.adoptedStyleSheets.includes(s)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,s]);return n})(b&&n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&s&&(n["s-sc"]=o,n.classList.add(o+"-h"),2&s&&n.classList.add(o+"-s"))})(t);vt(t,e),o&&(o.map((t=>t())),s["s-rc"]=void 0);{const e=s["s-p"],n=()=>gt(t);0===e.length?n():(Promise.all(e).then(n),t.t|=4,e.length=0)}},vt=(t,c)=>{try{r=c,c=c.render(),t.t&=-17,t.t|=2,((t,r)=>{const c=t.h,f=t.S,u=t.L||C(null,null),h=(t=>t&&t.g===M)(r)?r:T(null,null,r);if(s=c.tagName,f.H&&(h.$=h.$||{},f.H.map((([t,e])=>h.$[e]=c[t]))),h.g=null,h.t|=4,t.L=h,h._=u._=c.shadowRoot||c,e=c["s-sc"],n=c["s-cr"],o=b&&0!=(1&f.t),l=!1,ft(u,h),d.t|=1,i){let t,e,n,s,o,l,i;at(h._);let r=0;for(;r<ut.length;r++)t=ut[r],e=t.k,e["s-ol"]||(n=a.createTextNode(""),n["s-nr"]=e,e.parentNode.insertBefore(e["s-ol"]=n,e));for(r=0;r<ut.length;r++)if(t=ut[r],e=t.k,t.T){for(s=t.T.parentNode,o=t.T.nextSibling,n=e["s-ol"],i=o;n=n.previousSibling;)if(l=n["s-nr"],l&&l["s-sn"]===e["s-sn"]&&s===l.parentNode&&(l=l.nextSibling,!l||!l["s-nr"])){o=l;break}(!o&&s!==e.parentNode||e.nextSibling!==o)&&(e!==o?(!e["s-hn"]&&e["s-ol"]&&(e["s-hn"]=e["s-ol"].parentNode.nodeName),s.insertBefore(e,o),e.hidden=!1):s.insertBefore(e,i))}else 1===e.nodeType&&(e.hidden=!0)}l&&tt(h._),d.t&=-2,ut.length=0})(t,c)}catch(f){At(f,t.h)}return r=null,null},wt=()=>r,gt=t=>{const e=t.h,n=t.i,s=t.M;Tt(n,"componentDidRender",void 0,e),64&t.t?Tt(n,"componentDidUpdate",void 0,e):(t.t|=64,Mt(e),Tt(n,"componentDidLoad",void 0,e),t.N(e),s||kt()),t.R(e),t.C&&(t.C(),t.C=void 0),512&t.t&&Jt((()=>yt(t,!1))),t.t&=-517},_t=t=>{{const e=Rt(t),n=e.h.isConnected;return n&&2==(18&e.t)&&yt(e,!1),n}},kt=()=>{Mt(a.documentElement),Jt((()=>pt(f,"appload",{detail:{namespace:"nano-components"}})))},Tt=(t,e,n,s)=>{if(t&&t[e])try{return t[e](n)}catch(o){At(o,s)}},Ct=(t,e)=>t&&t.then?t.then(e):e(),Mt=t=>t.classList.add("hydrated"),xt=(t,e,n,s,o=!0)=>{const l=Rt(t),i=l.h,r=l.P.get(e),c=l.t,f=l.i;if(n=((t,e)=>null==t||k(t)?t:4&e?"false"!==t&&(""===t||!!t):2&e?parseFloat(t):1&e?t+"":t)(n,s.D[e][0]),!(8&c&&void 0!==r||n===r)&&(l.P.set(e,n),f)){if(s.U&&128&c&&o){const t=s.U[e];t&&t.map((t=>{try{f[t](n,r,e)}catch(s){At(s,i)}}))}2==(18&c)&&yt(l,!1)}},Et=(t,e,n)=>{if(e.D){t.watchers&&(e.U=t.watchers);const s=Object.entries(e.D),o=t.prototype;if(s.map((([t,[s]])=>{31&s||2&n&&32&s?0==(2048&s)?Object.defineProperty(o,t,{get(){return((t,e)=>Rt(this).P.get(e))(0,t)},set(n){xt(this,t,n,e)},configurable:!0,enumerable:!0}):1&n&&2048&s&&(Object.defineProperty(o,t,{get(){return Rt(this).i[t]},configurable:!0,enumerable:!0}),4096&s&&Object.defineProperty(o,t,{set(n){const s=Rt(this),o=(o=!1)=>{s.i[t]=n,xt(this,t,s.i[t],e,!o)};s.i?o():s.A.then((()=>o(!0)))}})):1&n&&64&s&&Object.defineProperty(o,t,{value(...e){const n=Rt(this);return n.A.then((()=>n.i[t](...e)))}})})),1&n){const n=new Map;o.attributeChangedCallback=function(t,e,s){d.jmp((()=>{const e=n.get(t);this.hasOwnProperty(e)&&(s=this[e],delete this[e]);const l=Object.getOwnPropertyDescriptor(o,e);l.get&&!l.set||(this[e]=(null!==s||"boolean"!=typeof this[e])&&s)}))},t.observedAttributes=s.filter((([t,e])=>15&e[0])).map((([t,s])=>{const o=s[1]||t;return n.set(o,t),512&s[0]&&e.H.push([t,o]),o}))}}return t},St=(t,e)=>{Tt(t,"connectedCallback",void 0,e)},Lt=(t,e={})=>{const n=[],s=e.exclude||[],o=f.customElements,l=a.head,i=l.querySelector("meta[charset]"),r=a.createElement("style"),c=[];let u,h=!0;Object.assign(d,e),d.o=new URL(e.resourcesUrl||"./",a.baseURI).href,t.map((t=>t[1].map((l=>{const i={t:l[0],m:l[1],D:l[2],W:l[3]};i.D=l[2],i.W=l[3],i.H=[],i.U={},!b&&1&i.t&&(i.t|=8);const r=e.transformTagName?e.transformTagName(i.m):i.m,f=class extends HTMLElement{constructor(t){super(t),Dt(t=this,i),1&i.t&&(b?t.attachShadow({mode:"open"}):"shadowRoot"in t||(t.shadowRoot=t))}connectedCallback(){u&&(clearTimeout(u),u=null),h?c.push(this):d.jmp((()=>(t=>{if(0==(1&d.t)){const e=Rt(t),n=e.S,s=()=>{};if(1&e.t)$(t,e,n.W),St(e.i,t);else{e.t|=1,12&n.t&&(t=>{const e=t["s-cr"]=a.createComment("");e["s-cn"]=!0,t.firstChild?t.insertBefore(e,t.firstChild):t.appendChild(e)})(t);{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){$t(e,e.M=n);break}}n.D&&Object.entries(n.D).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n,s,o)=>{if(0==(32&e.t)){{if(e.t|=32,(o=Bt(n,e)).then){const t=()=>{};o=await o,t()}o.isProxied||(n.U=o.watchers,Et(o,n,2),o.isProxied=!0);const s=()=>{};e.t|=8;try{new o(e)}catch(r){At(r,t)}e.t&=-9,e.t|=128,s(),St(e.i,t)}if(o.style){let t=o.style;const e=g(n);if(!Ft.has(e)){const s=()=>{};8&n.t&&(t=await __sc_import_nano_components("./p-ed174626.js").then((n=>n.scopeCss(t,e,!1)))),((t,e,n)=>{let s=Ft.get(t);p&&n?(s=s||new CSSStyleSheet,s.replace(e)):s=e,Ft.set(t,s)})(e,t,!!(1&n.t)),s()}}}const l=e.M,i=()=>yt(e,!0);l&&l["s-rc"]?l["s-rc"].push(i):i()})(t,e,n)}s()}})(this)))}disconnectedCallback(){d.jmp((()=>(t=>{if(0==(1&d.t)){const e=Rt(t),n=e.i;e.l&&(e.l.map((t=>t())),e.l=void 0),Tt(n,"disconnectedCallback",void 0,t)}})(this)))}componentOnReady(){return Rt(this).B}};(4&i.t||8&i.t)&&((t=>{D(t),q(t),z(t),V(t),I(t),J(t),K(t),G(t),U(t),A(t),W(t)})(f.prototype),P(f.prototype)),i.F=t[0],s.includes(r)||o.get(r)||(n.push(r),o.define(r,Et(f,i,1)))})))),r.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",r.setAttribute("data-styles",""),l.insertBefore(r,i?i.nextSibling:l.firstChild),h=!1,c.length?c.map((t=>t.connectedCallback())):d.jmp((()=>u=setTimeout(kt,30)))},Ht=t=>{const e=new URL(t,d.o);return e.origin!==f.location.origin?e.href:e.pathname},Nt=new WeakMap,Rt=t=>Nt.get(t),Pt=(t,e)=>Nt.set(e.i=t,e),Dt=(t,e)=>{const n={t:0,h:t,S:e,P:new Map};return n.A=new Promise((t=>n.R=t)),n.B=new Promise((t=>n.N=t)),t["s-p"]=[],t["s-rc"]=[],$(t,n,e.W),Nt.set(t,n)},Ut=(t,e)=>e in t,At=(t,e)=>(0,console.error)(t,e),Wt=new Map,Bt=(t,e)=>{const n=t.m.replace(/-/g,"_"),s=t.F,o=Wt.get(s);return o?o[n]:__sc_import_nano_components(`./${s}.entry.js`).then((t=>(Wt.set(s,t),t[n])),(t=>{At(t,e.h)}))},Ft=new Map,qt=[],Vt=[],zt=(t,e)=>n=>{t.push(n),c||(c=!0,e&&4&d.t?Jt(It):d.raf(It))},Gt=t=>{for(let n=0;n<t.length;n++)try{t[n](performance.now())}catch(e){At(e)}t.length=0},It=()=>{Gt(qt),Gt(Vt),(c=qt.length>0)&&d.raf(It)},Jt=t=>m().then(t),Kt=zt(qt,!1),Qt=zt(Vt,!0),Xt={isDev:!1,isBrowser:!0,isServer:!1,isTesting:!1};export{Xt as B,u as C,h as H,t as N,m as a,Lt as b,mt as c,a as d,M as e,Qt as f,bt as g,T as h,Kt as i,_t as j,Ht as k,wt as l,d as p,Pt as r,f as w}
+//# sourceMappingURL=p-bb0619e6.js.map