@nanoporetech-digital/components 2.11.0 → 2.12.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-07-12T23:46:07",
+  "timestamp": "2022-08-11T13:25:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -5375,7 +5375,7 @@
       "encapsulation": "none",
       "tag": "nano-field-validator",
       "readme": "# nano-field-validator\n\n\n",
-      "docs": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n- Scroll to invalid field on submit",
+      "docs": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -5400,14 +5400,14 @@
         },
         {
           "name": "payload",
-          "type": "ValueStore",
+          "type": "ValidatorValueStore",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The current form payload as a reactive store. @readonly",
+          "docs": "The current form payload as a reactive proxy. @readonly",
           "docsTags": [],
           "values": [
             {
-              "type": "ValueStore"
+              "type": "ValidatorValueStore"
             }
           ],
           "optional": false,
@@ -5452,6 +5452,23 @@
           "getter": true,
           "setter": false
         },
+        {
+          "name": "store",
+          "type": "ObservableMap<ValidatorValueStore>",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The current form state as a stencil store.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ObservableMap<ValidatorValueStore>"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "valid",
           "type": "boolean",
@@ -5500,7 +5517,7 @@
         },
         {
           "name": "validation",
-          "type": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
+          "type": "(field: string, value: string, fields: ValidatorValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "A validation callback method.",
@@ -5524,7 +5541,7 @@
           ],
           "values": [
             {
-              "type": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }"
+              "type": "(field: string, value: string, fields: ValidatorValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }"
             }
           ],
           "optional": false,
