@nanoporetech-digital/components 2.9.0 → 2.11.0

package/dist/nano-components/p-933c35a6.system.entry.js

@@ -1,5 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(t,e){for(var i=0,n=e.length,r=t.length;i<n;i++,r++)t[r]=e[i];return t};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-ef053a2f.system.js"],(function(t){"use strict";var e,i,n,r,s,a,o,c;return{setters:[function(t){e=t.r;i=t.c;n=t.i;r=t.h;s=t.e;a=t.g},function(t){o=t.i},function(t){c=t.d}],execute:function(){var l=t("nano_resize_observe",function(){function t(t){var n=this;e(this,t);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=function(){if(!n.currentWidth&&!n.currentHeight)return;var t={h:new Map,w:new Map};var e=false;Object.keys(n.appliedStates).forEach((function(i){var r;if(i==="h")r=n.currentHeight;else r=n.currentWidth;n.appliedStates[i].forEach((function(n,s){if(r>=s&&n.applied===false){n.applied=true;t[i].set(s,n);e=true}else if(r<s&&n.applied===true){n.applied=false;t[i].set(s,n);e=true}}))}));if(e)n.applyChanges(t);else if(!n.classNames.includes("is-ready"))n.classNames=["is-ready"]}}t.prototype.dimensionChanged=function(){this.assessChanges()};t.prototype.statesChanged=function(){var t=this;if(!this.states)return;if(!this.ro)this.attachRO();var e=function(t){var e=t.split(/(\d+)/).filter((function(t){return t.length}));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((function(i){i=i.trim();if(i.includes(" ")){var n=i.split(" "),r=n[0],s=n.slice(1);var a=e(r),o=a.bp,c=a.dir;t.appliedStates[c].set(o,{states:s,applied:false})}else{var l=e(i),o=l.bp,c=l.dir;t.appliedStates[c].set(o,{applied:false})}}))};t.prototype.applyChanges=function(t){var e=__spreadArray([],this.classNames);Object.keys(t).forEach((function(i){t[i].forEach((function(t){if(!t.states)return;t.states.map((function(i){if(t.applied)e.push(i);else e=e.filter((function(t){return t!==i}))}))}))}));this.classNames=__spreadArray(["is-ready"],e);this.nanoResizeStateChange.emit(this.toSimpleObj(t))};t.prototype.toSimpleObj=function(t){var e={};Object.keys(t).forEach((function(i){t[i].forEach((function(t,n){e[n+i]=t.applied}))}));return e};t.prototype.attachRO=function(){var t=this;this.ro=new o((function(e){for(var i=0,n=e;i<n.length;i++){var r=n[i];t.currentWidth=r.contentRect.width;t.currentHeight=r.contentRect.height}}));this.ro.observe(this.host)};t.prototype.connectedCallback=function(){this.assessChanges=c(this.assessChanges,50)};t.prototype.componentDidLoad=function(){var t=this;if(!this.states)return;if(!this.currentWidth||!this.currentHeight){n((function(){var e=t.host.getBoundingClientRect(),i=e.width,n=e.height;t.currentWidth=i;t.currentHeight=n}))}this.statesChanged()};t.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t;return r(s,{class:(t={},t[this.classNames.join(" ")]=true,t)},r("slot",null))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}},enumerable:false,configurable:true});return t}());l.style=":host { display: inline-block } div { height: 100%; }";var h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";var u=t("nano_skeleton",function(){function t(t){e(this,t);this.animated=true}t.prototype.render=function(){return r("div",{class:{skeleton:true,animate:this.animated}},r("div",{class:"skeleton__indicator"}))};return t}());u.style=h}}}));
-//# sourceMappingURL=p-933c35a6.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","exports","class_1","hostRef","_this","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","includes","prototype","dimensionChanged","statesChanged","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","_a","key","classes","slice","_b","_c","changes","__spreadArray","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","height","observe","host","connectedCallback","debounce","componentDidLoad","readTask","getBoundingClientRect","disconnectedCallback","disconnect","render","Host","class","join","skeletonCss","Skeleton","class_2","animated","skeleton","animate"],"mappings":"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","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 ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils';\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. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\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  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\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    if (!this.ro) this.attachRO();\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 assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\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    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) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\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    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <slot />\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, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: 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  to {\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\" />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-93880c28.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/focus-options-polyfill/index.js","src/global/script/global.ts"],"names":["window","document","HTMLElement","supportsPreventScrollOption","focusElem","createElement","addEventListener","event","preventDefault","stopPropagation","focus","Object","defineProperty","get","navigator","userAgent","match","e","prototype","nativeFocus","undefined","calcScrollableElements","element","parent","parentNode","scrollableElements","rootScrollingElement","scrollingElement","documentElement","offsetHeight","scrollHeight","offsetWidth","scrollWidth","push","scrollTop","scrollLeft","restoreScrollPosition","i","length","patchedFocus","args","preventScroll","evScrollableElements","this","setTimeout","thisElem","IntersectionObserverEntry","module","import","style","_","scrollBehavior","docEle_1","docIsReady_1","classList","contains","dispatchEvent","CustomEvent","mutationO_1","MutationObserver","disconnect","observe","childList","subtree","attributes"],"mappings":";;;0EACA,WACE,UACSA,SAAW,oBACXC,WAAa,oBACbC,cAAgB,YACvB,CACA,OAGF,IAAIC,EAA8B,MAClC,IACE,IAAIC,EAAYH,SAASI,cAAc,OACvCD,EAAUE,iBACR,SACA,SAASC,GACPA,EAAMC,iBACND,EAAME,oBAER,MAEFL,EAAUM,MACRC,OAAOC,eAAe,GAAI,gBAAiB,CACzCC,IAAK,WAEH,GACEC,kBACOA,UAAUC,YAAc,aAC/BD,UAAUC,WACVD,UAAUC,UAAUC,MAAM,gBAAiB,CACzC,OAAOb,EAA8B,MAGzCA,EAA8B,SAIpC,MAAOc,IAET,GACEf,YAAYgB,UAAUC,cAAgBC,YACrCjB,EACD,CACAD,YAAYgB,UAAUC,YAAcjB,YAAYgB,UAAUR,MAE1D,IAAIW,EAAyB,SAASC,GACpC,IAAIC,EAASD,EAAQE,WACrB,IAAIC,EAAqB,GACzB,IAAIC,EACFzB,SAAS0B,kBAAoB1B,SAAS2B,gBAExC,MAAOL,GAAUA,IAAWG,EAAsB,CAChD,GACEH,EAAOM,aAAeN,EAAOO,cAC7BP,EAAOQ,YAAcR,EAAOS,YAC5B,CACAP,EAAmBQ,KAAK,CACtBV,EACAA,EAAOW,UACPX,EAAOY,aAGXZ,EAASA,EAAOC,WAElBD,EAASG,EACTD,EAAmBQ,KAAK,CAACV,EAAQA,EAAOW,UAAWX,EAAOY,aAE1D,OAAOV,GAGT,IAAIW,EAAwB,SAASX,GACnC,IAAK,IAAIY,EAAI,EAAGA,EAAIZ,EAAmBa,OAAQD,IAAK,CAClDZ,EAAmBY,GAAG,GAAGH,UAAYT,EAAmBY,GAAG,GAC3DZ,EAAmBY,GAAG,GAAGF,WAAaV,EAAmBY,GAAG,GAE9DZ,EAAqB,IAGvB,IAAIc,EAAe,SAASC,GAC1B,GAAIA,GAAQA,EAAKC,cAAe,CAC9B,IAAIC,EAAuBrB,EAAuBsB,MAClD,UAAWC,aAAe,WAAY,CACpC,IAAIC,EAAWF,KACfC,YAAW,WACTC,EAAS1B,cACTiB,EAAsBM,KACrB,OACE,CACLC,KAAKxB,cACLiB,EAAsBM,QAGrB,CACHC,KAAKxB,gBAITjB,YAAYgB,UAAUR,MAAQ6B,IAhGlC,GCOA,KACI,yBAAAvC,WACA,8BAA+BA,WAC/B,sBAAuBA,OAAO8C,0BAAA5B,WAAA,CAEhC6B,EAAAC,iCAOF,KAAM,mBAAA/C,SAAA2B,gBAAAqB,OAAA,CACJL,YAAW,SAACM,GACVH,EAAAC,mDAGE/C,SAAS2B,gBAAgBqB,MAAME,eAAiB,cAEjD,QACElD,SAAA2B,gBAAAqB,MAAAE,eAAA,SAIc,CACnB,IAAMC,EAASnD,SAAA2B,gBACf,IAAMyB,EAAa,WACjB,IAAKD,EAAOE,UAAUC,SAAA,YAAsB,OAAO,MACnDtD,SAAS2B,gBAAA4B,cAAA,IAAAC,YAAA,wBAGT,OAAO,MAGT,IAAAJ,IAAA,CACE,IAAIK,EAAY,IAAAC,kBAAA,SAAAT,GACd,GAAIG,IAAc,CAChBK,EAAUE,aACVF,EAAY,SAIhBA,EAAAG,QAAA5D,SAAA2B,gBAAA,CACEkC,UAAW,MACXC,QAAS,MACTC,WAAY","sourcesContent":["// focus - focusOptions - preventScroll polyfill\n(function() {\n  if (\n    typeof window === \"undefined\" ||\n    typeof document === \"undefined\" ||\n    typeof HTMLElement === \"undefined\"\n  ) {\n    return;\n  }\n\n  var supportsPreventScrollOption = false;\n  try {\n    var focusElem = document.createElement(\"div\");\n    focusElem.addEventListener(\n      \"focus\",\n      function(event) {\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      true\n    );\n    focusElem.focus(\n      Object.defineProperty({}, \"preventScroll\", {\n        get: function() {\n          // Edge v18 gives a false positive for supporting inputs\n          if (\n            navigator &&\n            typeof navigator.userAgent !== 'undefined' &&\n            navigator.userAgent &&\n            navigator.userAgent.match(/Edge\\/1[7-8]/)) {\n              return supportsPreventScrollOption = false\n          }\n\n          supportsPreventScrollOption = true;\n        }\n      })\n    );\n  } catch (e) {}\n\n  if (\n    HTMLElement.prototype.nativeFocus === undefined &&\n    !supportsPreventScrollOption\n  ) {\n    HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus;\n\n    var calcScrollableElements = function(element) {\n      var parent = element.parentNode;\n      var scrollableElements = [];\n      var rootScrollingElement =\n        document.scrollingElement || document.documentElement;\n\n      while (parent && parent !== rootScrollingElement) {\n        if (\n          parent.offsetHeight < parent.scrollHeight ||\n          parent.offsetWidth < parent.scrollWidth\n        ) {\n          scrollableElements.push([\n            parent,\n            parent.scrollTop,\n            parent.scrollLeft\n          ]);\n        }\n        parent = parent.parentNode;\n      }\n      parent = rootScrollingElement;\n      scrollableElements.push([parent, parent.scrollTop, parent.scrollLeft]);\n\n      return scrollableElements;\n    };\n\n    var restoreScrollPosition = function(scrollableElements) {\n      for (var i = 0; i < scrollableElements.length; i++) {\n        scrollableElements[i][0].scrollTop = scrollableElements[i][1];\n        scrollableElements[i][0].scrollLeft = scrollableElements[i][2];\n      }\n      scrollableElements = [];\n    };\n\n    var patchedFocus = function(args) {\n      if (args && args.preventScroll) {\n        var evScrollableElements = calcScrollableElements(this);\n        if (typeof setTimeout === 'function') {\n          var thisElem = this;\n          setTimeout(function () {\n            thisElem.nativeFocus();\n            restoreScrollPosition(evScrollableElements);\n          }, 0);\n        } else {\n          this.nativeFocus();\n          restoreScrollPosition(evScrollableElements);\n        }\n      }\n      else {\n        this.nativeFocus();\n      }\n    };\n\n    HTMLElement.prototype.focus = patchedFocus;\n  }\n})();\n","import { Build } from '@stencil/core';\n\n// focus options\n\nimport 'focus-options-polyfill';\n\n// Intersection observer\n\nif (\n  !('IntersectionObserver' in window) ||\n  !('IntersectionObserverEntry' in window) ||\n  !('intersectionRatio' in window.IntersectionObserverEntry.prototype)\n) {\n  import(\n    /* webpackChunkName: 'polyfills-intersection-observer' */ 'intersection-observer'\n  );\n}\n\n// scroll-behaviour\n\nif (!('scrollBehavior' in document.documentElement.style)) {\n  setTimeout((_) => {\n    import(\n      /* webpackChunkName: 'polyfills-scroll-behavior' */ 'scroll-behavior-polyfill'\n    ).then((_) => {\n      document.documentElement.style.scrollBehavior = 'smooth';\n    });\n  }, 0);\n} else document.documentElement.style.scrollBehavior = 'smooth';\n\n// fire global 'ready' event when everything is hydrated\n\nif (Build.isBrowser) {\n  const docEle = document.documentElement;\n  const docIsReady = () => {\n    if (!docEle.classList.contains('hydrated')) return false;\n    document.documentElement.dispatchEvent(\n      new CustomEvent('nanoComponentsReady')\n    );\n    return true;\n  };\n\n  if (!docIsReady()) {\n    let mutationO = new MutationObserver((_) => {\n      if (docIsReady()) {\n        mutationO.disconnect();\n        mutationO = null;\n      }\n    });\n\n    mutationO.observe(document.documentElement, {\n      childList: false,\n      subtree: false,\n      attributes: true,\n    });\n  }\n}\n"]}

