@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/esm-es5/nano-datalist_3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","class_1","hostRef","_this","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","actvOptEles","canOpen","optionIds","selected","_dropDownConfig","skidding","options","type","open","disableFilter","disabled","optSelected","e","stopPropagation","changeInputValue","detail","raf","inputChange","shouldOpen","handleShow","__awaiter","listBox","setFocus","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","optionKeyDown","connectedInput","focus","deleteKeys","exactMatch","debounce","bind","Object","defineProperty","prototype","opts","_a","value","forEach","opt","ddc","assign","allOptEles","openWatcher","writeTask","nanoDropdown","setAttribute","toString","watchInputChange","nanoInput","host","_b","getInputElement","_c","sent","input","HTMLElement","manageSlotChangeListener","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","__spreadArray","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","tetherTo","dropDownConfig","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","hasNoResult","fireActiveOptsEvent","nanoOptionsUpdated","emit","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","connectedCallback","componentDidLoad","componentDidRender","console","warn","render","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","_","dlist__menu","dlist__menu--open","dropwdownOpen","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","CANSHADOW","head","attachShadow","Menu","class_2","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","preventDefault","scrollIntoView","block","_i","items_1","shadowRoot","getTextContent","handleMouseOver","menu","preventScroll","removeFocus","blur","showActiveElement","resetActiveItem","tagName","map","opened","ctx","getDirectChildren","activeElement","getActiveElement","getAttribute","classList","contains","handleBlur","hasFocus","kev","found","composedPath","nanoBlur","legacy","onClick","onMouseOver","onFocus","part","optionCss","Option","optId","valueChanged","labelContent","labelChanged","componentWillLoad","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to $color-palegrey;\n  */\n\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --padding-start: #{$spacing-xlarge};\n  --padding-end: #{$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{$color-palegrey};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\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    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control readonly.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (this.input instanceof HTMLElement) {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (!!this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      // add imperative `options`\n      writeTask(() => {\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'selctMulti':\n        // dwConfig.closeOnSelect = false;\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (!!oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      oldInput.removeEventListener('change', this.inputChange);\n      oldInput.removeEventListener('click', this.inputClick);\n      oldInput.removeEventListener('keydown', this.inputKeydown);\n      oldInput.removeEventListener('input', this.inputChange);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (!!newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    raf(() => this.inputChange());\n\n    if (this.type === 'select') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    raf(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.type === 'select' || this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-owns={this.optionIds.join(' ')}\n        aria-label=\"Select options from the list below\"\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={(_) => (this.open = false)}\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            {!this.options.length && <slot />}\n            {!!this.options.length && <slot name=\"internal-opts\" />}\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{$color-blue--faded};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{$color-blue}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{$color-blue}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{$color-blue--faded};\n  --bg-color-focus: #{$color-blue--faded};\n  --bg-color-selected: #{$color-blue--faded};\n  --color-hover: #{$color-blue};\n  --color-selected: #{$color-blue};\n  --color-focus: #{$color-blue};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find((i) => i.selected || i === activeElement);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\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 found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\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/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{$spacing-small};\n   * @prop --padding-bottom: Defaults to #{$spacing-small};\n   * @prop --padding-start: Defaults to #{$spacing-small};\n   * @prop --padding-end: Defaults to #{$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{$color-palegrey};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{$input-text-color});\n  --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --color-disabled: #{$color-palegrey};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  background: var(--bg);\n\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      @include margin(null, 0.5em, null, null);\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      @include margin(null, null, null, 0.5em);\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    left: 0.6em;\n    top: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { OptionInterface } from '../../interface';\nimport { debounce, getDirectChildren } from '../../utils';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if (!this.value || !this.value.length) this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","class_1","hostRef","_this","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","Object","defineProperty","prototype","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","__awaiter","input","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/form';\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 #{$color-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  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    width: 0 !important;\n    width: 100%;\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';\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 */\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  // 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(), 20);\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  };\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    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\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          >\n            <slot name=\"label\" />\n            {this.picker && [\n              <button\n                slot=\"inline-button\"\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=\"inline-button\"\n                placement={placement}\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              >\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                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","class_1","hostRef","_this","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","Object","defineProperty","prototype","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","__awaiter","input","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/form';\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 #{$color-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  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    width: 0 !important;\n    width: 100%;\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';\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  // 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    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\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          >\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                placement={placement}\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              >\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                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,t,a,n){function o(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,i){function s(e){try{d(n.next(e))}catch(t){i(t)}}function r(e){try{d(n["throw"](e))}catch(t){i(t)}}function d(e){e.done?a(e.value):o(e.value).then(s,r)}d((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,o,i,s;return s={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function r(e){return function(t){return d([e,t])}}function d(s){if(n)throw new TypeError("Generator is already executing.");while(a)try{if(n=1,o&&(i=s[0]&2?o["return"]:s[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;if(o=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:a.label++;return{value:s[1],done:false};case 5:a.label++;o=s[1];s=[0];continue;case 7:s=a.ops.pop();a.trys.pop();continue;default:if(!(i=a.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){a=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(s[0]===6&&a.label<i[1]){a.label=i[1];i=s;break}if(i&&a.label<i[2]){a.label=i[2];a.ops.push(s);break}if(i[2])a.ops.pop();a.trys.pop();continue}s=t.call(e,a)}catch(r){s=[6,r];o=0}finally{n=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */import{h,r as registerInstance,c as createEvent,e as Host,g as getElement}from"./index-5f8d16e7.js";import{b as createIdentifier,D as DaysOfWeek$1,i as inRange$1,p as parseISODate,d as addDays$1,s as startOfWeek$1,e as endOfWeek$1,f as setMonth,g as startOfMonth$1,h as endOfMonth$1,j as clamp$1,k as setYear,a as printISODate}from"./date-utils-e4b757ff.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";var DaysOfWeek;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(DaysOfWeek||(DaysOfWeek={}));function isEqual(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function addDays(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function startOfWeek(e,t){if(t===void 0){t=DaysOfWeek.Monday}var a=new Date(e);var n=a.getDay();var o=(n<t?7:0)+n-t;a.setDate(a.getDate()-o);return a}function endOfWeek(e,t){if(t===void 0){t=DaysOfWeek.Monday}var a=new Date(e);var n=a.getDay();var o=(n<t?-7:0)+6-(n-t);a.setDate(a.getDate()+o);return a}function startOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}function endOfMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function inRange(e,t,a){return clamp(e,t,a)===e}function clamp(e,t,a){var n=e.getTime();if(t&&t instanceof Date&&n<t.getTime()){return t}if(a&&a instanceof Date&&n>a.getTime()){return a}return e}function getDaysInRange(e,t){var a=[];var n=e;while(!isEqual(n,t)){a.push(n);n=addDays(n,1)}a.push(n);return a}function getViewOfMonth(e,t){if(t===void 0){t=DaysOfWeek.Monday}var a=startOfWeek(startOfMonth(e),t);var n=endOfWeek(endOfMonth(e),t);return getDaysInRange(a,n)}var DatePickerDay=function(e){var t=e.focusedDay,a=e.today,n=e.day,o=e.onDaySelect,i=e.onKeyboardNavigation,s=e.focusedDayRef,r=e.inRange,d=e.disabled,l=e.isSelected;var c=isEqual(n,a);var u=isEqual(n,t);var f=n.getMonth()!==t.getMonth()||d;var b=!r;function p(e){o(e,n)}return h("button",{class:{"duet-date__day":true,"is-outside":b,"is-disabled":f,"is-today":c},tabIndex:u?0:-1,onClick:p,onKeyDown:i,disabled:b,type:"button","aria-pressed":l?"true":"false",ref:function(e){if(u&&e&&s){s(e)}}},h("span",{"aria-hidden":"true"},n.getDate()),h("span",{class:"duet-date__vhidden"},n.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function chunk(e,t){var a=[];for(var n=0;n<e.length;n+=t){a.push(e.slice(n,n+t))}return a}function mapWithOffset(e,t,a){return e.map((function(n,o){var i=(o+t)%e.length;return a(e[i])}))}var DatePickerMonth=function(e){var t=e.selectedDate,a=e.focusedDate,n=e.labelledById,o=e.localization,i=e.firstDayOfWeek,s=e.min,r=e.max,d=e.onDateSelect,l=e.onKeyboardNavigation,c=e.focusedDayRef,u=e.onMouseDown,f=e.onFocusIn,b=e.isDateDisabled;var p=new Date;var y=getViewOfMonth(a,i);return h("table",{class:"duet-date__table",role:"grid","aria-labelledby":n,onFocusin:f,onMouseDown:u},h("thead",null,h("tr",null,mapWithOffset(o.dayNames,i,(function(e){return h("th",{class:"duet-date__table-header",scope:"col"},h("span",{"aria-hidden":"true"},e.substr(0,2)),h("span",{class:"duet-date__vhidden"},e))})))),h("tbody",null,chunk(y,7).map((function(e){return h("tr",{class:"duet-date__row"},e.map((function(e){return h("td",{class:"duet-date__cell",role:"gridcell","aria-selected":isEqual(e,t)?"true":undefined},h(DatePickerDay,{day:e,today:p,focusedDay:a,inRange:inRange(e,s,r),onDaySelect:d,onKeyboardNavigation:l,focusedDayRef:c,disabled:b(e),isSelected:isEqual(e,t)}))})))}))))};var localization={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};var datePickerCss=':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{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-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;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.duet-date__select span{margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';function range(e,t){var a=[];for(var n=e;n<=t;n++){a.push(n)}return a}var DatePicker=function(){function e(e){var t=this;registerInstance(this,e);this.nanoDatePicked=createEvent(this,"nanoDatePicked",7);this.monthSelectId=createIdentifier("NanoDateMonth");this.yearSelectId=createIdentifier("NanoDateYear");this.dialogLabelId=createIdentifier("NanoDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.focusedDay=new Date;this.selectedDate="";this.min="";this.max="";this.firstDayOfWeek=DaysOfWeek$1.Monday;this.localization=localization;this.isDateDisabled=function(){return false};this.isModal=false;this.enableActiveFocus=function(){t.activeFocus=true};this.disableActiveFocus=function(){t.activeFocus=false};this.handleTouchStart=function(e){var a=e.changedTouches[0];t.initialTouchX=a.pageX;t.initialTouchY=a.pageY};this.handleTouchMove=function(e){e.preventDefault()};this.handleTouchEnd=function(e){var a=e.changedTouches[0];var n=a.pageX-t.initialTouchX;var o=a.pageY-t.initialTouchY;var i=70;var s=Math.abs(n)>=i&&Math.abs(o)<=i;if(s){t.addMonths(n<0?1:-1)}t.initialTouchY=null;t.initialTouchX=null};this.handleNextMonthClick=function(e){e.preventDefault();t.addMonths(1)};this.handlePreviousMonthClick=function(e){e.preventDefault();t.addMonths(-1)};this.handleKeyboardNavigation=function(e){if(e.key==="Tab"&&!e.shiftKey&&t.isModal){e.preventDefault();var a=t.firstFocusEle||t.firstFocusableElement;a.focus();return}var n=true;switch(e.key){case"ArrowRight":t.addDays(1);break;case"ArrowLeft":t.addDays(-1);break;case"ArrowDown":t.addDays(7);break;case"ArrowUp":t.addDays(-7);break;case"PageUp":if(e.shiftKey){t.addYears(-1)}else{t.addMonths(-1)}break;case"PageDown":if(e.shiftKey){t.addYears(1)}else{t.addMonths(1)}break;case"Home":t.startOfWeek();break;case"End":t.endOfWeek();break;default:n=false}if(n){e.preventDefault();t.enableActiveFocus()}};this.handleDaySelect=function(e,a){var n=!t.isDateDisabled(a);var o=inRange$1(a,parseISODate(t.min),parseISODate(t.max));if(!o||!n){return}if(a.getMonth()===t.focusedDay.getMonth()){t.setValue(a)}else{t.setFocusedDay(a)}};this.handleMonthSelect=function(e){t.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=function(e){t.setYear(parseInt(e.target.value,10))};this.processFocusedDayNode=function(e){t.focusedDayNode=e;if(t.activeFocus){setTimeout((function(){return e.focus()}),0)}}}e.prototype.setFocus=function(e,t){if(e===void 0){e=false}if(t===void 0){t=false}return __awaiter(this,void 0,void 0,(function(){var a=this;return __generator(this,(function(n){this.setFocusedDay(parseISODate(this.selectedDate)||new Date);if(e){setTimeout((function(e){return a.focusedDayNode.focus()}),20);return[2]}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((function(){if(t)focusVisible.force(a.monthSelectNode);a.monthSelectNode.focus()}),20);return[2]}))}))};e.prototype.handleSelectedDateChange=function(){this.setFocus(true)};e.prototype.addDays=function(e){this.setFocusedDay(addDays$1(this.focusedDay,e))};e.prototype.addMonths=function(e){this.setMonth(this.focusedDay.getMonth()+e)};e.prototype.addYears=function(e){this.setYear(this.focusedDay.getFullYear()+e)};e.prototype.startOfWeek=function(){this.setFocusedDay(startOfWeek$1(this.focusedDay,this.firstDayOfWeek))};e.prototype.endOfWeek=function(){this.setFocusedDay(endOfWeek$1(this.focusedDay,this.firstDayOfWeek))};e.prototype.setMonth=function(e){var t=setMonth(startOfMonth$1(this.focusedDay),e);var a=endOfMonth$1(t);var n=setMonth(this.focusedDay,e);this.setFocusedDay(clamp$1(n,t,a))};e.prototype.setYear=function(e){var t=setYear(startOfMonth$1(this.focusedDay),e);var a=endOfMonth$1(t);var n=setYear(this.focusedDay,e);this.setFocusedDay(clamp$1(n,t,a))};e.prototype.setFocusedDay=function(e){this.focusedDay=clamp$1(e,parseISODate(this.min),parseISODate(this.max))};e.prototype.setValue=function(e){this.selectedDate=printISODate(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})};e.prototype.connectedCallback=function(){if(this.yearSelectNode)focusVisible.observe(this.yearSelectNode);if(this.monthSelectNode)focusVisible.observe(this.monthSelectNode)};e.prototype.componentWillLoad=function(){this.handleSelectedDateChange()};e.prototype.componentDidLoad=function(){this.connectedCallback()};e.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.yearSelectNode);focusVisible.unobserve(this.monthSelectNode)};e.prototype.render=function(){var e=this;var t=parseISODate(this.selectedDate);var a=(t||this.focusedDay).getFullYear();var n=this.focusedDay.getMonth();var o=this.focusedDay.getFullYear();var i=parseISODate(this.min);var s=parseISODate(this.max);var r=i!=null&&i.getMonth()===n&&i.getFullYear()===o;var d=s!=null&&s.getMonth()===n&&s.getFullYear()===o;var l=a-10;var c=a+10;if(i)l=i.getFullYear();if(s)c=s.getFullYear();return h(Host,{class:Object.assign({},createColorClasses(this.color))},h("div",{class:"duet-date"},h("div",{class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("div",{class:"duet-date__dialog-content"},h("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),h("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},h("div",null,h("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[n]," ",this.focusedDay.getFullYear()),h("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),h("div",{class:"duet-date__select"},h("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:function(t){return e.firstFocusableElement=e.monthSelectNode=t},onChange:this.handleMonthSelect},this.localization.monthNames.map((function(e,t){return h("option",{key:e,value:t,selected:t===n,disabled:!inRange$1(new Date(o,t,1),i?startOfMonth$1(i):null,s?endOfMonth$1(s):null)},e)}))),h("div",{class:"duet-date__select-label","aria-hidden":"true"},h("span",null,this.localization.monthNamesShort[n]),h("nano-icon",{name:"light/chevron-down"}))),h("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),h("div",{class:"duet-date__select"},h("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:function(t){return e.yearSelectNode=t}},range(l,c).map((function(e){return h("option",{key:e,selected:e===o},e)}))),h("div",{class:"duet-date__select-label","aria-hidden":"true"},h("span",null,this.focusedDay.getFullYear()),h("nano-icon",{name:"light/chevron-down"})))),h("div",{class:"duet-date__nav"},h("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:r,type:"button"},h("nano-icon",{name:"light/chevron-left"}),h("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),h("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:d,type:"button"},h("nano-icon",{name:"light/chevron-right"}),h("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),h("div",null,h(DatePickerMonth,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:i,max:s,isDateDisabled:this.isDateDisabled}))))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selectedDate:["handleSelectedDateChange"]}},enumerable:false,configurable:true});return e}();DatePicker.style=datePickerCss;export{DatePicker as nano_date_picker};
+//# sourceMappingURL=nano-date-picker.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-picker/duet-date-picker/date-utils.ts","src/components/date-picker/duet-date-picker/date-picker-day.tsx","src/components/date-picker/duet-date-picker/date-picker-month.tsx","src/components/date-picker/duet-date-picker/date-localization.ts","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"names":["DaysOfWeek","isEqual","a","b","getFullYear","getMonth","getDate","addDays","date","days","d","Date","setDate","startOfWeek","firstDayOfWeek","Monday","day","getDay","diff","endOfWeek","startOfMonth","endOfMonth","inRange","min","max","clamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth","DatePickerDay","_a","focusedDay","today","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","isSelected","isToday","isFocused","isDisabled","isOutsideRange","handleClick","e","h","class","duet-date__day","is-outside","is-disabled","is-today","tabIndex","onClick","onKeyDown","type","aria-pressed","ref","el","aria-hidden","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","localization","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","role","aria-labelledby","onFocusin","dayNames","dayName","scope","substr","week","aria-selected","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","datePickerCss","range","from","to","DatePicker","class_1","hostRef","_this","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","activeFocus","defaultLocalization","isModal","enableActiveFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","ele","firstFocusEle","firstFocusableElement","focus","handled","addYears","handleDaySelect","_event","isAllowed","isInRange","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","prototype","setFocus","forceFocusVisible","clearTimeout","focusTimeoutId","focusVisible","force","monthSelectNode","handleSelectedDateChange","months","years","year","printISODate","nanoDatePicked","emit","valueAsDate","connectedCallback","yearSelectNode","observe","componentWillLoad","componentDidLoad","disconnectedCallback","unobserve","render","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","Host","Object","assign","createColorClasses","color","duet-date__dialog","is-active","onTouchMove","onTouchStart","onTouchEnd","aria-live","id","htmlFor","onChange","selected","name"],"mappings":"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","sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\n\nexport enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}\n\nexport function createDate(year: string, month: string, day: string): Date {\n  var dayInt = parseInt(day, 10);\n  var monthInt = parseInt(month, 10);\n  var yearInt = parseInt(year, 10);\n\n  const isValid =\n    Number.isInteger(yearInt) && // all parts should be integers\n    Number.isInteger(monthInt) &&\n    Number.isInteger(dayInt) &&\n    monthInt > 0 && // month must be 1-12\n    monthInt <= 12 &&\n    dayInt > 0 && // day must be 1-31\n    dayInt <= 31 &&\n    yearInt > 0;\n\n  if (isValid) {\n    return new Date(yearInt, monthInt - 1, dayInt);\n  }\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n */\nexport function parseISODate(value: string): Date {\n  if (!value) {\n    return;\n  }\n\n  const matches = value.match(ISO_DATE_FORMAT);\n\n  if (matches) {\n    return createDate(matches[1], matches[2], matches[3]);\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n */\nexport function printISODate(date: Date): string {\n  if (!date) {\n    return '';\n  }\n\n  var d = date.getDate().toString(10);\n  var m = (date.getMonth() + 1).toString(10);\n  var y = date.getFullYear().toString(10);\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`;\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`;\n  }\n\n  return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) {\n    return false;\n  }\n\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nexport function addDays(date: Date, days: number): Date {\n  var d = new Date(date);\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date);\n  d.setMonth(date.getMonth() + months);\n  return d;\n}\n\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date);\n  d.setFullYear(date.getFullYear() + years);\n  return d;\n}\n\nexport function startOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n  d.setDate(d.getDate() - diff);\n  return d;\n}\n\nexport function endOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date);\n  d.setMonth(month);\n  return d;\n}\n\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date);\n  d.setFullYear(year);\n  return d;\n}\n\n/**\n * Check if date is within a min and max\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return clamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n */\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime();\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min;\n  }\n\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max;\n  }\n\n  return date;\n}\n\n/**\n * given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = [];\n  let current = start;\n\n  while (!isEqual(current, end)) {\n    days.push(current);\n    current = addDays(current, 1);\n  }\n\n  days.push(current);\n\n  return days;\n}\n\n/**\n * given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n */\nexport function getViewOfMonth(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n  return getDaysInRange(start, end);\n}\n\n/**\n * Form random hash\n */\nexport function chr4() {\n  return Math.random().toString(16).slice(-4);\n}\n\n/**\n * Create random identifier with a prefix\n * @param prefix\n */\nexport function createIdentifier(prefix) {\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\n}\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from './date-utils';\n\nexport type DatePickerDayProps = {\n  focusedDay: Date;\n  today: Date;\n  day: Date;\n  inRange: boolean;\n  disabled: boolean;\n  onDaySelect: (event: MouseEvent, day: Date) => void;\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\n  focusedDayRef?: (element: HTMLButtonElement) => void;\n  isSelected;\n};\n\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  inRange,\n  disabled,\n  isSelected,\n}) => {\n  const isToday = isEqual(day, today);\n  const isFocused = isEqual(day, focusedDay);\n  const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;\n  const isOutsideRange = !inRange;\n\n  function handleClick(e) {\n    onDaySelect(e, day);\n  }\n\n  return (\n    <button\n      class={{\n        'duet-date__day': true,\n        'is-outside': isOutsideRange,\n        'is-disabled': isDisabled,\n        'is-today': isToday,\n      }}\n      tabIndex={isFocused ? 0 : -1}\n      onClick={handleClick}\n      onKeyDown={onKeyboardNavigation}\n      disabled={isOutsideRange}\n      type=\"button\"\n      aria-pressed={isSelected ? 'true' : 'false'}\n      ref={(el) => {\n        if (isFocused && el && focusedDayRef) {\n          focusedDayRef(el);\n        }\n      }}\n    >\n      <span aria-hidden=\"true\">{day.getDate()}</span>\n      <span class=\"duet-date__vhidden\">\n        {day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}\n      </span>\n    </button>\n  );\n};\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { DuetLocalizedText } from './date-localization';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from './date-utils';\nimport { DateDisabledPredicate } from '../../../interface';\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n  const result = [];\n\n  for (let i = 0; i < array.length; i += chunkSize) {\n    result.push(array.slice(i, i + chunkSize));\n  }\n\n  return result;\n}\n\nfunction mapWithOffset<T, U>(\n  array: T[],\n  startingOffset: number,\n  mapFn: (item: T) => U\n): U[] {\n  return array.map((_, i) => {\n    const adjustedIndex = (i + startingOffset) % array.length;\n    return mapFn(array[adjustedIndex]);\n  });\n}\n\ntype DatePickerMonthProps = {\n  selectedDate: Date;\n  focusedDate: Date;\n  labelledById: string;\n  localization: DuetLocalizedText;\n  firstDayOfWeek: DaysOfWeek;\n  min?: Date;\n  max?: Date;\n  onDateSelect: DatePickerDayProps['onDaySelect'];\n  onKeyboardNavigation: DatePickerDayProps['onKeyboardNavigation'];\n  focusedDayRef: (element: HTMLButtonElement) => void;\n  onFocusIn?: (e: FocusEvent) => void;\n  onMouseDown?: (e: MouseEvent) => void;\n  isDateDisabled: DateDisabledPredicate;\n};\n\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  onDateSelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  onMouseDown,\n  onFocusIn,\n  isDateDisabled,\n}) => {\n  const today = new Date();\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\n\n  return (\n    <table\n      class=\"duet-date__table\"\n      role=\"grid\"\n      aria-labelledby={labelledById}\n      // @ts-ignore\n      onFocusin={onFocusIn}\n      onMouseDown={onMouseDown}\n    >\n      <thead>\n        <tr>\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\n            <th class=\"duet-date__table-header\" scope=\"col\">\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\n              <span class=\"duet-date__vhidden\">{dayName}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {chunk(days, 7).map((week) => (\n          <tr class=\"duet-date__row\">\n            {week.map((day) => (\n              <td\n                class=\"duet-date__cell\"\n                role=\"gridcell\"\n                aria-selected={isEqual(day, selectedDate) ? 'true' : undefined}\n              >\n                <DatePickerDay\n                  day={day}\n                  today={today}\n                  focusedDay={focusedDate}\n                  inRange={inRange(day, min, max)}\n                  onDaySelect={onDateSelect}\n                  onKeyboardNavigation={onKeyboardNavigation}\n                  focusedDayRef={focusedDayRef}\n                  disabled={isDateDisabled(day)}\n                  isSelected={isEqual(day, selectedDate)}\n                />\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n","type MonthsNames = [\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string\n];\ntype DayNames = [string, string, string, string, string, string, string];\n\nexport type DuetLocalizedText = {\n  buttonLabel: string;\n  placeholder: string;\n  selectedDateMessage: string;\n  prevMonthLabel: string;\n  nextMonthLabel: string;\n  monthSelectLabel: string;\n  yearSelectLabel: string;\n  closeLabel: string;\n  keyboardInstruction: string;\n  calendarHeading: string;\n  dayNames: DayNames;\n  monthNames: MonthsNames;\n  monthNamesShort: MonthsNames;\n};\n\nconst localization: DuetLocalizedText = {\n  buttonLabel: 'Choose date',\n  placeholder: 'YYYY-MM-DD',\n  selectedDateMessage: 'Selected date is',\n  prevMonthLabel: 'Previous month',\n  nextMonthLabel: 'Next month',\n  monthSelectLabel: 'Month',\n  yearSelectLabel: 'Year',\n  closeLabel: 'Close window',\n  keyboardInstruction: 'You can use arrow keys to navigate dates',\n  calendarHeading: 'Choose a date',\n  dayNames: [\n    'Sunday',\n    'Monday',\n    'Tuesday',\n    'Wednesday',\n    'Thursday',\n    'Friday',\n    'Saturday',\n  ],\n  monthNames: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  monthNamesShort: [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n};\n\nexport default localization;\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --background: defaults to #{$layer-bg-color}\n   * @prop --active-color: defaults to var(--nano-color-base, #{nano-color(primary,base)})\n   * @prop --active-text-color: defaults to  var(--nano-color-contrast, #{nano-color(primary, contrast)})\n   * @prop --focus-shadow: defaults to  #{$control-focus-style}\n   * @prop --inactive-color: defaults to #{$button-bg-color}\n   */\n\n  --background: #{$layer-bg-color};\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --focus-shadow: #{$control-focus-style};\n  --inactive-color: #{$button-bg-color};\n\n  display: block;\n  font-size: 16px;\n}\n\n:host(.nano-color) {\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color: #{current-color(contrast)};\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER\n// ---------------------------------------------\n\n.duet-date *,\n.duet-date *::before,\n.duet-date *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.duet-date {\n  box-sizing: border-box;\n  color: currentColor;\n  display: block;\n  margin: 0;\n  position: relative;\n  text-align: left;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  top: 100%;\n  max-width: 100%;\n  width: 100%;\n\n  &.is-left {\n    left: auto;\n    right: 0;\n    width: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-width: 290px;\n  padding: 16px 16px 20px;\n  position: relative;\n  transform: none;\n  max-width: 100%;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ TABLE\n// ---------------------------------------------\n\n.duet-date__table {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: 1em;\n  line-height: 1.25;\n  text-align: center;\n  width: 100%;\n}\n\n.duet-date__table-header {\n  font-size: 0.75em;\n  font-weight: 600;\n  letter-spacing: 1px;\n  line-height: 1.25;\n  padding-bottom: 8px;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n\n.duet-date__cell {\n  text-align: center;\n}\n\n.duet-date__day {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-block;\n  font-size: 0.875em;\n  font-variant-numeric: tabular-nums;\n  line-height: 1.25;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  z-index: 1;\n  transition: 0.15s ease all;\n  height: 2.5em;\n  width: 2.5em;\n\n  &.is-today {\n    box-shadow: 0 0 0 1px var(--active-color);\n    position: relative;\n  }\n\n  &:hover::before,\n  &.is-today::before {\n    content: '';\n    background: var(--active-color);\n    border-radius: 50%;\n    bottom: 0;\n    left: 0;\n    opacity: 0.16;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color);\n    color: var(--active-text-color);\n    box-shadow: none;\n    outline: 0;\n  }\n\n  &:active {\n    background: var(--active-color);\n    box-shadow: var(--focus-shadow);\n    color: var(--active-text-color);\n  }\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &.is-disabled {\n    background: transparent;\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.5;\n\n    &::before {\n      display: none;\n    }\n  }\n\n  &.is-outside {\n    background: var(--inactive-color);\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.6;\n    pointer-events: none;\n\n    &::before {\n      display: none;\n    }\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ HEADER\n// ---------------------------------------------\n\n.duet-date__header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ NAVIGATION\n// ---------------------------------------------\n\n.duet-date__nav {\n  white-space: nowrap;\n}\n\n.duet-date__prev,\n.duet-date__next {\n  background: var(--inactive-color);\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  align-items: center;\n  appearance: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: space-around;\n  margin-left: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  height: 2.2em;\n  width: 2.2em;\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &:active:focus {\n    box-shadow: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  nano-icon {\n    margin: 0 auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-top: 4px;\n  position: relative;\n\n  span {\n    @include margin(null, 4px, null, null);\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 2;\n\n    &.focus-visible:focus + .duet-date__select-label {\n      box-shadow: var(--focus-shadow);\n    }\n  }\n}\n\n.duet-date__select-label {\n  align-items: center;\n  border-radius: 4px;\n  display: flex;\n  font-size: 1.25em;\n  font-weight: 600;\n  line-height: 1.25;\n  padding: 0 4px 0 8px;\n  pointer-events: none;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n\n  nano-icon {\n    font-size: 0.55em;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ VISUALLY HIDDEN\n// ---------------------------------------------\n\n.duet-date__vhidden {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport {\n  addDays,\n  startOfWeek,\n  endOfWeek,\n  setMonth,\n  setYear,\n  clamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  createIdentifier,\n  DaysOfWeek,\n} from '../../utils/date-utils';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport defaultLocalization from './duet-date-picker/date-localization';\n\nimport {\n  PickerChangeEvent,\n  DuetLocalizedText,\n  DateDisabledPredicate,\n  Color,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nfunction range(from: number, to: number) {\n  var result: number[] = [];\n  for (var i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\n/**\n * A highly performant, small and accessible date-picker.\n * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).\n */\n@Component({\n  tag: 'nano-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements ComponentInterface {\n  private monthSelectId = createIdentifier('NanoDateMonth');\n  private yearSelectId = createIdentifier('NanoDateYear');\n  private dialogLabelId = createIdentifier('NanoDateLabel');\n\n  private firstFocusableElement: HTMLElement;\n  private monthSelectNode: HTMLElement;\n  private yearSelectNode: HTMLElement;\n  private focusedDayNode: HTMLButtonElement;\n\n  private focusTimeoutId: ReturnType<typeof setTimeout>;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  @Element() host: HTMLNanoDatePickerElement;\n\n  @State() activeFocus = false;\n  @State() focusedDay = new Date();\n\n  // Public Property API\n\n  /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */\n  @Prop({ mutable: true }) selectedDate: string = '';\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  @Prop() min: string = '';\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  @Prop() max: string = '';\n\n  /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday. */\n  @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\n\n  /** Button labels, day names, month names, etc, used for localization.\n   * Default is English. */\n  @Prop() localization: DuetLocalizedText = defaultLocalization;\n\n  /** The color to use from the application's color palette. */\n  @Prop() color?: Color;\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends. */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  /** Controls whether the picker is a modal or dialog,\n   * popup control and will therefore keep focus within the control */\n  @Prop() isModal: boolean = false;\n\n  /** @internal First focusable element. Relevant for keeping focus within the control */\n  @Prop() firstFocusEle: HTMLElement;\n\n  // Events\n\n  /** Event emitted when a date is selected. */\n  @Event() nanoDatePicked: EventEmitter<PickerChangeEvent>;\n\n  // Public methods API\n\n  /** Focus to the calendar\n   * @param day - focus to the current selected day\n   * @param forceFocusVisible - force visible focus - required if opened via keyboad\n   */\n  @Method()\n  async setFocus(day = false, forceFocusVisible = false) {\n    this.setFocusedDay(parseISODate(this.selectedDate) || new Date());\n\n    if (day) {\n      setTimeout((_) => this.focusedDayNode.focus(), 20);\n      return;\n    }\n    clearTimeout(this.focusTimeoutId);\n    this.focusTimeoutId = setTimeout(() => {\n      if (forceFocusVisible) focusVisible.force(this.monthSelectNode);\n      this.monthSelectNode.focus();\n    }, 20);\n  }\n\n  @Watch('selectedDate')\n  handleSelectedDateChange() {\n    this.setFocus(true);\n  }\n\n  // Local methods.\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true;\n  };\n\n  private disableActiveFocus = () => {\n    this.activeFocus = false;\n  };\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days));\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months);\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years);\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month);\n    const max = endOfMonth(min);\n    const date = setMonth(this.focusedDay, month);\n\n    this.setFocusedDay(clamp(date, min, max));\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year);\n    const max = endOfMonth(min);\n    const date = setYear(this.focusedDay, year);\n\n    this.setFocusedDay(clamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchMove = (event: TouchEvent) => {\n    event.preventDefault();\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    if (isHorizontalSwipe) {\n      this.addMonths(distX < 0 ? 1 : -1);\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(1);\n  };\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(-1);\n  };\n\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\n    // handle tab separately, since it needs to be treated\n    // differently to other keyboard interactions\n    if (event.key === 'Tab' && !event.shiftKey && this.isModal) {\n      event.preventDefault();\n      let ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    var handled = true;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        this.addDays(1);\n        break;\n      case 'ArrowLeft':\n        this.addDays(-1);\n        break;\n      case 'ArrowDown':\n        this.addDays(7);\n        break;\n      case 'ArrowUp':\n        this.addDays(-7);\n        break;\n      case 'PageUp':\n        if (event.shiftKey) {\n          this.addYears(-1);\n        } else {\n          this.addMonths(-1);\n        }\n        break;\n      case 'PageDown':\n        if (event.shiftKey) {\n          this.addYears(1);\n        } else {\n          this.addMonths(1);\n        }\n        break;\n      case 'Home':\n        this.startOfWeek();\n        break;\n      case 'End':\n        this.endOfWeek();\n        break;\n      default:\n        handled = false;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this.enableActiveFocus();\n    }\n  };\n\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\n    const isAllowed = !this.isDateDisabled(day);\n    const isInRange = inRange(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n\n    if (!isInRange || !isAllowed) {\n      return;\n    }\n\n    if (day.getMonth() === this.focusedDay.getMonth()) {\n      this.setValue(day);\n    } else {\n      this.setFocusedDay(day);\n    }\n  };\n\n  private handleMonthSelect = (e) => {\n    this.setMonth(parseInt(e.target.value, 10));\n  };\n\n  private handleYearSelect = (e) => {\n    this.setYear(parseInt(e.target.value, 10));\n  };\n\n  private setValue(date: Date) {\n    this.selectedDate = printISODate(date);\n    this.nanoDatePicked.emit({\n      value: this.selectedDate,\n      valueAsDate: date,\n    });\n  }\n\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\n    this.focusedDayNode = element;\n\n    if (this.activeFocus) {\n      setTimeout(() => element.focus(), 0);\n    }\n  };\n\n  connectedCallback() {\n    if (this.yearSelectNode) focusVisible.observe(this.yearSelectNode);\n    if (this.monthSelectNode) focusVisible.observe(this.monthSelectNode);\n  }\n\n  componentWillLoad() {\n    this.handleSelectedDateChange();\n  }\n\n  componentDidLoad() {\n    this.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.yearSelectNode);\n    focusVisible.unobserve(this.monthSelectNode);\n  }\n\n  render() {\n    const valueAsDate = parseISODate(this.selectedDate);\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();\n    const focusedMonth = this.focusedDay.getMonth();\n    const focusedYear = this.focusedDay.getFullYear();\n\n    const minDate = parseISODate(this.min);\n    const maxDate = parseISODate(this.max);\n    const prevMonthDisabled =\n      minDate != null &&\n      minDate.getMonth() === focusedMonth &&\n      minDate.getFullYear() === focusedYear;\n    const nextMonthDisabled =\n      maxDate != null &&\n      maxDate.getMonth() === focusedMonth &&\n      maxDate.getFullYear() === focusedYear;\n\n    let minYear = selectedYear - 10;\n    let maxYear = selectedYear + 10;\n    if (minDate) minYear = minDate.getFullYear();\n    if (maxDate) maxYear = maxDate.getFullYear();\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"duet-date\">\n          <div\n            class={{\n              'duet-date__dialog': true,\n              'is-active': true,\n            }}\n            onTouchMove={this.handleTouchMove}\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <div class=\"duet-date__dialog-content\">\n              <div\n                class=\"duet-date__vhidden duet-date__instructions\"\n                aria-live=\"polite\"\n              >\n                {this.localization.keyboardInstruction}\n              </div>\n              {/**\n               * With onFocusIn, which is what TS types expect, Stencil ends up listening to a\n               * focusIn event, which is wrong as it needs to be focusin. So we had to use onFocusin\n               * here which is wrong for the TS types, but ends up with the correct event listener\n               * in Stencil. See issue: https://github.com/ionic-team/stencil/issues/2628\n               */}\n              {/* @ts-ignore */}\n              <div\n                class=\"duet-date__header\"\n                onFocusin={this.disableActiveFocus}\n              >\n                <div>\n                  <h2\n                    id={this.dialogLabelId}\n                    class=\"duet-date__vhidden\"\n                    aria-live=\"polite\"\n                  >\n                    {this.localization.monthNames[focusedMonth]}{' '}\n                    {this.focusedDay.getFullYear()}\n                  </h2>\n                  <label\n                    htmlFor={this.monthSelectId}\n                    class=\"duet-date__vhidden\"\n                  >\n                    {this.localization.monthSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.monthSelectId}\n                      class=\"duet-date__select--month\"\n                      ref={(element) =>\n                        (this.firstFocusableElement = this.monthSelectNode =\n                          element)\n                      }\n                      onChange={this.handleMonthSelect}\n                    >\n                      {this.localization.monthNames.map((month, i) => (\n                        <option\n                          key={month}\n                          value={i}\n                          selected={i === focusedMonth}\n                          disabled={\n                            !inRange(\n                              new Date(focusedYear, i, 1),\n                              minDate ? startOfMonth(minDate) : null,\n                              maxDate ? endOfMonth(maxDate) : null\n                            )\n                          }\n                        >\n                          {month}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>\n                        {this.localization.monthNamesShort[focusedMonth]}\n                      </span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n\n                  <label htmlFor={this.yearSelectId} class=\"duet-date__vhidden\">\n                    {this.localization.yearSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.yearSelectId}\n                      class=\"duet-date__select--year\"\n                      onChange={this.handleYearSelect}\n                      ref={(element) => (this.yearSelectNode = element)}\n                    >\n                      {range(minYear, maxYear).map((year) => (\n                        <option key={year} selected={year === focusedYear}>\n                          {year}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>{this.focusedDay.getFullYear()}</span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"duet-date__nav\">\n                  <button\n                    class=\"duet-date__prev\"\n                    onClick={this.handlePreviousMonthClick}\n                    disabled={prevMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-left\"></nano-icon>\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.prevMonthLabel}\n                    </span>\n                  </button>\n                  <button\n                    class=\"duet-date__next\"\n                    onClick={this.handleNextMonthClick}\n                    disabled={nextMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-right\"></nano-icon>\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.nextMonthLabel}\n                    </span>\n                  </button>\n                </div>\n              </div>\n              <div>\n                <DatePickerMonth\n                  selectedDate={valueAsDate}\n                  focusedDate={this.focusedDay}\n                  onDateSelect={this.handleDaySelect}\n                  onKeyboardNavigation={this.handleKeyboardNavigation}\n                  labelledById={this.dialogLabelId}\n                  localization={this.localization}\n                  firstDayOfWeek={this.firstDayOfWeek}\n                  focusedDayRef={this.processFocusedDayNode}\n                  min={minDate}\n                  max={maxDate}\n                  isDateDisabled={this.isDateDisabled}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}