@nanoporetech-digital/components 5.10.0 → 5.11.0

package/dist/nano-components/{p-d4e44f93.entry.js.map → nano-date-input.entry.js.map}

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

package/dist/nano-components/nano-date-picker.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{h as e,r as t,c as a,a as s,g as i}from"./index-9695db0a.js";import{i as n,g as o,b as d,p as l,D as r,d as c,s as h,e as u,f as b,h as p,j as _,k as f,l as v,a as y}from"./date-utils-6b7a6e1f.js";import{f as g}from"./focus-visible-8b2c14da.js";import{c as m}from"./theme-82feb8cf.js";const x={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"]};const k=({focusedDay:t,today:a,day:s,onDaySelect:i,onKeyboardNavigation:o,focusedDayRef:d,inRange:l,disabled:r,isSelected:c})=>{const h=n(s,a);const u=n(s,t);const b=s.getMonth()!==t.getMonth()||r;const p=!l;function _(e){i(e,s)}return e("button",{class:{"duet-date__day":true,"is-outside":p,"is-disabled":b,"is-today":h},tabIndex:u?0:-1,onClick:_,onKeyDown:o,disabled:p,type:"button","aria-pressed":c?"true":"false",ref:e=>{if(u&&e&&d){d(e)}}},e("span",{"aria-hidden":"true"},s.getDate()),e("span",{class:"duet-date__vhidden"},s.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function w(e,t){const a=[];for(let s=0;s<e.length;s+=t){a.push(e.slice(s,s+t))}return a}function D(e,t,a){return e.map(((s,i)=>{const n=(i+t)%e.length;return a(e[n])}))}const z=({selectedDate:t,focusedDate:a,labelledById:s,localization:i,firstDayOfWeek:l,min:r,max:c,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:b,onMouseDown:p,onFocusIn:_,isDateDisabled:f})=>{const v=new Date;const y=o(a,l);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":s,onFocusin:_,onMouseDown:p},e("thead",null,e("tr",null,D(i.dayNames,l,(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t)))))),e("tbody",null,w(y,7).map((s=>e("tr",{class:"duet-date__row"},s.map((s=>e("td",{class:"duet-date__cell",role:"gridcell","aria-selected":n(s,t)?"true":undefined},e(k,{day:s,today:v,focusedDay:a,inRange:d(s,r,c),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:b,disabled:f(s),isSelected:n(s,t)})))))))))};const M=':host{box-sizing:border-box}*,*::before,*::after{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 rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-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;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{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%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;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);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;-webkit-appearance:none;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{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-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size: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);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';function S(e,t){const a=[];for(let s=e;s<=t;s++){a.push(s)}return a}let C=0;const F=class{constructor(e){t(this,e);this.nanoDatePicked=a(this,"nanoDatePicked",7);this.dateId=`nano-datepicker-${C++}`;this.monthSelectId=this.dateId+"-"+"month";this.yearSelectId=this.dateId+"-"+"year";this.dialogLabelId=this.dateId+"-"+"dialog";this.initialTouchX=null;this.initialTouchY=null;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};this.handleTouchMove=e=>{e.preventDefault()};this.handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const s=t.pageY-this.initialTouchY;const i=70;const n=Math.abs(a)>=i&&Math.abs(s)<=i;if(n){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};this.handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};this.handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}let t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const s=d(t,l(this.min),l(this.max));if(!s||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};this.processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}};this.activeFocus=false;this.focusedDay=new Date;this.selectedDate="";this.min="";this.max="";this.firstDayOfWeek=r.Monday;this.localization=x;this.color=undefined;this.isDateDisabled=()=>false;this.isModal=false;this.firstFocusEle=undefined}async setFocus(e=false,t=false){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}addDays(e){this.setFocusedDay(c(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(p(this.focusedDay),e);const a=_(t);const s=b(this.focusedDay,e);this.setFocusedDay(f(s,t,a))}setYear(e){const t=v(p(this.focusedDay),e);const a=_(t);const s=v(this.focusedDay,e);this.setFocusedDay(f(s,t,a))}setFocusedDay(e){this.focusedDay=f(e,l(this.min),l(this.max))}setValue(e){this.selectedDate=y(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const t=l(this.selectedDate);const a=(t||this.focusedDay).getFullYear();const i=this.focusedDay.getMonth();const n=this.focusedDay.getFullYear();const o=l(this.min);const r=l(this.max);const c=o!=null&&o.getMonth()===i&&o.getFullYear()===n;const h=r!=null&&r.getMonth()===i&&r.getFullYear()===n;let u=a-10;let b=a+10;if(o)u=o.getFullYear();if(r)b=r.getFullYear();return e(s,{class:Object.assign({},m(this.color))},e("div",{class:"duet-date"},e("div",{class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{class:"duet-date__dialog-content"},e("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[i]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,a)=>e("option",{key:t,value:a,selected:a===i,disabled:!d(new Date(n,a,1),o?p(o):null,r?_(r):null)},t)))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.localization.monthNamesShort[i]),e("nano-icon",{name:"light/chevron-down"}))),e("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},S(u,b).map((t=>e("option",{key:t,selected:t===n},t)))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("nano-icon",{name:"light/chevron-down"})))),e("div",{class:"duet-date__nav"},e("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:c,type:"button"},e("nano-icon",{name:"light/chevron-left"}),e("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),e("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},e("nano-icon",{name:"light/chevron-right"}),e("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),e("div",null,e(z,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:o,max:r,isDateDisabled:this.isDateDisabled}))))))}get host(){return i(this)}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};F.style=M;export{F as nano_date_picker};
+//# sourceMappingURL=nano-date-picker.entry.js.map