package/dist/nano-components/p-971b40a4.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,a){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function r(t){try{l(a.next(t))}catch(e){o(e)}}function s(t){try{l(a["throw"](t))}catch(e){o(e)}}function l(t){t.done?n(t.value):i(t.value).then(r,s)}l((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return l([t,e])}}function l(r){if(a)throw new TypeError("Generator is already executing.");while(n)try{if(a=1,i&&(o=r[0]&2?i["return"]:r[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,r[1])).done)return o;if(i=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;i=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=e.call(t,n)}catch(s){r=[6,s];i=0}finally{a=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,a=e.length,i=t.length;n<a;n++,i++)t[i]=e[n];return t};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-1d13dbdf.system.js","./p-6eb25600.system.js","./p-ef053a2f.system.js","./p-89edc042.system.js","./p-09d2d944.system.js"],(function(t){"use strict";var e,n,a,i,o,r,s,l,d,c,p,u,h,g,f;return{setters:[function(t){e=t.r;n=t.c;a=t.h;i=t.e;o=t.g},function(t){r=t.d;s=t.r},function(t){l=t.b;d=t.g;c=t.c},function(t){p=t.F;u=t.a},function(t){h=t.a},function(t){g=t.c},function(t){f=t.g}],execute:function(){var b=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus,:host a:focus{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-stretch:expanded}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative;font-stretch:expanded}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:0;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;top:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;top:5px}}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';var m=t("nano_nav_item",function(){function t(t){var a=this;e(this,t);this.nanoClose=n(this,"nanoClose",7);this.nanoOpen=n(this,"nanoOpen",7);this.nanoOpening=n(this,"nanoOpening",7);this.nanoClosing=n(this,"nanoClosing",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.isLegacy=!document.head.attachShadow;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=function(){};this.closeOnBlur=true;this.notification=false;this.closeSecondary=function(){return __awaiter(a,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return[2];this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});return[4,r(this.secondaryDiv,"open",false)];case 1:t=e.sent();this.didOpen=t!=="hidden";return[2]}}))}))};this.openSecondary=function(){return __awaiter(a,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return[2]}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return[2];this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});return[4,r(this.secondaryDiv,"open",true)];case 1:t=e.sent();this.didOpen=t==="shown";return[2]}}))}))};this.toggleSecondary=function(){if(!a.hasSecondarySlot)return;if(a.didOpen)a.closeSecondary();else a.openSecondary()};this.handleFocus=function(){a.hasFocus=true;if(a.href&&!a.animating&&a.hasSecondarySlot)a.openSecondary();a.nanoFocus.emit()};this.handleHostBlur=function(){if(a.animating)return;a.el.removeAttribute("tabindex");a.hasFocus=false;a.nanoBlur.emit()};this.handleHostClick=function(t){if(!a.hasAnchorEle)return;var e=t.target.closest("a, button");if(!e)a.btn.click()};this.handleMouseEnter=function(){return __awaiter(a,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(n){if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return[2];t=0;if(l(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((function(){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.openSecondary()];case 1:return[2,t.sent()]}}))}))}),t);this.animating=false;return[2]}))}))};this.handleMouseLeave=function(){if(!a.href)return;clearTimeout(a.waitShow);a.fromHover=true;a.animating=true;a.waitHide=window.setTimeout((function(){return __awaiter(a,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.closeSecondary()];case 1:return[2,t.sent()]}}))}))}),300);a.animating=false};this.handleClick=function(){var t;a.fromHover=false;if(a.hasSecondarySlot)a.toggleSecondary();else(t=a.el.querySelector("*"))===null||t===void 0?void 0:t.click()};this.blur=function(t){if(!a.didOpen||a.animating)return;if(!a.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===a.el||t.relatedTarget===a.btn||a.foundThisNavEle(t.relatedTarget)){a.secondaryDiv.focus({preventScroll:true});return}}a.btn.removeEventListener("focusout",a.blur);a.secondaryDiv.removeEventListener("focusout",a.blur);window.removeEventListener("blur",a.blur);a.didBlur=true;a.open=false;if(!t.relatedTarget)setTimeout((function(){a.el.focus({preventScroll:true})}),50)}}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.btn)return[2];this.btn.focus();return[2]}))}))};t.prototype.openChange=function(){this.open?this.openSecondary():this.closeSecondary()};t.prototype.didOpenChange=function(){var t=this;if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((function(){if(!t.fromHover&&!t.didBlur)t.btn.focus({preventScroll:true});t.nanoClose.emit({secondaryMenu:t.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){var e=new window.IntersectionObserver((function(n){if(n[0].boundingClientRect.top<0){t.secondaryDiv.scrollIntoView({behavior:"smooth"})}e.disconnect()}),{threshold:1});e.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}};t.prototype.foundThisNavEle=function(t){var e=t.closest("nano-nav-item");e=e===t?t.parentElement.closest("nano-nav-item"):e;if(!e)return false;if(e===this.el)return true;return this.foundThisNavEle(e)};t.prototype.componentWillLoad=function(){var t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;var e=d(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}};t.prototype.connectedCallback=function(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")};t.prototype.render=function(){var t=this;return a(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},a("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&a("a",{target:this.target,ref:function(e){return t.btn=e},href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},a("slot",{name:"icon-start"}),a("span",{class:"text"},a("slot",null)),a("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&a("button",{ref:function(e){return t.btn=e},onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},a("slot",{name:"icon-start"}),a("span",{class:"text"},a("slot",null)),a("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&a("div",{class:"link"},a("slot",{name:"icon-start"}),a("slot",null),a("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&a("div",{class:"secondary-menu",ref:function(e){return t.secondaryDiv=e},tabindex:"-1"},a("div",{class:"secondary-menu-content"},a("slot",{name:"secondary"})),a("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openChange"],didOpen:["didOpenChange"]}},enumerable:false,configurable:true});return t}());m.style=b;var v='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-top:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select__mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.select__multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-top:1.3em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.5em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .select__multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.select__multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.select__multi-value.sc-nano-select{margin-top:5px;-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:-3px;margin-inline-end:-3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.2em 0.5em;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);letter-spacing:1px}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.2}.select__multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select__multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + (var(--padding-start) * 2)))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(38%);transform:translateY(38%);top:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';var w=0;var y=t("nano_select",function(){function t(t){var a=this;e(this,t);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoSearchChange=n(this,"nanoSearchChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.valueItems=[];this.selectId="nano-select-"+w++;this.rtl=false;this.onInit=true;this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.autofocus=false;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.readonly=false;this.required=false;this.allowCustomValues=false;this._value=this.multiple?[]:"";this._options=[];this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.customValidate=function(){a.nativeSelect.setCustomValidity("");if(a.required&&!a.valArray.length){a.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(a.valArray.length&&!a.allowCustomValues&&!a.isValidValues()){a.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(a.max&&a.valArray.length>a.max){a.nativeSelect.setCustomValidity("Only up to "+a.max+" values are allowed.");return true}if(a.min&&a.valArray.length<a.min){a.nativeSelect.setCustomValidity("You must select a minimum of "+a.min+" values.");return true}return false};this.showInlineValidation=function(t){if(a.validateOn==="submitThenDirty")a.validateOn="dirty";a._invalid=false;a.showErrorMsg=false;a.errorMessage="";if(!a.nativeSelect.validity.valid){a.errorMessage=a.nativeSelect.validationMessage;a._invalid=true;a.showErrorMsg=true}a.nanoValidate.emit({isValid:!a.invalid,errorMessage:a.errorMessage,originalEvent:t})};this.handleInvalid=function(t){a._invalid=true;if(a.validateOn==="submit")a._invalid=a.showErrorMsg=a.customValidate();if(a.showInlineError)t.preventDefault();setTimeout((function(e){return a.showInlineValidation(t)}),20)};this.setValue=function(t){t.preventDefault();if(!a.multiple){a.value=t.detail.value;a.inputCtrl.focus();return}if(a.value&&a.value.length&&a.value.includes(t.detail.value))return;if(a.max&&a.value.length===a.max)return;a.currInsertIndex++;a.value=__spreadArray(__spreadArray(__spreadArray([],a.value.slice(0,a.currInsertIndex)),[t.detail.value]),a.value.slice(a.currInsertIndex));a.inputSearchVal=""};this.removeValue=function(t){if(!a.multiple||!a.value.length)return;if(!t)t=a.value[a.value.length-1];a.value=a.value.filter((function(e){return e!==t}));a.currInsertIndex--;a.setFocus()};this.setOptions=function(){if(!a.datalist||!a.datalist.activeOptions||!a.datalist.activeOptions.length)return;a._eOptions=a.datalist.activeOptions.map((function(t){var e=t.value,n=t.selected,a=t.label,i=t.filterMeta;return{value:e,selected:n,label:a,filterMeta:i}}))};this.handleDocumentKeyDown=function(t){if(!a.multiple||!a.hasFocus)return;if(!a.inputSearchVal){var e=void 0;switch(t.key){case"Backspace":if(a.inputCtrl.previousElementSibling)e=a.inputCtrl.previousElementSibling;else break;a.removeValue(e.dataset.value||null);break;case"Delete":if(a.inputCtrl.nextElementSibling)e=a.inputCtrl.nextElementSibling;else break;a.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!a.value.length)break;if(t.key==="ArrowLeft"&&a.inputCtrl.previousSibling)a.currInsertIndex--;if(t.key==="ArrowRight"&&a.inputCtrl.nextSibling)a.currInsertIndex++;setTimeout((function(){a.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=function(){a.hasFocus=false;setTimeout((function(){if(a.validateOn==="dirty"&&!a.hasFocus)a.showInlineValidation()}),20);a.nanoBlur.emit();if(!a.allowCustomValues&&a.multiple){a.inputSearchVal="";var t=new window.Event("change");a.inputCtrl.dispatchEvent(t)}};this.onFocus=function(){a.hasFocus=true;a.nanoFocus.emit()};this.clearSelectValue=function(t){if(a.clearSelect&&!a.readonly&&!a.disabled&&t){t.preventDefault();t.stopPropagation()}if(a.multiple){a.value=[];a.currInsertIndex=-1}else a.value="";a.inputCtrl.value="";var e=new window.Event("change");a.inputCtrl.dispatchEvent(e)};this.onClick=function(){a.setFocus()};this.onDragStart=function(t){var e=t.target;a.dragVal=e.dataset.value};this.onDragEnd=function(t){a.dragVal=null;t.preventDefault()};this.onDragLeave=function(t){var e=t.target;var n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||a.dragVal===n||!a.value.includes(a.dragVal)){t.preventDefault();return}var i=a.value.indexOf(n);var o=a.value.indexOf(a.dragVal);var r=a.value;var s=r[i];r[i]=r[o];r[o]=s;a.value=__spreadArray([],r)};this.onMultiInput=function(t){a.inputSearchVal=t.target.value.trim();a.nanoSearchChange.emit({value:t.target.value.trim()})}}Object.defineProperty(t.prototype,"selectWrap",{get:function(){return this._selectWrap},set:function(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"datalist",{get:function(){return this._datalist},set:function(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"value",{get:function(){return this._value},set:function(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"options",{get:function(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((function(t){var e=t.value,n=t.selected,a=t.label,i=t.filterMeta;return{value:e,selected:n,label:a,filterMeta:i}}))},set:function(t){this._options=t.map((function(t){if(typeof t==="string")return{value:t,label:t};else return t}))},enumerable:false,configurable:true});t.prototype.debounceChanged=function(){this.nanoSearchChange=h(this.nanoSearchChange,this.debounce)};t.prototype.shouldValidate=function(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()};t.prototype.valueChanged=function(){var t=this;if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}setTimeout((function(e){return t.shouldValidate()}),20);this.nanoChange.emit({value:this.value})};t.prototype.setDataListOpts=function(){if(!this.datalist||!this.selectWrap)return;var t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap});this.datalist.input=this.inputCtrl};t.prototype.reportValidity=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(t)this.showInlineValidation();return[2,{isValid:!this.invalid,errorMessage:this.errorMessage}]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.inputCtrl.focus();setTimeout((function(){return t.inputCtrl.click()}),50);return[2]}))}))};t.prototype.getSelectElement=function(){return Promise.resolve(this.nativeSelect)};t.prototype.showError=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeSelect){this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}return[2]}))}))};Object.defineProperty(t.prototype,"valArray",{get:function(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value},enumerable:false,configurable:true});t.prototype.isValidValues=function(){var t=this;return this.valArray.find((function(e){return t.options.find((function(t){return t.value===e}))}))};t.prototype.slotChangeObserver=function(){var t=this;var e=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));e.observe(this.el,{childList:true,subtree:true})};t.prototype.processSlottedContent=function(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');if(!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')){console.warn("nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}};t.prototype.getLabel=function(t){var e=this.options.find((function(e){var n;return!e.disabled&&((n=e.value)===null||n===void 0?void 0:n.length)&&e.value===t}));return e&&e.label?e.label:t};t.prototype.handleBlur=function(t){var e=this;if(!this.hasFocus)return;var n=t;var a;s((function(){if(n.key){if(n.key!=="Tab")return;a=f()}else a=t.target;if(c(e.el.tagName.toLowerCase(),a)!==e.el){e.onBlur()}}))};t.prototype.connectedCallback=function(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))};t.prototype.disconnectedCallback=function(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){var t=this;this.slotChangeObserver();this.customValidate();this.setDataListOpts();s((function(){return t.onInit=false}))};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this;var e=this.selectId+"-lbl";var n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";var o=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];var r=function(t){var e=t.el,n=t.floatLabel,a=t.label,i=t.errorMessage,o=t.showInlineError,r=t.hasHelperSlot,s=t.hasHelperEndSlot,l=t.hasLabelSlot,d=t.hideLabel,c=t.placeholder,p=t.rtl;return{el:e,floatLabel:n,label:a,errorMessage:i,showInlineError:o,hasHelperSlot:r,hasHelperEndSlot:s,hasLabelSlot:l,hideLabel:d,placeholder:c,rtl:p}}(this);var s=Object.assign(Object.assign({},r),{labelId:e,moreId:n,helperEndId:o,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});var l=function(e){var n=e.readonly,a=e.disabled;return{readonly:n,disabled:a,clearControl:t.clearSelect}}(this);return a(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},g(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask})},a(p,Object.assign({},s),a(u,Object.assign({},l,{onClearText:this.clearSelectValue,control:this.el,ref:function(e){return t.selectWrap=e},endValueSlot:a("slot",{name:"down-arrow"},a("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&a("div",{class:"select__multi-wrap select"},this.multipleValues(e,n,o)),!this.multiple&&[this.mask&&a("div",{class:"select__mask"},this.getLabel(this.value)),a("input",{id:this.selectId,class:"select__native-input",ref:function(e){return t.inputCtrl=e},"aria-labelledby":e+" "+n+" "+o,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&a("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:function(e){return t.datalist=e},selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:function(e){e.preventDefault();t.removeValue(e.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&a("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:function(){return t.inputCtrl.focus()}},a("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),a("slot",null)),a("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:function(e){return t.nativeSelect=e},"aria-labelledby":e+" "+n+" "+o,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((function(t){return a("option",{value:t,selected:true},t)})),!this.allowCustomValues&&this.options.map((function(e){return a("option",{value:e.value,selected:t.valArray.includes(e.value),disabled:e.disabled,label:e.label},t.valArray.includes(e.value))}))))};t.prototype.multipleValues=function(t,e,n){var i=this;var o=a("input",{class:"select__multi-input",id:this.selectId,ref:function(t){return i.inputCtrl=t},readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+e+" "+n});if(!this.value.length)return o;return this.value.map((function(t,e){var n=a("span",{onDragStart:i.onDragStart,onDragLeave:i.onDragLeave,onDragEnd:i.onDragEnd,onDragOver:function(t){return t.preventDefault()},draggable:true,"data-value":t,ref:function(t){return i.valueItems.push(t)},class:"select__multi-value"},a("span",null,i.getLabel(t)),a("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:function(){i.removeValue(t)},onMouseUp:function(){i.removeValue(t)}},a("nano-icon",{name:"light/times"})));if(e===0&&i.currInsertIndex<0)n=[o,n];else if(e===i.currInsertIndex)n=[n,o];return n}))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}},enumerable:false,configurable:true});return t}());y.style=v}}}));
-//# sourceMappingURL=p-971b40a4.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","exports","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","notification","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","class_2","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","hasHelperEndSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","__spreadArray","slice","removeValue","toFind","filter","val","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","Object","defineProperty","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","selectWrap","currDWConfig","assign","tetherTo","input","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","find","options","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","getLabel","handleBlur","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","helperEndId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-stretch: expanded;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n    font-stretch: expanded;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 0;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      top: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        top: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-top: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: inherit;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-top: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.select__mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    @include padding(\n      0,\n      0,\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    min-height: calc(2.5em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-top: 5px;\n    margin-inline-start: var(--padding-start);\n    margin-inline-end: -3px;\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.2em 0.5em;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.2;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(38%);\n    top: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  debounceEvent,\n  createColorClasses,\n  closestElement,\n  raf,\n  getActiveElement,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\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 helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private inputCtrl?: HTMLInputElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\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.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  private _invalid = false;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: 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   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n    this.datalist.input = this.inputCtrl;\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\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  // Public 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    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * Returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * 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.nativeSelect) {\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit')\n      this._invalid = this.showErrorMsg = this.customValidate();\n    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      this.selectWrap.clientWidth; // force reflow\n      this.inputCtrl.focus();\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n\n    // breaking change introduced in v2. Rm in v3\n    if (\n      !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n    ) {\n      console.warn(\n        'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  private getLabel(toFind: string) {\n    let label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    raf(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    raf(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n              <nano-option\n                slot=\"list-top\"\n                value={this.inputSearchVal}\n                selected={false}\n                label={this.inputSearchVal}\n                onNanoSelect={() => this.inputCtrl.focus()}\n              >\n                <span slot=\"check-icon\"></span>\n                Add '{this.inputSearchVal}'\n              </nano-option>\n            )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    let input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"]}

package/dist/nano-components/p-9d35768b.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as e,h as i,e as s,g as n}from"./p-ab5813a7.js";import{p as a,a as o,c as h}from"./p-f66958c1.js";import{c as d}from"./p-d99437a6.js";const r=".sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;width:0 !important;width:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const l={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let c=0;let p=class{constructor(i){t(this,i);this.nanoChange=e(this,"nanoChange",7);this.nanoValidate=e(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._invalid=false;this.helperText=true;this.helperTextFormat={year:"numeric",month:"long",day:"numeric"};this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.disabled=false;this.autofocus=false;this.clearInput=false;this.value="";this.validateOn="submit";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.hideLabel=false;this.picker=true;this.pickerOpen=false;this.closeAfterPicked=true;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}}}get invalid(){return this._invalid}handleValueChange(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);this.nanoChange.emit({value:this.value,date:a(this.value)});this.directInput=false}handleDateOrderChange(){this.setDatePattern()}testDateValidity(){const t=a(this.value);let e,i,s="";if(this.value&&t){if(this.min&&(e=a(this.min))&&t<e){s="Date below the minimum: "+e.toLocaleDateString(this.locale,this.helperTextFormat)}else if(this.max&&(i=a(this.max))&&t>i){s="Date above the maximum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}}setTimeout((async e=>{if(!this.input)return;const i=await this.input.getInputElement();if(this.value.length&&!t)s="Please enter a valid date";i.setCustomValidity(s);if(this.input.validateOn==="dirty"){this.input.showError(s)}}),100)}handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}async reportValidity(t){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(){let t=[];let e=[];Array.from(this.dateOrder).map(((i,s)=>{t.push(l[i]);this.dateOrderIndeces[i]=s;e.push(i==="y"?"yyyy":i+i)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=e.join(" ")}formatIsoDate(t){let e=[];Array.from("ymd").map((t=>e.push(l[t])));const i=t.match(new RegExp(e.join("\\W+")));if(!i)return"";let s=[];s[this.dateOrderIndeces.d]=i[3];s[this.dateOrderIndeces.m]=i[2];s[this.dateOrderIndeces.y]=i[1];return s.join(" ")}setValue(t){const e=t.match(new RegExp(this.pattern));if(!e){this.value=t;return}let i=h(e[this.dateOrderIndeces.y+1],e[this.dateOrderIndeces.m+1],e[this.dateOrderIndeces.d+1]);if(!i){i=new Date(t);if(!i){this.value=t;return}}const s=o(i);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 e=!!this.host.querySelector('[slot="helper"]');return i(s,{class:Object.assign({},d(this.color))},i("div",{class:"date-field"},i("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"},i("slot",{name:"start",slot:"start"}),i("slot",{name:"label"}),i("slot",{name:"end",slot:"end"}),this.picker&&[i("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},i("nano-icon",{name:"light/calendar-alt"})),i("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"}),i("div",null,i("div",{class:"date-field__close-bar"},i("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:t=>this.pickerCloseBtn=t},i("nano-icon",{name:"light/times"}),i("span",{class:"vhidden"},"Close window"))),i("nano-date-picker",{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"})))],(e||this.helperText||this.showInlineError)&&i("span",{slot:"helper"},i("span",{class:{vhidden:!!this.value.length}},i("slot",{name:"helper"})),this.helperText&&!!t&&i("span",null,t.toLocaleDateString(this.locale,this.helperTextFormat)))),i("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"]}}};p.style=r;export{p as nano_date_input};
-//# sourceMappingURL=p-9d35768b.entry.js.map

package/dist/nano-components/p-9d35768b.entry.js.map

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