@nanoporetech-digital/components 3.7.0 → 3.8.0

package/dist/nano-components/{p-b40eedcb.entry.js → p-34df2f17.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as t,h as s,a as h,g as e}from"./p-1fe12320.js";import{a as n}from"./p-a0b93616.js";import{C as a}from"./p-e3860f00.js";import{W as r}from"./p-63834d50.js";import"./p-69a3e911.js";import"./p-9746b0a5.js";const o=class{constructor(s){i(this,s);this.nanoSearchResult=t(this,"nanoSearchResult",7);this.nanoSearch=t(this,"nanoSearch",7);this.nanoSearchReset=t(this,"nanoSearchReset",7);this.handleFocus=()=>{if(this.inputField)this.inputField.setFocus()};this.searchStr="";this.algoliaIndex=null;this.currentResults=undefined;this.appId="";this.apiKey="";this.searchIndex=null;this.searchIndexName=undefined;this.minChars=2;this.autoEmit=true;this.browseIndex=false;this.storeId=undefined;this.storeMethod="session"}async search(){this.emitResults()}searchIndexNameChange(){if(!this.searchIndexName||!this.searchIndexName.length)return;this.searchIndex={index:this.searchIndexName}}algoliaChange(){this.internalIndex=this.algoliaIndex}browseIndexChange(){if(this.browseIndex){this.searchStr="*";this.searchSubmit()}}initAlgoliaClient(){if(this.isNested||!this.appId||!this.apiKey)return;this.algoliaClient=n(this.appId,this.apiKey);if(this.searchIndex)this.algoliaIndex=this.algoliaClient.initIndex(this.searchIndex.index)}async searchSubmit(i){if(!this.internalIndex){console.error("No algolia index set");return}if(i){if(i.target.tagName.toLowerCase()!=="nano-input")return;this.searchStr=i.detail.value}else{this.inputField=this.inputField||this.host.querySelector("nano-input");if(!this.inputField)return;this.searchStr=this.inputField.value}if(this.searchStr.length<this.minChars){if(this.browseIndex)this.searchStr="*";else{if(this.searchStr.length===0){this.nanoSearchResult.emit({results:[],client:{apiKey:this.appId,appId:this.appId}});return}if(this.searchStr.length<this.minChars)return}}let t={};if(this.searchIndex.filters)t={facets:this.searchIndex.filters};const s=this.fixDomain(await this.internalIndex.search(this.searchStr,t));s.indexName=this.searchIndex.name;s.selected=true;s.domain=this.searchIndex.domain||null;s.index=this.searchIndex.index;this.currentResults=s;this.nanoSearch.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}});if(this.autoEmit)this.emitResults()}emitResults(){this.nanoSearchResult.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}})}fixDomain(i){if(!this.searchIndex.domain)return i;i.hits.map((i=>{if(i.url&&!i.url.match(/^http/))i.url=location.protocol+"//"+this.searchIndex.domain+i.url}));return i}connectedCallback(){this.isNested=this.host.parentElement.tagName.toLowerCase()==="nano-algolia"&&this.host.hasAttribute("slot")&&this.host.getAttribute("slot")==="search-input";if(!this.isNested){this.host.addEventListener("openWormhole",(i=>{i.detail.onOpen.resolve();this.searchIndexNameChange();this.initAlgoliaClient()}))}}componentWillLoad(){this.inputField=this.host.querySelector("nano-input");if(this.storeId)a.init(this,["searchStr"],this.storeMethod,this.storeId)}render(){return s(h,{onFocus:this.handleFocus,tabindex:"-1"},s("slot",null))}get host(){return e(this)}static get watchers(){return{searchIndexName:["searchIndexNameChange"],algoliaIndex:["algoliaChange"],browseIndex:["browseIndexChange"],apiKey:["initAlgoliaClient"],appId:["initAlgoliaClient"],searchIndex:["initAlgoliaClient"]}}};r(o,["algoliaIndex","searchIndex","browseIndex"]);export{o as nano_algolia_input};
-//# sourceMappingURL=p-b40eedcb.entry.js.map
+import{r as i,c as t,h as s,a as h,g as e}from"./p-f84612d4.js";import{a as n}from"./p-ed6adde2.js";import{C as a}from"./p-7c23e950.js";import{W as r}from"./p-5ec7263c.js";import"./p-69a3e911.js";import"./p-9746b0a5.js";const o=class{constructor(s){i(this,s);this.nanoSearchResult=t(this,"nanoSearchResult",7);this.nanoSearch=t(this,"nanoSearch",7);this.nanoSearchReset=t(this,"nanoSearchReset",7);this.handleFocus=()=>{if(this.inputField)this.inputField.setFocus()};this.searchStr="";this.algoliaIndex=null;this.currentResults=undefined;this.appId="";this.apiKey="";this.searchIndex=null;this.searchIndexName=undefined;this.minChars=2;this.autoEmit=true;this.browseIndex=false;this.storeId=undefined;this.storeMethod="session"}async search(){this.emitResults()}searchIndexNameChange(){if(!this.searchIndexName||!this.searchIndexName.length)return;this.searchIndex={index:this.searchIndexName}}algoliaChange(){this.internalIndex=this.algoliaIndex}browseIndexChange(){if(this.browseIndex){this.searchStr="*";this.searchSubmit()}}initAlgoliaClient(){if(this.isNested||!this.appId||!this.apiKey)return;this.algoliaClient=n(this.appId,this.apiKey);if(this.searchIndex)this.algoliaIndex=this.algoliaClient.initIndex(this.searchIndex.index)}async searchSubmit(i){if(!this.internalIndex){console.error("No algolia index set");return}if(i){if(i.target.tagName.toLowerCase()!=="nano-input")return;this.searchStr=i.detail.value}else{this.inputField=this.inputField||this.host.querySelector("nano-input");if(!this.inputField)return;this.searchStr=this.inputField.value}if(this.searchStr.length<this.minChars){if(this.browseIndex)this.searchStr="*";else{if(this.searchStr.length===0){this.nanoSearchResult.emit({results:[],client:{apiKey:this.appId,appId:this.appId}});return}if(this.searchStr.length<this.minChars)return}}let t={};if(this.searchIndex.filters)t={facets:this.searchIndex.filters};const s=this.fixDomain(await this.internalIndex.search(this.searchStr,t));s.indexName=this.searchIndex.name;s.selected=true;s.domain=this.searchIndex.domain||null;s.index=this.searchIndex.index;this.currentResults=s;this.nanoSearch.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}});if(this.autoEmit)this.emitResults()}emitResults(){this.nanoSearchResult.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}})}fixDomain(i){if(!this.searchIndex.domain)return i;i.hits.map((i=>{if(i.url&&!i.url.match(/^http/))i.url=location.protocol+"//"+this.searchIndex.domain+i.url}));return i}connectedCallback(){this.isNested=this.host.parentElement.tagName.toLowerCase()==="nano-algolia"&&this.host.hasAttribute("slot")&&this.host.getAttribute("slot")==="search-input";if(!this.isNested){this.host.addEventListener("openWormhole",(i=>{i.detail.onOpen.resolve();this.searchIndexNameChange();this.initAlgoliaClient()}))}}componentWillLoad(){this.inputField=this.host.querySelector("nano-input");if(this.storeId)a.init(this,["searchStr"],this.storeMethod,this.storeId)}render(){return s(h,{onFocus:this.handleFocus,tabindex:"-1"},s("slot",null))}get host(){return e(this)}static get watchers(){return{searchIndexName:["searchIndexNameChange"],algoliaIndex:["algoliaChange"],browseIndex:["browseIndexChange"],apiKey:["initAlgoliaClient"],appId:["initAlgoliaClient"],searchIndex:["initAlgoliaClient"]}}};r(o,["algoliaIndex","searchIndex","browseIndex"]);export{o as nano_algolia_input};
+//# sourceMappingURL=p-34df2f17.entry.js.map