@@ -5550,7 +5567,24 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "setStore",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setStore(state: ValidatorValueStore) => Promise<void>",
+          "parameters": [],
+          "docs": "Sets the state of the form using an object of key / value pairs.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "state - the state to load in the store"
+            }
+          ]
+        }
+      ],
       "events": [
         {
           "event": "nanoInvalid",
@@ -5563,7 +5597,7 @@
         },
         {
           "event": "nanoPayloadChange",
-          "detail": "ValueStore",
+          "detail": "ValidatorValueStore",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -5681,7 +5715,7 @@
           "type": "FileWithUrl[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A File array that lists every selected file.\nHas an added `objectURL` property returning a `DOMString`\ncontaining an object URL that can be used to reference the contents of the specified source\nThis list has no more than one member unless the multiple attribute is specified. @readonly",
+          "docs": "A File array that lists every selected file.\nHas an added `objectURL` property returning a `DOMString`\ncontaining an object URL that can be used to reference the contents of the specified source\nThis list has no more than one member unless the multiple attribute is specified",
           "docsTags": [],
           "values": [
             {
@@ -5691,7 +5725,7 @@
           "optional": false,
           "required": false,
           "getter": true,
-          "setter": false
+          "setter": true
         },
         {
           "name": "form",

package/docs-vscode.json

@@ -1067,7 +1067,7 @@
       "name": "nano-field-validator",
       "description": {
         "kind": "markdown",
-        "value": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n- Scroll to invalid field on submit"
+        "value": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit"
       },
       "attributes": [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -126,5 +126,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "b60b712f2283dc438a9304db1c94d546fca37806"
+  "gitHead": "59dd487ec0208b7265427e8c451c1f2d61f339fa"
 }

package/dist/nano-components/p-1b120f53.entry.js.map

@@ -1 +0,0 @@
-{"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","[object Object]","hostRef","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","showInlineValidation","nanoBlur","emit","onFocus","nanoFocus","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","onInvalid","ev","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","form","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","arrToFileList","setTimeout","requestAnimationFrame","invalid","validityMessage","Array","from","objectURL","URL","createObjectURL","val","validateFirst","isValid","focus","Promise","resolve","message","composedPath","every","node","host","document","querySelector","i","len","items","add","match","nanoValidate","originalEvent","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","newFiles","findFile","slotChangeObserver","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":";;;gEAAA,MAAMA,EAAgB,i1dCsBtB,IAAIC,EAAe,EAEnB,IAAIC,EAAkB,IAAM,IAAIC,aAChC,IACED,IACA,MAAAE,GACA,IACEF,EAAkB,IAAM,IAAIG,eAAe,IAAIC,cAC/CJ,IACA,MAAAK,GACAL,EAAkB,UAsBTM,EAAU,MALvBC,YAAAC,uKASUC,KAAAC,YAAc,oBAAoBX,MAClCU,KAAAE,oBAAsBX,EACtBS,KAAAG,YAAgC,GAI/BH,KAAAI,aAAuB,GACvBJ,KAAAK,WAAa,MACbL,KAAAM,SAA6B,GAgC9BN,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,SAqBOf,KAAAgB,SAAW,MA+HZhB,KAAAiB,aAAe,KACrBjB,KAAKkB,MAAQ,IAGPlB,KAAAmB,OAAS,KACfnB,KAAKoB,SAAW,MAChBpB,KAAKqB,WACL,GAAIrB,KAAKe,aAAe,QAASf,KAAKsB,uBACtCtB,KAAKuB,SAASC,QAGRxB,KAAAyB,QAAU,KAChBzB,KAAKoB,SAAW,KAChBpB,KAAK0B,UAAUF,QAmBTxB,KAAAqB,SAAW,KACjBrB,KAAKI,aAAe,GACpBJ,KAAK2B,QAAQC,kBAAkB,IAC/B,IAAIC,EAEJ,IAAK7B,KAAK2B,QAAQG,SAASC,MAAO,CAChCF,EAAQ7B,KAAK2B,QAAQK,sBAChB,CACLhC,KAAKM,SAAS2B,SAASC,IACrBL,EAAQ,KACR,IAAK7B,KAAKmC,cAAcD,EAASE,KAAKC,MAAO,CAC3CR,EACE,gDACA7B,KAAKO,YACL,UACG,IAAKP,KAAKsC,cAAcJ,EAASE,KAAKG,MAC3CV,EAAQ,6BAA6B7B,KAAKwC,UAE5CN,EAASF,kBAAoBH,EAC7BK,EAASH,OAASF,KAEpB,GAAI7B,KAAKM,SAASmC,OAASzC,KAAKQ,SAC9BqB,EAAQ,qCAAqC7B,KAAKQ,YAGtD,KAAMqB,EAAO7B,KAAK2B,QAAQC,kBAAkBC,IA0DtC7B,KAAA0C,UAAaC,IACnB,GAAI3C,KAAKc,gBAAiB6B,EAAGC,iBAC7B5C,KAAKqB,WACLrB,KAAKsB,qBAAqBqB,IAGpB3C,KAAA6C,aAAgBC,IACtB,MAAMC,EAASD,EAAEE,OAA4BD,MAC7C,GAAIA,GAASA,EAAMN,OACjBzC,KAAKiD,YAAaH,EAAEE,OAA4BD,QAG5C/C,KAAAkD,sBAAwB,CAACJ,EAAUV,KACzC,IAAKpC,KAAKE,kBAAmB,OAC7BF,KAAKG,YAAYgD,KAAKf,GAErBU,EAAEE,OACAI,QAAQ,mCACRC,UAAUC,OAAO,mCAGdtD,KAAAuD,iBAAmB,KACzB,IAAKvD,KAAKE,oBAAsBF,KAAKG,YAAYsC,OAAQ,OACzDzC,KAAKM,SAAWN,KAAKM,SAASkD,QAC3BtB,IAAclC,KAAKG,YAAYsD,MAAMC,GAAWA,IAAWxB,MAE9DlC,KAAKG,YAAc,IAGbH,KAAA2D,cAAgB,KACtB3D,KAAK4D,WAAWpC,KAAK,CAAEN,MAAOlB,KAAKkB,MAAO6B,MAAO/C,KAAK+C,SAGhD/C,KAAA6D,WAAcf,IACpBA,EAAEF,iBACFE,EAAEgB,kBACF9D,KAAKK,WAAa,OAGZL,KAAA+D,YAAejB,IACrBA,EAAEF,iBACFE,EAAEgB,kBACF9D,KAAKK,WAAa,MAGZL,KAAAgE,OAAUlB,IAChB9C,KAAK6D,WAAWf,GAChB,GAAIA,EAAEmB,aAAalB,OAASD,EAAEmB,aAAalB,MAAMN,OAC/CzC,KAAKiD,YAAYH,EAAEmB,aAAalB,QAiB5B/C,KAAAkE,gBAAkB,CACxBC,EACAC,KAEA,MAAMC,EAAUrE,KAAKC,YAAc,OACnC,MAAMqE,EACJtE,KAAKc,iBAAmBd,KAAKuE,cACzBvE,KAAKC,YAAc,QACnB,GAEN,MAAO,CACLuE,EAAA,MAAA,CAAKC,MAAO,gBAAkBN,EAAU,SACtCK,EAAA,QAAA,CACEC,MAAO,gBAAkBN,EACzBO,QAAS1E,KAAKC,YACd0E,GAAIN,EACJL,OAASlB,IACP9C,KAAKgE,OAAOlB,GACZ9C,KAAK6D,WAAWf,IAElB8B,UAAW5E,KAAK6D,WAChBgB,YAAa7E,KAAK6D,WAClBiB,YAAa9E,KAAK+D,YAClBgB,WAAY/E,KAAK+D,gBAEb/D,KAAKgF,OAAUhF,KAAKiF,cAAgBd,IAAY,SAClDK,EAAA,MAAA,CACEC,MAAO,sBACLzE,KAAKU,UAAY,gBAAkB,QAGlCV,KAAKgF,SAAWhF,KAAKgF,MAAMvC,OAASzC,KAAKgF,MAAQ,IAClDhF,KAAKgF,OAAShF,KAAKiF,cAAgBd,IAAY,QAC/CK,EAAA,OAAA,CAAMU,KAAK,WAIhBf,IAAY,QACXK,EAAA,MAAA,CAAKC,MAAM,0BACTD,EAAA,MAAA,KAAMxE,KAAKiF,cAAgBT,EAAA,OAAA,CAAMU,KAAK,WACtCV,EAAA,MAAA,KAAA,oBACwBA,EAAA,OAAA,KAAA,YAI3BL,IAAY,OACXK,EAAA,MAAA,CACEC,MAAO,0DACLzE,KAAKoB,SAAW,gBAAkB,MAGpCoD,EAAA,MAAA,CAAKC,MAAO,4BACVD,EAAA,YAAA,CAAWU,KAAK,yBAChBV,EAAA,OAAA,OACKxE,KAAKM,SAASmC,OACbzC,KAAKM,SAAS,GAAG8B,KAAK8C,KACtBlF,KAAKS,eAERT,KAAKkB,OAASlB,KAAKa,aAAeb,KAAKY,UACxC4D,EAAA,SAAA,CACEjC,KAAK,SACLkC,MAAM,8BACNU,SAAS,KACTC,QAASpF,KAAKiB,cAEduD,EAAA,YAAA,CAAWU,KAAK,mBAM1BV,EAAA,QAAA,CAAAa,kBACmBhB,EAAU,IAAMC,EAAS,IAAMF,EAChD7B,KAAK,OACLoC,GAAI3E,KAAKC,YACTuC,OAAQxC,KAAKwC,OACbiC,MAAM,qBACNa,SAAUtF,KAAKQ,SAAW,EAC1BI,SAAUZ,KAAKY,SACfsE,KAAMlF,KAAKE,kBAAoBqF,UAAYvF,KAAKkF,KAChDM,KAAMxF,KAAKwF,KACXC,IAAMC,IACJ,GAAI1F,KAAKE,kBAAmB,CAC1BF,KAAK2F,cAAgBD,EACrB,OAEF1F,KAAK2B,QAAU+D,GAEjBE,SAAU5F,KAAK6C,aACfpB,QAASzB,KAAKyB,QACdoE,QAAS7F,KAAK2D,iBAGlBa,EAAA,QAAA,CACEU,MAAOlF,KAAKE,kBAAoBqF,UAAYvF,KAAKkF,KACjDM,KAAMxF,KAAKwF,KACXC,IAAMC,IACJ,IAAK1F,KAAKE,kBAAmB,OAC7BF,KAAK2B,QAAU+D,GAEjBnD,KAAK,OACLoC,GAAI3E,KAAKC,YAAc,UACvB6F,UAAW,EACXR,SAAU,KACVb,MAAM,qBACN7D,SAAUZ,KAAKY,SACfD,SAAUX,KAAKW,SACf6B,OAAQxC,KAAKwC,OACbE,UAAW1C,KAAK0C,UAChBkD,SAAU5F,KAAK2D,iBAGnB3D,KAAKc,iBAAmBd,KAAKuE,cAC3BC,EAAA,MAAA,CAAKC,MAAM,oBAAoBE,GAAIL,GAChCtE,KAAKc,mBAAqBd,KAAKI,aAAaqC,OAC3C+B,EAAA,MAAA,CAAKC,MAAM,sBAAsBzE,KAAKI,cAAmB,GAI3DoE,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAMU,KAAK,aAET,KAOJlF,KAAA+F,OAAS,IACR/F,KAAKkE,gBAAgB,OAGtBlE,KAAAgG,SAAW,KACjB,MAAM5B,EAASpE,KAAKC,YAAc,QAClC,MAAO,CACLD,KAAKkE,gBAAgB,OAAQE,GAC7BI,EAAA,SAAA,CAAQC,MAAM,yBAAyBE,GAAIP,KACtCpE,KAAKM,UAAYN,KAAKM,SAASmC,OAAS,GACzC+B,EAAA,KAAA,CAAIC,MAAM,0BACPzE,KAAKM,SAAS2F,KAAK7D,GAEhBoC,EAAA,KAAA,CACE0B,IAAK9D,EAAKA,KAAK8C,KACfT,MAAM,kEACN0B,eAAiBC,GAAMpG,KAAKuD,oBAE5BiB,EAAA,OAAA,CAAMC,MAAM,cAAcrC,EAAKA,KAAK8C,OAClC9C,EAAKL,OACLyC,EAAA,eAAA,CACE6B,QAASjE,EAAKJ,kBACdsE,UAAU,QAEV9B,EAAA,mBAAA,CACEC,MAAM,yBACN8B,SAAS,6BACTvB,MAAM,gBAIXhF,KAAKE,mBACJsE,EAAA,mBAAA,CACEC,MAAM,gCACNlC,KAAK,SACLgE,SAAS,YACTvB,MAAM,YACNhC,OAAO,SACPwD,KAAMpE,EAAKqE,WAGdzG,KAAKE,mBACJsE,EAAA,mBAAA,CACEY,QAAUtC,GAAM9C,KAAKkD,sBAAsBJ,EAAGV,GAC9CqC,MAAM,kCACN8B,SAAS,cACTvB,MAAM,uBAljB1BlF,iBACE,GAAIE,KAAKE,kBAAmB,CAC1BF,KAAK2F,cAAczE,MAAQ,GAC3BlB,KAAK2B,QAAQoB,MAAQ/C,KAAK0G,cACxB1G,KAAKM,SAAS2F,KAAK7D,GAASA,EAAKA,QAEnCuE,YAAW,KACT3G,KAAK4D,WAAWpC,KAAK,CAAEN,MAAOlB,KAAKkB,MAAO6B,MAAO/C,KAAK+C,UACrD,KA+DGjD,iBACR,IAAKE,KAAK2B,QAAS,OAEnB3B,KAAKqB,WACLuF,uBAAsB,KACpB,GAAI5G,KAAKe,aAAe,QAASf,KAAKsB,0BAO1CuF,cAEE,OAAO7G,KAAKgB,SAMd8F,sBAEE,IAAK9G,KAAK2B,QAAS,MAAO,GAC1B,OAAO3B,KAAK2B,QAAQK,kBAOtBe,YAEE,OAAO/C,KAAK2B,QACRoF,MAAMC,KAAKhH,KAAK2B,QAAQoB,OAAOkD,KAAK7D,IAClCA,EAAK6E,UAAYC,IAAIC,gBAAgB/E,GACrC,OAAOA,KAET,GAMNlB,YAEE,OAAOlB,KAAK2B,QAAU3B,KAAK2B,QAAQT,MAAQ,GAE7CA,UAAUkG,GACR,GAAIA,IAAQ,IAAMpH,KAAK2B,QAAS,CAC9B3B,KAAKM,SAAW,GAChBN,KAAK2B,QAAQT,MAAQ,IAyBzBpB,qBAAqBuH,GACnB,GAAIA,EAAe,CACjBrH,KAAKqB,WACLrB,KAAKsB,uBAEP,MAAO,CACLgG,SAAUtH,KAAK6G,QACfzG,aAAcJ,KAAK2B,QAAQK,mBAO/BlC,iBACE,GAAIE,KAAK2B,QAAS3B,KAAK2B,QAAQ4F,QAKjCzH,kBACE,OAAO0H,QAAQC,QAAQzH,KAAK2B,SAM9B7B,gBAAgB4H,GACd,GAAI1H,KAAK2B,QAAS,CAChB3B,KAAK2B,QAAQC,kBAAkB8F,GAC/B1H,KAAKqB,WACLrB,KAAKsB,wBAOTxB,mBAAmBgD,GACjB,IAAK9C,KAAKoB,SAAU,OACpB,GAAI0B,EAAE6E,eAAeC,OAAOC,GAASA,IAAS7H,KAAK8H,OAAO9H,KAAKmB,SAIjErB,qBAAqBgD,GACnB,IAAK9C,KAAKoB,UAAY0B,EAAEoD,MAAQ,MAAO,OACvC,GAAIpD,EAAEE,SAAWhD,KAAK2B,QAAS3B,KAAKmB,SAItCrB,QAAQgD,GACN,MAAM0C,EAAOxF,KAAKwF,KACduC,SAASC,cAAc,IAAMhI,KAAKwF,MAClCxF,KAAK8H,KAAK1E,QAAQ,QACtB,IAAKoC,GAAQ1C,EAAEE,SAAWhD,KAAK8H,KAAK1E,QAAQ,QAAS,OAErDpD,KAAKkB,MAAQ,GAqBPpB,cAAciD,GACpB,MAAMzC,EAAWf,IACjB,IAAK,IAAI0I,EAAI,EAAGC,EAAMnF,EAAMN,OAAQwF,EAAIC,EAAKD,IAC3C3H,EAAS6H,MAAMC,IAAIrF,EAAMkF,IAC3B,OAAO3H,EAASyC,MAGVjD,cAAcuC,GACpB,OAAOA,EAAO,KAAWrC,KAAKO,YAGxBT,cAAcyC,GACpB,IAAKvC,KAAKwC,OAAQ,OAAO,KACzB,OAAOxC,KAAKwC,OAAO6F,MAAM9F,IAASvC,KAAKwC,OAAO6F,MAAM9F,GAAME,OAAS,EA+B7D3C,qBAAqB6C,GAC3B,GAAI3C,KAAKe,aAAe,kBAAmBf,KAAKe,WAAa,QAE7Df,KAAKgB,SAAW,MAChBhB,KAAKI,aAAe,GAEpB,IAAKJ,KAAK2B,QAAQG,SAASC,MAAO,CAChC/B,KAAKI,aAAeJ,KAAK2B,QAAQK,kBACjChC,KAAKgB,SAAW,KAGlBhB,KAAKsI,aAAa9G,KAAK,CACrB8F,SAAUtH,KAAKgB,SACfZ,aAAcJ,KAAK2B,QAAQK,kBAC3BuG,cAAe5F,IAIX7C,qBACN,GAAIE,KAAKwI,GAAIxI,KAAKwI,GAAGC,aACrB,MAAMD,EAAMxI,KAAKwI,GAAK,IAAIE,kBAAiB,IACzC1I,KAAK2I,0BAEPH,EAAGI,QAAQ5I,KAAK8H,KAAM,CAAEe,UAAW,KAAMC,QAAS,OAG5ChJ,wBAENE,KAAKiF,eAAiBjF,KAAK8H,KAAKiB,iBAAiB,kBACjD/I,KAAKuE,gBAAkBvE,KAAK8H,KAAKE,cAAc,mBAGzClI,YAAYiD,GAClB,MAAMzC,EAA6ByG,MAAMC,KAAKjE,GAAOkD,KAAK7D,IACjD,CACLA,KAAMA,EACNqE,SAAUS,IAAIC,gBAAgB/E,GAC9BL,MAAO,KACPC,kBAAmB,SAMvB,GAAIhC,KAAKE,mBAAqBF,KAAKQ,SAAW,EAAG,CAC/C,MAAMwI,EAAW1I,EAASkD,QACvByF,IACEjJ,KAAKM,SAASmD,MAAMrB,GAASA,EAAKA,KAAK8C,OAAS+D,EAAS7G,KAAK8C,SAEnElF,KAAKM,SAAW,IAAIN,KAAKM,YAAa0I,QACjChJ,KAAKM,SAAWA,EA0DzBR,uBACE,GAAIE,KAAKwI,GAAIxI,KAAKwI,GAAGC,aAGvB3I,mBACEE,KAAKkJ,qBAGPpJ,oBACEE,KAAK2I,wBA8LP7I,SACE,OACE0E,EAAC2E,EAAI,KACH3E,EAAA,MAAA,CACEC,MAAO,CACL2E,cAAe,KACfC,wBAAyBrJ,KAAKK,WAC9BiJ,qBAAsBtJ,KAAKoB,SAC3BmI,uBAAwBvJ,KAAKgB,WAG9BhB,KAAKQ,SAAW,EAAIgE,EAACxE,KAAKgG,SAAQ,MAAMxB,EAACxE,KAAK+F,OAAM","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/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 #{map.get($colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get($colors, 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: #{map.get($colors, blue--faded)};\n  --drop-text: #{darken(map.get($colors, 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    @include visually-hide();\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    flex-direction: column;\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: #{map.get($colors, 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: var(--nano-color-blue--faded);\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: var(--nano-color-blue--faded);\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 = '';\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      setTimeout(() => {\n        this.nanoChange.emit({ value: this.value, files: this.files });\n      }, 20);\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  /** The form element to associate with this input (its form owner). Must be the id of a form. */\n  @Prop() form?: string | null;\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n\n    this.validate();\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.showInlineValidation();\n    });\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  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.inputEl) return '';\n    return this.inputEl.validationMessage;\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) {\n      this.validate();\n      this.showInlineValidation();\n    }\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      this.showInlineValidation();\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  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.value = '';\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.validate();\n    if (this.validateOn === 'dirty') this.showInlineValidation();\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 = () => {\n    this.errorMessage = '';\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (!this.inputEl.validity.valid) {\n      error = 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        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        error = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (!!error) this.inputEl.setCustomValidity(error);\n  };\n\n  private showInlineValidation(ev?: Event) {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.errorMessage = '';\n\n    if (!this.inputEl.validity.valid) {\n      this.errorMessage = this.inputEl.validationMessage;\n      this._invalid = true;\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    if (this.showInlineError) ev.preventDefault();\n    this.validate();\n    this.showInlineValidation(ev);\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          {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n            <div\n              class={`file-upload__label ${\n                this.hideLabel ? 'visually-hide' : ''\n              }`}\n            >\n              {!!this.label && !!this.label.length ? this.label : ''}\n              {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n                <slot name=\"label\" />\n              )}\n            </div>\n          )}\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n              <div>\n                Drag and drop or&nbsp;<span>browse</span>\n              </div>\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            form={this.form}\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          form={this.form}\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 && !!this.errorMessage.length ? (\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-21d6d31e.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,r,n){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,a){function s(t){try{u(n.next(t))}catch(e){a(e)}}function o(t){try{u(n["throw"](t))}catch(e){a(e)}}function u(t){t.done?r(t.value):i(t.value).then(s,o)}u((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,i,a,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(t){return function(e){return u([t,e])}}function u(s){if(n)throw new TypeError("Generator is already executing.");while(r)try{if(n=1,i&&(a=s[0]&2?i["return"]:s[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,s[1])).done)return a;if(i=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;i=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){r.label=s[1];break}if(s[0]===6&&r.label<a[1]){r.label=a[1];a=s;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(s);break}if(a[2])r.ops.pop();r.trys.pop();continue}s=e.call(t,r)}catch(o){s=[6,o];i=0}finally{n=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var r=0,n=e.length,i=t.length;r<n;r++,i++)t[i]=e[r];return t};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-f48be9f5.system.js"],(function(t){"use strict";var e,r,n,i,a,s,o;return{setters:[function(t){e=t.k;r=t.j;n=t.r;i=t.c;a=t.h;s=t.e;o=t.g}],execute:function(){var u=function(t,e,r){var n=t.get(e);if(!n){t.set(e,[r])}else if(!n.includes(r)){n.push(r)}};var l=function(t,e){var r;return function(){var n=[];for(var i=0;i<arguments.length;i++){n[i]=arguments[i]}if(r){clearTimeout(r)}r=setTimeout((function(){r=0;t.apply(void 0,n)}),e)}};var c=function(t){return!("isConnected"in t)||t.isConnected};var f=l((function(t){for(var e=0,r=t.keys();e<r.length;e++){var n=r[e];t.set(n,t.get(n).filter(c))}}),2e3);var h=function(){if(typeof e!=="function"){return{}}var t=new Map;return{dispose:function(){return t.clear()},get:function(r){var n=e();if(n){u(t,r,n)}},set:function(e){var n=t.get(e);if(n){t.set(e,n.filter(r))}f(t)},reset:function(){t.forEach((function(t){return t.forEach(r)}));f(t)}}};var d=function(t,e){if(e===void 0){e=function(t,e){return t!==e}}var r=new Map(Object.entries(t!==null&&t!==void 0?t:{}));var n={dispose:[],get:[],set:[],reset:[]};var i=function(){r=new Map(Object.entries(t!==null&&t!==void 0?t:{}));n.reset.forEach((function(t){return t()}))};var a=function(){n.dispose.forEach((function(t){return t()}));i()};var s=function(t){n.get.forEach((function(e){return e(t)}));return r.get(t)};var o=function(t,i){var a=r.get(t);if(e(i,a,t)){r.set(t,i);n.set.forEach((function(e){return e(t,i,a)}))}};var u=typeof Proxy==="undefined"?{}:new Proxy(t,{get:function(t,e){return s(e)},ownKeys:function(t){return Array.from(r.keys())},getOwnPropertyDescriptor:function(){return{enumerable:true,configurable:true}},has:function(t,e){return r.has(e)},set:function(t,e,r){o(e,r);return true}});var l=function(t,e){n[t].push(e);return function(){v(n[t],e)}};var c=function(e,r){var n=l("set",(function(t,n){if(t===e){r(n)}}));var i=l("reset",(function(){return r(t[e])}));return function(){n();i()}};var f=function(){var t=[];for(var e=0;e<arguments.length;e++){t[e]=arguments[e]}var r=t.reduce((function(t,e){if(e.set){t.push(l("set",e.set))}if(e.get){t.push(l("get",e.get))}if(e.reset){t.push(l("reset",e.reset))}if(e.dispose){t.push(l("dispose",e.dispose))}return t}),[]);return function(){return r.forEach((function(t){return t()}))}};var h=function(t){var e=r.get(t);n.set.forEach((function(r){return r(t,e,e)}))};return{state:u,get:s,set:o,on:l,onChange:c,use:f,dispose:a,reset:i,forceUpdate:h}};var v=function(t,e){var r=t.indexOf(e);if(r>=0){t[r]=t[t.length-1];t.length--}};var p=function(t,e){var r=d(t,e);r.use(h());return r};var m=t("nano_field_validator",function(){function t(t){var e=this;n(this,t);this.nanoPayloadChange=i(this,"nanoPayloadChange",7);this.nanoSubmit=i(this,"nanoSubmit",7);this.nanoInvalid=i(this,"nanoInvalid",7);this.submitted=false;this.fields=[];this.internalValidate=false;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this.handleStoreChange=function(t,r){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!(this.validateOn==="dirty"&&this.dirty))return[3,2];this.internalValidate=true;return[4,this.validateAllFields()];case 1:t.sent();this._valid=this.activeForm.checkValidity();this.internalValidate=false;t.label=2;case 2:this.nanoPayloadChange.emit(this.store.state);return[2]}}))}))};this.handleFieldChange=function(t){e._dirty=true;e.setFieldValue([t.target])};this.handleFormInvalid=function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:t.preventDefault();this._valid=false;if(this.internalValidate)return[2];if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;return[4,this.validateAllFields()];case 1:e.sent();if(this.validateOn==="submit"){this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this._valid){this.submitForm();return[2]}}this.scrollToFirstInvalid();this.nanoInvalid.emit();return[2]}}))}))};this.handleSubmit=function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:t.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;return[4,this.validateAllFields()];case 1:e.sent();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return[2]}this.submitForm();return[2]}}))}))}}t.prototype.userFormChange=function(){if(!!this.userForm)this.activeForm=this.userForm};Object.defineProperty(t.prototype,"activeForm",{get:function(){return this._activeForm},set:function(t){if(this._activeForm)this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true);if(t)t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t},enumerable:false,configurable:true});t.prototype.validateOnChange=function(){var t=this;this.fields.forEach((function(e){if(e.tagName==="NANO-CHECKBOX"){var r=e.closest("nano-checkbox-group");if(r)r.validateOn=t.validateOn}else{e.validateOn=t.validateOn}}))};Object.defineProperty(t.prototype,"dirty",{get:function(){return this._dirty},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"valid",{get:function(){return this._valid},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"payload",{get:function(){return this.store.state},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"showValidation",{get:function(){return this.validateOn==="dirty"&&this.dirty||this.submitted},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"validationState",{get:function(){var t=this;var e=[];this.fields.forEach((function(r){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(n){t=e.find((function(t){return t.name===r.name}));if(t){t.validityMessage=r.validityMessage.length?r.validityMessage:t.validityMessage;if(!t.fields.find((function(t){return t===r})))t.fields.push(r);if(t.valid&&r.invalid)t.valid=false;return[2]}e.push({fields:[r],name:r.name,valid:!r.invalid,value:this.store.state[r.name],dirty:false,validityMessage:r.validityMessage});return[2]}))}))}));return e},enumerable:false,configurable:true});t.prototype.attachSlotObserver=function(){var t=this;if(!!this.mo)return;var e=this.mo=new MutationObserver((function(e){var r=t.host.querySelector("form");if(r!==t.activeForm)t.activeForm=r;t.setupFields()}));e.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})};t.prototype.setupFields=function(){var t=this;var e=Array.from(this.host.querySelectorAll("\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      "));e=e.filter((function(t){return!!t.name&&!!t.name.length}));if(!e.filter((function(e){return!t.fields.includes(e)})).length)return;this.fields=e;this.validateOnChange();this.setFieldValue(this.fields);this.nanoPayloadChange.emit(this.store.state)};t.prototype.setFieldValue=function(t){var e=this;t.forEach((function(t){var r=t.name;if(!r.length)return;switch(t.tagName){case"NANO-CHECKBOX":var n=t;if(n.type==="radio"||n.type==="segment"||n.type==="segment-pill"){if(n.checked)e.store.state[r]=n.value;else if(!n.checked&&(n.value===e.store.state[r]||!e.store.state[r]))e.store.state[r]=""}else if(e.fields.filter((function(t){return t.name===r&&t.tagName==="NANO-CHECKBOX"})).length>1){var i=Array.isArray(e.store.state[r])?e.store.state[r]:[];if(n.checked){if(!e.store.state[r].includes(n.value)){e.store.state[r]=__spreadArray(__spreadArray([],i),[n.value])}}else{e.store.state[r]=i.filter((function(t){return t!==n.value}))}}else e.store.state[r]=n.value;break;case"NANO-FILE-UPLOAD":e.store.state[r]=t.files;break;default:e.store.state[r]=t.value;break}}))};t.prototype.validate=function(t,e){return __awaiter(this,void 0,void 0,(function(){var r;var n=this;return __generator(this,(function(i){switch(i.label){case 0:if(!this.validation)return[2];r=this.validation(t,e,this.store.state);if(!r)return[2];return[4,Promise.all(Object.entries(r).map((function(t){var e=t[0],r=t[1];return __awaiter(n,void 0,void 0,(function(){var t,n,i;return __generator(this,(function(a){switch(a.label){case 0:t=this.fields.find((function(t){return t.name===e}));n=t;if(t.tagName==="NANO-CHECKBOX"){i=t.closest("nano-checkbox-group");n=i||t}if(!(n.validityMessage===r.msg&&r.valid))return[3,2];return[4,this.setFieldError(n,"")];case 1:a.sent();return[3,4];case 2:if(!!r.valid)return[3,4];return[4,this.setFieldError(n,r.msg)];case 3:a.sent();a.label=4;case 4:return[2]}}))}))})))];case 1:i.sent();return[2]}}))}))};t.prototype.setFieldError=function(t,e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:if(!t["showError"])return[3,2];return[4,t.showError(e)];case 1:r.sent();return[3,4];case 2:return[4,t.setError(e)];case 3:r.sent();r.label=4;case 4:return[2]}}))}))};t.prototype.validateAllFields=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){switch(e.label){case 0:return[4,Object.entries(this.store.state).reduce((function(e,r){var n=r[0],i=r[1];return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,e];case 1:t.sent();return[4,this.validate(n,i)];case 2:t.sent();return[2]}}))}))}),undefined)];case 1:e.sent();return[2]}}))}))};t.prototype.scrollToFirstInvalid=function(){var t=this;if(!this.scrollToInvalid)return;setTimeout((function(){var e=t.validationState.find((function(t){return!t.valid}));if(!e)return;e.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)};t.prototype.submitForm=function(){var t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()};t.prototype.connectedCallback=function(){this.userForm=this.host.querySelector("form")};t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){t.store=p({});t.setupFields();t.attachSlotObserver();t.store.on("set",(function(e,r){return t.handleStoreChange(e,r)}));t.host.addEventListener("nanoChange",t.handleFieldChange);t.host.addEventListener("submit",t.handleSubmit)}))};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();this.store.dispose();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("submit",this.handleSubmit);if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)};t.prototype.render=function(){var t=this;return a(s,null,this.userForm&&a("slot",null),!this.userForm&&a("form",{ref:function(e){return t.activeForm=e}},a("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{userForm:["userFormChange"],validateOn:["validateOnChange"]}},enumerable:false,configurable:true});return t}())}}}));
-//# sourceMappingURL=p-21d6d31e.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/@stencil/store/dist/index.mjs","src/components/field-validator/field-validator.tsx"],"names":["appendToMap","map","propName","value","items","get","set","includes","push","debounce","fn","ms","timeoutId","args","_i","arguments","length","clearTimeout","setTimeout","apply","isConnected","maybeElement","cleanupElements","_a","keys","key","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","forEach","elms","createObservableMap","defaultState","shouldUpdate","a","b","states","Object","entries","handlers","cb","oldValue","state","Proxy","_","ownKeys","Array","from","getOwnPropertyDescriptor","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","unSet","newValue","unReset","use","subscriptions","unsubs","reduce","subscription","unsub","array","item","index","indexOf","createStore","FieldValidator","exports","class_1","hostRef","_this","this","submitted","fields","internalValidate","validateOn","scrollToInvalid","_dirty","handleStoreChange","_key","_newVal","__awaiter","dirty","validateAllFields","sent","_valid","activeForm","checkValidity","nanoPayloadChange","emit","store","handleFieldChange","ev","setFieldValue","target","handleFormInvalid","preventDefault","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","prototype","userFormChange","userForm","defineProperty","_activeForm","form","removeEventListener","addEventListener","validateOnChange","field","tagName","cbg","closest","validationState","found","find","v","name","validityMessage","f","valid","invalid","attachSlotObserver","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","querySelectorAll","fieldName","cb_1","type","checked","currentArr","isArray","__spreadArray","files","validate","newVal","validation","res","Promise","all","o","validityTarget","msg","setFieldError","_b","showError","setError","memo","undefined","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","connectedCallback","componentDidLoad","requestAnimationFrame","disconnectedCallback","disconnect","render","h","Host","ref"],"mappings":"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","sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(defaultState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        const unReset = on('reset', () => cb(defaultState[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\n\ntype NanoFormEles =\n  | HTMLNanoInputElement\n  | HTMLNanoCheckboxElement\n  | HTMLNanoSelectElement\n  | HTMLNanoDateInputElement\n  | HTMLNanoFileUploadElement;\ntype NanoEvent = CustomEvent & { target: NanoFormEles };\ninterface ValueStore {\n  [key: string]: any;\n}\n\ninterface ValidationState {\n  fields: NanoFormEles[];\n  valid: boolean;\n  validityMessage: string;\n  dirty: boolean;\n  name: string | number;\n  value: any;\n}\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n *\n * - Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() store: ObservableMap<ValueStore>;\n  @State() userForm: HTMLFormElement;\n  @State() submitted = false;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    if (this._activeForm)\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    if (form) form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private fields: NanoFormEles[] = [];\n  // annoyingly, whenever we attempt to checkValidty it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.fields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form payload as a reactive store. @readonly */\n  @Prop()\n  get payload() {\n    return this.store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop() get validationState(): ValidationState[] {\n    const validationState: ValidationState[] = [];\n\n    this.fields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === field.name);\n\n      if (found) {\n        found.validityMessage = field.validityMessage.length\n          ? field.validityMessage\n          : found.validityMessage;\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n        if (found.valid && field.invalid) found.valid = false;\n        return;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: field.name,\n        valid: !field.invalid,\n        value: this.store.state[field.name],\n        dirty: false,\n        validityMessage: field.validityMessage,\n      });\n    });\n    return validationState;\n  }\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } };\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  private attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let fields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(`\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      `)\n    );\n    fields = fields.filter((f) => !!f.name && !!f.name.length);\n\n    // do we have any currently un-watched fields?\n    if (!fields.filter((f) => !this.fields.includes(f)).length) return;\n\n    // setup the initial store state / refresh on new fields\n    this.fields = fields;\n    this.validateOnChange();\n    this.setFieldValue(this.fields);\n    this.nanoPayloadChange.emit(this.store.state);\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private setFieldValue(fields: NanoFormEles[]) {\n    fields.forEach((field) => {\n      const fieldName = field.name;\n      if (!fieldName.length) return;\n\n      switch (field.tagName) {\n        case 'NANO-CHECKBOX':\n          let cb = field as HTMLNanoCheckboxElement;\n          if (\n            cb.type === 'radio' ||\n            cb.type === 'segment' ||\n            cb.type === 'segment-pill'\n          ) {\n            if (cb.checked) this.store.state[fieldName] = cb.value;\n            else if (\n              !cb.checked &&\n              (cb.value === this.store.state[fieldName] ||\n                !this.store.state[fieldName])\n            )\n              this.store.state[fieldName] = '';\n          } else if (\n            this.fields.filter(\n              (f) => f.name === fieldName && f.tagName === 'NANO-CHECKBOX'\n            ).length > 1\n          ) {\n            const currentArr = Array.isArray(this.store.state[fieldName])\n              ? this.store.state[fieldName]\n              : [];\n            if (cb.checked) {\n              if (!this.store.state[fieldName].includes(cb.value)) {\n                this.store.state[fieldName] = [...currentArr, cb.value];\n              }\n            } else {\n              this.store.state[fieldName] = currentArr.filter(\n                (v) => v !== cb.value\n              );\n            }\n          } else this.store.state[fieldName] = cb.value;\n          break;\n        case 'NANO-FILE-UPLOAD':\n          this.store.state[fieldName] = (\n            field as HTMLNanoFileUploadElement\n          ).files;\n          break;\n        default:\n          this.store.state[fieldName] = field.value;\n          break;\n      }\n    });\n  }\n\n  /** Checks for user defined validations */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this.store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must to coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([key, o]) => {\n        // switch on/off validation messages\n        const field = this.fields.find((f) => f.name === key);\n        let validityTarget: NanoFormEles | HTMLNanoCheckboxGroupElement = field;\n\n        if (field.tagName === 'NANO-CHECKBOX') {\n          const cbg = field.closest('nano-checkbox-group');\n          validityTarget = cbg || field;\n        }\n\n        // status is now valid - clear the error\n        if (validityTarget.validityMessage === o.msg && o.valid)\n          await this.setFieldError(validityTarget, '');\n        // status is invalid. Set the error\n        else if (!o.valid) {\n          await this.setFieldError(validityTarget, o.msg);\n        }\n      })\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement,\n    msg: string\n  ) {\n    if (field['showError'])\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    else await (field as HTMLNanoCheckboxElement).setError(msg);\n  }\n\n  /** Loops through all store entries and checks field validity */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this.store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /** Fired whenever store values change and potentially checks validity */\n  private handleStoreChange = async (_key: string | number, _newVal: any) => {\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this.store.state);\n  };\n\n  /** Handles field value changes and passes to store */\n  private handleFieldChange = (ev: NanoEvent) => {\n    this._dirty = true;\n    this.setFieldValue([ev.target]);\n  };\n\n  /** Handles default field validation events */\n  private handleFormInvalid = async (ev: Event) => {\n    ev.preventDefault();\n    this._valid = false;\n\n    if (this.internalValidate) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      this.internalValidate = true;\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /** stops default form submission, checks if valid, then submits manually  */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.store = createStore<ValueStore>({});\n\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.store.on('set', (key, value) => this.handleStoreChange(key, value));\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    this.store.dispose();\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-2720ee8f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","[object Object]","hostRef","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","_dropDownConfig","isDateDisabled","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","invalid","validityMessage","input","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","requestAnimationFrame","async","getInputElement","length","setCustomValidity","showError","dropdown","open","dropDownConfig","ddc","Object","assign","dateValue","validateFirst","reportValidity","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","firstFocusEle","tetherTo","handlePickerOpenChange","placement","host","ownerDocument","dir","replace","hasHelperSlot","querySelector","h","Host","class","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","part","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{map.get($colors, celsius)};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  width: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    width: 0 !important;\n    width: 100%;\n    z-index: $layer-index-dropdown !important;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    right: -8px;\n    top: -8px;\n    width: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    height: 24px;\n    justify-content: center;\n    padding: 0;\n    width: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin: 0 auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n  DateDisabledPredicate,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n  private pickerOpenSource: 'key' | 'mouse';\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n  private locale =\n    (window.navigator.languages as string[]) ||\n    window.navigator.language ||\n    undefined;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validityMessage;\n  }\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    setTimeout(() => {\n      this.nanoChange.emit({\n        value: this.value,\n        date: parseISODate(this.value),\n      });\n    }, 20);\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n      if (this.isDateDisabled(valueDate)) {\n        error = 'Date selected is disabled.';\n      }\n    }\n\n    requestAnimationFrame(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    });\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {};\n\n  /** @readonly get the value as a `Date` */\n  @Prop()\n  get dateValue() {\n    return parseISODate(this.value);\n  }\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends. */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  async getInputElement() {\n    return await this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (\n    e: CustomEvent & {\n      target: HTMLInputElement;\n    }\n  ) => {\n    e.stopPropagation();\n    this.setValue(e.target.value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this._invalid = !e.detail.isValid;\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 50);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => {\n      this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n      this.pickerOpenSource = null;\n    }, 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) {\n      this.pickerOpen = true;\n      this.pickerOpenSource = 'mouse';\n    }\n  };\n\n  private onTriggerKey = (e: KeyboardEvent) => {\n    if ([' ', 'Enter'].includes(e.key)) {\n      if (!this.pickerOpen) {\n        this.pickerOpen = true;\n        this.pickerOpenSource = 'key';\n      }\n    }\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n    if (e.key === ' ' || e.key === 'Enter') {\n      if (this.pickerOpen) this.pickerOpen = false;\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    let dateRegexOrdered = [];\n    let dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    let dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    let formatted = [];\n    formatted[this.dateOrderIndeces.d] = matches[3];\n    formatted[this.dateOrderIndeces.m] = matches[2];\n    formatted[this.dateOrderIndeces.y] = matches[1];\n\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n    this.dropdown.tetherTo = this.trigger;\n    setTimeout((_) => this.handlePickerOpenChange(), 300);\n  }\n\n  render() {\n    this.locale =\n      (navigator.languages as string[]) || navigator.language || undefined;\n\n    this.dropDownConfig.placement =\n      this.dropDownConfig.placement || 'bottom-end';\n\n    if ((this.host.ownerDocument as Document).dir === 'rtl') {\n      this.dropDownConfig.placement.replace('start', 'end');\n    }\n    if (this.trigger) this.dropDownConfig.tetherTo = this.trigger;\n\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n            part=\"input\"\n          >\n            <slot name=\"start\" slot=\"start\" />\n            <slot name=\"label\" />\n            <slot name=\"end\" slot=\"end\" />\n            {this.picker && [\n              <button\n                slot=\"end\"\n                class=\"date-field__open\"\n                type=\"button\"\n                onKeyDown={this.onTriggerKey}\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>,\n\n              <nano-dropdown\n                slot=\"end\"\n                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n                {...this.dropDownConfig}\n                part=\"dropdown\"\n              >\n                <div>\n                  <div class=\"date-field__close-bar\">\n                    <button\n                      class=\"date-field__close\"\n                      type=\"button\"\n                      onMouseDown={this.onCloseClick}\n                      onKeyDown={this.onCloseKeyDown}\n                      ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                    >\n                      <nano-icon name=\"light/times\"></nano-icon>\n                      <span class=\"vhidden\">Close window</span>\n                    </button>\n                  </div>\n                  <nano-date-picker\n                    isDateDisabled={this.isDateDisabled}\n                    onNanoDatePicked={this.onDatePicked}\n                    min={this.min || undefined}\n                    max={this.max || undefined}\n                    is-modal={true}\n                    ref={(picker) => (this.pickerEle = picker)}\n                    localization={this.localization}\n                    selectedDate={this.value || this.initialPickerDate}\n                    firstDayOfWeek={this.firstDayOfWeek}\n                    color={this.color || undefined}\n                    part=\"date-picker\"\n                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}