package/dist/nano-components/{p-efd3e121.entry.js.map → nano-date-picker.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["localization","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","dayNames","monthNames","monthNamesShort","DatePickerDay","focusedDay","today","day","onDaySelect","onKeyboardNavigation","focusedDayRef","inRange","disabled","isSelected","isToday","isEqual","isFocused","isDisabled","getMonth","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","type","ref","el","getDate","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","push","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","firstDayOfWeek","min","max","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","Date","days","getViewOfMonth","role","onFocusin","dayName","scope","substr","week","datePickerCss","range","from","to","dateIds","DatePicker","this","dateId","monthSelectId","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","enableActiveFocus","activeFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","isModal","ele","firstFocusEle","firstFocusableElement","focus","handled","addDays","addYears","startOfWeek","endOfWeek","handleDaySelect","_event","isAllowed","isInRange","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","DaysOfWeek","Monday","defaultLocalization","async","forceFocusVisible","clearTimeout","focusTimeoutId","focusVisible","force","monthSelectNode","handleSelectedDateChange","setFocus","months","years","getFullYear","startOfMonth","endOfMonth","date","dateClamp","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","onTouchMove","onTouchStart","onTouchEnd","id","htmlFor","onChange","selected","name"],"sources":["./src/components/date-picker/duet-date-picker/date-localization.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/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["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 { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from '../../../utils/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 {\n  getViewOfMonth,\n  inRange,\n  DaysOfWeek,\n  isEqual,\n} from '../../../utils/date-utils';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport type { DateDisabledPredicate } from '../../../interface';\nimport type { DuetLocalizedText } from './date-localization';\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","@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: start;\n  inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  inset-block-start: 100%;\n  max-inline-size: 100%;\n  inline-size: 100%;\n\n  &.is-left {\n    inset-inline: auto 0;\n    inline-size: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-inline-size: 290px;\n  padding-block: 16px 20px;\n  padding-inline: 16px;\n  position: relative;\n  transform: none;\n  max-inline-size: 100%;\n  inline-size: 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  inline-size: 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-block-end: 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  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  block-size: 2.5em;\n  inline-size: 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    opacity: 0.16;\n    position: absolute;\n    inset: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color) !important;\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-block-end: 16px;\n  inline-size: 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  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-inline-start: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  block-size: 2.2em;\n  inline-size: 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-block: 0;\n    margin-inline: auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-block-start: 4px;\n  position: relative;\n\n  span {\n    margin-inline-end: 4px;\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    block-size: 100%;\n    inset-inline-start: 0;\n    opacity: 0;\n    position: absolute;\n    inset-block-start: 0;\n    inline-size: 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-block: 0;\n  padding-inline: 8px 4px;\n  pointer-events: none;\n  position: relative;\n  inline-size: 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  block-size: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 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  dateClamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  DaysOfWeek,\n} from '../../utils/date-utils';\n\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport defaultLocalization from './duet-date-picker/date-localization';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport type {\n  PickerChangeEvent,\n  DuetLocalizedText,\n  DateDisabledPredicate,\n  Color,\n} from '../../interface';\n\nfunction range(from: number, to: number) {\n  const result: number[] = [];\n  for (let i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\nlet dateIds = 0;\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 dateId = `nano-datepicker-${dateIds++}`;\n  private monthSelectId = this.dateId + '-' + 'month';\n  private yearSelectId = this.dateId + '-' + 'year';\n  private dialogLabelId = this.dateId + '-' + 'dialog';\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  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled\n   */\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(dateClamp(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(dateClamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = dateClamp(\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      const ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    let 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"],"mappings":"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"}
+{"version":3,"names":["localization","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","dayNames","monthNames","monthNamesShort","DatePickerDay","focusedDay","today","day","onDaySelect","onKeyboardNavigation","focusedDayRef","inRange","disabled","isSelected","isToday","isEqual","isFocused","isDisabled","getMonth","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","type","ref","el","getDate","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","push","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","firstDayOfWeek","min","max","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","Date","days","getViewOfMonth","role","onFocusin","dayName","scope","substr","week","datePickerCss","range","from","to","dateIds","DatePicker","this","dateId","monthSelectId","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","enableActiveFocus","activeFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","isModal","ele","firstFocusEle","firstFocusableElement","focus","handled","addDays","addYears","startOfWeek","endOfWeek","handleDaySelect","_event","isAllowed","isInRange","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","DaysOfWeek","Monday","defaultLocalization","async","forceFocusVisible","clearTimeout","focusTimeoutId","focusVisible","force","monthSelectNode","handleSelectedDateChange","setFocus","months","years","getFullYear","startOfMonth","endOfMonth","date","dateClamp","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","onTouchMove","onTouchStart","onTouchEnd","id","htmlFor","onChange","selected","name"],"sources":["./src/components/date-picker/duet-date-picker/date-localization.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/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["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 { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from '../../../utils/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 {\n  getViewOfMonth,\n  inRange,\n  DaysOfWeek,\n  isEqual,\n} from '../../../utils/date-utils';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport type { DateDisabledPredicate } from '../../../interface';\nimport type { DuetLocalizedText } from './date-localization';\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","@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: start;\n  inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  inset-block-start: 100%;\n  max-inline-size: 100%;\n  inline-size: 100%;\n\n  &.is-left {\n    inset-inline: auto 0;\n    inline-size: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-inline-size: 290px;\n  padding-block: 16px 20px;\n  padding-inline: 16px;\n  position: relative;\n  transform: none;\n  max-inline-size: 100%;\n  inline-size: 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  inline-size: 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-block-end: 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  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  block-size: 2.5em;\n  inline-size: 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    opacity: 0.16;\n    position: absolute;\n    inset: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color) !important;\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-block-end: 16px;\n  inline-size: 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  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-inline-start: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  block-size: 2.2em;\n  inline-size: 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-block: 0;\n    margin-inline: auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-block-start: 4px;\n  position: relative;\n\n  span {\n    margin-inline-end: 4px;\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    block-size: 100%;\n    inset-inline-start: 0;\n    opacity: 0;\n    position: absolute;\n    inset-block-start: 0;\n    inline-size: 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-block: 0;\n  padding-inline: 8px 4px;\n  pointer-events: none;\n  position: relative;\n  inline-size: 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  block-size: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  inset-block-start: 0;\n  inline-size: 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  dateClamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  DaysOfWeek,\n} from '../../utils/date-utils';\n\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport defaultLocalization from './duet-date-picker/date-localization';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport type {\n  PickerChangeEvent,\n  DuetLocalizedText,\n  DateDisabledPredicate,\n  Color,\n} from '../../interface';\n\nfunction range(from: number, to: number) {\n  const result: number[] = [];\n  for (let i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\nlet dateIds = 0;\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 dateId = `nano-datepicker-${dateIds++}`;\n  private monthSelectId = this.dateId + '-' + 'month';\n  private yearSelectId = this.dateId + '-' + 'year';\n  private dialogLabelId = this.dateId + '-' + 'dialog';\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  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   * @returns `false` for not disabled and `true` for disabled\n   */\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(dateClamp(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(dateClamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = dateClamp(\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      const ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    let 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"],"mappings":"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"}

package/dist/nano-components/nano-demo.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as e,h as t,F as n,a as l}from"./index-9695db0a.js";function a(e){if(!e)return"";return e.charAt(0).toUpperCase()+e.slice(1)}function r(e){if(!e)return undefined;return new Date(e).toLocaleDateString(undefined,{year:"numeric",month:"short",day:"numeric"})}function o(e=0,t="USD"){t=(t===null||t===void 0?void 0:t.toLocaleUpperCase())||"USD";return new Intl.NumberFormat("en-US",{style:"currency",currency:t}).format(e)}const i=class{constructor(t){e(this,t);this.order={checks:[{name:"Compliance",external_id:"CO",status:"complete",account_info:{name:"Jeongmin Song",email:"js2957@cornell.edu",address_line_1:"930 Campus Road",address_line_2:"Veterinary Medical Center C4 109",address_postcode:"14853",address_city:"Ithaca",address_region:"New York",address_country:"US"},individual_name_compliance_information:{table:{names:[],addresses:[],match:false,false_positive:null}},organization_compliance_information:{table:{names:[],addresses:[],match:false,false_positive:null}},checks:[{label:"Compliance check",external_id:"compliance_check",item_type:"pass/fail/escalate",answer:"pass"}],further_information:[],attachments:[],notes:[]}],orderId:"00886434",createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T16:02:29",status:"Processing",subStatus:null,currency:"USD",customerPaymentMethod:"CC-USD",paymentPlatform:"Shop",dataAreaId:"OXUS",defaultShippingWarehouse:null,deliveryContact:"Jeongmin Song",deliveryMode:null,deliveryName:"Cornell University",deliveryTerms:null,invoiceAccountNumber:"C038330",orderAccountNumber:"C038330",orderAccountName:"Cornell University",originalLeadTime:null,salesDate:"2022-12-09T15:57:50",salesName:"Cornell University",salesOrigin:"Shop",salesOriginName:"Main USD Store View",customerReference:"",purchaseOrder:null,additionalDocuments:[],total:860,shippingAmount:50,taxAmount:0,projectId:null,deliveryPhoneNumber:"+16072533722",invoicePhoneNumber:"+16072533722",quoteNumber:null,customerType:"N/A",invoiceAccountEmail:"js2957@cornell.edu",partnerReference:null,sentToD365:false,sentToD365Status:"unsent",orderAccountEmail:"js2957@cornell.edu",controllingAccountNumber:"C038330",controllingAccountEmail:"js2957@cornell.edu",deliveryAddress:{street:["930 Campus Road, Veterinary Medical Center C4 109"],city:"Ithaca",postcode:"14853",region:"New York",regionCode:"NY",countryCode:"US"},invoiceAddress:{street:["930 Campus Road, Veterinary Medical Center C4 109"],city:"Ithaca",postcode:"14853",region:"New York",regionCode:"NY",countryCode:"US"},shopOrderLines:[{name:"Flongle Flow Cell (R9.4.1)",sku:"FLO-FLG001",quantity:1,price:810,total:810,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"FLO-FLG001",productType:"bundle",salesTag:"FLGExpSP",requestedShippingDate:null,discount:0,discountPercentage:0,get finalSku(){return this.maskSku||this.sku},includedItems:[{name:"Flongle Flow Cell (R9.4.1)",sku:"FLO-FLG001D",quantity:12,price:66,total:792,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"FLO-FLG001",productType:"simple",salesTag:"FLGExpSP",requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0},{name:"Flongle Flow Cell Priming Kit",sku:"EXP-FSE001",quantity:1,price:18,total:18,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"",productType:"simple",salesTag:"FLGExpSP",requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0}]},{name:"Carriage - Device shipment",sku:"FREIGHT",quantity:1,price:50,total:50,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"",productType:"virtual",salesTag:null,requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0,get finalSku(){return this.maskSku||this.sku}}],orderLines:[],pickedItems:[],packedItems:[],trackingNumbers:[],trackingUpdates:[],ecoOrder:false,revenueOrder:false};this.columns=[{title:"Name",prop:"name",pinned:"start",rowHeader:true,autoTooltip:true},{title:"Status",prop:"sku",cellTemplate:(e,t)=>a(t.cellModel||this.order.status)},{title:"SKU",prop:"finalSku"},{title:"Sales tag",prop:"salesTag",cellTemplate:(e,t)=>t.cellModel||"None"},{title:"Requested ship date",prop:"requestedShippingDate",cellTemplate:(e,t)=>r(t.cellModel)||"N/A"},{title:"Quantity",prop:"quantity"},{title:"Unit price",prop:"price",cellTemplate:(e,t)=>o(t.cellModel,this.order.currency)},{title:"Discount %",prop:"discountPercentage",cellTemplate:(e,t)=>t.cellModel||0},{title:"Line value",prop:"total",cellTemplate:(e,t)=>o(t.cellModel,this.order.currency)}]}lineItemTotal(e){var t;if(!e||!((t=e.shopOrderLines)===null||t===void 0?void 0:t.length))return;let n=0;e.shopOrderLines.forEach((e=>{if(e.status!=="cancelled")n+=e.total}));return n}render(){return t(l,null,t("nano-table",{rowRender:{template:(e,l,o)=>{var i,s;return[l.renderedRow,((i=l.rowModel.includedItems)===null||i===void 0?void 0:i.length)?(s=l.rowModel.includedItems)===null||s===void 0?void 0:s.map((e=>t("tr",{class:"child-row"},t(o,{header:true},e.name),t(o,null,a(l.rowModel.status||this.order.status)),t(o,null,a(e.sku)),t(o,null,a(e.salesTag)),t(o,null,r(e.requestedShippingDate))))):t(n,null)].flat(1)}},columns:this.columns,rows:this.order.shopOrderLines,caption:`List of order line items found within order ${this.order.orderId}`,showFooter:true,footRender:{pinned:"bottom",template:()=>[t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Sub total:"),t("span",{class:"order-lines__total--num"},o(this.lineItemTotal(this.order),this.order.currency))))),t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Total order tax:"),t("span",{class:"order-lines__total--num"},o(this.order.taxAmount,this.order.currency))))),t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Total on order placement:"),t("span",{class:"order-lines__total--num"},o(this.order.total,this.order.currency)))))]}}))}};i.style=":host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }";export{i as nano_demo};
+//# sourceMappingURL=nano-demo.entry.js.map