package/dist/nano-components/p-34df2f17.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AlgoliaInput","this","handleFocus","inputField","setFocus","async","emitResults","searchIndexNameChange","searchIndexName","length","searchIndex","index","algoliaChange","internalIndex","algoliaIndex","browseIndexChange","browseIndex","searchStr","searchSubmit","initAlgoliaClient","isNested","appId","apiKey","algoliaClient","algoliasearch","initIndex","ev","console","error","target","tagName","toLowerCase","detail","value","host","querySelector","minChars","nanoSearchResult","emit","results","client","options","filters","facets","fixDomain","search","indexName","name","selected","domain","currentResults","nanoSearch","autoEmit","hits","map","hit","url","match","location","protocol","connectedCallback","parentElement","hasAttribute","getAttribute","addEventListener","onOpen","resolve","componentWillLoad","storeId","ComponentStore","init","storeMethod","render","h","Host","onFocus","tabindex","Wormhole"],"sources":["./src/components/algolia/algolia-input.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  State,\n  EventEmitter,\n  Event,\n  Listen,\n  Method,\n  Watch,\n  ComponentInterface,\n} from '@stencil/core';\n\nimport algoliasearch, {\n  SearchClient as AlgoliaClient,\n  SearchIndex as AlgoliaIndex,\n} from 'algoliasearch';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { Wormhole } from '../algolia/algolia-data';\nimport {\n  InputChangeEventDetail,\n  AloliaSearchResultDetail,\n  SearchIndex,\n  AlgoliaMultiResult,\n} from '../../interface';\n\n/**\n * @deprecated\n * Component for querying Algolia Indeces.\n * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)\n * Must include one 'nano-input' component\n */\n@Component({\n  tag: 'nano-algolia-input',\n  shadow: true,\n})\nexport class AlgoliaInput implements ComponentInterface {\n  private internalIndex: AlgoliaIndex;\n  private algoliaClient: AlgoliaClient;\n  private isNested: boolean;\n  private inputField: HTMLNanoInputElement;\n\n  @Element() host: HTMLNanoAlgoliaInputElement;\n\n  @State() searchStr: string = '';\n  @State() algoliaIndex: AlgoliaIndex = null;\n  @State() currentResults: AlgoliaMultiResult;\n\n  /**\n   * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() appId: string = '';\n\n  /**\n   * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() apiKey: string = '';\n\n  /**\n   * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically if you're using a 'resultsEmitter' element.\n   * ```\n   * { index: string, // algolia index name\n   *   domain?: string, // used in template filers to resolve incomplete url fields\n   *   filters?: [string], // algolia facets to retrive\n   *   hitsPerPage?: number,\n   *   name?: string // human readable index name\n   * }\n   * ```\n   */\n  @Prop({ mutable: true }) searchIndex: SearchIndex = null;\n\n  /**\n   * Algolia search index name. Alternative to 'searchIndex'.\n   * A simplified shortcut for setting an index.\n   * properties such as hitsPerPage and facets will come from the algolia index\n   */\n  @Prop() searchIndexName: string;\n\n  /**\n   * Minimum number of characters before performing a search\n   */\n  @Prop() minChars: number = 2;\n\n  /**\n   * Automatically emit results data to algolia components.\n   * For example, if you wanted to provide an 'autocomplete' style dropdown\n   * before showing the main results with a submit button\n   */\n  @Prop() autoEmit: boolean = true;\n\n  /**\n   * Will maintain a search all / '*' on init and reset allowing for a view\n   * then filter experience rather than a search first experience\n   */\n  @Prop({ mutable: true }) browseIndex: boolean = false; // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Manually emit search results to algolia components.\n   * Useful if you don't wish to search on input change / want to provide 'autocomplete' options\n   * or / and want to use a submit button */\n  @Method()\n  async search() {\n    this.emitResults();\n  }\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   * @internal\n   */\n  @Event() nanoSearchResult!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   */\n  @Event() nanoSearch!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search field is cleared.\n   */\n  @Event() nanoSearchReset!: EventEmitter<AloliaSearchResultDetail>;\n\n  @Watch('searchIndexName')\n  searchIndexNameChange() {\n    if (!this.searchIndexName || !this.searchIndexName.length) return;\n    this.searchIndex = { index: this.searchIndexName };\n  }\n\n  @Watch('algoliaIndex')\n  algoliaChange() {\n    this.internalIndex = this.algoliaIndex;\n  }\n\n  @Watch('browseIndex')\n  browseIndexChange() {\n    if (this.browseIndex) {\n      this.searchStr = '*';\n      this.searchSubmit();\n    }\n  }\n\n  @Watch('apiKey')\n  @Watch('appId')\n  @Watch('searchIndex')\n  initAlgoliaClient() {\n    if (this.isNested || !this.appId || !this.apiKey) return;\n    this.algoliaClient = algoliasearch(this.appId, this.apiKey);\n    if (this.searchIndex)\n      this.algoliaIndex = this.algoliaClient.initIndex(this.searchIndex.index);\n  }\n\n  @Listen('nanoChange')\n  async searchSubmit(ev?: CustomEvent<InputChangeEventDetail>) {\n    if (!this.internalIndex) {\n      console.error('No algolia index set');\n      return;\n    }\n\n    if (ev) {\n      if ((ev.target as HTMLElement).tagName.toLowerCase() !== 'nano-input')\n        return;\n      this.searchStr = ev.detail.value;\n    } else {\n      this.inputField =\n        this.inputField || this.host.querySelector('nano-input');\n      if (!this.inputField) return;\n      this.searchStr = this.inputField.value;\n    }\n\n    if (this.searchStr.length < this.minChars) {\n      if (this.browseIndex) this.searchStr = '*';\n      else {\n        if (this.searchStr.length === 0) {\n          this.nanoSearchResult.emit({\n            results: [],\n            client: { apiKey: this.appId, appId: this.appId },\n          });\n          return;\n        }\n        if (this.searchStr.length < this.minChars) return;\n      }\n    }\n\n    let options = {};\n    if (this.searchIndex.filters)\n      options = { facets: this.searchIndex.filters };\n\n    const results = this.fixDomain(\n      await this.internalIndex.search(this.searchStr, options)\n    );\n    results.indexName = this.searchIndex.name;\n    results.selected = true;\n    results.domain = this.searchIndex.domain || null;\n    results.index = this.searchIndex.index;\n\n    this.currentResults = results;\n    this.nanoSearch.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n\n    if (this.autoEmit) this.emitResults();\n  }\n\n  private emitResults() {\n    this.nanoSearchResult.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n  }\n\n  private fixDomain(results: AlgoliaMultiResult) {\n    if (!this.searchIndex.domain) return results;\n    results.hits.map((hit) => {\n      if (hit.url && !hit.url.match(/^http/))\n        hit.url = location.protocol + '//' + this.searchIndex.domain + hit.url;\n    });\n    return results;\n  }\n\n  private handleFocus = () => {\n    if (this.inputField) this.inputField.setFocus();\n  };\n\n  connectedCallback() {\n    this.isNested =\n      this.host.parentElement.tagName.toLowerCase() === 'nano-algolia' &&\n      this.host.hasAttribute('slot') &&\n      this.host.getAttribute('slot') === 'search-input';\n\n    if (!this.isNested) {\n      this.host.addEventListener(\n        'openWormhole',\n        (ev: CustomEvent<{ onOpen: any }>) => {\n          ev.detail.onOpen.resolve();\n          this.searchIndexNameChange();\n          this.initAlgoliaClient();\n        }\n      );\n    }\n  }\n\n  componentWillLoad() {\n    this.inputField = this.host.querySelector('nano-input');\n    if (this.storeId)\n      ComponentStore.init(this, ['searchStr'], this.storeMethod, this.storeId);\n  }\n\n  render() {\n    return (\n      <Host onFocus={this.handleFocus} tabindex=\"-1\">\n        <slot />\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaInput, ['algoliaIndex', 'searchIndex', 'browseIndex']);\n"],"mappings":"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"}

package/dist/nano-components/{p-1a8e60c4.entry.js → p-362d6a04.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as s,B as i,d as h,h as e,a as n,g as a}from"./p-1fe12320.js";import{S as l,W as r}from"./p-63834d50.js";const d=class{constructor(i){t(this,i);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.nanoTplUpdated=s(this,"nanoTplUpdated",7);this.append=false;this.shouldClear=true;this.currHitNum=0;this.showResults=false;this.tplRenderFn=undefined;this.results=null;this.indexResults=null;this.resultsPage=0;this.changeEvent=l.Init;this.facets=undefined;this.isLoading=true;this.infiniteScroll=false;this.appendPages=false}addContentIndex(){this.shouldPageClear();if(this.shouldClear||this.resultsPage===0)this.currHitNum=0;if(this.indexResults&&this.indexResults.results){this.indexResults.results.map((t=>{t._uIndex=this.currHitNum++}))}}resultsChange(){this.shouldPageClear();this.updateResultContent();this.infiniteScrollChange()}headerFooterChange(){this.updateStartEndContent()}appendChange(){this.append=this.infiniteScroll?true:this.appendPages}infiniteScrollChange(){this.append=this.infiniteScroll?true:this.appendPages;this.infiniteScroll?this.attachIO():this.detachIO()}handlePageChage(){this.infiniteScroll?this.attachIO():this.detachIO()}handleLoading(){if(!this.isLoading)this.infiniteScrollChange()}shouldPageClear(){this.shouldClear=this.changeEvent===l.Page?!this.append:true}nextPage(){this.shouldClear=!this.append;this.nanoPageChanged.emit({page:this.resultsPage+1})}attachIO(){if(!this.infiniteScrollBar||!this.infiniteScroll||this.io||!i.isBrowser||typeof window==="undefined"||!window.IntersectionObserver)return;this.io=new window.IntersectionObserver((async t=>{if(t[0].isIntersecting||t[1]&&t[1].isIntersecting){this.nextPage();this.detachIO()}}),{document,rootMargin:"100px",threshold:1});this.io.observe(this.infiniteScrollBar)}detachIO(){if(this.io){this.io.disconnect();this.io=null}}updateStartEndContent(){if(this.startTpl&&this.startOutputSlot){this.startOutputSlot.innerHTML=this.tplRenderFn(this.startTpl,this.indexResults)}if(this.endOutputSlot&&this.endTpl){this.endOutputSlot.innerHTML=this.tplRenderFn(this.endTpl,this.indexResults)}this.nanoTplUpdated.emit(this.el)}updateResultContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.resultTpl||!this.indexResults)return;if(this.shouldClear)this.outputTo.innerHTML="";if(!this.tplRenderFn)return;const t=document.createElement("div");t.innerHTML=this.tplRenderFn(this.resultTpl,this.indexResults);Array.from(t.children).forEach((t=>{this.outputTo.appendChild(t)}));this.shouldClear=true;this.nanoTplUpdated.emit(this.el)}connectedCallback(){h((()=>{this.startTplSlot=this.el.querySelector('[slot="start-template"]');this.startOutputSlot=this.el.querySelector('[slot="start-output"]');if(!!this.startTplSlot){this.startTpl=this.startTplSlot.innerHTML;this.startTpl=this.startTpl.replace(/=>/gm,"=>")}this.resultTplSlot=this.el.querySelector('[slot="result-template"]');this.outputSlot=this.el.querySelector('[slot="result-output"]');if(!!this.resultTplSlot){this.resultTpl=this.resultTplSlot.innerHTML;this.resultTpl=this.resultTpl.replace(/=>/gm,"=>")}this.endTplSlot=this.el.querySelector('[slot="end-template"]');this.endOutputSlot=this.el.querySelector('[slot="end-output"]');if(!!this.endTplSlot){this.endTpl=this.endTplSlot.innerHTML;this.endTpl=this.endTpl.replace(/=>/gm,"=>")}if(this.indexResults){this.addContentIndex();this.updateResultContent()}}))}componentDidLoad(){this.updateStartEndContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}render(){return e(n,{class:{"show-results":this.showResults}},e("div",{class:"default"},e("slot",null)),e("div",{ref:t=>this.outputEle=t},e("slot",{name:"start-output"}),e("slot",{name:"result-output"}),e("div",{ref:t=>this.infiniteScrollBar=t}),e("slot",{name:"end-output"})))}get el(){return a(this)}static get watchers(){return{results:["addContentIndex","resultsChange"],tplRenderFn:["resultsChange"],facets:["headerFooterChange"],appendPages:["appendChange"],infiniteScroll:["infiniteScrollChange"],resultsPage:["handlePageChage"],isLoading:["handleLoading"]}}};r(d,["indexResults","results","tplRenderFn","resultsPage","changeEvent","facets","isLoading"]);export{d as nano_algolia_results};
-//# sourceMappingURL=p-1a8e60c4.entry.js.map
+import{r as t,c as s,B as i,d as h,h as e,a as n,g as a}from"./p-f84612d4.js";import{S as l,W as r}from"./p-5ec7263c.js";const d=class{constructor(i){t(this,i);this.nanoPageChanged=s(this,"nanoPageChanged",7);this.nanoTplUpdated=s(this,"nanoTplUpdated",7);this.append=false;this.shouldClear=true;this.currHitNum=0;this.showResults=false;this.tplRenderFn=undefined;this.results=null;this.indexResults=null;this.resultsPage=0;this.changeEvent=l.Init;this.facets=undefined;this.isLoading=true;this.infiniteScroll=false;this.appendPages=false}addContentIndex(){this.shouldPageClear();if(this.shouldClear||this.resultsPage===0)this.currHitNum=0;if(this.indexResults&&this.indexResults.results){this.indexResults.results.map((t=>{t._uIndex=this.currHitNum++}))}}resultsChange(){this.shouldPageClear();this.updateResultContent();this.infiniteScrollChange()}headerFooterChange(){this.updateStartEndContent()}appendChange(){this.append=this.infiniteScroll?true:this.appendPages}infiniteScrollChange(){this.append=this.infiniteScroll?true:this.appendPages;this.infiniteScroll?this.attachIO():this.detachIO()}handlePageChage(){this.infiniteScroll?this.attachIO():this.detachIO()}handleLoading(){if(!this.isLoading)this.infiniteScrollChange()}shouldPageClear(){this.shouldClear=this.changeEvent===l.Page?!this.append:true}nextPage(){this.shouldClear=!this.append;this.nanoPageChanged.emit({page:this.resultsPage+1})}attachIO(){if(!this.infiniteScrollBar||!this.infiniteScroll||this.io||!i.isBrowser||typeof window==="undefined"||!window.IntersectionObserver)return;this.io=new window.IntersectionObserver((async t=>{if(t[0].isIntersecting||t[1]&&t[1].isIntersecting){this.nextPage();this.detachIO()}}),{document,rootMargin:"100px",threshold:1});this.io.observe(this.infiniteScrollBar)}detachIO(){if(this.io){this.io.disconnect();this.io=null}}updateStartEndContent(){if(this.startTpl&&this.startOutputSlot){this.startOutputSlot.innerHTML=this.tplRenderFn(this.startTpl,this.indexResults)}if(this.endOutputSlot&&this.endTpl){this.endOutputSlot.innerHTML=this.tplRenderFn(this.endTpl,this.indexResults)}this.nanoTplUpdated.emit(this.el)}updateResultContent(){this.outputTo=this.outputSlot||this.outputEle;if(!this.resultTpl||!this.indexResults)return;if(this.shouldClear)this.outputTo.innerHTML="";if(!this.tplRenderFn)return;const t=document.createElement("div");t.innerHTML=this.tplRenderFn(this.resultTpl,this.indexResults);Array.from(t.children).forEach((t=>{this.outputTo.appendChild(t)}));this.shouldClear=true;this.nanoTplUpdated.emit(this.el)}connectedCallback(){h((()=>{this.startTplSlot=this.el.querySelector('[slot="start-template"]');this.startOutputSlot=this.el.querySelector('[slot="start-output"]');if(!!this.startTplSlot){this.startTpl=this.startTplSlot.innerHTML;this.startTpl=this.startTpl.replace(/=>/gm,"=>")}this.resultTplSlot=this.el.querySelector('[slot="result-template"]');this.outputSlot=this.el.querySelector('[slot="result-output"]');if(!!this.resultTplSlot){this.resultTpl=this.resultTplSlot.innerHTML;this.resultTpl=this.resultTpl.replace(/=>/gm,"=>")}this.endTplSlot=this.el.querySelector('[slot="end-template"]');this.endOutputSlot=this.el.querySelector('[slot="end-output"]');if(!!this.endTplSlot){this.endTpl=this.endTplSlot.innerHTML;this.endTpl=this.endTpl.replace(/=>/gm,"=>")}if(this.indexResults){this.addContentIndex();this.updateResultContent()}}))}componentDidLoad(){this.updateStartEndContent()}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}render(){return e(n,{class:{"show-results":this.showResults}},e("div",{class:"default"},e("slot",null)),e("div",{ref:t=>this.outputEle=t},e("slot",{name:"start-output"}),e("slot",{name:"result-output"}),e("div",{ref:t=>this.infiniteScrollBar=t}),e("slot",{name:"end-output"})))}get el(){return a(this)}static get watchers(){return{results:["addContentIndex","resultsChange"],tplRenderFn:["resultsChange"],facets:["headerFooterChange"],appendPages:["appendChange"],infiniteScroll:["infiniteScrollChange"],resultsPage:["handlePageChage"],isLoading:["handleLoading"]}}};r(d,["indexResults","results","tplRenderFn","resultsPage","changeEvent","facets","isLoading"]);export{d as nano_algolia_results};
+//# sourceMappingURL=p-362d6a04.entry.js.map

