@nanoporetech-digital/components 2.11.0 → 2.12.0

package/dist/esm-es5/nano-components.js.map

@@ -1 +1 @@
-{"version":3,"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"names":["getDynamicImportFunction","namespace","replace","patchBrowser","plt","$cssShim$","win","__cssshim","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","opts","history","scrollRestoration","then","resourcesUrl","URL","location","href","patchDynamicImport","customElements","import","promiseResolve","base","orgScriptElm","importFunctionName","Function","Math","random","e","moduleMap_1","Map","url","mod","get","script_1","createElement","type","crossOrigin","createObjectURL","Blob","Promise","resolve","onload","m","remove","set","head","appendChild","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","options","bootstrapLazy","JSON","parse"],"mappings":";;;iJAKA,IAAMA,yBAA2B,SAACC,GAAc,MAAA,eAAeA,EAAUC,QAAQ,QAAS,MAC1F,IAAMC,aAAe,WAKK,CAElBC,IAAIC,UAAYC,IAAIC,UAEA,CAEpBC,kBAAkBC,EAAEC,WAUxB,IAAMC,EACAC,MAAMC,KAAKC,IAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,OAAA,IAAIC,OAAO,IAAKC,UAAS,2BAA2BC,KAAKH,EAAEI,MAChHJ,EAAEK,aAAa,4BAA8BH,aAGrD,IAAMI,EAA6D,GACnE,GAAsB,iBAAkBZ,IAAca,QAAQC,kBAAsC,CAQhG,MAAO,CACHC,KAAI,cAQwC,CAChDH,EAAKI,aAAe,IAAIC,IAAI,IAAK,IAAIA,IAAIjB,EAAUW,aAAa,uBAAyBX,EAAUU,IAAKf,IAAIuB,SAASC,OAAOA,KAC/F,CACzBC,mBAAmBR,EAAKI,aAAchB,GAE1C,IAAgCL,IAAI0B,eAAgB,CAGhD,OAAOC,OAA+C,qBAAYP,MAAK,WAAM,OAAAH,MAGrF,OAAOW,eAAeX,IAE1B,IAAMQ,mBAAqB,SAACI,EAAMC,GAC9B,IAAMC,EAAqBrC,yBAAyBmB,WACpD,IAKIb,IAAI+B,GAAsB,IAAIC,SAAS,IAAK,sBAAsBC,KAAKC,UAE3E,MAAOC,GAIH,IAAMC,EAAY,IAAIC,IACtBrC,IAAI+B,GAAsB,SAAChB,GACvB,IAAMuB,EAAM,IAAIhB,IAAIP,EAAKc,GAAML,KAC/B,IAAIe,EAAMH,EAAUI,IAAIF,GACxB,IAAKC,EAAK,CACN,IAAME,EAASjC,IAAIkC,cAAc,UACjCD,EAAOE,KAAO,SACdF,EAAOG,YAAcd,EAAac,YAClCH,EAAO1B,IAAMO,IAAIuB,gBAAgB,IAAIC,KAAK,CAAC,uBAAuBR,EAAG,aAAaP,EAAkB,WAAY,CAC5GY,KAAM,4BAEVJ,EAAM,IAAIQ,SAAQ,SAACC,GACfP,EAAOQ,OAAS,WACZD,EAAQhD,IAAI+B,GAAoBmB,GAChCT,EAAOU,aAGff,EAAUgB,IAAId,EAAKC,GACnB/B,IAAI6C,KAAKC,YAAYb,GAEzB,OAAOF,KAInB,IAAMrC,kBAAoB,SAACqD,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,GAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWR,YAAYS,EAAcE,GAAGR,UAAU,SAI9D,OAAOK,ICjHfjE,eAAeuB,MAAK,SAAAgD,GAElB,OAAOC,cAAcC,KAAAC,MAAA,2+fAAuCH","sourcesContent":["/*\n Stencil Client Patch Browser v2.12.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"]}
+{"version":3,"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"names":["getDynamicImportFunction","namespace","replace","patchBrowser","plt","$cssShim$","win","__cssshim","patchCloneNodeFix","H","prototype","scriptElm","Array","from","doc","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","opts","history","scrollRestoration","then","resourcesUrl","URL","location","href","patchDynamicImport","customElements","import","promiseResolve","base","orgScriptElm","importFunctionName","Function","Math","random","e","moduleMap_1","Map","url","mod","get","script_1","createElement","type","crossOrigin","createObjectURL","Blob","Promise","resolve","onload","m","remove","set","head","appendChild","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","options","bootstrapLazy","JSON","parse"],"mappings":";;;iJAKA,IAAMA,yBAA2B,SAACC,GAAc,MAAA,eAAeA,EAAUC,QAAQ,QAAS,MAC1F,IAAMC,aAAe,WAKK,CAElBC,IAAIC,UAAYC,IAAIC,UAEA,CAEpBC,kBAAkBC,EAAEC,WAUxB,IAAMC,EACAC,MAAMC,KAAKC,IAAIC,iBAAiB,WAAWC,MAAK,SAACC,GAAM,OAAA,IAAIC,OAAO,IAAKC,UAAS,2BAA2BC,KAAKH,EAAEI,MAChHJ,EAAEK,aAAa,4BAA8BH,aAGrD,IAAMI,EAA6D,GACnE,GAAsB,iBAAkBZ,IAAca,QAAQC,kBAAsC,CAQhG,MAAO,CACHC,KAAI,cAQwC,CAChDH,EAAKI,aAAe,IAAIC,IAAI,IAAK,IAAIA,IAAIjB,EAAUW,aAAa,uBAAyBX,EAAUU,IAAKf,IAAIuB,SAASC,OAAOA,KAC/F,CACzBC,mBAAmBR,EAAKI,aAAchB,GAE1C,IAAgCL,IAAI0B,eAAgB,CAGhD,OAAOC,OAA+C,qBAAYP,MAAK,WAAM,OAAAH,MAGrF,OAAOW,eAAeX,IAE1B,IAAMQ,mBAAqB,SAACI,EAAMC,GAC9B,IAAMC,EAAqBrC,yBAAyBmB,WACpD,IAKIb,IAAI+B,GAAsB,IAAIC,SAAS,IAAK,sBAAsBC,KAAKC,UAE3E,MAAOC,GAIH,IAAMC,EAAY,IAAIC,IACtBrC,IAAI+B,GAAsB,SAAChB,GACvB,IAAMuB,EAAM,IAAIhB,IAAIP,EAAKc,GAAML,KAC/B,IAAIe,EAAMH,EAAUI,IAAIF,GACxB,IAAKC,EAAK,CACN,IAAME,EAASjC,IAAIkC,cAAc,UACjCD,EAAOE,KAAO,SACdF,EAAOG,YAAcd,EAAac,YAClCH,EAAO1B,IAAMO,IAAIuB,gBAAgB,IAAIC,KAAK,CAAC,uBAAuBR,EAAG,aAAaP,EAAkB,WAAY,CAC5GY,KAAM,4BAEVJ,EAAM,IAAIQ,SAAQ,SAACC,GACfP,EAAOQ,OAAS,WACZD,EAAQhD,IAAI+B,GAAoBmB,GAChCT,EAAOU,aAGff,EAAUgB,IAAId,EAAKC,GACnB/B,IAAI6C,KAAKC,YAAYb,GAEzB,OAAOF,KAInB,IAAMrC,kBAAoB,SAACqD,GACvB,IAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,GAExC,IAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,IAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWR,YAAYS,EAAcE,GAAGR,UAAU,SAI9D,OAAOK,ICjHfjE,eAAeuB,MAAK,SAAAgD,GAElB,OAAOC,cAAcC,KAAAC,MAAA,2ggBAAuCH","sourcesContent":["/*\n Stencil Client Patch Browser v2.12.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","import { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"]}

package/dist/esm-es5/nano-date-input.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(e,t,n,i){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function r(e){try{l(i.next(e))}catch(t){o(t)}}function s(e){try{l(i["throw"](e))}catch(t){o(t)}}function l(e){e.done?n(e.value):a(e.value).then(r,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(e){return function(t){return l([e,t])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;a=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(s){r=[6,s];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{p as parseISODate,a as printISODate,c as createDate}from"./date-utils-839cb010.js";import{c as createColorClasses}from"./theme-1d4c8719.js";var dateInputCss=".sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;width:0 !important;width:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";var DateRegxps={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};var inputIds=0;var DateInput=function(){function e(e){var t=this;registerInstance(this,e);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoValidate=createEvent(this,"nanoValidate",7);this.directInput=false;this.dateOrderIndeces={d:0,m:1,y:3};this.inputId="nano-input-"+inputIds++;this.locale=window.navigator.languages||window.navigator.language||undefined;this._invalid=false;this.helperText=true;this.helperTextFormat={year:"numeric",month:"long",day:"numeric"};this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.disabled=false;this.autofocus=false;this.clearInput=false;this.value="";this.validateOn="submitThenDirty";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.hideLabel=false;this.picker=true;this.pickerOpen=false;this.closeAfterPicked=true;this._dropDownConfig={};this.isDateDisabled=function(){return false};this.onInputChange=function(e){e.stopPropagation();t.setValue(e.target.value)};this.onInputValidate=function(e){e.stopPropagation();t._invalid=!e.detail.isValid;t.nanoValidate.emit({isValid:e.detail.isValid,errorMessage:e.detail.errorMessage,originalEvent:e.detail.originalEvent})};this.onInputKey=function(){t.directInput=true};this.onDatePicked=function(e){t.directInput=false;t.value=e.detail.value;if(t.closeAfterPicked)t.pickerOpen=false};this.onDropdownHide=function(){setTimeout((function(e){return t.pickerOpen=false}),200);setTimeout((function(e){return t.trigger.focus()}),50)};this.onDropdownShow=function(){setTimeout((function(e){t.pickerEle.setFocus(false,t.pickerOpenSource==="key");t.pickerOpenSource=null}),200)};this.onTriggerClick=function(){if(!t.pickerOpen){t.pickerOpen=true;t.pickerOpenSource="mouse"}};this.onTriggerKey=function(e){if([" ","Enter"].includes(e.key)){if(!t.pickerOpen){t.pickerOpen=true;t.pickerOpenSource="key"}}};this.onCloseClick=function(){if(t.pickerOpen)t.pickerOpen=false};this.onCloseKeyDown=function(e){if(e.key==="Tab"&&e.shiftKey){t.pickerEle.setFocus(true);e.preventDefault()}if(e.key===" "||e.key==="Enter"){if(t.pickerOpen)t.pickerOpen=false}}}Object.defineProperty(e.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"validityMessage",{get:function(){if(!this.input)return"";return this.input.validityMessage},enumerable:false,configurable:true});e.prototype.handleValueChange=function(){var e=this;if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((function(){e.nanoChange.emit({value:e.value,date:parseISODate(e.value)})}),20);this.directInput=false};e.prototype.handleDateOrderChange=function(){this.setDatePattern()};e.prototype.testDateValidity=function(){var e=this;var t=parseISODate(this.value);var n,i,a="";if(this.value&&t){if(this.min&&(n=parseISODate(this.min))&&t<n){a="Date below the minimum: "+n.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(i=parseISODate(this.max))&&t>i){a="Date above the maximum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(t)){a="Date selected is disabled."}}requestAnimationFrame((function(n){return __awaiter(e,void 0,void 0,(function(){var e;return __generator(this,(function(n){switch(n.label){case 0:if(!this.input)return[2];return[4,this.input.getInputElement()];case 1:e=n.sent();if(this.value.length&&!t)a="Please enter a valid date";e.setCustomValidity(a);if(this.input.validateOn==="dirty"){this.input.showError(a)}return[2]}}))}))}))};e.prototype.handlePickerOpenChange=function(){this.dropdown.open=this.pickerOpen};Object.defineProperty(e.prototype,"dropDownConfig",{get:function(){return this._dropDownConfig},set:function(e){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),e)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"dateValue",{get:function(){return parseISODate(this.value)},enumerable:false,configurable:true});e.prototype.reportValidity=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.input.reportValidity(e)];case 1:return[2,t.sent()]}}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input)this.input.setFocus();return[2]}))}))};e.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.input.getInputElement()];case 1:return[2,e.sent()]}}))}))};e.prototype.showError=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.input)return[2];this.input.showError(e);return[2]}))}))};e.prototype.setDatePattern=function(){var e=this;var t=[];var n=[];Array.from(this.dateOrder).map((function(i,a){t.push(DateRegxps[i]);e.dateOrderIndeces[i]=a;n.push(i==="y"?"yyyy":i+i)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=n.join(" ")};e.prototype.formatIsoDate=function(e){var t=[];Array.from("ymd").map((function(e){return t.push(DateRegxps[e])}));var n=e.match(new RegExp(t.join("\\W+")));if(!n)return"";var i=[];i[this.dateOrderIndeces.d]=n[3];i[this.dateOrderIndeces.m]=n[2];i[this.dateOrderIndeces.y]=n[1];return i.join(" ")};e.prototype.setValue=function(e){var t=e.match(new RegExp(this.pattern));if(!t){this.value=e;return}var n=createDate(t[this.dateOrderIndeces.y+1],t[this.dateOrderIndeces.m+1],t[this.dateOrderIndeces.d+1]);if(!n){n=new Date(e);if(!n){this.value=e;return}}var i=printISODate(n);this.value=i;return i};e.prototype.connectedCallback=function(){this.setDatePattern();this.handleValueChange()};e.prototype.componentDidLoad=function(){var e=this;if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((function(t){return e.handlePickerOpenChange()}),300)};e.prototype.render=function(){var e=this;this.locale=navigator.languages||navigator.language||undefined;this.dropDownConfig.placement=this.dropDownConfig.placement||"bottom-end";if(this.host.ownerDocument.dir==="rtl"){this.dropDownConfig.placement.replace("start","end")}if(this.trigger)this.dropDownConfig.tetherTo=this.trigger;var t=parseISODate(this.value);var n=!!this.host.querySelector('[slot="helper"]');return h(Host,{class:Object.assign({},createColorClasses(this.color))},h("div",{class:"date-field"},h("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:function(t){return e.input=t},floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},h("slot",{name:"start",slot:"start"}),h("slot",{name:"label"}),h("slot",{name:"end",slot:"end"}),this.picker&&[h("button",{slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:function(t){return e.trigger=t},disabled:this.disabled||this.readonly},h("nano-icon",{name:"light/calendar-alt"})),h("nano-dropdown",Object.assign({slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:function(t){return e.dropdown=t}},this.dropDownConfig,{part:"dropdown"}),h("div",null,h("div",{class:"date-field__close-bar"},h("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:function(t){return e.pickerCloseBtn=t}},h("nano-icon",{name:"light/times"}),h("span",{class:"vhidden"},"Close window"))),h("nano-date-picker",{isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:function(t){return e.pickerEle=t},localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(n||this.helperText||this.showInlineError)&&h("span",{slot:"helper"},h("span",{class:{vhidden:!!this.value.length}},h("slot",{name:"helper"})),this.helperText&&!!t&&h("span",null,t.toLocaleDateString(this.locale,this.helperTextFormat)))),h("input",{type:"hidden",value:this.value,name:this.name})))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}},enumerable:false,configurable:true});return e}();DateInput.style=dateInputCss;export{DateInput as nano_date_input};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{p as parseISODate,a as printISODate,c as createDate}from"./date-utils-839cb010.js";import{c as createColorClasses}from"./theme-1d4c8719.js";var dateInputCss=".sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;width:0 !important;width:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";var DateRegxps={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};var inputIds=0;var DateInput=function(){function e(e){var t=this;registerInstance(this,e);this.nanoChange=createEvent(this,"nanoChange",7);this.nanoValidate=createEvent(this,"nanoValidate",7);this.directInput=false;this.dateOrderIndeces={d:0,m:1,y:3};this.inputId="nano-input-"+inputIds++;this.locale=window.navigator.languages||window.navigator.language||undefined;this._invalid=false;this.helperText=true;this.helperTextFormat={year:"numeric",month:"long",day:"numeric"};this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.disabled=false;this.autofocus=false;this.clearInput=false;this.value="";this.validateOn="submitThenDirty";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.hideLabel=false;this.picker=true;this.pickerOpen=false;this.closeAfterPicked=true;this._dropDownConfig={};this.isDateDisabled=function(){return false};this.onInputChange=function(e){e.stopPropagation();t.setValue(e.target.value)};this.onInputValidate=function(e){e.stopPropagation();t._invalid=!e.detail.isValid;t.nanoValidate.emit({isValid:e.detail.isValid,errorMessage:e.detail.errorMessage,originalEvent:e.detail.originalEvent})};this.onInputKey=function(){t.directInput=true};this.onDatePicked=function(e){t.directInput=false;t.value=e.detail.value;if(t.closeAfterPicked)t.pickerOpen=false};this.onDropdownHide=function(){setTimeout((function(e){return t.pickerOpen=false}),200);setTimeout((function(e){return t.trigger.focus()}),50)};this.onDropdownShow=function(){setTimeout((function(e){t.pickerEle.setFocus(false,t.pickerOpenSource==="key");t.pickerOpenSource=null}),200)};this.onTriggerClick=function(){if(!t.pickerOpen){t.pickerOpen=true;t.pickerOpenSource="mouse"}};this.onTriggerKey=function(e){if([" ","Enter"].includes(e.key)){if(!t.pickerOpen){t.pickerOpen=true;t.pickerOpenSource="key"}}};this.onCloseClick=function(){if(t.pickerOpen)t.pickerOpen=false};this.onCloseKeyDown=function(e){if(e.key==="Tab"&&e.shiftKey){t.pickerEle.setFocus(true);e.preventDefault()}if(e.key===" "||e.key==="Enter"){if(t.pickerOpen)t.pickerOpen=false}}}Object.defineProperty(e.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"validityMessage",{get:function(){if(!this.input)return"";return this.input.validityMessage},enumerable:false,configurable:true});e.prototype.handleValueChange=function(){var e=this;if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((function(){e.nanoChange.emit({value:e.value,date:parseISODate(e.value)})}),20);this.directInput=false};e.prototype.handleDateOrderChange=function(){this.setDatePattern()};e.prototype.testDateValidity=function(){var e=this;var t=parseISODate(this.value);var n,i,a="";if(this.value&&t){if(this.min&&(n=parseISODate(this.min))&&t<n){a="Date below the minimum: "+n.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(i=parseISODate(this.max))&&t>i){a="Date above the maximum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(t)){a="Date selected is disabled."}}requestAnimationFrame((function(n){return __awaiter(e,void 0,void 0,(function(){var e;return __generator(this,(function(n){switch(n.label){case 0:if(!this.input)return[2];return[4,this.input.getInputElement()];case 1:e=n.sent();if(this.value.length&&!t)a="Please enter a valid date";e.setCustomValidity(a);if(this.input.validateOn==="dirty"){this.input.showError(a)}return[2]}}))}))}))};e.prototype.handlePickerOpenChange=function(){this.dropdown.open=this.pickerOpen};Object.defineProperty(e.prototype,"dropDownConfig",{get:function(){return this._dropDownConfig},set:function(e){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),e)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"dateValue",{get:function(){return parseISODate(this.value)},enumerable:false,configurable:true});e.prototype.reportValidity=function(e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.input.reportValidity(e)];case 1:t=n.sent();if(t.isValid&&e)this.testDateValidity();return[4,this.input.reportValidity(e)];case 2:return[2,n.sent()]}}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input)this.input.setFocus();return[2]}))}))};e.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.input.getInputElement()];case 1:return[2,e.sent()]}}))}))};e.prototype.showError=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.input)return[2];this.input.showError(e);return[2]}))}))};e.prototype.setDatePattern=function(){var e=this;var t=[];var n=[];Array.from(this.dateOrder).map((function(i,a){t.push(DateRegxps[i]);e.dateOrderIndeces[i]=a;n.push(i==="y"?"yyyy":i+i)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=n.join(" ")};e.prototype.formatIsoDate=function(e){var t=[];Array.from("ymd").map((function(e){return t.push(DateRegxps[e])}));var n=e.match(new RegExp(t.join("\\W+")));if(!n)return"";var i=[];i[this.dateOrderIndeces.d]=n[3];i[this.dateOrderIndeces.m]=n[2];i[this.dateOrderIndeces.y]=n[1];return i.join(" ")};e.prototype.setValue=function(e){var t=e.match(new RegExp(this.pattern));if(!t){this.value=e;return}var n=createDate(t[this.dateOrderIndeces.y+1],t[this.dateOrderIndeces.m+1],t[this.dateOrderIndeces.d+1]);if(!n){n=new Date(e);if(!n){this.value=e;return}}var i=printISODate(n);this.value=i;return i};e.prototype.connectedCallback=function(){this.setDatePattern();this.handleValueChange()};e.prototype.componentDidLoad=function(){var e=this;if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((function(t){return e.handlePickerOpenChange()}),300)};e.prototype.render=function(){var e=this;this.locale=navigator.languages||navigator.language||undefined;this.dropDownConfig.placement=this.dropDownConfig.placement||"bottom-end";if(this.host.ownerDocument.dir==="rtl"){this.dropDownConfig.placement.replace("start","end")}if(this.trigger)this.dropDownConfig.tetherTo=this.trigger;var t=parseISODate(this.value);var n=!!this.host.querySelector('[slot="helper"]');return h(Host,{class:Object.assign({},createColorClasses(this.color))},h("div",{class:"date-field"},h("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:function(t){return e.input=t},floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},h("slot",{name:"start",slot:"start"}),h("slot",{name:"label"}),h("slot",{name:"end",slot:"end"}),this.picker&&[h("button",{slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:function(t){return e.trigger=t},disabled:this.disabled||this.readonly},h("nano-icon",{name:"light/calendar-alt"})),h("nano-dropdown",Object.assign({slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:function(t){return e.dropdown=t}},this.dropDownConfig,{part:"dropdown"}),h("div",null,h("div",{class:"date-field__close-bar"},h("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:function(t){return e.pickerCloseBtn=t}},h("nano-icon",{name:"light/times"}),h("span",{class:"vhidden"},"Close window"))),h("nano-date-picker",{isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:function(t){return e.pickerEle=t},localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(n||this.helperText||this.showInlineError)&&h("span",{slot:"helper"},h("span",{class:{vhidden:!!this.value.length}},h("slot",{name:"helper"})),this.helperText&&!!t&&h("span",null,t.toLocaleDateString(this.locale,this.helperTextFormat)))),h("input",{type:"hidden",value:this.value,name:this.name})))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}},enumerable:false,configurable:true});return e}();DateInput.style=dateInputCss;export{DateInput as nano_date_input};
 //# sourceMappingURL=nano-date-input.entry.js.map

package/dist/esm-es5/nano-date-input.entry.js.map

@@ -1 +1 @@
-{"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","class_1","hostRef","_this","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","Object","defineProperty","prototype","input","validityMessage","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","requestAnimationFrame","__awaiter","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","ddc","assign","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","dropDownConfig","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"]}
+{"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","class_1","hostRef","_this","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","Object","defineProperty","prototype","input","validityMessage","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","requestAnimationFrame","__awaiter","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","ddc","assign","reportValidity","validateFirst","initValidity","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","dropDownConfig","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":";;;0PAAA,IAAMA,aAAe,iyFCiCrB,IAAMC,WAAa,CACjBC,EAAG,aACHC,EAAG,aACHC,EAAG,YAGL,IAAIC,SAAW,MAeFC,UAAS,WALtB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,oIAaUA,KAAAC,YAAc,MACdD,KAAAE,iBAAmB,CAAEV,EAAG,EAAGC,EAAG,EAAGC,EAAG,GACpCM,KAAAG,QAAU,cAAcR,WACxBK,KAAAI,OACLC,OAAOC,UAAUC,WAClBF,OAAOC,UAAUE,UACjBC,UAmBOT,KAAAU,SAAW,MAcZV,KAAAW,WAAsB,KAKtBX,KAAAY,iBAAkC,CACxCC,KAAM,UACNC,MAAO,OACPC,IAAK,WAMCf,KAAAgB,WAAsB,MAKtBhB,KAAAiB,KAAejB,KAAKG,QAKpBH,KAAAkB,SAAW,MA2BXlB,KAAAmB,SAAW,MAUXnB,KAAAoB,UAAY,MAKZpB,KAAAqB,WAAa,MAgBmBrB,KAAAsB,MAAgB,GAiBhDtB,KAAAuB,WACN,kBAKuBvB,KAAAwB,gBAAkB,KAMnCxB,KAAAyB,UAA2C,MAU3CzB,KAAA0B,SAAW,MAiBX1B,KAAA2B,UAAsB,MA6CtB3B,KAAA4B,OAAkB,KAWc5B,KAAA6B,WAAsB,MAUtD7B,KAAA8B,iBAA4B,KAU5B9B,KAAA+B,gBAAqC,GAUrC/B,KAAAgC,eAAwC,WAAM,OAAA,OAwD9ChC,KAAAiC,cAAgB,SACtBC,GAIAA,EAAEC,kBACFpC,EAAKqC,SAASF,EAAEG,OAAOf,QAGjBtB,KAAAsC,gBAAkB,SAACJ,GACzBA,EAAEC,kBACFpC,EAAKW,UAAYwB,EAAEK,OAAOC,QAE1BzC,EAAK0C,aAAaC,KAAK,CACrBF,QAASN,EAAEK,OAAOC,QAClBG,aAAcT,EAAEK,OAAOI,aACvBC,cAAeV,EAAEK,OAAOK,iBAIpB5C,KAAA6C,WAAa,WACnB9C,EAAKE,YAAc,MAGbD,KAAA8C,aAAe,SAACZ,GACtBnC,EAAKE,YAAc,MACnBF,EAAKuB,MAAQY,EAAEK,OAAOjB,MACtB,GAAIvB,EAAK+B,iBAAkB/B,EAAK8B,WAAa,OAGvC7B,KAAA+C,eAAiB,WACvBC,YAAW,SAACC,GAAC,OAAMlD,EAAK8B,WAAa,QAAQ,KAC7CmB,YAAW,SAACC,GAAM,OAAAlD,EAAKmD,QAAQC,UAAS,KAGlCnD,KAAAoD,eAAiB,WACvBJ,YAAW,SAACC,GACVlD,EAAKsD,UAAUC,SAAS,MAAOvD,EAAKwD,mBAAqB,OACzDxD,EAAKwD,iBAAmB,OACvB,MAGGvD,KAAAwD,eAAiB,WACvB,IAAKzD,EAAK8B,WAAY,CACpB9B,EAAK8B,WAAa,KAClB9B,EAAKwD,iBAAmB,UAIpBvD,KAAAyD,aAAe,SAACvB,GACtB,GAAI,CAAC,IAAK,SAASwB,SAASxB,EAAEyB,KAAM,CAClC,IAAK5D,EAAK8B,WAAY,CACpB9B,EAAK8B,WAAa,KAClB9B,EAAKwD,iBAAmB,SAKtBvD,KAAA4D,aAAe,WACrB,GAAI7D,EAAK8B,WAAY9B,EAAK8B,WAAa,OAGjC7B,KAAA6D,eAAiB,SAAC3B,GAExB,GAAIA,EAAEyB,MAAQ,OAASzB,EAAE4B,SAAU,CACjC/D,EAAKsD,UAAUC,SAAS,MACxBpB,EAAE6B,iBAEJ,GAAI7B,EAAEyB,MAAQ,KAAOzB,EAAEyB,MAAQ,QAAS,CACtC,GAAI5D,EAAK8B,WAAY9B,EAAK8B,WAAa,QA/W3CmC,OAAAC,eACIpE,EAAAqE,UAAA,UAAO,KADX,WAEE,OAAOlE,KAAKU,+CAOdsD,OAAAC,eACIpE,EAAAqE,UAAA,kBAAe,KADnB,WAEE,IAAKlE,KAAKmE,MAAO,MAAO,GACxB,OAAOnE,KAAKmE,MAAMC,sDA2FpBvE,EAAAqE,UAAAG,kBAAA,WAAA,IAAAtE,EAAAC,KACE,IAAKA,KAAKC,YAAaD,KAAKsE,WAAatE,KAAKuE,cAAcvE,KAAKsB,OACjE0B,YAAW,WACTjD,EAAKyE,WAAW9B,KAAK,CACnBpB,MAAOvB,EAAKuB,MACZmD,KAAMC,aAAa3E,EAAKuB,WAEzB,IACHtB,KAAKC,YAAc,OAqBrBJ,EAAAqE,UAAAS,sBAAA,WACE3E,KAAK4E,kBA4BP/E,EAAAqE,UAAAW,iBAAA,WAAA,IAAA9E,EAAAC,KACE,IAAM8E,EAAYJ,aAAa1E,KAAKsB,OAEpC,IAAIyD,EACFC,EACAC,EAAgB,GAElB,GAAIjF,KAAKsB,OAASwD,EAAW,CAC3B,GAAI9E,KAAK+E,MAAQA,EAAML,aAAa1E,KAAK+E,OAASD,EAAYC,EAAK,CACjEE,EACE,2BACAF,EAAIG,mBAAmBlF,KAAKI,OAAQJ,KAAKY,kBAE7C,GAAIZ,KAAKgF,MAAQA,EAAMN,aAAa1E,KAAKgF,OAASF,EAAYE,EAAK,CACjEC,EACE,2BACAD,EAAIE,mBAAmBlF,KAAKI,OAAQJ,KAAKY,kBAE7C,GAAIZ,KAAKgC,eAAe8C,GAAY,CAClCG,EAAQ,8BAIZE,uBAAsB,SAAOlC,GAAC,OAAAmC,UAAArF,OAAA,OAAA,GAAA,6EAC5B,IAAKC,KAAKmE,MAAO,MAAA,CAAA,GACH,MAAA,CAAA,EAAMnE,KAAKmE,MAAMkB,0BAAzBlB,EAAQmB,EAAAC,OACd,GAAIvF,KAAKsB,MAAMkE,SAAWV,EAAWG,EAAQ,4BAE7Cd,EAAMsB,kBAAkBR,GACxB,GAAIjF,KAAKmE,MAAM5C,aAAe,QAAS,CACrCvB,KAAKmE,MAAMuB,UAAUT,wBAwB3BpF,EAAAqE,UAAAyB,uBAAA,WACE3F,KAAK4F,SAASC,KAAO7F,KAAK6B,YAS5BmC,OAAAC,eACIpE,EAAAqE,UAAA,iBAAc,KADlB,WAEE,OAAOlE,KAAK+B,qBAEd,SAAmB+D,GACjB9F,KAAK+B,gBAAeiC,OAAA+B,OAAA/B,OAAA+B,OAAA,GAAQ/F,KAAK+B,iBAAoB+D,yCAKvD9B,OAAAC,eACIpE,EAAAqE,UAAA,YAAS,KADb,WAEE,OAAOQ,aAAa1E,KAAKsB,6CA4BrBzB,EAAAqE,UAAA8B,eAAN,SAAqBC,qHACE,MAAA,CAAA,EAAMjG,KAAKmE,MAAM6B,eAAeC,WAA/CC,EAAeZ,EAAAC,OACrB,GAAIW,EAAa1D,SAAWyD,EAAejG,KAAK6E,mBACzC,MAAA,CAAA,EAAM7E,KAAKmE,MAAM6B,eAAeC,WAAvC,MAAA,CAAA,EAAOX,EAAAC,gBAOH1F,EAAAqE,UAAAZ,SAAN,gGACE,GAAItD,KAAKmE,MAAOnE,KAAKmE,MAAMb,4BAOvBzD,EAAAqE,UAAAmB,gBAAN,uHACS,MAAA,CAAA,EAAMrF,KAAKmE,MAAMkB,0BAAxB,MAAA,CAAA,EAAOC,EAAAC,gBAOH1F,EAAAqE,UAAAwB,UAAN,SAAgBS,wFACd,IAAKnG,KAAKmE,MAAO,MAAA,CAAA,GACjBnE,KAAKmE,MAAMuB,UAAUS,oBAiFftG,EAAAqE,UAAAU,eAAA,WAAA,IAAA7E,EAAAC,KACN,IAAIoG,EAAmB,GACvB,IAAIC,EAAa,GACjBC,MAAMC,KAAKvG,KAAKyB,WAAW+E,KAAI,SAACC,EAAUC,GACxCN,EAAiBO,KAAKpH,WAAWkH,IACjC1G,EAAKG,iBAAiBuG,GAAYC,EAClCL,EAAWM,KAAKF,IAAa,IAAM,OAASA,EAAWA,MAEzDzG,KAAK4G,QAAUR,EAAiBS,KAAK,QAErC,IAAK7G,KAAK8G,aAAe9G,KAAK8G,cAAgB,QAC5C9G,KAAK8G,YAAcT,EAAWQ,KAAK,MAI/BhH,EAAAqE,UAAAK,cAAA,SAAcwC,GACpB,IAAIX,EAAmB,GACvBE,MAAMC,KAAK,OAAOC,KAAI,SAACC,GACrB,OAAAL,EAAiBO,KAAKpH,WAAWkH,OAEnC,IAAMO,EAAUD,EAAQE,MAAM,IAAIC,OAAOd,EAAiBS,KAAK,UAC/D,IAAKG,EAAS,MAAO,GAErB,IAAIG,EAAY,GAChBA,EAAUnH,KAAKE,iBAAiBV,GAAKwH,EAAQ,GAC7CG,EAAUnH,KAAKE,iBAAiBT,GAAKuH,EAAQ,GAC7CG,EAAUnH,KAAKE,iBAAiBR,GAAKsH,EAAQ,GAE7C,OAAOG,EAAUN,KAAK,MAIhBhH,EAAAqE,UAAA9B,SAAA,SAASkC,GACf,IAAM0C,EAAU1C,EAAW2C,MAAM,IAAIC,OAAOlH,KAAK4G,UAGjD,IAAKI,EAAS,CACZhH,KAAKsB,MAAQgD,EACb,OAGF,IAAIG,EAAO2C,WACTJ,EAAQhH,KAAKE,iBAAiBR,EAAI,GAClCsH,EAAQhH,KAAKE,iBAAiBT,EAAI,GAClCuH,EAAQhH,KAAKE,iBAAiBV,EAAI,IAGpC,IAAKiF,EAAM,CAETA,EAAO,IAAI4C,KAAK/C,GAGhB,IAAKG,EAAM,CACTzE,KAAKsB,MAAQgD,EACb,QAIJ,IAAMgD,EAAUC,aAAa9C,GAC7BzE,KAAKsB,MAAQgG,EACb,OAAOA,GAGTzH,EAAAqE,UAAAsD,kBAAA,WACExH,KAAK4E,iBACL5E,KAAKqE,qBAGPxE,EAAAqE,UAAAuD,iBAAA,WAAA,IAAA1H,EAAAC,KACE,IAAKA,KAAK0H,iBAAmB1H,KAAK4B,OAAQ,OAC1C5B,KAAKqD,UAAUsE,cAAgB3H,KAAK0H,eACpC1H,KAAK4F,SAASgC,SAAW5H,KAAKkD,QAC9BF,YAAW,SAACC,GAAM,OAAAlD,EAAK4F,2BAA0B,MAGnD9F,EAAAqE,UAAA2D,OAAA,WAAA,IAAA9H,EAAAC,KACEA,KAAKI,OACFE,UAAUC,WAA0BD,UAAUE,UAAYC,UAE7DT,KAAK8H,eAAeC,UAClB/H,KAAK8H,eAAeC,WAAa,aAEnC,GAAK/H,KAAKgI,KAAKC,cAA2BC,MAAQ,MAAO,CACvDlI,KAAK8H,eAAeC,UAAUI,QAAQ,QAAS,OAEjD,GAAInI,KAAKkD,QAASlD,KAAK8H,eAAeF,SAAW5H,KAAKkD,QAEtD,IAAM4B,EAAYJ,aAAa1E,KAAKsB,OACpC,IAAM8G,IAAkBpI,KAAKgI,KAAKK,cAAc,mBAEhD,OACEC,EAACC,KAAI,CAACC,MAAKxE,OAAA+B,OAAA,GAAO0C,mBAAmBzI,KAAK0I,SACxCJ,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,aAAA,CACEE,MAAM,oBACNG,KAAK,UACLjH,SAAU1B,KAAK0B,UAAYjB,UAC3Be,gBAAiBxB,KAAKwB,gBACtBD,WAAYvB,KAAKuB,WACjBuF,YACE9G,KAAK8G,cAAgB,QAAU9G,KAAK8G,YAAcrG,UAEpDmG,QAAS5G,KAAK4G,QACdgC,MAAO5I,KAAK4I,MACZzH,SAAUnB,KAAKmB,UAAYV,UAC3BiI,MAAO1I,KAAK0I,OAASjI,UACrBW,UAAWpB,KAAKoB,WAAaX,UAC7BY,WAAYrB,KAAKqB,YAAcZ,UAC/BoI,aAAc7I,KAAKiC,cACnB6G,YAAa9I,KAAK6C,WAClBkG,eAAgB/I,KAAKsC,gBACrBrB,KAAK,GACL+H,KAAMhJ,KAAKgJ,MAAQvI,UACnBwI,KAAMjJ,KAAKiJ,MAAQxI,UACnBS,SAAUlB,KAAKkB,SACfI,MAAOtB,KAAKsE,WACZ4E,IAAK,SAAC/E,GAAK,OAAMpE,EAAKoE,MAAQA,GAC9BnD,WAAYhB,KAAKgB,WACjBW,UAAW3B,KAAK2B,UAChBwH,UAAW,UACXC,KAAK,SAELd,EAAA,OAAA,CAAMrH,KAAK,QAAQ0H,KAAK,UACxBL,EAAA,OAAA,CAAMrH,KAAK,UACXqH,EAAA,OAAA,CAAMrH,KAAK,MAAM0H,KAAK,QACrB3I,KAAK4B,QAAU,CACd0G,EAAA,SAAA,CACEK,KAAK,MACLH,MAAM,mBACNa,KAAK,SACLC,UAAWtJ,KAAKyD,aAChB8F,QAASvJ,KAAKwD,eACd0F,IAAK,SAAChG,GAAO,OAAMnD,EAAKmD,QAAUA,GAClC/B,SAAUnB,KAAKmB,UAAYnB,KAAKkB,UAEhCoH,EAAA,YAAA,CAAWrH,KAAK,wBAGlBqH,EAAA,gBAAAtE,OAAA+B,OAAA,CACE4C,KAAK,MACLa,WAAYxJ,KAAK+C,eACjB0G,WAAYzJ,KAAKoD,eACjBsG,YAAY,gBACZlB,MAAM,uBACNU,IAAK,SAACtD,GAAQ,OAAM7F,EAAK6F,SAAWA,IAChC5F,KAAK8H,eAAc,CACvBsB,KAAK,aAELd,EAAA,MAAA,KACEA,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,SAAA,CACEE,MAAM,oBACNa,KAAK,SACLM,YAAa3J,KAAK4D,aAClB0F,UAAWtJ,KAAK6D,eAChBqF,IAAK,SAACU,GAAW,OAAM7J,EAAK2H,eAAiBkC,IAE7CtB,EAAA,YAAA,CAAWrH,KAAK,gBAChBqH,EAAA,OAAA,CAAME,MAAM,WAAS,kBAGzBF,EAAA,mBAAA,CACEtG,eAAgBhC,KAAKgC,eACrB6H,iBAAkB7J,KAAK8C,aACvBiC,IAAK/E,KAAK+E,KAAOtE,UACjBuE,IAAKhF,KAAKgF,KAAOvE,UAASqJ,WAChB,KACVZ,IAAK,SAACtH,GAAM,OAAM7B,EAAKsD,UAAYzB,GACnCmI,aAAc/J,KAAK+J,aACnBC,aAAchK,KAAKsB,OAAStB,KAAKiK,kBACjCC,eAAgBlK,KAAKkK,eACrBxB,MAAO1I,KAAK0I,OAASjI,UACrB2I,KAAK,oBAKXhB,GAAiBpI,KAAKW,YAAcX,KAAKwB,kBACzC8G,EAAA,OAAA,CAAMK,KAAK,UACTL,EAAA,OAAA,CAAME,MAAO,CAAE2B,UAAWnK,KAAKsB,MAAMkE,SACnC8C,EAAA,OAAA,CAAMrH,KAAK,YAEZjB,KAAKW,cAAgBmE,GACpBwD,EAAA,OAAA,KACGxD,EAAUI,mBACTlF,KAAKI,OACLJ,KAAKY,qBAOjB0H,EAAA,QAAA,CAAOe,KAAK,SAAS/H,MAAOtB,KAAKsB,MAAOL,KAAMjB,KAAKiB,sZAplBvC","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\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    const initValidity = await this.input.reportValidity(validateFirst);\n    if (initValidity.isValid && validateFirst) this.testDateValidity();\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\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"]}

package/dist/esm-es5/nano-field-validator.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(e,t,r,n){function i(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,a){function s(e){try{u(n.next(e))}catch(t){a(t)}}function o(e){try{u(n["throw"](e))}catch(t){a(t)}}function u(e){e.done?r(e.value):i(e.value).then(s,o)}u((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){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(e){return function(t){return u([e,t])}}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=t.call(e,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(e,t){for(var r=0,n=t.length,i=e.length;r<n;r++,i++)e[i]=t[r];return e};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{k as getRenderingRef,j as forceUpdate,r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";var appendToMap=function(e,t,r){var n=e.get(t);if(!n){e.set(t,[r])}else if(!n.includes(r)){n.push(r)}};var debounce=function(e,t){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;e.apply(void 0,n)}),t)}};var isConnected=function(e){return!("isConnected"in e)||e.isConnected};var cleanupElements=debounce((function(e){for(var t=0,r=e.keys();t<r.length;t++){var n=r[t];e.set(n,e.get(n).filter(isConnected))}}),2e3);var stencilSubscription=function(){if(typeof getRenderingRef!=="function"){return{}}var e=new Map;return{dispose:function(){return e.clear()},get:function(t){var r=getRenderingRef();if(r){appendToMap(e,t,r)}},set:function(t){var r=e.get(t);if(r){e.set(t,r.filter(forceUpdate))}cleanupElements(e)},reset:function(){e.forEach((function(e){return e.forEach(forceUpdate)}));cleanupElements(e)}}};var createObservableMap=function(e,t){if(t===void 0){t=function(e,t){return e!==t}}var r=new Map(Object.entries(e!==null&&e!==void 0?e:{}));var n={dispose:[],get:[],set:[],reset:[]};var i=function(){r=new Map(Object.entries(e!==null&&e!==void 0?e:{}));n.reset.forEach((function(e){return e()}))};var a=function(){n.dispose.forEach((function(e){return e()}));i()};var s=function(e){n.get.forEach((function(t){return t(e)}));return r.get(e)};var o=function(e,i){var a=r.get(e);if(t(i,a,e)){r.set(e,i);n.set.forEach((function(t){return t(e,i,a)}))}};var u=typeof Proxy==="undefined"?{}:new Proxy(e,{get:function(e,t){return s(t)},ownKeys:function(e){return Array.from(r.keys())},getOwnPropertyDescriptor:function(){return{enumerable:true,configurable:true}},has:function(e,t){return r.has(t)},set:function(e,t,r){o(t,r);return true}});var l=function(e,t){n[e].push(t);return function(){removeFromArray(n[e],t)}};var c=function(t,r){var n=l("set",(function(e,n){if(e===t){r(n)}}));var i=l("reset",(function(){return r(e[t])}));return function(){n();i()}};var f=function(){var e=[];for(var t=0;t<arguments.length;t++){e[t]=arguments[t]}var r=e.reduce((function(e,t){if(t.set){e.push(l("set",t.set))}if(t.get){e.push(l("get",t.get))}if(t.reset){e.push(l("reset",t.reset))}if(t.dispose){e.push(l("dispose",t.dispose))}return e}),[]);return function(){return r.forEach((function(e){return e()}))}};var h=function(e){var t=r.get(e);n.set.forEach((function(r){return r(e,t,t)}))};return{state:u,get:s,set:o,on:l,onChange:c,use:f,dispose:a,reset:i,forceUpdate:h}};var removeFromArray=function(e,t){var r=e.indexOf(t);if(r>=0){e[r]=e[e.length-1];e.length--}};var createStore=function(e,t){var r=createObservableMap(e,t);r.use(stencilSubscription());return r};var FieldValidator=function(){function e(e){var t=this;registerInstance(this,e);this.nanoPayloadChange=createEvent(this,"nanoPayloadChange",7);this.nanoSubmit=createEvent(this,"nanoSubmit",7);this.nanoInvalid=createEvent(this,"nanoInvalid",7);this.submitted=false;this.fields=[];this.internalValidate=false;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this.handleStoreChange=function(e,r){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!(this.validateOn==="dirty"&&this.dirty))return[3,2];this.internalValidate=true;return[4,this.validateAllFields()];case 1:e.sent();this._valid=this.activeForm.checkValidity();this.internalValidate=false;e.label=2;case 2:this.nanoPayloadChange.emit(this.store.state);return[2]}}))}))};this.handleFieldChange=function(e){t._dirty=true;t.setFieldValue([e.target])};this.handleFormInvalid=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:e.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:t.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(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:e.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;return[4,this.validateAllFields()];case 1:t.sent();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return[2]}this.submitForm();return[2]}}))}))}}e.prototype.userFormChange=function(){if(!!this.userForm)this.activeForm=this.userForm};Object.defineProperty(e.prototype,"activeForm",{get:function(){return this._activeForm},set:function(e){if(this._activeForm)this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true);if(e)e.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=e},enumerable:false,configurable:true});e.prototype.validateOnChange=function(){var e=this;this.fields.forEach((function(t){if(t.tagName==="NANO-CHECKBOX"){var r=t.closest("nano-checkbox-group");if(r)r.validateOn=e.validateOn}else{t.validateOn=e.validateOn}}))};Object.defineProperty(e.prototype,"dirty",{get:function(){return this._dirty},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"valid",{get:function(){return this._valid},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"payload",{get:function(){return this.store.state},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"showValidation",{get:function(){return this.validateOn==="dirty"&&this.dirty||this.submitted},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"validationState",{get:function(){var e=this;var t=[];this.fields.forEach((function(r){return __awaiter(e,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=t.find((function(e){return e.name===r.name}));if(e){e.validityMessage=r.validityMessage.length?r.validityMessage:e.validityMessage;if(!e.fields.find((function(e){return e===r})))e.fields.push(r);if(e.valid&&r.invalid)e.valid=false;return[2]}t.push({fields:[r],name:r.name,valid:!r.invalid,value:this.store.state[r.name],dirty:false,validityMessage:r.validityMessage});return[2]}))}))}));return t},enumerable:false,configurable:true});e.prototype.attachSlotObserver=function(){var e=this;if(!!this.mo)return;var t=this.mo=new MutationObserver((function(t){var r=e.host.querySelector("form");if(r!==e.activeForm)e.activeForm=r;e.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})};e.prototype.setupFields=function(){var e=this;var t=Array.from(this.host.querySelectorAll("\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      "));t=t.filter((function(e){return!!e.name&&!!e.name.length}));if(!t.filter((function(t){return!e.fields.includes(t)})).length)return;this.fields=t;this.validateOnChange();this.setFieldValue(this.fields);this.nanoPayloadChange.emit(this.store.state)};e.prototype.setFieldValue=function(e){var t=this;e.forEach((function(e){var r=e.name;if(!r.length)return;switch(e.tagName){case"NANO-CHECKBOX":var n=e;if(n.type==="radio"||n.type==="segment"||n.type==="segment-pill"){if(n.checked)t.store.state[r]=n.value;else if(!n.checked&&(n.value===t.store.state[r]||!t.store.state[r]))t.store.state[r]=""}else if(t.fields.filter((function(e){return e.name===r&&e.tagName==="NANO-CHECKBOX"})).length>1){var i=Array.isArray(t.store.state[r])?t.store.state[r]:[];if(n.checked){if(!t.store.state[r].includes(n.value)){t.store.state[r]=__spreadArray(__spreadArray([],i),[n.value])}}else{t.store.state[r]=i.filter((function(e){return e!==n.value}))}}else t.store.state[r]=n.value;break;case"NANO-FILE-UPLOAD":t.store.state[r]=e.files;break;default:t.store.state[r]=e.value;break}}))};e.prototype.validate=function(e,t){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(e,t,this.store.state);if(!r)return[2];return[4,Promise.all(Object.entries(r).map((function(e){var t=e[0],r=e[1];return __awaiter(n,void 0,void 0,(function(){var e,n,i;return __generator(this,(function(a){switch(a.label){case 0:e=this.fields.find((function(e){return e.name===t}));n=e;if(e.tagName==="NANO-CHECKBOX"){i=e.closest("nano-checkbox-group");n=i||e}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]}}))}))};e.prototype.setFieldError=function(e,t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:if(!e["showError"])return[3,2];return[4,e.showError(t)];case 1:r.sent();return[3,4];case 2:return[4,e.setError(t)];case 3:r.sent();r.label=4;case 4:return[2]}}))}))};e.prototype.validateAllFields=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){switch(t.label){case 0:return[4,Object.entries(this.store.state).reduce((function(t,r){var n=r[0],i=r[1];return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,t];case 1:e.sent();return[4,this.validate(n,i)];case 2:e.sent();return[2]}}))}))}),undefined)];case 1:t.sent();return[2]}}))}))};e.prototype.scrollToFirstInvalid=function(){var e=this;if(!this.scrollToInvalid)return;setTimeout((function(){var t=e.validationState.find((function(e){return!e.valid}));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)};e.prototype.submitForm=function(){var e=this.nanoSubmit.emit();if(e.defaultPrevented)return;this.activeForm.submit()};e.prototype.connectedCallback=function(){this.userForm=this.host.querySelector("form")};e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.store=createStore({});e.setupFields();e.attachSlotObserver();e.store.on("set",(function(t,r){return e.handleStoreChange(t,r)}));e.host.addEventListener("nanoChange",e.handleFieldChange);e.host.addEventListener("submit",e.handleSubmit)}))};e.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)};e.prototype.render=function(){var e=this;return h(Host,null,this.userForm&&h("slot",null),!this.userForm&&h("form",{ref:function(t){return e.activeForm=t}},h("slot",null)))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{userForm:["userFormChange"],validateOn:["validateOnChange"]}},enumerable:false,configurable:true});return e}();export{FieldValidator as nano_field_validator};
+ */import{k as getRenderingRef,j as forceUpdate,r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";var appendToMap=function(e,t,r){var n=e.get(t);if(!n){e.set(t,[r])}else if(!n.includes(r)){n.push(r)}};var debounce=function(e,t){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;e.apply(void 0,n)}),t)}};var isConnected=function(e){return!("isConnected"in e)||e.isConnected};var cleanupElements=debounce((function(e){for(var t=0,r=e.keys();t<r.length;t++){var n=r[t];e.set(n,e.get(n).filter(isConnected))}}),2e3);var stencilSubscription=function(){if(typeof getRenderingRef!=="function"){return{}}var e=new Map;return{dispose:function(){return e.clear()},get:function(t){var r=getRenderingRef();if(r){appendToMap(e,t,r)}},set:function(t){var r=e.get(t);if(r){e.set(t,r.filter(forceUpdate))}cleanupElements(e)},reset:function(){e.forEach((function(e){return e.forEach(forceUpdate)}));cleanupElements(e)}}};var createObservableMap=function(e,t){if(t===void 0){t=function(e,t){return e!==t}}var r=new Map(Object.entries(e!==null&&e!==void 0?e:{}));var n={dispose:[],get:[],set:[],reset:[]};var i=function(){r=new Map(Object.entries(e!==null&&e!==void 0?e:{}));n.reset.forEach((function(e){return e()}))};var a=function(){n.dispose.forEach((function(e){return e()}));i()};var s=function(e){n.get.forEach((function(t){return t(e)}));return r.get(e)};var o=function(e,i){var a=r.get(e);if(t(i,a,e)){r.set(e,i);n.set.forEach((function(t){return t(e,i,a)}))}};var u=typeof Proxy==="undefined"?{}:new Proxy(e,{get:function(e,t){return s(t)},ownKeys:function(e){return Array.from(r.keys())},getOwnPropertyDescriptor:function(){return{enumerable:true,configurable:true}},has:function(e,t){return r.has(t)},set:function(e,t,r){o(t,r);return true}});var l=function(e,t){n[e].push(t);return function(){removeFromArray(n[e],t)}};var c=function(t,r){var n=l("set",(function(e,n){if(e===t){r(n)}}));var i=l("reset",(function(){return r(e[t])}));return function(){n();i()}};var f=function(){var e=[];for(var t=0;t<arguments.length;t++){e[t]=arguments[t]}var r=e.reduce((function(e,t){if(t.set){e.push(l("set",t.set))}if(t.get){e.push(l("get",t.get))}if(t.reset){e.push(l("reset",t.reset))}if(t.dispose){e.push(l("dispose",t.dispose))}return e}),[]);return function(){return r.forEach((function(e){return e()}))}};var h=function(e){var t=r.get(e);n.set.forEach((function(r){return r(e,t,t)}))};return{state:u,get:s,set:o,on:l,onChange:c,use:f,dispose:a,reset:i,forceUpdate:h}};var removeFromArray=function(e,t){var r=e.indexOf(t);if(r>=0){e[r]=e[e.length-1];e.length--}};var createStore=function(e,t){var r=createObservableMap(e,t);r.use(stencilSubscription());return r};var FieldValidator=function(){function e(e){var t=this;registerInstance(this,e);this.nanoPayloadChange=createEvent(this,"nanoPayloadChange",7);this.nanoSubmit=createEvent(this,"nanoSubmit",7);this.nanoInvalid=createEvent(this,"nanoInvalid",7);this.submitted=false;this.fields=[];this.internalValidate=false;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this.handleStoreChange=function(e,r){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(n){switch(n.label){case 0:t=this.fields.find((function(t){return t.name===e}));if(t&&t.value!==r)this.storeToFields([t]);if(!(this.validateOn==="dirty"&&this.dirty))return[3,2];this.internalValidate=true;return[4,this.validateAllFields()];case 1:n.sent();this._valid=this.activeForm.checkValidity();this.internalValidate=false;n.label=2;case 2:this.nanoPayloadChange.emit(this._store.state);return[2]}}))}))};this.handleFieldChange=function(e){t._dirty=true;t.fieldsToStore([e.target])};this.handleFormInvalid=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:e.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:t.sent();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this.validateOn==="submit"){if(this._valid){this.submitForm();return[2]}}this.scrollToFirstInvalid();this.nanoInvalid.emit();return[2]}}))}))};this.handleSubmit=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:e.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;return[4,this.validateAllFields()];case 1:t.sent();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return[2]}this.submitForm();return[2]}}))}))}}e.prototype.userFormChange=function(){if(!!this.userForm)this.activeForm=this.userForm};Object.defineProperty(e.prototype,"activeForm",{get:function(){return this._activeForm},set:function(e){if(!e)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}e.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=e},enumerable:false,configurable:true});e.prototype.validateOnChange=function(){var e=this;this.fields.forEach((function(t){if(t.tagName==="NANO-CHECKBOX"){var r=t.closest("nano-checkbox-group");if(r)r.validateOn=e.validateOn}else{t.validateOn=e.validateOn}}))};Object.defineProperty(e.prototype,"dirty",{get:function(){return this._dirty},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"valid",{get:function(){return this._valid},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"store",{get:function(){return this._store},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"payload",{get:function(){return this._store.state},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"showValidation",{get:function(){return this.validateOn==="dirty"&&this.dirty||this.submitted},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"validationState",{get:function(){var e=this;var t=[];this.fields.forEach((function(r){return __awaiter(e,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=t.find((function(e){return e.name===r.name}));if(e){e.validityMessage=r.validityMessage.length?r.validityMessage:e.validityMessage;if(!e.fields.find((function(e){return e===r})))e.fields.push(r);if(e.valid&&r.invalid)e.valid=false;return[2]}t.push({fields:[r],name:r.name,valid:!r.invalid,value:this._store.state[r.name],dirty:false,validityMessage:r.validityMessage});return[2]}))}))}));return t},enumerable:false,configurable:true});e.prototype.setStore=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(r){Object.entries(e).forEach((function(e){var r=e[0],n=e[1];return t.store.state[r]=n}));return[2]}))}))};e.prototype.attachSlotObserver=function(){var e=this;if(!!this.mo)return;var t=this.mo=new MutationObserver((function(t){var r=e.host.querySelector("form");if(r&&r!==e.activeForm)e.activeForm=r;e.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})};e.prototype.setupFields=function(){var e=this;var t=Array.from(this.host.querySelectorAll("\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      "));t=t.filter((function(e){return!!e.name&&!!e.name.length}));if(!t.filter((function(t){return!e.fields.includes(t)})).length)return;this.fields=t;this.storeToFields(this.fields);this.validateOnChange();this.fieldsToStore(this.fields);this.nanoPayloadChange.emit(this._store.state)};e.prototype.storeToFields=function(e){var t=this;e.forEach((function(e){var r=e.name;if(!r.length||typeof t._store.state[r]==="undefined")return;switch(e.tagName){case"NANO-CHECKBOX":var n=e;if(n.type==="radio"||n.type==="segment"||n.type==="segment-pill"){if(t._store.state[r]===n.value)n.checked=true;else n.checked=false}else if(Array.isArray(t._store.state[r])){if(t._store.state[r].includes(n.value))n.checked=true;else n.checked=false}else{if(t._store.state[r]===n.value)n.checked=true;else n.checked=false}break;case"NANO-FILE-UPLOAD":e.files=t._store.state[r];break;default:e.value=t._store.state[r];break}}))};e.prototype.fieldsToStore=function(e){var t=this;e.forEach((function(e){var r=e.name;if(!r.length)return;switch(e.tagName){case"NANO-CHECKBOX":var n=e;if(n.type==="radio"||n.type==="segment"||n.type==="segment-pill"){if(n.checked)t._store.state[r]=n.value;else if(!n.checked&&(n.value===t._store.state[r]||!t._store.state[r]))t._store.state[r]=""}else if(t.fields.filter((function(e){return e.name===r&&e.tagName==="NANO-CHECKBOX"})).length>1){var i=Array.isArray(t._store.state[r])?t._store.state[r]:[];if(n.checked){if(!t._store.state[r].includes(n.value)){t._store.state[r]=__spreadArray(__spreadArray([],i),[n.value])}}else{t._store.state[r]=i.filter((function(e){return e!==n.value}))}}else{if(n.checked)t._store.state[r]=n.value;else t._store.state[r]=""}break;case"NANO-FILE-UPLOAD":t._store.state[r]=e.files;break;default:t._store.state[r]=e.value;break}}))};e.prototype.validate=function(e,t){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(e,t,this._store.state);if(!r)return[2];return[4,Promise.all(Object.entries(r).map((function(e){var t=e[0],r=e[1];return __awaiter(n,void 0,void 0,(function(){var e,n,i;return __generator(this,(function(a){switch(a.label){case 0:e=this.fields.find((function(e){return e.name===t}));n=e;if(e.tagName==="NANO-CHECKBOX"){i=e.closest("nano-checkbox-group");n=i||e}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]}}))}))};e.prototype.setFieldError=function(e,t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:if(!e["showError"])return[3,2];return[4,e.showError(t)];case 1:r.sent();return[3,4];case 2:return[4,e.setError(t)];case 3:r.sent();r.label=4;case 4:return[2]}}))}))};e.prototype.validateAllFields=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){switch(t.label){case 0:return[4,Object.entries(this._store.state).reduce((function(t,r){var n=r[0],i=r[1];return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,t];case 1:e.sent();return[4,this.validate(n,i)];case 2:e.sent();return[2]}}))}))}),undefined)];case 1:t.sent();return[2]}}))}))};e.prototype.scrollToFirstInvalid=function(){var e=this;if(!this.scrollToInvalid)return;setTimeout((function(){var t=e.validationState.find((function(e){return!e.valid}));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)};e.prototype.submitForm=function(){var e=this.nanoSubmit.emit();if(e.defaultPrevented)return;this.activeForm.submit()};e.prototype.connectedCallback=function(){this.userForm=this.host.querySelector("form");this._store=createStore({})};e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.setupFields();e.attachSlotObserver();e._store.on("set",(function(t,r){return e.handleStoreChange(t,r)}));e.host.addEventListener("nanoChange",e.handleFieldChange);e.host.addEventListener("submit",e.handleSubmit)}))};e.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();this._store.reset();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("submit",this.handleSubmit);if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)};e.prototype.render=function(){var e=this;return h(Host,null,this.userForm&&h("slot",null),!this.userForm&&h("form",{ref:function(t){return e.activeForm=t}},h("slot",null)))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{userForm:["userFormChange"],validateOn:["validateOnChange"]}},enumerable:false,configurable:true});return e}();export{FieldValidator as nano_field_validator};
 //# sourceMappingURL=nano-field-validator.entry.js.map

package/dist/esm-es5/nano-field-validator.entry.js.map

@@ -1 +1 @@
-{"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","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"]}
+{"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","class_1","hostRef","_this","this","submitted","fields","internalValidate","validateOn","scrollToInvalid","_dirty","handleStoreChange","newVal","__awaiter","found","find","field","name","storeToFields","dirty","validateAllFields","sent","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","handleFieldChange","ev","fieldsToStore","target","handleFormInvalid","preventDefault","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","prototype","userFormChange","userForm","defineProperty","_activeForm","form","removeEventListener","addEventListener","validateOnChange","tagName","cbg","closest","validationState","v","validityMessage","f","valid","invalid","setStore","val","store","attachSlotObserver","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","querySelectorAll","fieldName","type","checked","isArray","files","cb_1","currentArr","__spreadArray","validate","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  Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport {\n  NanoFormEles,\n  NanoFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n} from '../../interface';\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 * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() 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 (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n\n    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 state as a stencil store. */\n  @Prop() get store() {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user */\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: ValidatorValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    Object.entries(state).forEach(\n      ([key, val]) => (this.store.state[key] = val)\n    );\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  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 && 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.storeToFields(this.fields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.fields);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: NanoFormEles[]) {\n    fields.forEach((field) => {\n      const fieldName = field.name;\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        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 (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          } else if (Array.isArray(this._store.state[fieldName])) {\n            if (this._store.state[fieldName].includes(cb.value))\n              cb.checked = true;\n            else cb.checked = false;\n          } else {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          }\n          break;\n        case 'NANO-FILE-UPLOAD':\n          (field as HTMLNanoFileUploadElement).files =\n            this._store.state[fieldName];\n          break;\n        default:\n          field.value = this._store.state[fieldName];\n          break;\n      }\n    });\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(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\n          if (\n            cb.type === 'radio' ||\n            cb.type === 'segment' ||\n            cb.type === 'segment-pill'\n          ) {\n            // radio type control - only one can be checked\n            if (cb.checked) this._store.state[fieldName] = cb.value;\n            else if (\n              !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            // multiple checkbox type control\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 {\n            // single checkbox - on or off\n            if (cb.checked) this._store.state[fieldName] = cb.value;\n            else this._store.state[fieldName] = '';\n          }\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 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    const found = this.fields.find((field) => field.name === key);\n    if (found && found.value !== newVal) this.storeToFields([found]);\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /** Handles field value changes and passes to store */\n  private handleFieldChange = (ev: NanoFormEvent) => {\n    this._dirty = true;\n    this.fieldsToStore([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    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /** 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    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\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.reset();\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}