package/dist/nano-components/{p-e98835e2.entry.js.map → nano-demo.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["capitalise","value","charAt","toUpperCase","slice","mediumDate","date","undefined","Date","toLocaleDateString","year","month","day","currency","amount","currencyCode","toLocaleUpperCase","Intl","NumberFormat","style","format","Demo","constructor","hostRef","this","order","checks","name","external_id","status","account_info","email","address_line_1","address_line_2","address_postcode","address_city","address_region","address_country","individual_name_compliance_information","table","names","addresses","match","false_positive","organization_compliance_information","label","item_type","answer","further_information","attachments","notes","orderId","createdAt","updatedAt","subStatus","customerPaymentMethod","paymentPlatform","dataAreaId","defaultShippingWarehouse","deliveryContact","deliveryMode","deliveryName","deliveryTerms","invoiceAccountNumber","orderAccountNumber","orderAccountName","originalLeadTime","salesDate","salesName","salesOrigin","salesOriginName","customerReference","purchaseOrder","additionalDocuments","total","shippingAmount","taxAmount","projectId","deliveryPhoneNumber","invoicePhoneNumber","quoteNumber","customerType","invoiceAccountEmail","partnerReference","sentToD365","sentToD365Status","orderAccountEmail","controllingAccountNumber","controllingAccountEmail","deliveryAddress","street","city","postcode","region","regionCode","countryCode","invoiceAddress","shopOrderLines","sku","quantity","price","maskSku","productType","salesTag","requestedShippingDate","discount","discountPercentage","finalSku","includedItems","orderLines","pickedItems","packedItems","trackingNumbers","trackingUpdates","ecoOrder","revenueOrder","columns","title","prop","pinned","rowHeader","autoTooltip","cellTemplate","_","c","cellModel","lineItemTotal","_a","length","forEach","itm","render","h","Host","rowRender","template","TableCell","renderedRow","rowModel","_b","map","item","class","header","Fragment","flat","rows","caption","showFooter","footRender","colSpan","scope"],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Fragment,\n  h,\n  Host,\n} from '@stencil/core';\nimport { TableTypes } from '../table/table-interface';\n\ndeclare module namespace {\n  export interface AccountInfo {\n    name: string;\n    email: string;\n    address_line_1: string;\n    address_line_2: string;\n    address_postcode: string;\n    address_city: string;\n    address_region: string;\n    address_country: string;\n  }\n\n  export interface Table {\n    names: any[];\n    addresses: any[];\n    match: boolean;\n    false_positive?: any;\n  }\n\n  export interface IndividualNameComplianceInformation {\n    table: Table;\n  }\n\n  export interface Table2 {\n    names: any[];\n    addresses: any[];\n    match: boolean;\n    false_positive?: any;\n  }\n\n  export interface OrganizationComplianceInformation {\n    table: Table2;\n  }\n\n  export interface Check2 {\n    label: string;\n    external_id: string;\n    item_type: string;\n    answer: string;\n  }\n\n  export interface Check {\n    name: string;\n    external_id: string;\n    status: string;\n    account_info: AccountInfo;\n    individual_name_compliance_information: IndividualNameComplianceInformation;\n    organization_compliance_information: OrganizationComplianceInformation;\n    checks: Check2[];\n    further_information: any[];\n    attachments: any[];\n    notes: any[];\n  }\n\n  export interface DeliveryAddress {\n    street: string[];\n    city: string;\n    postcode: string;\n    region: string;\n    regionCode: string;\n    countryCode: string;\n  }\n\n  export interface InvoiceAddress {\n    street: string[];\n    city: string;\n    postcode: string;\n    region: string;\n    regionCode: string;\n    countryCode: string;\n  }\n\n  export interface IncludedItem {\n    name: string;\n    sku: string;\n    quantity: number;\n    price: number;\n    total: number;\n    createdAt: string;\n    updatedAt: string;\n    maskSku: string;\n    productType: string;\n    salesTag: string;\n    requestedShippingDate: string;\n    discount: number;\n    discountPercentage: number;\n  }\n\n  export interface ShopOrderLine {\n    name: string;\n    sku: string;\n    quantity: number;\n    price: number;\n    total: number;\n    createdAt: string;\n    updatedAt: string;\n    maskSku: string;\n    productType: string;\n    salesTag: string;\n    requestedShippingDate?: string;\n    discount: number;\n    discountPercentage: number;\n    includedItems?: IncludedItem[];\n    finalSku: string;\n  }\n\n  export interface RootObject {\n    checks: Check[];\n    orderId: string;\n    createdAt: string;\n    updatedAt: string;\n    status: string;\n    subStatus?: any;\n    currency: string;\n    customerPaymentMethod: string;\n    paymentPlatform: string;\n    dataAreaId: string;\n    defaultShippingWarehouse?: any;\n    deliveryContact: string;\n    deliveryMode?: any;\n    deliveryName: string;\n    deliveryTerms?: any;\n    invoiceAccountNumber: string;\n    orderAccountNumber: string;\n    orderAccountName: string;\n    originalLeadTime?: any;\n    salesDate: string;\n    salesName: string;\n    salesOrigin: string;\n    salesOriginName: string;\n    customerReference: string;\n    purchaseOrder?: any;\n    additionalDocuments: any[];\n    total: number;\n    shippingAmount: number;\n    taxAmount: number;\n    projectId?: any;\n    deliveryPhoneNumber: string;\n    invoicePhoneNumber: string;\n    quoteNumber?: any;\n    customerType: string;\n    invoiceAccountEmail: string;\n    partnerReference?: any;\n    sentToD365: boolean;\n    sentToD365Status: string;\n    orderAccountEmail: string;\n    controllingAccountNumber: string;\n    controllingAccountEmail: string;\n    deliveryAddress: DeliveryAddress;\n    invoiceAddress: InvoiceAddress;\n    shopOrderLines: ShopOrderLine[];\n    orderLines: any[];\n    pickedItems: any[];\n    packedItems: any[];\n    trackingNumbers: any[];\n    trackingUpdates: any[];\n    ecoOrder: boolean;\n    revenueOrder: boolean;\n  }\n}\n\nfunction capitalise(value: string) {\n  if (!value) return '';\n  return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n  if (!date) return undefined;\n  return new Date(date).toLocaleDateString(undefined, {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currencyCode,\n  }).format(amount);\n}\n\n@Component({\n  tag: 'nano-demo',\n  shadow: true,\n  styles: /* css */ `\n    :host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }\n  `,\n})\nexport class Demo implements ComponentInterface {\n  private order: namespace.RootObject = {\n    checks: [\n      {\n        name: 'Compliance',\n        external_id: 'CO',\n        status: 'complete',\n        account_info: {\n          name: 'Jeongmin Song',\n          email: 'js2957@cornell.edu',\n          address_line_1: '930 Campus Road',\n          address_line_2: 'Veterinary Medical Center C4 109',\n          address_postcode: '14853',\n          address_city: 'Ithaca',\n          address_region: 'New York',\n          address_country: 'US',\n        },\n        individual_name_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        organization_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        checks: [\n          {\n            label: 'Compliance check',\n            external_id: 'compliance_check',\n            item_type: 'pass/fail/escalate',\n            answer: 'pass',\n          },\n        ],\n        further_information: [],\n        attachments: [],\n        notes: [],\n      },\n    ],\n    orderId: '00886434',\n    createdAt: '2022-12-09T15:57:50',\n    updatedAt: '2022-12-09T16:02:29',\n    status: 'Processing',\n    subStatus: null,\n    currency: 'USD',\n    customerPaymentMethod: 'CC-USD',\n    paymentPlatform: 'Shop',\n    dataAreaId: 'OXUS',\n    defaultShippingWarehouse: null,\n    deliveryContact: 'Jeongmin Song',\n    deliveryMode: null,\n    deliveryName: 'Cornell University',\n    deliveryTerms: null,\n    invoiceAccountNumber: 'C038330',\n    orderAccountNumber: 'C038330',\n    orderAccountName: 'Cornell University',\n    originalLeadTime: null,\n    salesDate: '2022-12-09T15:57:50',\n    salesName: 'Cornell University',\n    salesOrigin: 'Shop',\n    salesOriginName: 'Main USD Store View',\n    customerReference: '',\n    purchaseOrder: null,\n    additionalDocuments: [],\n    total: 860,\n    shippingAmount: 50,\n    taxAmount: 0,\n    projectId: null,\n    deliveryPhoneNumber: '+16072533722',\n    invoicePhoneNumber: '+16072533722',\n    quoteNumber: null,\n    customerType: 'N/A',\n    invoiceAccountEmail: 'js2957@cornell.edu',\n    partnerReference: null,\n    sentToD365: false,\n    sentToD365Status: 'unsent',\n    orderAccountEmail: 'js2957@cornell.edu',\n    controllingAccountNumber: 'C038330',\n    controllingAccountEmail: 'js2957@cornell.edu',\n    deliveryAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    invoiceAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    shopOrderLines: [\n      {\n        name: 'Flongle Flow Cell (R9.4.1)',\n        sku: 'FLO-FLG001',\n        quantity: 1,\n        price: 810,\n        total: 810,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: 'FLO-FLG001',\n        productType: 'bundle',\n        salesTag: 'FLGExpSP',\n        requestedShippingDate: null,\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n        includedItems: [\n          {\n            name: 'Flongle Flow Cell (R9.4.1)',\n            sku: 'FLO-FLG001D',\n            quantity: 12,\n            price: 66,\n            total: 792,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: 'FLO-FLG001',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n          {\n            name: 'Flongle Flow Cell Priming Kit',\n            sku: 'EXP-FSE001',\n            quantity: 1,\n            price: 18,\n            total: 18,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: '',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n        ],\n      },\n      {\n        name: 'Carriage - Device shipment',\n        sku: 'FREIGHT',\n        quantity: 1,\n        price: 50,\n        total: 50,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: '',\n        productType: 'virtual',\n        salesTag: null,\n        requestedShippingDate: '2022-12-27T00:00:00',\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n      },\n    ],\n    orderLines: [],\n    pickedItems: [],\n    packedItems: [],\n    trackingNumbers: [],\n    trackingUpdates: [],\n    ecoOrder: false,\n    revenueOrder: false,\n  };\n\n  private lineItemTotal(order) {\n    if (!order || !order.shopOrderLines?.length) return;\n    let total = 0;\n    order.shopOrderLines.forEach((itm) => {\n      if (itm.status !== 'cancelled') total += itm.total;\n    });\n    return total;\n  }\n\n  private columns: TableTypes.NanoTable<namespace.ShopOrderLine>['columns'] = [\n    {\n      title: 'Name',\n      prop: 'name',\n      pinned: 'start',\n      rowHeader: true,\n      autoTooltip: true,\n    },\n    {\n      title: 'Status',\n      prop: 'sku',\n      cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),\n    },\n    {\n      title: 'SKU',\n      prop: 'finalSku',\n    },\n    {\n      title: 'Sales tag',\n      prop: 'salesTag',\n      cellTemplate: (_, c) => c.cellModel || 'None',\n    },\n    {\n      title: 'Requested ship date',\n      prop: 'requestedShippingDate',\n      cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n    },\n    {\n      title: 'Quantity',\n      prop: 'quantity',\n    },\n    {\n      title: 'Unit price',\n      prop: 'price',\n      cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n    },\n    {\n      title: 'Discount %',\n      prop: 'discountPercentage',\n      cellTemplate: (_, c) => c.cellModel || 0,\n    },\n    {\n      title: 'Line value',\n      prop: 'total',\n      cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n    },\n  ];\n\n  render() {\n    return (\n      <Host>\n        <nano-table\n          rowRender={{\n            template: (_, c, TableCell) =>\n              [\n                c.renderedRow,\n                c.rowModel.includedItems?.length ? (\n                  c.rowModel.includedItems?.map((item) => {\n                    return (\n                      <tr class=\"child-row\">\n                        <TableCell header={true}>{item.name}</TableCell>\n                        <TableCell>\n                          {capitalise(c.rowModel.status || this.order.status)}\n                        </TableCell>\n                        <TableCell>{capitalise(item.sku)}</TableCell>\n                        <TableCell>{capitalise(item.salesTag)}</TableCell>\n                        <TableCell>\n                          {mediumDate(item.requestedShippingDate)}\n                        </TableCell>\n                      </tr>\n                    );\n                  })\n                ) : (\n                  <Fragment />\n                ),\n              ].flat(1),\n          }}\n          columns={this.columns}\n          rows={this.order.shopOrderLines}\n          caption={`List of order line items found within order ${this.order.orderId}`}\n          showFooter={true}\n          footRender={{\n            pinned: 'bottom',\n            template: () => [\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">Sub total:</span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(\n                        this.lineItemTotal(this.order),\n                        this.order.currency\n                      )}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total order tax:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.taxAmount, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total on order placement:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.total, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n            ],\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["capitalise","value","charAt","toUpperCase","slice","mediumDate","date","undefined","Date","toLocaleDateString","year","month","day","currency","amount","currencyCode","toLocaleUpperCase","Intl","NumberFormat","style","format","Demo","constructor","hostRef","this","order","checks","name","external_id","status","account_info","email","address_line_1","address_line_2","address_postcode","address_city","address_region","address_country","individual_name_compliance_information","table","names","addresses","match","false_positive","organization_compliance_information","label","item_type","answer","further_information","attachments","notes","orderId","createdAt","updatedAt","subStatus","customerPaymentMethod","paymentPlatform","dataAreaId","defaultShippingWarehouse","deliveryContact","deliveryMode","deliveryName","deliveryTerms","invoiceAccountNumber","orderAccountNumber","orderAccountName","originalLeadTime","salesDate","salesName","salesOrigin","salesOriginName","customerReference","purchaseOrder","additionalDocuments","total","shippingAmount","taxAmount","projectId","deliveryPhoneNumber","invoicePhoneNumber","quoteNumber","customerType","invoiceAccountEmail","partnerReference","sentToD365","sentToD365Status","orderAccountEmail","controllingAccountNumber","controllingAccountEmail","deliveryAddress","street","city","postcode","region","regionCode","countryCode","invoiceAddress","shopOrderLines","sku","quantity","price","maskSku","productType","salesTag","requestedShippingDate","discount","discountPercentage","finalSku","includedItems","orderLines","pickedItems","packedItems","trackingNumbers","trackingUpdates","ecoOrder","revenueOrder","columns","title","prop","pinned","rowHeader","autoTooltip","cellTemplate","_","c","cellModel","lineItemTotal","_a","length","forEach","itm","render","h","Host","rowRender","template","TableCell","renderedRow","rowModel","_b","map","item","class","header","Fragment","flat","rows","caption","showFooter","footRender","colSpan","scope"],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Fragment,\n  h,\n  Host,\n} from '@stencil/core';\nimport { TableTypes } from '../table/table-interface';\n\ndeclare module namespace {\n  export interface AccountInfo {\n    name: string;\n    email: string;\n    address_line_1: string;\n    address_line_2: string;\n    address_postcode: string;\n    address_city: string;\n    address_region: string;\n    address_country: string;\n  }\n\n  export interface Table {\n    names: any[];\n    addresses: any[];\n    match: boolean;\n    false_positive?: any;\n  }\n\n  export interface IndividualNameComplianceInformation {\n    table: Table;\n  }\n\n  export interface Table2 {\n    names: any[];\n    addresses: any[];\n    match: boolean;\n    false_positive?: any;\n  }\n\n  export interface OrganizationComplianceInformation {\n    table: Table2;\n  }\n\n  export interface Check2 {\n    label: string;\n    external_id: string;\n    item_type: string;\n    answer: string;\n  }\n\n  export interface Check {\n    name: string;\n    external_id: string;\n    status: string;\n    account_info: AccountInfo;\n    individual_name_compliance_information: IndividualNameComplianceInformation;\n    organization_compliance_information: OrganizationComplianceInformation;\n    checks: Check2[];\n    further_information: any[];\n    attachments: any[];\n    notes: any[];\n  }\n\n  export interface DeliveryAddress {\n    street: string[];\n    city: string;\n    postcode: string;\n    region: string;\n    regionCode: string;\n    countryCode: string;\n  }\n\n  export interface InvoiceAddress {\n    street: string[];\n    city: string;\n    postcode: string;\n    region: string;\n    regionCode: string;\n    countryCode: string;\n  }\n\n  export interface IncludedItem {\n    name: string;\n    sku: string;\n    quantity: number;\n    price: number;\n    total: number;\n    createdAt: string;\n    updatedAt: string;\n    maskSku: string;\n    productType: string;\n    salesTag: string;\n    requestedShippingDate: string;\n    discount: number;\n    discountPercentage: number;\n  }\n\n  export interface ShopOrderLine {\n    name: string;\n    sku: string;\n    quantity: number;\n    price: number;\n    total: number;\n    createdAt: string;\n    updatedAt: string;\n    maskSku: string;\n    productType: string;\n    salesTag: string;\n    requestedShippingDate?: string;\n    discount: number;\n    discountPercentage: number;\n    includedItems?: IncludedItem[];\n    finalSku: string;\n  }\n\n  export interface RootObject {\n    checks: Check[];\n    orderId: string;\n    createdAt: string;\n    updatedAt: string;\n    status: string;\n    subStatus?: any;\n    currency: string;\n    customerPaymentMethod: string;\n    paymentPlatform: string;\n    dataAreaId: string;\n    defaultShippingWarehouse?: any;\n    deliveryContact: string;\n    deliveryMode?: any;\n    deliveryName: string;\n    deliveryTerms?: any;\n    invoiceAccountNumber: string;\n    orderAccountNumber: string;\n    orderAccountName: string;\n    originalLeadTime?: any;\n    salesDate: string;\n    salesName: string;\n    salesOrigin: string;\n    salesOriginName: string;\n    customerReference: string;\n    purchaseOrder?: any;\n    additionalDocuments: any[];\n    total: number;\n    shippingAmount: number;\n    taxAmount: number;\n    projectId?: any;\n    deliveryPhoneNumber: string;\n    invoicePhoneNumber: string;\n    quoteNumber?: any;\n    customerType: string;\n    invoiceAccountEmail: string;\n    partnerReference?: any;\n    sentToD365: boolean;\n    sentToD365Status: string;\n    orderAccountEmail: string;\n    controllingAccountNumber: string;\n    controllingAccountEmail: string;\n    deliveryAddress: DeliveryAddress;\n    invoiceAddress: InvoiceAddress;\n    shopOrderLines: ShopOrderLine[];\n    orderLines: any[];\n    pickedItems: any[];\n    packedItems: any[];\n    trackingNumbers: any[];\n    trackingUpdates: any[];\n    ecoOrder: boolean;\n    revenueOrder: boolean;\n  }\n}\n\nfunction capitalise(value: string) {\n  if (!value) return '';\n  return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n  if (!date) return undefined;\n  return new Date(date).toLocaleDateString(undefined, {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n  currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currencyCode,\n  }).format(amount);\n}\n\n@Component({\n  tag: 'nano-demo',\n  shadow: true,\n  styles: /* css */ `\n    :host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }\n  `,\n})\nexport class Demo implements ComponentInterface {\n  private order: namespace.RootObject = {\n    checks: [\n      {\n        name: 'Compliance',\n        external_id: 'CO',\n        status: 'complete',\n        account_info: {\n          name: 'Jeongmin Song',\n          email: 'js2957@cornell.edu',\n          address_line_1: '930 Campus Road',\n          address_line_2: 'Veterinary Medical Center C4 109',\n          address_postcode: '14853',\n          address_city: 'Ithaca',\n          address_region: 'New York',\n          address_country: 'US',\n        },\n        individual_name_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        organization_compliance_information: {\n          table: {\n            names: [],\n            addresses: [],\n            match: false,\n            false_positive: null,\n          },\n        },\n        checks: [\n          {\n            label: 'Compliance check',\n            external_id: 'compliance_check',\n            item_type: 'pass/fail/escalate',\n            answer: 'pass',\n          },\n        ],\n        further_information: [],\n        attachments: [],\n        notes: [],\n      },\n    ],\n    orderId: '00886434',\n    createdAt: '2022-12-09T15:57:50',\n    updatedAt: '2022-12-09T16:02:29',\n    status: 'Processing',\n    subStatus: null,\n    currency: 'USD',\n    customerPaymentMethod: 'CC-USD',\n    paymentPlatform: 'Shop',\n    dataAreaId: 'OXUS',\n    defaultShippingWarehouse: null,\n    deliveryContact: 'Jeongmin Song',\n    deliveryMode: null,\n    deliveryName: 'Cornell University',\n    deliveryTerms: null,\n    invoiceAccountNumber: 'C038330',\n    orderAccountNumber: 'C038330',\n    orderAccountName: 'Cornell University',\n    originalLeadTime: null,\n    salesDate: '2022-12-09T15:57:50',\n    salesName: 'Cornell University',\n    salesOrigin: 'Shop',\n    salesOriginName: 'Main USD Store View',\n    customerReference: '',\n    purchaseOrder: null,\n    additionalDocuments: [],\n    total: 860,\n    shippingAmount: 50,\n    taxAmount: 0,\n    projectId: null,\n    deliveryPhoneNumber: '+16072533722',\n    invoicePhoneNumber: '+16072533722',\n    quoteNumber: null,\n    customerType: 'N/A',\n    invoiceAccountEmail: 'js2957@cornell.edu',\n    partnerReference: null,\n    sentToD365: false,\n    sentToD365Status: 'unsent',\n    orderAccountEmail: 'js2957@cornell.edu',\n    controllingAccountNumber: 'C038330',\n    controllingAccountEmail: 'js2957@cornell.edu',\n    deliveryAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    invoiceAddress: {\n      street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n      city: 'Ithaca',\n      postcode: '14853',\n      region: 'New York',\n      regionCode: 'NY',\n      countryCode: 'US',\n    },\n    shopOrderLines: [\n      {\n        name: 'Flongle Flow Cell (R9.4.1)',\n        sku: 'FLO-FLG001',\n        quantity: 1,\n        price: 810,\n        total: 810,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: 'FLO-FLG001',\n        productType: 'bundle',\n        salesTag: 'FLGExpSP',\n        requestedShippingDate: null,\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n        includedItems: [\n          {\n            name: 'Flongle Flow Cell (R9.4.1)',\n            sku: 'FLO-FLG001D',\n            quantity: 12,\n            price: 66,\n            total: 792,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: 'FLO-FLG001',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n          {\n            name: 'Flongle Flow Cell Priming Kit',\n            sku: 'EXP-FSE001',\n            quantity: 1,\n            price: 18,\n            total: 18,\n            createdAt: '2022-12-09T15:57:50',\n            updatedAt: '2022-12-09T15:57:50',\n            maskSku: '',\n            productType: 'simple',\n            salesTag: 'FLGExpSP',\n            requestedShippingDate: '2022-12-27T00:00:00',\n            discount: 0,\n            discountPercentage: 0,\n          },\n        ],\n      },\n      {\n        name: 'Carriage - Device shipment',\n        sku: 'FREIGHT',\n        quantity: 1,\n        price: 50,\n        total: 50,\n        createdAt: '2022-12-09T15:57:50',\n        updatedAt: '2022-12-09T15:57:50',\n        maskSku: '',\n        productType: 'virtual',\n        salesTag: null,\n        requestedShippingDate: '2022-12-27T00:00:00',\n        discount: 0,\n        discountPercentage: 0,\n        get finalSku() {\n          return this.maskSku || this.sku;\n        },\n      },\n    ],\n    orderLines: [],\n    pickedItems: [],\n    packedItems: [],\n    trackingNumbers: [],\n    trackingUpdates: [],\n    ecoOrder: false,\n    revenueOrder: false,\n  };\n\n  private lineItemTotal(order) {\n    if (!order || !order.shopOrderLines?.length) return;\n    let total = 0;\n    order.shopOrderLines.forEach((itm) => {\n      if (itm.status !== 'cancelled') total += itm.total;\n    });\n    return total;\n  }\n\n  private columns: TableTypes.NanoTable<namespace.ShopOrderLine>['columns'] = [\n    {\n      title: 'Name',\n      prop: 'name',\n      pinned: 'start',\n      rowHeader: true,\n      autoTooltip: true,\n    },\n    {\n      title: 'Status',\n      prop: 'sku',\n      cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),\n    },\n    {\n      title: 'SKU',\n      prop: 'finalSku',\n    },\n    {\n      title: 'Sales tag',\n      prop: 'salesTag',\n      cellTemplate: (_, c) => c.cellModel || 'None',\n    },\n    {\n      title: 'Requested ship date',\n      prop: 'requestedShippingDate',\n      cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n    },\n    {\n      title: 'Quantity',\n      prop: 'quantity',\n    },\n    {\n      title: 'Unit price',\n      prop: 'price',\n      cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n    },\n    {\n      title: 'Discount %',\n      prop: 'discountPercentage',\n      cellTemplate: (_, c) => c.cellModel || 0,\n    },\n    {\n      title: 'Line value',\n      prop: 'total',\n      cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n    },\n  ];\n\n  render() {\n    return (\n      <Host>\n        <nano-table\n          rowRender={{\n            template: (_, c, TableCell) =>\n              [\n                c.renderedRow,\n                c.rowModel.includedItems?.length ? (\n                  c.rowModel.includedItems?.map((item) => {\n                    return (\n                      <tr class=\"child-row\">\n                        <TableCell header={true}>{item.name}</TableCell>\n                        <TableCell>\n                          {capitalise(c.rowModel.status || this.order.status)}\n                        </TableCell>\n                        <TableCell>{capitalise(item.sku)}</TableCell>\n                        <TableCell>{capitalise(item.salesTag)}</TableCell>\n                        <TableCell>\n                          {mediumDate(item.requestedShippingDate)}\n                        </TableCell>\n                      </tr>\n                    );\n                  })\n                ) : (\n                  <Fragment />\n                ),\n              ].flat(1),\n          }}\n          columns={this.columns}\n          rows={this.order.shopOrderLines}\n          caption={`List of order line items found within order ${this.order.orderId}`}\n          showFooter={true}\n          footRender={{\n            pinned: 'bottom',\n            template: () => [\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">Sub total:</span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(\n                        this.lineItemTotal(this.order),\n                        this.order.currency\n                      )}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total order tax:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.taxAmount, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n              <tr>\n                <td colSpan={6}>&nbsp;</td>\n                <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n                  <div class=\"nano-tbl__cell-content order-lines__total\">\n                    <span class=\"order-lines__total--label\">\n                      Total on order placement:\n                    </span>\n                    <span class=\"order-lines__total--num\">\n                      {currency(this.order.total, this.order.currency)}\n                    </span>\n                  </div>\n                </th>\n              </tr>,\n            ],\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;6DA0KA,SAASA,EAAWC,GAClB,IAAKA,EAAO,MAAO,GACnB,OAAOA,EAAMC,OAAO,GAAGC,cAAgBF,EAAMG,MAAM,EACrD,CAEA,SAASC,EAAWC,GAClB,IAAKA,EAAM,OAAOC,UAClB,OAAO,IAAIC,KAAKF,GAAMG,mBAAmBF,UAAW,CAClDG,KAAM,UACNC,MAAO,QACPC,IAAK,WAET,CAEA,SAASC,EAASC,EAAiB,EAAGC,EAAuB,OAC3DA,GAAeA,IAAY,MAAZA,SAAY,SAAZA,EAAcC,sBAAuB,MACpD,OAAO,IAAIC,KAAKC,aAAa,QAAS,CACpCC,MAAO,WACPN,SAAUE,IACTK,OAAON,EACZ,C,MAaaO,EAAI,MAXjBC,YAAAC,G,UAYUC,KAAAC,MAA8B,CACpCC,OAAQ,CACN,CACEC,KAAM,aACNC,YAAa,KACbC,OAAQ,WACRC,aAAc,CACZH,KAAM,gBACNI,MAAO,qBACPC,eAAgB,kBAChBC,eAAgB,mCAChBC,iBAAkB,QAClBC,aAAc,SACdC,eAAgB,WAChBC,gBAAiB,MAEnBC,uCAAwC,CACtCC,MAAO,CACLC,MAAO,GACPC,UAAW,GACXC,MAAO,MACPC,eAAgB,OAGpBC,oCAAqC,CACnCL,MAAO,CACLC,MAAO,GACPC,UAAW,GACXC,MAAO,MACPC,eAAgB,OAGpBjB,OAAQ,CACN,CACEmB,MAAO,mBACPjB,YAAa,mBACbkB,UAAW,qBACXC,OAAQ,SAGZC,oBAAqB,GACrBC,YAAa,GACbC,MAAO,KAGXC,QAAS,WACTC,UAAW,sBACXC,UAAW,sBACXxB,OAAQ,aACRyB,UAAW,KACXzC,SAAU,MACV0C,sBAAuB,SACvBC,gBAAiB,OACjBC,WAAY,OACZC,yBAA0B,KAC1BC,gBAAiB,gBACjBC,aAAc,KACdC,aAAc,qBACdC,cAAe,KACfC,qBAAsB,UACtBC,mBAAoB,UACpBC,iBAAkB,qBAClBC,iBAAkB,KAClBC,UAAW,sBACXC,UAAW,qBACXC,YAAa,OACbC,gBAAiB,sBACjBC,kBAAmB,GACnBC,cAAe,KACfC,oBAAqB,GACrBC,MAAO,IACPC,eAAgB,GAChBC,UAAW,EACXC,UAAW,KACXC,oBAAqB,eACrBC,mBAAoB,eACpBC,YAAa,KACbC,aAAc,MACdC,oBAAqB,qBACrBC,iBAAkB,KAClBC,WAAY,MACZC,iBAAkB,SAClBC,kBAAmB,qBACnBC,yBAA0B,UAC1BC,wBAAyB,qBACzBC,gBAAiB,CACfC,OAAQ,CAAC,qDACTC,KAAM,SACNC,SAAU,QACVC,OAAQ,WACRC,WAAY,KACZC,YAAa,MAEfC,eAAgB,CACdN,OAAQ,CAAC,qDACTC,KAAM,SACNC,SAAU,QACVC,OAAQ,WACRC,WAAY,KACZC,YAAa,MAEfE,eAAgB,CACd,CACEtE,KAAM,6BACNuE,IAAK,aACLC,SAAU,EACVC,MAAO,IACP1B,MAAO,IACPtB,UAAW,sBACXC,UAAW,sBACXgD,QAAS,aACTC,YAAa,SACbC,SAAU,WACVC,sBAAuB,KACvBC,SAAU,EACVC,mBAAoB,EAChBC,eACF,OAAOnF,KAAK6E,SAAW7E,KAAK0E,G,EAE9BU,cAAe,CACb,CACEjF,KAAM,6BACNuE,IAAK,cACLC,SAAU,GACVC,MAAO,GACP1B,MAAO,IACPtB,UAAW,sBACXC,UAAW,sBACXgD,QAAS,aACTC,YAAa,SACbC,SAAU,WACVC,sBAAuB,sBACvBC,SAAU,EACVC,mBAAoB,GAEtB,CACE/E,KAAM,gCACNuE,IAAK,aACLC,SAAU,EACVC,MAAO,GACP1B,MAAO,GACPtB,UAAW,sBACXC,UAAW,sBACXgD,QAAS,GACTC,YAAa,SACbC,SAAU,WACVC,sBAAuB,sBACvBC,SAAU,EACVC,mBAAoB,KAI1B,CACE/E,KAAM,6BACNuE,IAAK,UACLC,SAAU,EACVC,MAAO,GACP1B,MAAO,GACPtB,UAAW,sBACXC,UAAW,sBACXgD,QAAS,GACTC,YAAa,UACbC,SAAU,KACVC,sBAAuB,sBACvBC,SAAU,EACVC,mBAAoB,EAChBC,eACF,OAAOnF,KAAK6E,SAAW7E,KAAK0E,G,IAIlCW,WAAY,GACZC,YAAa,GACbC,YAAa,GACbC,gBAAiB,GACjBC,gBAAiB,GACjBC,SAAU,MACVC,aAAc,OAYR3F,KAAA4F,QAAoE,CAC1E,CACEC,MAAO,OACPC,KAAM,OACNC,OAAQ,QACRC,UAAW,KACXC,YAAa,MAEf,CACEJ,MAAO,SACPC,KAAM,MACNI,aAAc,CAACC,EAAGC,IAAM5H,EAAW4H,EAAEC,WAAarG,KAAKC,MAAMI,SAE/D,CACEwF,MAAO,MACPC,KAAM,YAER,CACED,MAAO,YACPC,KAAM,WACNI,aAAc,CAACC,EAAGC,IAAMA,EAAEC,WAAa,QAEzC,CACER,MAAO,sBACPC,KAAM,wBACNI,aAAc,CAACC,EAAGC,IAAMvH,EAAWuH,EAAEC,YAAc,OAErD,CACER,MAAO,WACPC,KAAM,YAER,CACED,MAAO,aACPC,KAAM,QACNI,aAAc,CAACC,EAAGC,IAAM/G,EAAS+G,EAAEC,UAAWrG,KAAKC,MAAMZ,WAE3D,CACEwG,MAAO,aACPC,KAAM,qBACNI,aAAc,CAACC,EAAGC,IAAMA,EAAEC,WAAa,GAEzC,CACER,MAAO,aACPC,KAAM,QACNI,aAAc,CAACC,EAAGC,IAAM/G,EAAS+G,EAAEC,UAAWrG,KAAKC,MAAMZ,W,CArDrDiH,cAAcrG,G,MACpB,IAAKA,MAAUsG,EAAAtG,EAAMwE,kBAAc,MAAA8B,SAAA,SAAAA,EAAEC,QAAQ,OAC7C,IAAItD,EAAQ,EACZjD,EAAMwE,eAAegC,SAASC,IAC5B,GAAIA,EAAIrG,SAAW,YAAa6C,GAASwD,EAAIxD,KAAK,IAEpD,OAAOA,C,CAmDTyD,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,cACEE,UAAW,CACTC,SAAU,CAACZ,EAAGC,EAAGY,K,QACf,OACEZ,EAAEa,cACFV,EAAAH,EAAEc,SAAS9B,iBAAa,MAAAmB,SAAA,SAAAA,EAAEC,SACxBW,EAAAf,EAAEc,SAAS9B,iBAAa,MAAA+B,SAAA,SAAAA,EAAEC,KAAKC,GAE3BT,EAAA,MAAIU,MAAM,aACRV,EAACI,EAAS,CAACO,OAAQ,MAAOF,EAAKlH,MAC/ByG,EAACI,EAAS,KACPxI,EAAW4H,EAAEc,SAAS7G,QAAUL,KAAKC,MAAMI,SAE9CuG,EAACI,EAAS,KAAExI,EAAW6I,EAAK3C,MAC5BkC,EAACI,EAAS,KAAExI,EAAW6I,EAAKtC,WAC5B6B,EAACI,EAAS,KACPnI,EAAWwI,EAAKrC,2BAMzB4B,EAACY,EAAQ,OAEXC,KAAK,EAAE,GAEb7B,QAAS5F,KAAK4F,QACd8B,KAAM1H,KAAKC,MAAMwE,eACjBkD,QAAS,+CAA+C3H,KAAKC,MAAM0B,UACnEiG,WAAY,KACZC,WAAY,CACV9B,OAAQ,SACRgB,SAAU,IAAM,CACdH,EAAA,UACEA,EAAA,MAAIkB,QAAS,GAAC,KACdlB,EAAA,MAAImB,MAAM,MAAMT,MAAM,8BAA8BQ,QAAS,GAC3DlB,EAAA,OAAKU,MAAM,6CACTV,EAAA,QAAMU,MAAM,6BAA2B,cACvCV,EAAA,QAAMU,MAAM,2BACTjI,EACCW,KAAKsG,cAActG,KAAKC,OACxBD,KAAKC,MAAMZ,cAMrBuH,EAAA,UACEA,EAAA,MAAIkB,QAAS,GAAC,KACdlB,EAAA,MAAImB,MAAM,MAAMT,MAAM,8BAA8BQ,QAAS,GAC3DlB,EAAA,OAAKU,MAAM,6CACTV,EAAA,QAAMU,MAAM,6BAA2B,oBAGvCV,EAAA,QAAMU,MAAM,2BACTjI,EAASW,KAAKC,MAAMmD,UAAWpD,KAAKC,MAAMZ,cAKnDuH,EAAA,UACEA,EAAA,MAAIkB,QAAS,GAAC,KACdlB,EAAA,MAAImB,MAAM,MAAMT,MAAM,8BAA8BQ,QAAS,GAC3DlB,EAAA,OAAKU,MAAM,6CACTV,EAAA,QAAMU,MAAM,6BAA2B,6BAGvCV,EAAA,QAAMU,MAAM,2BACTjI,EAASW,KAAKC,MAAMiD,MAAOlD,KAAKC,MAAMZ,kB"}

package/dist/nano-components/nano-details.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as r,B as e,h as i,g as o}from"./index-9695db0a.js";import{d as s}from"./transitions-fb09eb32.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const n=class{constructor(e){t(this,e);this.nanoOpened=r(this,"nanoOpened",7);this.nanoClosed=r(this,"nanoClosed",7);this.nanoAfterOpened=r(this,"nanoAfterOpened",7);this.nanoAfterClosed=r(this,"nanoAfterClosed",7);this.stateChanging=false;this.onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};this.onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};this.label="";this.open=false;this.disabled=false;this.noHandle=false;this.iconRotation=90;this.useCacheHeight=false}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));requestAnimationFrame((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!e.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const r of t){if(r.type==="attributes"&&r.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return i("details",{part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},i("summary",{part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{part:"label",class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},i("div",{part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},i("slot",null))))}get host(){return o(this)}static get watchers(){return{open:["toggleClick"]}}};n.style=a;export{n as nano_details};
+//# sourceMappingURL=nano-details.entry.js.map