package/dist/nano-components/p-362d6a04.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AlgoliaResults","this","append","shouldClear","currHitNum","SearchChangeEvent","Init","addContentIndex","shouldPageClear","resultsPage","indexResults","results","map","res","_uIndex","resultsChange","updateResultContent","infiniteScrollChange","headerFooterChange","updateStartEndContent","appendChange","infiniteScroll","appendPages","attachIO","detachIO","handlePageChage","handleLoading","isLoading","changeEvent","Page","nextPage","nanoPageChanged","emit","page","infiniteScrollBar","io","Build","isBrowser","window","IntersectionObserver","async","data","isIntersecting","document","rootMargin","threshold","observe","disconnect","startTpl","startOutputSlot","innerHTML","tplRenderFn","endOutputSlot","endTpl","nanoTplUpdated","el","outputTo","outputSlot","outputEle","resultTpl","div","createElement","Array","from","children","forEach","child","appendChild","connectedCallback","readTask","startTplSlot","querySelector","replace","resultTplSlot","endTplSlot","componentDidLoad","disconnectedCallback","undefined","render","h","Host","class","showResults","ref","name","Wormhole"],"sources":["./src/components/algolia/algolia-results.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Watch,\n  State,\n  Build,\n  EventEmitter,\n  Event,\n  Prop,\n  readTask,\n} from '@stencil/core';\nimport { Wormhole, SearchChangeEvent } from '../algolia/algolia-data';\nimport type {\n  IndexResult,\n  AlgoliaResultHit,\n  PageChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\n\n/**\n * Displays and syncs results from Algolia searches.\n * Must be nested within an nano-algolia component.\n * @slot start-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot start-output - A placeholder for template output.\n * @slot result-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot result-output - A placeholder for template output.\n * @slot end-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot end-output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-results',\n  shadow: true,\n})\nexport class AlgoliaResults {\n  @Element() el: HTMLNanoAlgoliaResultsElement;\n\n  private resultTpl: string;\n  private resultTplSlot: HTMLElement;\n  private startTpl: string;\n  private startTplSlot: HTMLElement;\n  private endTpl: string;\n  private endTplSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLDivElement;\n  private outputTo: HTMLElement;\n  private startOutputSlot: HTMLElement;\n  private endOutputSlot: HTMLElement;\n\n  private io?: IntersectionObserver;\n  private infiniteScrollBar: HTMLDivElement;\n  private append: boolean = false;\n  private shouldClear: boolean = true;\n  private currHitNum: number = 0;\n\n  @State() showResults: boolean = false;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() results: AlgoliaResultHit[] = null;\n  @State() indexResults: IndexResult = null;\n  @State() resultsPage: number = 0;\n  @State() changeEvent: SearchChangeEvent = SearchChangeEvent.Init;\n  @State() facets: AlgoliaFacet;\n  @State() isLoading: boolean = true;\n\n  /**\n   * Load and append pages automatically on scroll\n   */\n  @Prop() infiniteScroll: boolean = false;\n\n  /**\n   * Whether new pages loaded by pagination will replace or be appended to the results block\n   * (this will be ignored if 'infiniteScroll' is set to true)\n   */\n  @Prop() appendPages: boolean = false;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<PageChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaResultsElement>;\n\n  // For append / infinite-scroll it's useful to have a universal index on render\n  @Watch('results')\n  addContentIndex() {\n    this.shouldPageClear();\n    if (this.shouldClear || this.resultsPage === 0) this.currHitNum = 0;\n    if (this.indexResults && this.indexResults.results) {\n      this.indexResults.results.map((res) => {\n        (res as any)._uIndex = this.currHitNum++;\n      });\n    }\n  }\n\n  // Update content template and perhaps add IO for infinite scrolling\n  @Watch('results')\n  @Watch('tplRenderFn')\n  resultsChange() {\n    this.shouldPageClear();\n    // console.log('going to do update', this.resultsPage, this.results.length);\n    this.updateResultContent();\n    this.infiniteScrollChange();\n  }\n\n  // We have a foot / head slot template.\n  // Can be useful to display current filter / search meta\n  @Watch('facets')\n  headerFooterChange() {\n    this.updateStartEndContent();\n  }\n\n  @Watch('appendPages')\n  appendChange() {\n    this.append = this.infiniteScroll ? true : this.appendPages;\n  }\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.append = this.infiniteScroll ? true : this.appendPages;\n    this.infiniteScroll ? this.attachIO() : this.detachIO();\n  }\n\n  @Watch('resultsPage')\n  handlePageChage() {\n    this.infiniteScroll ? this.attachIO() : this.detachIO();\n  }\n\n  @Watch('isLoading')\n  handleLoading() {\n    if (!this.isLoading) this.infiniteScrollChange();\n  }\n\n  // Decide whether incoming content should clear or not.\n  // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...\n  // Then leave up to the current, set append behaviour. Other clear it all out.\n  private shouldPageClear() {\n    this.shouldClear =\n      this.changeEvent === SearchChangeEvent.Page ? !this.append : true;\n  }\n\n  // Called by IO. Emits page change event to parent which then iterated the global page count.\n  private nextPage() {\n    this.shouldClear = !this.append;\n    this.nanoPageChanged.emit({ page: this.resultsPage + 1 });\n  }\n\n  private attachIO() {\n    if (\n      !this.infiniteScrollBar ||\n      !this.infiniteScroll ||\n      this.io ||\n      !Build.isBrowser ||\n      typeof window === 'undefined' ||\n      !(window as any).IntersectionObserver\n    )\n      return;\n\n    this.io = new (window as any).IntersectionObserver(\n      async (data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n          this.nextPage();\n          this.detachIO();\n        }\n      },\n      { document, rootMargin: '100px', threshold: 1 }\n    );\n    this.io.observe(this.infiniteScrollBar);\n  }\n\n  private detachIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  private updateStartEndContent() {\n    // clear start slot if present\n    if (this.startTpl && this.startOutputSlot) {\n      this.startOutputSlot.innerHTML = this.tplRenderFn(\n        this.startTpl,\n        this.indexResults\n      );\n    }\n    // clear end slot if present\n    if (this.endOutputSlot && this.endTpl) {\n      this.endOutputSlot.innerHTML = this.tplRenderFn(\n        this.endTpl,\n        this.indexResults\n      );\n    }\n    this.nanoTplUpdated.emit(this.el);\n  }\n\n  private updateResultContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n\n    if (!this.resultTpl || !this.indexResults) return;\n\n    // after filtering or new index - clear all content.\n    // after pagination when the 'appendPages' set to true - don't clear results content\n    if (this.shouldClear) this.outputTo.innerHTML = '';\n\n    if (!this.tplRenderFn) return;\n\n    const div = document.createElement('div');\n    div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);\n\n    Array.from(div.children).forEach((child) => {\n      this.outputTo.appendChild(child);\n    });\n\n    this.shouldClear = true;\n    this.nanoTplUpdated.emit(this.el);\n  }\n\n  connectedCallback() {\n    readTask(() => {\n      this.startTplSlot = this.el.querySelector('[slot=\"start-template\"]');\n      this.startOutputSlot = this.el.querySelector('[slot=\"start-output\"]');\n      if (!!this.startTplSlot) {\n        this.startTpl = this.startTplSlot.innerHTML;\n        this.startTpl = this.startTpl.replace(/=&gt;/gm, '=>');\n      }\n\n      this.resultTplSlot = this.el.querySelector('[slot=\"result-template\"]');\n      this.outputSlot = this.el.querySelector('[slot=\"result-output\"]');\n      if (!!this.resultTplSlot) {\n        this.resultTpl = this.resultTplSlot.innerHTML;\n        this.resultTpl = this.resultTpl.replace(/=&gt;/gm, '=>');\n      }\n\n      this.endTplSlot = this.el.querySelector('[slot=\"end-template\"]');\n      this.endOutputSlot = this.el.querySelector('[slot=\"end-output\"]');\n      if (!!this.endTplSlot) {\n        this.endTpl = this.endTplSlot.innerHTML;\n        this.endTpl = this.endTpl.replace(/=&gt;/gm, '=>');\n      }\n      if (this.indexResults) {\n        this.addContentIndex();\n        this.updateResultContent();\n      }\n    });\n  }\n\n  componentDidLoad() {\n    this.updateStartEndContent();\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-results': this.showResults,\n        }}\n      >\n        <div class=\"default\">\n          <slot />\n        </div>\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"start-output\" />\n          <slot name=\"result-output\" />\n          <div ref={(div) => (this.infiniteScrollBar = div)}></div>\n          <slot name=\"end-output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaResults, [\n  'indexResults',\n  'results',\n  'tplRenderFn',\n  'resultsPage',\n  'changeEvent',\n  'facets',\n  'isLoading',\n]);\n"],"mappings":"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"}

package/dist/nano-components/p-38268f3c.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,h as e,a as s,g as n}from"./p-f84612d4.js";import{p as a,a as o,c as h}from"./p-cecb9af1.js";import{c as d}from"./p-411bb8f1.js";const r=".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size: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 rgb(var(--nano-color-tint-rgb)/0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size: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;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;-webkit-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{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-block:0;margin-inline: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%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const l={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let c=0;const u=class{constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.directInput=false;this.dateOrderIndeces={d:0,m:1,y:3};this.inputId=`nano-input-${c++}`;this.locale=window.navigator.languages||window.navigator.language||undefined;this._dropDownConfig={};this.onInputChange=t=>{t.stopPropagation();this.setValue(t.target.value)};this.onInputValidate=t=>{t.stopPropagation();this._invalid=!t.detail.isValid;this.nanoValidate.emit({isValid:t.detail.isValid,errorMessage:t.detail.errorMessage,originalEvent:t.detail.originalEvent})};this.onInputKey=()=>{this.directInput=true};this.onDatePicked=t=>{this.directInput=false;this.value=t.detail.value;if(this.closeAfterPicked)this.pickerOpen=false};this.onDropdownHide=()=>{setTimeout((t=>this.pickerOpen=false),200);setTimeout((t=>this.trigger.focus()),50)};this.onDropdownShow=()=>{setTimeout((t=>{this.pickerEle.setFocus(false,this.pickerOpenSource==="key");this.pickerOpenSource=null}),200)};this.onTriggerClick=()=>{if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="mouse"}};this.onTriggerKey=t=>{if([" ","Enter"].includes(t.key)){if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="key"}}};this.onCloseClick=()=>{if(this.pickerOpen)this.pickerOpen=false};this.onCloseKeyDown=t=>{if(t.key==="Tab"&&t.shiftKey){this.pickerEle.setFocus(true);t.preventDefault()}if(t.key===" "||t.key==="Enter"){if(this.pickerOpen)this.pickerOpen=false}};this.pattern=undefined;this.inputValue=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.size=undefined;this.form=undefined;this.firstDayOfWeek=undefined;this.localization=undefined;this.disabled=false;this.color=undefined;this.autofocus=false;this.clearInput=false;this.label=undefined;this.placeholder=undefined;this.value="";this.validateOn="submitThenDirty";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.min=undefined;this.max=undefined;this.hideLabel=false;this.picker=true;this.initialPickerDate=undefined;this.pickerOpen=false;this.closeAfterPicked=true;this.isDateDisabled=()=>false}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validityMessage}handleValueChange(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((()=>{this.nanoChange.emit({value:this.value,date:a(this.value)})}),20);this.directInput=false}handleDateOrderChange(){this.setDatePattern()}testDateValidity(){const t=a(this.value);let i,e,s="";if(this.value&&t){if(this.min&&(i=a(this.min))&&t<i){s="Date below the minimum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(e=a(this.max))&&t>e){s="Date above the maximum: "+e.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(t)){s="Date selected is disabled."}}requestAnimationFrame((async i=>{if(!this.input)return;const e=await this.input.getInputElement();if(this.value.length&&!t)s="Please enter a valid date";e.setCustomValidity(s);if(this.input.validateOn==="dirty"){this.input.showError(s)}}))}handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}get dateValue(){return a(this.value)}async reportValidity(t){const i=await this.input.reportValidity(t);if(i.isValid&&t)this.testDateValidity();return await this.input.reportValidity(t)}async setFocus(){if(this.input)this.input.setFocus()}async getInputElement(){return await this.input.getInputElement()}async showError(t){if(!this.input)return;this.input.showError(t)}setDatePattern(){const t=[];const i=[];Array.from(this.dateOrder).map(((e,s)=>{t.push(l[e]);this.dateOrderIndeces[e]=s;i.push(e==="y"?"yyyy":e+e)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=i.join(" ")}formatIsoDate(t){const i=[];Array.from("ymd").map((t=>i.push(l[t])));const e=t.match(new RegExp(i.join("\\W+")));if(!e)return"";const s=[];s[this.dateOrderIndeces.d]=e[3];s[this.dateOrderIndeces.m]=e[2];s[this.dateOrderIndeces.y]=e[1];return s.join(" ")}setValue(t){const i=t.match(new RegExp(this.pattern));if(!i){this.value=t;return}let e=h(i[this.dateOrderIndeces.y+1],i[this.dateOrderIndeces.m+1],i[this.dateOrderIndeces.d+1]);if(!e){e=new Date(t);if(!e){this.value=t;return}}const s=o(e);this.value=s;return s}connectedCallback(){this.setDatePattern();this.handleValueChange()}componentDidLoad(){if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((t=>this.handlePickerOpenChange()),300)}render(){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;const t=a(this.value);const i=!!this.host.querySelector('[slot="helper"]');return e(s,{class:Object.assign({},d(this.color))},e("div",{class:"date-field"},e("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:t=>this.input=t,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},e("slot",{name:"start",slot:"start"}),e("slot",{name:"label"}),e("slot",{name:"end",slot:"end"}),this.picker&&[e("button",{slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:t=>this.trigger=t,disabled:this.disabled||this.readonly},e("nano-icon",{name:"light/calendar-alt"})),e("nano-dropdown",Object.assign({slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:t=>this.dropdown=t},this.dropDownConfig,{part:"dropdown"}),e("div",null,e("div",{class:"date-field__close-bar"},e("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:t=>this.pickerCloseBtn=t},e("nano-icon",{name:"light/times"}),e("span",{class:"vhidden"},"Close window"))),e("nano-date-picker",{isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:t=>this.pickerEle=t,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(i||this.helperText||this.showInlineError)&&e("span",{slot:"helper"},e("span",{class:{vhidden:!!this.value.length}},e("slot",{name:"helper"})),this.helperText&&!!t&&e("span",null,t.toLocaleDateString(this.locale,this.helperTextFormat)))),e("input",{type:"hidden",value:this.value,name:this.name})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};u.style=r;export{u as nano_date_input};
+//# sourceMappingURL=p-38268f3c.entry.js.map

package/dist/nano-components/p-38268f3c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_dropDownConfig","onInputChange","e","stopPropagation","setValue","target","value","onInputValidate","_invalid","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","closeAfterPicked","pickerOpen","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","year","month","day","invalid","validityMessage","input","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","helperTextFormat","isDateDisabled","requestAnimationFrame","async","getInputElement","length","setCustomValidity","validateOn","showError","handlePickerOpenChange","dropdown","open","dropDownConfig","ddc","Object","assign","dateValue","validateFirst","initValidity","reportValidity","message","dateRegexOrdered","dateStrOrd","Array","from","dateOrder","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","picker","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","replace","hasHelperSlot","querySelector","h","Host","class","createColorClasses","color","slot","required","showInlineError","label","disabled","autofocus","clearInput","onNanoChange","onNanoInput","onNanoValidate","name","form","size","readonly","ref","floatLabel","hideLabel","inputmode","part","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","localization","selectedDate","initialPickerDate","firstDayOfWeek","helperText","vhidden"],"sources":["./src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","./src/components/date-input/date-input.tsx"],"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  inline-size: 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    inline-size: 0 !important;\n    inline-size: 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    inset-inline-end: -8px;\n    inset-block-start: -8px;\n    inline-size: 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    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    block-size: 24px;\n    justify-content: center;\n    padding: 0;\n    inline-size: 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-block: 0;\n      margin-inline: 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 { createColorClasses } from '../../utils/theme';\nimport type {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n  DateDisabledPredicate,\n  NanoInputCustomEvent,\n  InputChangeEventDetail,\n} from '../../interface';\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   * @returns `false` for not disabled and `true` for disabled */\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 = (e: NanoInputCustomEvent<InputChangeEventDetail>) => {\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    const dateRegexOrdered = [];\n    const 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    const 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    const 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"],"mappings":"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"}

package/dist/nano-components/p-411bb8f1.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+const n=(n,r)=>typeof n==="string"&&n.length>0?Object.assign({"nano-color":true,[`nano-color-${n}`]:true},r):r;const r=n=>{if(n!==undefined){const r=Array.isArray(n)?n:n.split(" ");return r.filter((n=>n!=null)).map((n=>n.trim())).filter((n=>n!==""))}return[]};const t=n=>{const t={};r(n).forEach((n=>t[n]=true));return t};export{n as c,t as g};
+//# sourceMappingURL=p-411bb8f1.js.map

package/dist/nano-components/p-411bb8f1.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createColorClasses","color","cssClassMap","length","getClassList","classes","undefined","array","Array","isArray","split","filter","c","map","trim","getClassMap","forEach"],"sources":["./src/utils/theme.ts"],"sourcesContent":["import type { Color, CssClassMap } from '../interface';\n\nexport const hostContext = (selector: string, el: HTMLElement): boolean => {\n  return el.closest(selector) !== null;\n};\n\n/**\n * Create the mode and color classes for the component based on the classes passed in\n * @param color\n * @param cssClassMap\n * @returns an jsx class map\n */\nexport const createColorClasses = (\n  color: Color | undefined | null,\n  cssClassMap?: CssClassMap\n): CssClassMap | undefined => {\n  return typeof color === 'string' && color.length > 0\n    ? {\n        'nano-color': true,\n        [`nano-color-${color}`]: true,\n        ...cssClassMap,\n      }\n    : cssClassMap;\n};\n\n/**\n * @param classes\n * @returns an array of trimmed class names\n */\nconst getClassList = (\n  classes: string | (string | null | undefined)[] | undefined\n): string[] => {\n  if (classes !== undefined) {\n    const array = Array.isArray(classes) ? classes : classes.split(' ');\n    return array\n      .filter((c) => c != null)\n      .map((c) => (c as string).trim())\n      .filter((c) => c !== '');\n  }\n  return [];\n};\n\n/**\n * turns a string, or array of strings into a jsx class map\n * @param classes\n * @returns a jsx class map\n */\nexport const getClassMap = (\n  classes: string | string[] | undefined\n): CssClassMap => {\n  const map: CssClassMap = {};\n  getClassList(classes).forEach((c) => (map[c] = true));\n  return map;\n};\n"],"mappings":";;;MAYaA,EAAqB,CAChCC,EACAC,WAEcD,IAAU,UAAYA,EAAME,OAAS,E,eAE7C,aAAc,KACd,CAAC,cAAcF,KAAU,MACtBC,GAELA,EAON,MAAME,EACJC,IAEA,GAAIA,IAAYC,UAAW,CACzB,MAAMC,EAAQC,MAAMC,QAAQJ,GAAWA,EAAUA,EAAQK,MAAM,KAC/D,OAAOH,EACJI,QAAQC,GAAMA,GAAK,OACnBC,KAAKD,GAAOA,EAAaE,SACzBH,QAAQC,GAAMA,IAAM,I,CAEzB,MAAO,EAAE,E,MAQEG,EACXV,IAEA,MAAMQ,EAAmB,GACzBT,EAAaC,GAASW,SAASJ,GAAOC,EAAID,GAAK,OAC/C,OAAOC,CAAG,S"}

package/dist/nano-components/p-41f33a56.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,d as s,h as e,a as n,g as r}from"./p-f84612d4.js";const h=class{constructor(e){t(this,e);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.nanoResizeObserverReady=i(this,"nanoResizeObserverReady",7);this.nanoResizeContentFitChange=i(this,"nanoResizeContentFitChange",7);this.isReady=false;this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;s((()=>this.assesContentFit()));if(!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let i=false;Object.keys(this.appliedStates).forEach((s=>{let e;if(s==="h")e=this.currentHeight;else e=this.currentWidth;this.appliedStates[s].forEach(((n,r)=>{if(e>=r&&n.applied===false){n.applied=true;t[s].set(r,n);i=true}else if(e<r&&n.applied===true){n.applied=false;t[s].set(r,n);i=true}}))}));if(i)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=["is-ready"]};this.currentWidth=undefined;this.currentHeight=undefined;this.classNames=[];this.contentFitX=null;this.contentFitY=null;this.notifyContentFit=undefined;this.states=undefined}classNameChange(){this.host.className=this.classNames.join(" ");if(!this.isReady&&this.classNames.includes("is-ready")){this.isReady=true;this.nanoResizeObserverReady.emit()}}newStatesProp(){this.statesChanged()}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((i=>{i=i.trim();if(i.includes(" ")){const[s,...e]=i.split(" ");const{bp:n,dir:r}=t(s);this.appliedStates[r].set(n,{states:e,applied:false})}else{const{bp:s,dir:e}=t(i);this.appliedStates[e].set(s,{applied:false})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=t=>{if(window.getComputedStyle(t).display!=="contents")return t;const i=t=>Array.from(t.children).find((t=>{if(window.getComputedStyle(t).display!=="contents")return t;i(t)}));return i(t)};let i=false;const s=t(this.host.firstElementChild);if(s){if(this.notifyContentFit&&this.notifyContentFit.includes("x")){if(this.currentWidth<s.scrollWidth&&this.contentFitX!==false){i=true;this.contentFitX=false}else if(this.currentWidth>=s.scrollWidth&&this.contentFitX!==true){i=true;this.contentFitX=true}}if(this.notifyContentFit&&this.notifyContentFit.includes("y")){if(this.currentHeight<s.scrollHeight&&this.contentFitY!==false){i=true;this.contentFitY=false}else if(this.currentHeight>=s.scrollHeight&&this.contentFitY!==true){i=true;this.contentFitY=true}}if(i){this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}}}applyChanges(t){if(!this.states)return;let i=[...this.classNames];Object.keys(t).forEach((s=>{t[s].forEach((t=>{if(!t.states)return;t.states.map((s=>{if(t.applied){i.push(s);i=i.filter((t=>t!=="not-"+s))}else{i.push("not-"+s);i=i.filter((t=>t!==s))}}))}))}));this.classNames=["is-ready",...i];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};Object.keys(t).forEach((s=>{t[s].forEach(((t,e)=>{i[e+s]=t.applied}))}));return i}attachRO(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}));this.ro.observe(this.host)}componentWillLoad(){this.statesChanged();this.applyChanges(this.appliedStates);this.classNames=Array.from(this.host.classList);if(!this.currentWidth&&!this.currentHeight){s((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}))}else{this.assessChanges()}}connectedCallback(){if(!this.ro)this.attachRO()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return e(n,null,e("slot",null),!!this.notifyContentFit&&(this.contentFitX!==null||this.contentFitY!==null)&&[!!this.contentFitX?e("slot",{name:"content-fit-x"}):e("slot",{name:"content-nofit-x"}),!!this.contentFitY?e("slot",{name:"content-fit-y"}):e("slot",{name:"content-nofit-y"})])}get host(){return r(this)}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};h.style="nano-resize-observe { display: block }";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";const o=class{constructor(i){t(this,i);this.animated=true}render(){return e("div",{class:{skeleton:true,animate:this.animated}},e("div",{class:"skeleton__indicator"}," "))}};o.style=a;export{h as nano_resize_observe,o as nano_skeleton};
+//# sourceMappingURL=p-41f33a56.entry.js.map

package/dist/nano-components/p-41f33a56.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ResizeObserve","this","isReady","assessChanges","currentWidth","currentHeight","readTask","assesContentFit","states","appliedStates","changedStates","h","Map","w","hasChanged","Object","keys","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","classNameChange","host","className","join","nanoResizeObserverReady","emit","newStatesProp","statesChanged","dimensionChanged","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","notifyContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","contentFitX","scrollHeight","contentFitY","nanoResizeContentFitChange","x","y","changes","push","cl","nanoResizeStateChange","toSimpleObj","stateMaps","retObj","attachRO","ro","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","observe","componentWillLoad","classList","connectedCallback","disconnectedCallback","disconnect","render","Host","name","skeletonCss","Skeleton","class","skeleton","animate","animated"],"sources":["./src/components/resize-observe/resize-observe.tsx","./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `nano-resize-observe { display: block }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver(() => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    this.classNames = Array.from(this.host.classList);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            !!this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            !!this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\">&nbsp;</div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-45abbbdd.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/utils/tabbable.ts"],"names":["isTabbable","el","tag","tagName","toLowerCase","getAttribute","hasAttribute","offsetParent","window","getComputedStyle","visibility","includes","getTabbableElements","root","first","tabbableElements","HTMLElement","push","shadowRoot","mode","map","HTMLSlotElement","assignedElements","slottedEl","Array","from","querySelectorAll","getNearestTabbableElement","length"],"mappings":";;;AACA,SAASA,EAAWC,GAClB,MAAMC,EAAMD,EAAGE,QAAQC,cAGvB,GAAIH,EAAGI,aAAa,cAAgB,KAAM,CACxC,OAAO,MAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,MAIT,GACEL,EAAGK,aAAa,kBAChBL,EAAGI,aAAa,mBAAqB,QACrC,CACA,OAAO,MAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,KAIT,GACEL,EAAGK,aAAa,oBAChBL,EAAGI,aAAa,qBAAuB,QACvC,CACA,OAAO,KAIT,IAAKH,IAAQ,SAAWA,IAAQ,UAAYD,EAAGK,aAAa,YAAa,CACvE,OAAO,KAIT,GACEJ,IAAQ,SACRD,EAAGI,aAAa,UAAY,UAC3BJ,EAAGK,aAAa,WACjB,CACA,OAAO,MAIT,IAAKL,EAAGM,aAAc,CACpB,OAAO,MAIT,GAAIC,OAAOC,iBAAiBR,GAAIS,aAAe,SAAU,CACvD,OAAO,MAIT,MAAO,CACL,SACA,QACA,SACA,WACA,IACA,QACA,QACA,WACAC,SAAST,YAKGU,EACdC,EACAC,EAAiB,OAEjB,MAAMC,EAAkC,GAExC,GAAIF,aAAgBG,YAAa,CAE/B,GAAIhB,EAAWa,GAAO,CACpBE,EAAiBE,KAAKJ,GAEtB,GAAIC,EAAO,OAAOC,EAIpB,GAAIF,EAAKK,YAAcL,EAAKK,WAAWC,OAAS,OAAQ,CACtDP,EAAoBC,EAAKK,WAAYJ,GAAOM,KAAKnB,IAC/C,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,MAK9D,GAAIoB,iBAAmBR,aAAgBQ,gBAAiB,CACtDR,EAAKS,mBAAmBF,KAAKG,IAC3BX,EAAoBW,EAAWT,GAAOM,KAAKnB,IACzC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,UAOlEuB,MAAMC,KAAKZ,EAAKa,iBAAiB,MAAMN,KAAKnB,IAC1CW,EAAoBX,EAAIa,GAAOM,KAAKnB,IAClC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,SAI9D,OAAOc,WAGOY,EAA0B1B,GACxC,MAAMc,EAAmBH,EAAoBX,EAAmB,MAChE,OAAOc,EAAiBa,OAASb,EAAiB,GAAK","sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(\n  root: HTMLElement | ShadowRoot,\n  first: boolean = false\n) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n\n      if (first) return tabbableElements;\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot, first).map((el) => {\n        if (!tabbableElements.includes(el)) tabbableElements.push(el);\n      });\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl, first).map((el) => {\n          if (!tabbableElements.includes(el)) tabbableElements.push(el);\n        });\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el, first).map((el) => {\n      if (!tabbableElements.includes(el)) tabbableElements.push(el);\n    });\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: Element): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el as HTMLElement, true);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"]}
+{"version":3,"names":["isTabbable","el","tag","tagName","toLowerCase","getAttribute","hasAttribute","offsetParent","window","getComputedStyle","visibility","includes","getTabbableElements","root","first","tabbableElements","HTMLElement","push","shadowRoot","mode","map","HTMLSlotElement","assignedElements","slottedEl","Array","from","querySelectorAll","getNearestTabbableElement","length"],"sources":["./src/utils/tabbable.ts"],"sourcesContent":["// Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (\n    el.hasAttribute('aria-disabled') &&\n    el.getAttribute('aria-disabled') !== 'false'\n  ) {\n    return false;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (\n    el.hasAttribute('contenteditable') &&\n    el.getAttribute('contenteditable') !== 'false'\n  ) {\n    return true;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (\n    tag === 'input' &&\n    el.getAttribute('type') === 'radio' &&\n    !el.hasAttribute('checked')\n  ) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (!el.offsetParent) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable (calculated last due to performance)\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n  ].includes(tag);\n}\n\n// Locates all tabbable elements within an element. If the target element is tabbable, it will be included in the\n// resulting array. This function will also look in open shadow roots.\nexport function getTabbableElements(\n  root: HTMLElement | ShadowRoot,\n  first: boolean = false\n) {\n  const tabbableElements: HTMLElement[] = [];\n\n  if (root instanceof HTMLElement) {\n    // Is the root element tabbable?\n    if (isTabbable(root)) {\n      tabbableElements.push(root);\n\n      if (first) return tabbableElements;\n    }\n\n    // Look for tabbable elements in the shadow root\n    if (root.shadowRoot && root.shadowRoot.mode === 'open') {\n      getTabbableElements(root.shadowRoot, first).map((el) => {\n        if (!tabbableElements.includes(el)) tabbableElements.push(el);\n      });\n    }\n\n    // Look at slotted elements\n    if (HTMLSlotElement && root instanceof HTMLSlotElement) {\n      root.assignedElements().map((slottedEl: HTMLElement) => {\n        getTabbableElements(slottedEl, first).map((el) => {\n          if (!tabbableElements.includes(el)) tabbableElements.push(el);\n        });\n      });\n    }\n  }\n\n  // Look for tabbable elements in children\n  Array.from(root.querySelectorAll('*')).map((el: HTMLElement) => {\n    getTabbableElements(el, first).map((el) => {\n      if (!tabbableElements.includes(el)) tabbableElements.push(el);\n    });\n  });\n\n  return tabbableElements;\n}\n\nexport function getNearestTabbableElement(el: Element): HTMLElement | null {\n  const tabbableElements = getTabbableElements(el as HTMLElement, true);\n  return tabbableElements.length ? tabbableElements[0] : null;\n}\n"],"mappings":";;;AACA,SAASA,EAAWC,GAClB,MAAMC,EAAMD,EAAGE,QAAQC,cAGvB,GAAIH,EAAGI,aAAa,cAAgB,KAAM,CACxC,OAAO,K,CAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,K,CAIT,GACEL,EAAGK,aAAa,kBAChBL,EAAGI,aAAa,mBAAqB,QACrC,CACA,OAAO,K,CAIT,GAAIJ,EAAGK,aAAa,YAAa,CAC/B,OAAO,I,CAIT,GACEL,EAAGK,aAAa,oBAChBL,EAAGI,aAAa,qBAAuB,QACvC,CACA,OAAO,I,CAIT,IAAKH,IAAQ,SAAWA,IAAQ,UAAYD,EAAGK,aAAa,YAAa,CACvE,OAAO,I,CAIT,GACEJ,IAAQ,SACRD,EAAGI,aAAa,UAAY,UAC3BJ,EAAGK,aAAa,WACjB,CACA,OAAO,K,CAIT,IAAKL,EAAGM,aAAc,CACpB,OAAO,K,CAIT,GAAIC,OAAOC,iBAAiBR,GAAIS,aAAe,SAAU,CACvD,OAAO,K,CAIT,MAAO,CACL,SACA,QACA,SACA,WACA,IACA,QACA,QACA,WACAC,SAAST,EACb,C,SAIgBU,EACdC,EACAC,EAAiB,OAEjB,MAAMC,EAAkC,GAExC,GAAIF,aAAgBG,YAAa,CAE/B,GAAIhB,EAAWa,GAAO,CACpBE,EAAiBE,KAAKJ,GAEtB,GAAIC,EAAO,OAAOC,C,CAIpB,GAAIF,EAAKK,YAAcL,EAAKK,WAAWC,OAAS,OAAQ,CACtDP,EAAoBC,EAAKK,WAAYJ,GAAOM,KAAKnB,IAC/C,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,EAAG,G,CAKjE,GAAIoB,iBAAmBR,aAAgBQ,gBAAiB,CACtDR,EAAKS,mBAAmBF,KAAKG,IAC3BX,EAAoBW,EAAWT,GAAOM,KAAKnB,IACzC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,EAAG,GAC7D,G,EAMRuB,MAAMC,KAAKZ,EAAKa,iBAAiB,MAAMN,KAAKnB,IAC1CW,EAAoBX,EAAIa,GAAOM,KAAKnB,IAClC,IAAKc,EAAiBJ,SAASV,GAAKc,EAAiBE,KAAKhB,EAAG,GAC7D,IAGJ,OAAOc,CACT,C,SAEgBY,EAA0B1B,GACxC,MAAMc,EAAmBH,EAAoBX,EAAmB,MAChE,OAAOc,EAAiBa,OAASb,EAAiB,GAAK,IACzD,Q"}

package/dist/nano-components/{p-885b6950.js → p-45b7682a.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{a as t}from"./p-845ae77e.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(n){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(n){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const a=i.top+n.scrollTop;const r=i.left+n.scrollLeft;const f=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(r<f)s(n,r);else if(r+o.clientWidth>l)s(n,r-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(a<u)s(n,a,true);else if(a+o.clientHeight>h){s(n,a-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
-//# sourceMappingURL=p-885b6950.js.map
+import{a as t}from"./p-257432ff.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(n){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(n){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const f=i.top+n.scrollTop;const r=i.left+n.scrollLeft;const a=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(r<a)s(n,r);else if(r+o.clientWidth>l)s(n,r-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(f<u)s(n,f,true);else if(f+o.clientHeight>h){s(n,f-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
+//# sourceMappingURL=p-45b7682a.js.map

package/dist/nano-components/p-45b7682a.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollTo","element","scrollAmt","vertical","left","behavior","e","scrollLeft","top","scrollTop","scrollIntoView","container","direction","position","offset","getOffset","offsetTop","offsetLeft","minX","maxX","offsetWidth","minY","maxY","offsetHeight","clientWidth","clientHeight"],"sources":["./src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nano-scroll-lock');\n  }\n}\n\nfunction scrollTo(\n  element: HTMLElement,\n  scrollAmt: number,\n  vertical: boolean = false\n) {\n  if (!vertical) {\n    try {\n      element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n    } catch (e) {\n      element.scrollLeft = scrollAmt;\n    }\n    return;\n  }\n  try {\n    element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n  } catch (e) {\n    element.scrollTop = scrollAmt;\n  }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  position: 'center' | 'start' = 'start'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetLeft < minX) scrollTo(container, offsetLeft);\n      else if (offsetLeft + element.clientWidth > maxX)\n        scrollTo(\n          container,\n          offsetLeft - container.offsetWidth + element.clientWidth\n        );\n    } else\n      scrollTo(\n        container,\n        container.scrollLeft +\n          offset.left -\n          container.offsetWidth / 2 +\n          element.offsetWidth / 2\n      );\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) scrollTo(container, offsetTop, true);\n    else if (offsetTop + element.clientHeight > maxY) {\n      scrollTo(\n        container,\n        offsetTop - container.offsetHeight + element.clientHeight,\n        true\n      );\n    }\n  }\n}\n"],"mappings":";;;oCAEA,MAAMA,EAAQ,IAAIC,I,SAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,mBAC9B,C,SAKgBI,EAAoBL,GAClCH,EAAMS,OAAON,GAEb,GAAIH,EAAMU,OAAS,EAAG,CACpBL,SAASC,KAAKC,UAAUI,OAAO,mB,CAEnC,CAEA,SAASC,EACPC,EACAC,EACAC,EAAoB,OAEpB,IAAKA,EAAU,CACb,IACEF,EAAQD,SAAS,CAAEI,KAAMF,EAAWG,SAAU,U,CAC9C,MAAOC,GACPL,EAAQM,WAAaL,C,CAEvB,M,CAEF,IACED,EAAQD,SAAS,CAAEQ,IAAKN,EAAWG,SAAU,U,CAC7C,MAAOC,GACPL,EAAQQ,UAAYP,C,CAExB,C,SAKgBQ,EACdT,EACAU,EACAC,EAAgD,WAChDC,EAA+B,SAE/B,MAAMC,EAASC,EAAUd,EAASU,GAClC,MAAMK,EAAYF,EAAON,IAAMG,EAAUF,UACzC,MAAMQ,EAAaH,EAAOV,KAAOO,EAAUJ,WAC3C,MAAMW,EAAOP,EAAUJ,WACvB,MAAMY,EAAOR,EAAUJ,WAAaI,EAAUS,YAC9C,MAAMC,EAAOV,EAAUF,UACvB,MAAMa,EAAOX,EAAUF,UAAYE,EAAUY,aAE7C,GAAIX,IAAc,cAAgBA,IAAc,OAAQ,CACtD,GAAIC,IAAa,QAAS,CACxB,GAAII,EAAaC,EAAMlB,EAASW,EAAWM,QACtC,GAAIA,EAAahB,EAAQuB,YAAcL,EAC1CnB,EACEW,EACAM,EAAaN,EAAUS,YAAcnB,EAAQuB,Y,MAGjDxB,EACEW,EACAA,EAAUJ,WACRO,EAAOV,KACPO,EAAUS,YAAc,EACxBnB,EAAQmB,YAAc,E,CAI9B,GAAIR,IAAc,YAAcA,IAAc,OAAQ,CACpD,GAAII,EAAYK,EAAMrB,EAASW,EAAWK,EAAW,WAChD,GAAIA,EAAYf,EAAQwB,aAAeH,EAAM,CAChDtB,EACEW,EACAK,EAAYL,EAAUY,aAAetB,EAAQwB,aAC7C,K,EAIR,Q"}

package/dist/nano-components/{p-a2d0d7b9.entry.js → p-4971a1f1.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,h as s,a as e,g as h}from"./p-1fe12320.js";import{c as r}from"./p-651b3264.js";const a=class{constructor(s){t(this,s);this.nanoPayloadChange=i(this,"nanoPayloadChange",7);this.nanoSubmit=i(this,"nanoSubmit",7);this.nanoInvalid=i(this,"nanoInvalid",7);this.allFields=[];this.nanoFieldSelector=`\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;this.hasSetStore=false;this.internalValidate=false;this.handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s&&(s.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(s.type))){this.storeToFields([s])}else if(s&&(s.tagName==="NANO-FILE-UPLOAD"&&!this.fileStateEqual(t,s)||s.tagName!=="NANO-FILE-UPLOAD"&&s.value!==i)){this.storeToFields([s])}if(this.validateOn==="dirty"&&this.dirty){this.internalValidate=true;await this.validateAllFields();this._valid=this.activeForm.checkValidity();this.internalValidate=false}this.nanoPayloadChange.emit(this._store.state)};this.handleFieldChange=t=>{if(!this.nanoFields.includes(t.target))return;this._dirty=true;this.fieldsToStore([t.target])};this.handlePlainFieldChange=t=>{if(!this.plainFields.includes(t.target))return;this.fieldsToStore([t.target])};this.handleFormInvalid=async t=>{if(!this.plainFields.includes(t.target)){t.preventDefault()}this._valid=false;if(this.internalValidate)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this.validateOn==="submit"){if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid();this.nanoInvalid.emit()};this.handleSubmit=async t=>{t.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return}this.submitForm()};this.submitted=false;this.userForm=undefined;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this._valid=undefined;this._store=undefined;this.extraFieldSelector="input, select, textarea";this.validation=undefined}userFormChange(){if(!!this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(!t)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName==="NANO-CHECKBOX"){const i=t.closest("nano-checkbox-group");if(i)i.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}get dirty(){return this._dirty}get valid(){return this._valid}get store(){return this._store}get payload(){return this._store.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e;let h;if(s){if(i.validationMessage){e=i;s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage;this.internalValidate=true;if(s.valid&&!e.checkValidity())s.valid=false;this.internalValidate=false}else if(i.validityMessage){h=i;s.validityMessage=h.validityMessage.length?h.validityMessage:h.validityMessage;if(s.valid&&h.invalid)s.valid=false}if(!s.fields.find((t=>t===i)))s.fields.push(i)}let r;let a;if(i.checkValidity){e=i;this.internalValidate=true;r=e.checkValidity();this.internalValidate=false;a=e.validationMessage}else{h=i;r=!h.invalid;a=h.validityMessage}t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:false,valid:r,validityMessage:a})}));return t}async setStore(t){this.hasSetStore=true;Object.entries(t).forEach((([t,i])=>{this.store.state[t]=i}))}async setCustomValidity(t){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(!!s)await this.setFieldError(s,i)})))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}attachSlotObserver(){if(!!this.mo)return;const t=this.mo=new MutationObserver((t=>{const i=this.host.querySelector("form");if(i&&i!==this.activeForm)this.activeForm=i;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));let i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length));i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length));if(![...t,...i].filter((t=>!this.allFields.includes(t))).length)return;this.nanoFields=t;this.plainFields=i;this.allFields=[...t,...i];this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields,true);this.nanoPayloadChange.emit(this._store.state)}storeToFields(t){t.forEach((t=>{const i=this.getName(t);if(!i.length||typeof this._store.state[i]==="undefined")return;if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const s=this.allFields.filter((i=>this.getName(t)===this.getName(i)));if(s[0].type==="radio"||s[0].type==="segment"||s[0].type==="segment-pill"){s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}else if(Array.isArray(this._store.state[i])){s.forEach((t=>{if(this._store.state[i].includes(t.value))t.checked=true;else t.checked=false}))}else{s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}return}if(t.tagName==="NANO-FILE-UPLOAD"){const s=t;if(!s.files?.length)s.files=this._store.state[i];return}t.value=this._store.state[i]}))}fieldsToStore(t,i=false){t.forEach((t=>{const s=this.getName(t);if(!s.length)return;if(!!this._store.state[s]&&this.hasSetStore&&i){return}if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)this._store.state[s]=i.value}else if(this.allFields.filter((t=>this.getName(t)===s&&(t.tagName==="NANO-CHECKBOX"||t.type==="checkbox"))).length>1){const t=Array.isArray(this._store.state[s])?this._store.state[s]:[];if(i.checked){if(!this._store.state[s].includes(i.value)){this._store.state[s]=[...t,i.value]}}else{this._store.state[s]=t.filter((t=>t!==i.value))}}else{if(i.checked)this._store.state[s]=i.value;else this._store.state[s]=""}return}if(t.tagName==="NANO-FILE-UPLOAD"){const i=t;if(!this.fileStateEqual(s,i))this._store.state[s]=i.files;return}this._store.state[s]=t.value}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);if(!s)return;await Promise.all(Object.entries(s).map((async([t,i])=>i.fields.map((async s=>{const e=this.allFields.find((t=>this.getName(t)===s));let h=e;if(e.tagName==="NANO-CHECKBOX"){const t=e.closest("nano-checkbox-group");h=t||e}if((h.validityMessage||h.validationMessage)===t&&i.valid){await this.setFieldError(h,"")}else if(!i.valid){await this.setFieldError(h,t)}})))))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t;await this.validate(i,s)}),undefined)}async setFieldError(t,i){if(t["showError"]){await t.showError(i)}else if(t["setError"])await t.setError(i);else t.setCustomValidity(i)}scrollToFirstInvalid(){if(!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}connectedCallback(){this.userForm=this.host.querySelector("form");this._store=r({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields();this.attachSlotObserver();this.host.addEventListener("nanoChange",this.handleFieldChange);this.host.addEventListener("input",this.handlePlainFieldChange);this.host.addEventListener("change",this.handlePlainFieldChange);this.host.addEventListener("submit",this.handleSubmit);this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("input",this.handlePlainFieldChange);this.host.removeEventListener("change",this.handlePlainFieldChange);this.host.removeEventListener("submit",this.handleSubmit);this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return s(e,null,this.userForm&&s("slot",null),!this.userForm&&s("form",{ref:t=>this.activeForm=t},s("slot",null)))}get host(){return h(this)}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{a as nano_field_validator};
-//# sourceMappingURL=p-a2d0d7b9.entry.js.map
+import{r as t,c as i,h as s,a as e,g as h}from"./p-f84612d4.js";import{c as r}from"./p-8e39d4ee.js";const a=class{constructor(s){t(this,s);this.nanoPayloadChange=i(this,"nanoPayloadChange",7);this.nanoSubmit=i(this,"nanoSubmit",7);this.nanoInvalid=i(this,"nanoInvalid",7);this.allFields=[];this.nanoFieldSelector=`\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;this.hasSetStore=false;this.internalValidate=false;this.handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s&&(s.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(s.type))){this.storeToFields([s])}else if(s&&(s.tagName==="NANO-FILE-UPLOAD"&&!this.fileStateEqual(t,s)||s.tagName!=="NANO-FILE-UPLOAD"&&s.value!==i)){this.storeToFields([s])}if(this.validateOn==="dirty"&&this.dirty){this.internalValidate=true;await this.validateAllFields();this._valid=this.activeForm.checkValidity();this.internalValidate=false}this.nanoPayloadChange.emit(this._store.state)};this.handleFieldChange=t=>{if(!this.nanoFields.includes(t.target))return;this._dirty=true;this.fieldsToStore([t.target])};this.handlePlainFieldChange=t=>{if(!this.plainFields.includes(t.target))return;this.fieldsToStore([t.target])};this.handleFormInvalid=async t=>{if(!this.plainFields.includes(t.target)){t.preventDefault()}this._valid=false;if(this.internalValidate)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this.validateOn==="submit"){if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid();this.nanoInvalid.emit()};this.handleSubmit=async t=>{t.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return}this.submitForm()};this.submitted=false;this.userForm=undefined;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this._valid=undefined;this._store=undefined;this.extraFieldSelector="input, select, textarea";this.validation=undefined}userFormChange(){if(!!this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(!t)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName==="NANO-CHECKBOX"){const i=t.closest("nano-checkbox-group");if(i)i.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}get dirty(){return this._dirty}get valid(){return this._valid}get store(){return this._store}get payload(){return this._store.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e;let h;if(s){if(i.validationMessage){e=i;s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage;this.internalValidate=true;if(s.valid&&!e.checkValidity())s.valid=false;this.internalValidate=false}else if(i.validityMessage){h=i;s.validityMessage=h.validityMessage.length?h.validityMessage:h.validityMessage;if(s.valid&&h.invalid)s.valid=false}if(!s.fields.find((t=>t===i)))s.fields.push(i)}let r;let a;if(i.checkValidity){e=i;this.internalValidate=true;r=e.checkValidity();this.internalValidate=false;a=e.validationMessage}else{h=i;r=!h.invalid;a=h.validityMessage}t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:false,valid:r,validityMessage:a})}));return t}async setStore(t){this.hasSetStore=true;Object.entries(t).forEach((([t,i])=>{this.store.state[t]=i}))}async setCustomValidity(t){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(!!s)await this.setFieldError(s,i)})))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}attachSlotObserver(){if(!!this.mo)return;const t=this.mo=new MutationObserver((t=>{const i=this.host.querySelector("form");if(i&&i!==this.activeForm)this.activeForm=i;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));let i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length));i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length));if(![...t,...i].filter((t=>!this.allFields.includes(t))).length)return;this.nanoFields=t;this.plainFields=i;this.allFields=[...t,...i];this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields,true);this.nanoPayloadChange.emit(this._store.state)}storeToFields(t){t.forEach((t=>{var i;const s=this.getName(t);if(!s.length||typeof this._store.state[s]==="undefined")return;if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const i=this.allFields.filter((i=>this.getName(t)===this.getName(i)));if(i[0].type==="radio"||i[0].type==="segment"||i[0].type==="segment-pill"){i.forEach((t=>{if(this._store.state[s]===t.value)t.checked=true;else t.checked=false}))}else if(Array.isArray(this._store.state[s])){i.forEach((t=>{if(this._store.state[s].includes(t.value))t.checked=true;else t.checked=false}))}else{i.forEach((t=>{if(this._store.state[s]===t.value)t.checked=true;else t.checked=false}))}return}if(t.tagName==="NANO-FILE-UPLOAD"){const e=t;if(!((i=e.files)===null||i===void 0?void 0:i.length))e.files=this._store.state[s];return}t.value=this._store.state[s]}))}fieldsToStore(t,i=false){t.forEach((t=>{const s=this.getName(t);if(!s.length)return;if(!!this._store.state[s]&&this.hasSetStore&&i){return}if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)this._store.state[s]=i.value}else if(this.allFields.filter((t=>this.getName(t)===s&&(t.tagName==="NANO-CHECKBOX"||t.type==="checkbox"))).length>1){const t=Array.isArray(this._store.state[s])?this._store.state[s]:[];if(i.checked){if(!this._store.state[s].includes(i.value)){this._store.state[s]=[...t,i.value]}}else{this._store.state[s]=t.filter((t=>t!==i.value))}}else{if(i.checked)this._store.state[s]=i.value;else this._store.state[s]=""}return}if(t.tagName==="NANO-FILE-UPLOAD"){const i=t;if(!this.fileStateEqual(s,i))this._store.state[s]=i.files;return}this._store.state[s]=t.value}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);if(!s)return;await Promise.all(Object.entries(s).map((async([t,i])=>i.fields.map((async s=>{const e=this.allFields.find((t=>this.getName(t)===s));let h=e;if(e.tagName==="NANO-CHECKBOX"){const t=e.closest("nano-checkbox-group");h=t||e}if((h.validityMessage||h.validationMessage)===t&&i.valid){await this.setFieldError(h,"")}else if(!i.valid){await this.setFieldError(h,t)}})))))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t;await this.validate(i,s)}),undefined)}async setFieldError(t,i){if(t["showError"]){await t.showError(i)}else if(t["setError"])await t.setError(i);else t.setCustomValidity(i)}scrollToFirstInvalid(){if(!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}connectedCallback(){this.userForm=this.host.querySelector("form");this._store=r({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields();this.attachSlotObserver();this.host.addEventListener("nanoChange",this.handleFieldChange);this.host.addEventListener("input",this.handlePlainFieldChange);this.host.addEventListener("change",this.handlePlainFieldChange);this.host.addEventListener("submit",this.handleSubmit);this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("input",this.handlePlainFieldChange);this.host.removeEventListener("change",this.handlePlainFieldChange);this.host.removeEventListener("submit",this.handleSubmit);this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return s(e,null,this.userForm&&s("slot",null),!this.userForm&&s("form",{ref:t=>this.activeForm=t},s("slot",null)))}get host(){return h(this)}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{a as nano_field_validator};
+//# sourceMappingURL=p-4971a1f1.entry.js.map

package/dist/nano-components/p-4971a1f1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldValidator","this","allFields","nanoFieldSelector","hasSetStore","internalValidate","handleStoreChange","async","key","newVal","found","find","field","getName","tagName","includes","type","storeToFields","fileStateEqual","value","validateOn","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","state","handleFieldChange","ev","nanoFields","target","_dirty","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitted","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","userFormChange","userForm","_activeForm","form","removeEventListener","addEventListener","validateOnChange","forEach","cbg","closest","valid","store","payload","showValidation","validationState","v","name","pf","nf","validationMessage","validityMessage","length","invalid","fields","f","push","Object","entries","val","validity","Promise","all","map","err","setFieldError","attachSlotObserver","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","Array","from","querySelectorAll","extraFieldSelector","filter","fieldName","cbs","cb","checked","isArray","ff","_a","files","init","currentArr","JSON","stringify","validation","res","msg","validityState","validityTarget","reduce","memo","validate","undefined","showError","setError","setCustomValidity","scrollToInvalid","setTimeout","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","connectedCallback","createStore","componentDidLoad","requestAnimationFrame","on","disconnectedCallback","disconnect","reset","render","h","Host","ref"],"sources":["./src/components/field-validator/field-validator.tsx"],"sourcesContent":["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 type {\n  NanoFormEles,\n  PlainFormEles,\n  NanoFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n  PlainFormEvent,\n} from '../../interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across 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() submitted = false;\n  @State() userForm: HTMLFormElement;\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    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n  private hasSetStore = false;\n\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.nanoFields.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(): ObservableMap<ValidatorValueStore> {\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. @readonly */\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()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === this.getName(field));\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          // non-nano fields\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          // nano-... fields\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: this.getName(field),\n        value: this._store.state[this.getName(field)],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\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  ) => { [errorMsg: string]: { fields?: 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    this.hasSetStore = true;\n    Object.entries(state).forEach(([key, val]) => {\n      this.store.state[key] = val;\n    });\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n   */\n  @Method()\n  async setCustomValidity(validity: { [key: string]: string }) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        if (!!field) await this.setFieldError(field, err);\n      })\n    );\n  }\n\n  /**\n   * Clear all custom validation.\n   * @returns a promise, resolved when all errors are cleared\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\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  @Watch('extraFieldSelector')\n  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  /**\n   * During spec tests, mockelement props aren't set - only attributes.\n   * This irons out that kink\n   * @param field\n   * @returns the fields name prop or attr\n   */\n  private getName(field: PlainFormEles | NanoFormEles) {\n    return field.name || field.getAttribute('name');\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n    plainFields = plainFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields, true);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cbs = this.allFields.filter(\n          (f) => this.getName(field) === this.getName(f)\n        ) as HTMLNanoCheckboxElement[];\n        if (\n          cbs[0].type === 'radio' ||\n          cbs[0].type === 'segment' ||\n          cbs[0].type === 'segment-pill'\n        ) {\n          // single radio type control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName].includes(cb.value))\n              cb.checked = true;\n            else cb.checked = false;\n          });\n        } else {\n          // single checkbox like control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(\n    fields: Array<NanoFormEles | PlainFormEles>,\n    init = false\n  ) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (!fieldName.length) return;\n\n      if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n        // a new field is being added\n        // but we already have a value for it\n        // via a store that has been actively set\n        // so let's not overwrite it\n        return;\n      }\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const 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          this.allFields.filter(\n            (f) =>\n              this.getName(f) === fieldName &&\n              (f.tagName === 'NANO-CHECKBOX' ||\n                (f as HTMLInputElement).type === '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            // checked\n            if (!this._store.state[fieldName].includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\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        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\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 ([msg, validityState]) => {\n        return validityState.fields.map(async (fieldName) => {\n          // switch on/off validation messages\n          const field = this.allFields.find(\n            (f) => this.getName(f) === fieldName\n          );\n          let validityTarget:\n            | PlainFormEles\n            | NanoFormEles\n            | HTMLNanoCheckboxGroupElement = field;\n\n          if (field.tagName === 'NANO-CHECKBOX') {\n            // if we have a checkbox-group, set the validation message there\n            const cbg = field.closest('nano-checkbox-group');\n            validityTarget = cbg || field;\n          }\n\n          if (\n            ((validityTarget as NanoFormEles).validityMessage ||\n              (validityTarget as PlainFormEles).validationMessage) === msg &&\n            validityState.valid\n          ) {\n            // status is now valid - clear the error\n            await this.setFieldError(validityTarget, '');\n          } else if (!validityState.valid) {\n            // status is invalid. Set the error\n            await this.setFieldError(validityTarget, msg);\n          }\n        });\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\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  /**\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 | PlainFormEles,\n    msg: string\n  ) {\n    if (field['showError']) {\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    } else if (field['setError'])\n      await (field as HTMLNanoCheckboxElement).setError(msg);\n    else (field as PlainFormEles).setCustomValidity(msg);\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  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => this.getName(field) === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      found &&\n      (found.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n    ) {\n      // it's a cb - always change\n      this.storeToFields([found]);\n    } else if (\n      found &&\n      ((found.tagName === 'NANO-FILE-UPLOAD' &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))\n    ) {\n      // not a cb. Only change if value is different\n      this.storeToFields([found]);\n    }\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  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handleFieldChange = (ev: NanoFormEvent) => {\n    if (!this.nanoFields.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handlePlainFieldChange = (ev: PlainFormEvent) => {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\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  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\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.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('input', this.handlePlainFieldChange);\n      this.host.addEventListener('change', this.handlePlainFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('input', this.handlePlainFieldChange);\n    this.host.removeEventListener('change', this.handlePlainFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    this._store.reset();\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"],"mappings":"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"}

package/dist/nano-components/p-4b12ba50.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,h as t,a as i,g as e}from"./p-f84612d4.js";const o=":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  display: block;\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n}\n\n:host(.is-xl) {\n  --quote-size: 3rem;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  .hero__ctas {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  container-type: inline-size;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n.is-xl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n.is-xxl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n.hero__content.is-xl {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n.hero__content.is-xxl {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n.is-xl .hero__primary {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  margin-block: 0;\n  margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n.is-xxl .hero__primary {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n.is-xl .hero__icon-box {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n.hero__quote-content {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n.hero--sub .hero__content.is-xl {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";const r=class{constructor(i){n(this,i);this.handleGridChange=n=>{this.gridSizes=n.detail};this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{onNanoBpChange:this.handleGridChange,class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("nano-grid-item",{gridStates:"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("nano-grid-item",{gridStates:this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];this.gridSizes=[];this.hasIconBox=undefined;this.hasScrim=undefined;this.hasSecondaryContent=undefined;this.hasQuote=undefined;this.hasBg=undefined;this.hasBackBtn=undefined;this.hasCtas=undefined;this.breadCrumbs=undefined;this.iconBoxItems=undefined;this.imgSrc=undefined;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top"}breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){if(!window["MutationObserver"])return;if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.host,{childList:true})}processSlottedContent(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return t(i,{class:{[this.gridSizes.join(" ")]:true}},t("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":n,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},t("div",{class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,null)),!this.imgSrc&&[t("div",{class:"hero__bg-slot"},t("slot",{name:"background"})),t(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=o;export{r as nano_hero};
+//# sourceMappingURL=p-4b12ba50.entry.js.map