@nepdatejs/vanilla 0.0.0-stage → 0.1.0

package/dist/date-picker-ucoEFnMW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-ucoEFnMW.js","names":["createDatePicker"],"sources":["../src/picker-view.ts","../src/date-picker-element.ts","../src/date-picker.ts"],"sourcesContent":["import { getLocale, type CalendarSystem } from '@nepdatejs/core';\nimport {\n  createDatePicker,\n  type DateDetail,\n  type DatePickerOptions,\n  type DatePickerState,\n  type DatePickerStore,\n} from '@nepdatejs/datepicker';\nimport {\n  onBackdropPointer,\n  onEscape,\n  onOutsidePointer,\n  restoreFocus,\n  trackPosition,\n  type PanelLayout,\n} from '@nepdatejs/dom';\nimport { CalendarView } from './calendar-view';\nimport { el, icon, setAttrs, setPopupMode, setText, uid } from './dom';\nimport { PANEL_WIDTH, PANEL_WIDTH_WITH_PRESETS, PresetList } from './preset-list';\n\nexport type Theme = 'light' | 'dark' | 'auto';\n\n/** Everything the date picker DOM needs on top of the store's options. */\nexport interface DatePickerViewOptions extends DatePickerOptions {\n  /** Submit the AD value with a plain form under this name (hidden input). */\n  readonly name?: string | undefined;\n  /** Render a hidden input for `name`. Off for the form-associated custom element. */\n  readonly hiddenInput?: boolean | undefined;\n  readonly id?: string | undefined;\n  readonly placeholder?: string | undefined;\n  readonly required?: boolean | undefined;\n  readonly disabled?: boolean | undefined;\n  /** Show the × button. Default true. */\n  readonly clearable?: boolean | undefined;\n  /** Show the same day in the other calendar under the field. Default true. */\n  readonly showEquivalent?: boolean | undefined;\n  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */\n  readonly panelLayout?: PanelLayout | undefined;\n  readonly theme?: Theme | undefined;\n  /** Remember the viewer's BS/AD choice in localStorage under this key. */\n  readonly persistCalendar?: string | undefined;\n  readonly ariaLabel?: string | undefined;\n  readonly onOpenChange?: ((open: boolean) => void) | undefined;\n  /** Called on every keystroke with the current text. */\n  readonly onInput?: ((text: string) => void) | undefined;\n}\n\nconst VIEW_KEYS = new Set([\n  'name',\n  'hiddenInput',\n  'id',\n  'placeholder',\n  'required',\n  'disabled',\n  'clearable',\n  'showEquivalent',\n  'theme',\n  'panelLayout',\n  'persistCalendar',\n  'ariaLabel',\n  'onOpenChange',\n  'onInput',\n]);\n\n/**\n * The date picker field and panel, rendered with the @nepdatejs/styles markup\n * into `host`. Used by <nep-date-picker> and by createDatePicker().\n */\nexport class DatePickerView {\n  readonly store: DatePickerStore;\n  readonly input: HTMLInputElement;\n  private options: DatePickerViewOptions;\n  private readonly field: HTMLDivElement;\n  private readonly box: HTMLDivElement;\n  private readonly clearButton: HTMLButtonElement;\n  private readonly switchButton: HTMLButtonElement;\n  private readonly toggleButton: HTMLButtonElement;\n  private readonly hint: HTMLParagraphElement;\n  private readonly panel: HTMLDivElement;\n  private readonly segment: HTMLDivElement;\n  private readonly todayButton: HTMLButtonElement;\n  private readonly hidden: HTMLInputElement;\n  private readonly calendarView: CalendarView;\n  private readonly presetList: PresetList;\n  private readonly unsubscribe: () => void;\n  private closePanel: (() => void) | null = null;\n  private wasOpen = false;\n\n  constructor(host: HTMLElement, options: DatePickerViewOptions = {}) {\n    this.options = { ...options };\n    this.store = createDatePicker({\n      ...storeOptions(options),\n      onChange: (value, detail) => {\n        this.options.onChange?.(value, detail);\n      },\n      onCalendarChange: (calendar) => {\n        this.remember(calendar);\n        this.options.onCalendarChange?.(calendar);\n      },\n    });\n\n    const inputId = options.id ?? uid('ndp-input');\n    const panelId = `${inputId}-panel`;\n    this.input = el('input', {\n      class: 'ndp-input__control',\n      id: inputId,\n      type: 'text',\n      inputmode: 'numeric',\n      autocomplete: 'off',\n      spellcheck: 'false',\n      'aria-controls': panelId,\n    });\n    this.clearButton = el(\n      'button',\n      { type: 'button', class: 'ndp-icon-button', 'data-action': 'clear' },\n      [icon('close')],\n    );\n    this.switchButton = el('button', {\n      type: 'button',\n      class: 'ndp-input__switch',\n      'data-action': 'switch',\n    });\n    this.toggleButton = el(\n      'button',\n      { type: 'button', class: 'ndp-icon-button', 'data-action': 'toggle' },\n      [icon('calendar')],\n    );\n    this.box = el('div', { class: 'ndp-input' }, [\n      this.input,\n      el('span', { class: 'ndp-input__actions' }, [\n        this.clearButton,\n        this.switchButton,\n        this.toggleButton,\n      ]),\n    ]);\n    this.hint = el('p', {\n      class: 'ndp-hint',\n      id: `${inputId}-hint`,\n      'aria-live': 'polite',\n      hidden: true,\n    });\n    this.hidden = el('input', { type: 'hidden' });\n    this.segment = el('div', { class: 'ndp-segment', role: 'group' }, [\n      el('button', { type: 'button', class: 'ndp-segment__item', 'data-calendar': 'BS' }),\n      el('button', { type: 'button', class: 'ndp-segment__item', 'data-calendar': 'AD' }),\n    ]);\n    this.todayButton = el('button', {\n      type: 'button',\n      class: 'ndp-button',\n      'data-action': 'today',\n    });\n    const calendarRoot = el('div', { class: 'ndp-panel__calendar' });\n    this.presetList = new PresetList((id) => {\n      if (this.store.actions.applyPreset(id) && !this.store.getState().open) {\n        restoreFocus(this.input);\n      }\n    });\n    this.panel = el(\n      'div',\n      {\n        class: 'ndp-panel',\n        id: panelId,\n        hidden: true,\n      },\n      [\n        el('div', { class: 'ndp-panel__body' }, [this.presetList.element, calendarRoot]),\n        el('div', { class: 'ndp-panel__footer' }, [this.segment, this.todayButton]),\n      ],\n    );\n    this.field = el('div', { class: 'ndp-field' }, [\n      this.box,\n      this.hint,\n      this.panel,\n      this.hidden,\n    ]);\n    host.append(this.field);\n\n    this.calendarView = new CalendarView(calendarRoot, this.store.calendar, {\n      locale: () => this.options.locale,\n      onDayActivate: (date) => {\n        if (this.store.actions.select(date) && !this.store.getState().open) {\n          restoreFocus(this.input);\n        }\n      },\n    });\n\n    this.input.addEventListener('input', this.onTextInput);\n    this.input.addEventListener('blur', () => {\n      this.store.actions.blur();\n    });\n    this.input.addEventListener('keydown', this.onInputKeyDown);\n    this.field.addEventListener('click', this.onClick);\n\n    this.unsubscribe = this.store.subscribe(() => {\n      this.render();\n    });\n    this.restoreCalendar();\n    this.render();\n  }\n\n  getState(): DatePickerState {\n    return this.store.getState();\n  }\n\n  /** Change view or store options. Unknown keys are ignored. */\n  setOptions(changes: Partial<DatePickerViewOptions>): void {\n    this.options = { ...this.options, ...changes };\n    const forStore = storeOptions(changes);\n    if (Object.keys(forStore).length > 0) {\n      this.store.setOptions(forStore);\n    } else {\n      this.render();\n    }\n  }\n\n  open(): void {\n    if (!this.options.disabled) {\n      this.store.actions.open();\n    }\n  }\n\n  close(): void {\n    this.store.actions.close();\n  }\n\n  destroy(): void {\n    this.closePanel?.();\n    this.unsubscribe();\n    this.calendarView.destroy();\n    this.field.remove();\n  }\n\n  private render(): void {\n    const state = this.store.getState();\n    const locale = getLocale(this.options.locale);\n    const disabled = this.options.disabled ?? false;\n    const hintText =\n      state.error?.message ??\n      ((this.options.showEquivalent ?? true) ? state.equivalentText : null);\n\n    if (this.input.value !== state.text) {\n      this.input.value = state.text;\n    }\n    this.input.setCustomValidity(state.error?.message ?? '');\n    setAttrs(this.input, {\n      placeholder: this.options.placeholder ?? state.placeholder,\n      disabled,\n      required: this.options.required ?? false,\n      'aria-label': this.options.ariaLabel ?? null,\n      'aria-invalid': state.error ? 'true' : null,\n      'aria-describedby': hintText ? this.hint.id : null,\n    });\n    setAttrs(this.box, {\n      'data-invalid': state.error !== null,\n      'data-disabled': disabled,\n    });\n    setAttrs(this.field, { 'data-ndp-theme': this.options.theme ?? null });\n    setAttrs(this.panel, {\n      'data-ndp-theme': this.options.theme ?? null,\n      'aria-label': this.options.ariaLabel\n        ? `${this.options.ariaLabel}: ${locale.labels.calendar}`\n        : locale.labels.chooseDate,\n    });\n\n    this.clearButton.hidden =\n      !(this.options.clearable ?? true) || state.text === '' || disabled;\n    setAttrs(this.clearButton, { 'aria-label': locale.labels.clear });\n    this.switchButton.hidden = !state.canSwitchCalendar;\n    setText(this.switchButton, locale.calendarNames[state.calendar]);\n    const other: CalendarSystem = state.calendar === 'BS' ? 'AD' : 'BS';\n    setAttrs(this.switchButton, {\n      disabled,\n      'aria-label': `${locale.labels.calendar}: ${locale.calendarNames[state.calendar]} → ${locale.calendarNames[other]}`,\n    });\n    setAttrs(this.toggleButton, {\n      disabled,\n      'aria-label': locale.labels.openCalendar,\n      'aria-expanded': state.open ? 'true' : 'false',\n    });\n\n    this.hint.hidden = hintText === null;\n    setText(this.hint, hintText ?? '');\n    setAttrs(this.hint, { 'data-error': state.error !== null });\n\n    this.segment.hidden = !state.canSwitchCalendar;\n    setAttrs(this.segment, { 'aria-label': locale.labels.calendar });\n    for (const button of this.segment.querySelectorAll<HTMLButtonElement>('button')) {\n      const calendar = button.dataset['calendar'] as CalendarSystem;\n      setText(button, locale.calendarNames[calendar]);\n      setAttrs(button, {\n        'aria-pressed': calendar === state.calendar ? 'true' : 'false',\n      });\n    }\n    setText(this.todayButton, locale.labels.today);\n    this.presetList.render(state.presets, locale.labels.presets);\n\n    const name = this.options.hiddenInput === false ? undefined : this.options.name;\n    setAttrs(this.hidden, { name: name ?? null, value: state.value });\n    this.hidden.value = state.value;\n    this.hidden.disabled = name === undefined || disabled;\n\n    setPopupMode(state, [this.input], this.toggleButton, this.panel);\n    this.syncPanel(state.open && !state.inline);\n    this.panel.hidden = !state.inline && !this.wasOpen;\n    this.panel.style.setProperty(\n      '--ndp-panel-width',\n      state.inline ? `${String(this.panelWidth())}px` : null,\n    );\n  }\n\n  private panelWidth(): number {\n    return this.store.getState().presets.length > 0\n      ? PANEL_WIDTH_WITH_PRESETS\n      : PANEL_WIDTH;\n  }\n\n  private syncPanel(open: boolean): void {\n    if (open === this.wasOpen) {\n      return;\n    }\n    this.wasOpen = open;\n    this.options.onOpenChange?.(open);\n    if (open) {\n      this.panel.hidden = false;\n      const stopTracking = trackPosition(this.box, this.panel, {\n        width: this.panelWidth(),\n        layout: this.options.panelLayout,\n      });\n      const stopOutside = onOutsidePointer([this.field, this.panel], () => {\n        this.store.actions.close();\n      });\n      const stopBackdrop = onBackdropPointer(this.panel, () => {\n        this.store.actions.close();\n      });\n      const stopEscape = onEscape(() => {\n        this.store.actions.close();\n        restoreFocus(this.input);\n      });\n      this.closePanel = () => {\n        stopTracking();\n        stopOutside();\n        stopBackdrop();\n        stopEscape();\n        this.panel.hidden = true;\n      };\n      this.calendarView.focusGrid();\n    } else {\n      this.closePanel?.();\n      this.closePanel = null;\n    }\n  }\n\n  private readonly onTextInput = (): void => {\n    this.store.actions.type(this.input.value);\n    this.options.onInput?.(this.input.value);\n  };\n\n  private readonly onInputKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'ArrowDown' && (event.altKey || this.input.value === '')) {\n      event.preventDefault();\n      this.open();\n    }\n  };\n\n  private readonly onClick = (event: MouseEvent): void => {\n    const target = event.target instanceof Element ? event.target : null;\n    if (!target || this.calendarView.element.contains(target)) {\n      return;\n    }\n    const calendar = target.closest<HTMLElement>('[data-calendar]')?.dataset['calendar'];\n    if (calendar === 'BS' || calendar === 'AD') {\n      this.store.actions.switchCalendar(calendar);\n      return;\n    }\n    switch (target.closest<HTMLElement>('[data-action]')?.dataset['action']) {\n      case 'clear':\n        this.store.actions.clear();\n        this.input.focus();\n        break;\n      case 'switch':\n        this.store.actions.switchCalendar(\n          this.store.getState().calendar === 'BS' ? 'AD' : 'BS',\n        );\n        break;\n      case 'toggle':\n        if (this.store.getState().open) {\n          this.close();\n        } else {\n          this.open();\n        }\n        break;\n      case 'today':\n        if (this.store.actions.selectToday()) {\n          restoreFocus(this.input);\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  private remember(calendar: CalendarSystem): void {\n    const key = this.options.persistCalendar;\n    if (!key) {\n      return;\n    }\n    try {\n      window.localStorage.setItem(key, calendar);\n    } catch {\n      // Storage can be blocked (private mode); the choice then lasts for this page only.\n    }\n  }\n\n  private restoreCalendar(): void {\n    const key = this.options.persistCalendar;\n    if (!key) {\n      return;\n    }\n    const stored = readStorage(key);\n    if (stored === 'BS' || stored === 'AD') {\n      this.store.actions.switchCalendar(stored);\n    }\n  }\n}\n\n/** Only the keys the picker store understands, minus the view's own callbacks. */\nfunction storeOptions(\n  options: Partial<DatePickerViewOptions>,\n): Partial<DatePickerOptions> {\n  const out: Record<string, unknown> = {};\n  for (const [key, value] of Object.entries(options)) {\n    if (!VIEW_KEYS.has(key) && key !== 'onChange' && key !== 'onCalendarChange') {\n      out[key] = value;\n    }\n  }\n\n  return out;\n}\n\nfunction readStorage(key: string): string | null {\n  try {\n    return window.localStorage.getItem(key);\n  } catch {\n    return null; // storage blocked\n  }\n}\n\nexport type { DateDetail };\n","import { fromIsoDate } from '@nepdatejs/core';\nimport type { SinglePreset } from '@nepdatejs/datepicker';\nimport { DatePickerView, type DatePickerViewOptions } from './picker-view';\nimport {\n  Base,\n  str,\n  bool,\n  onUnlessFalse,\n  calendarAttr,\n  weekday,\n  panelLayout,\n  theme,\n  presetIds,\n  swallowInnerChange,\n  isoOf,\n  type RichProps,\n} from './element-utils';\n\n/**\n * <nep-date-picker name=\"dob\" min=\"2020-01-01\"></nep-date-picker>\n *\n * A form-associated BS/AD date field: the form receives the AD \"YYYY-MM-DD\"\n * value under `name`. Fires `change` with { value, ad, bs }, plus `nep-open`,\n * `nep-close` and `nep-calendar-change`.\n */\nexport class NepDatePickerElement extends Base {\n  static readonly formAssociated = true;\n  static readonly observedAttributes: readonly string[] = [\n    'value',\n    'min',\n    'max',\n    'calendar',\n    'default-calendar',\n    'locale',\n    'name',\n    'placeholder',\n    'required',\n    'disabled',\n    'clearable',\n    'show-equivalent',\n    'theme',\n    'panel-layout',\n    'mask',\n    'inline',\n    'persist-calendar',\n    'week-starts-on',\n    'display-format',\n    'label',\n    'close-on-select',\n    'input-id',\n    'presets',\n  ];\n\n  /** The view, once connected. */\n  view: DatePickerView | null = null;\n  private readonly internals: ElementInternals | null;\n  private rich: RichProps = {};\n  private customPresets: readonly SinglePreset[] | undefined;\n  private unsubscribe: (() => void) | null = null;\n\n  constructor() {\n    super();\n    this.internals =\n      typeof this.attachInternals === 'function' ? this.attachInternals() : null;\n    swallowInnerChange(this);\n  }\n\n  get value(): string {\n    return this.view?.getState().value ?? isoOf(fromIsoDate(this.getAttribute('value')));\n  }\n  set value(next: string) {\n    this.view?.store.actions.setValue(next);\n  }\n  get holidays(): RichProps['holidays'] {\n    return this.rich.holidays;\n  }\n  set holidays(next: RichProps['holidays']) {\n    this.setRich({ holidays: next });\n  }\n  get events(): RichProps['events'] {\n    return this.rich.events;\n  }\n  set events(next: RichProps['events']) {\n    this.setRich({ events: next });\n  }\n  get isDateDisabled(): RichProps['isDateDisabled'] {\n    return this.rich.isDateDisabled;\n  }\n  set isDateDisabled(next: RichProps['isDateDisabled']) {\n    this.setRich({ isDateDisabled: next });\n  }\n  /** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */\n  get presets(): readonly SinglePreset[] | undefined {\n    return this.customPresets ?? (presetIds(this) as readonly SinglePreset[] | undefined);\n  }\n  set presets(next: readonly SinglePreset[] | undefined) {\n    this.customPresets = next;\n    this.view?.setOptions({ presets: this.presets });\n  }\n  get form(): HTMLFormElement | null {\n    return this.internals?.form ?? null;\n  }\n  get validity(): ValidityState | undefined {\n    return this.internals?.validity;\n  }\n  get validationMessage(): string {\n    return this.internals?.validationMessage ?? '';\n  }\n  checkValidity(): boolean {\n    return this.internals?.checkValidity() ?? true;\n  }\n  reportValidity(): boolean {\n    return this.internals?.reportValidity() ?? true;\n  }\n\n  connectedCallback(): void {\n    if (this.view) {\n      return;\n    }\n    const view = new DatePickerView(this, {\n      ...this.readOptions(),\n      defaultValue: str(this, 'value'),\n      onChange: (value, detail) => {\n        this.dispatchEvent(\n          new CustomEvent('change', {\n            bubbles: true,\n            detail: { value, ad: detail?.ad ?? null, bs: detail?.bs ?? null },\n          }),\n        );\n      },\n      onCalendarChange: (calendar) => {\n        this.dispatchEvent(\n          new CustomEvent('nep-calendar-change', { bubbles: true, detail: { calendar } }),\n        );\n      },\n      onOpenChange: (open) => {\n        this.dispatchEvent(\n          new CustomEvent(open ? 'nep-open' : 'nep-close', { bubbles: true }),\n        );\n      },\n    });\n    this.view = view;\n    this.unsubscribe = view.store.subscribe(() => {\n      this.syncForm();\n    });\n    this.syncForm();\n  }\n\n  disconnectedCallback(): void {\n    this.unsubscribe?.();\n    this.view?.destroy();\n    this.view = null;\n  }\n\n  attributeChangedCallback(\n    name: string,\n    previous: string | null,\n    next: string | null,\n  ): void {\n    if (!this.view || previous === next) {\n      return;\n    }\n    if (name === 'value') {\n      this.view.store.actions.setValue(next ?? '');\n    }\n    this.view.setOptions(this.readOptions());\n    this.syncForm();\n  }\n\n  formResetCallback(): void {\n    this.view?.store.actions.reset();\n  }\n\n  formDisabledCallback(disabled: boolean): void {\n    this.view?.setOptions({ disabled: disabled || bool(this, 'disabled') });\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (typeof state === 'string') {\n      this.view?.store.actions.setValue(state);\n    }\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.view?.input.focus(options);\n  }\n\n  open(): void {\n    this.view?.open();\n  }\n\n  close(): void {\n    this.view?.close();\n  }\n\n  private setRich(changes: RichProps): void {\n    this.rich = { ...this.rich, ...changes };\n    this.view?.setOptions(changes);\n  }\n\n  private readOptions(): DatePickerViewOptions {\n    return {\n      ...this.rich,\n      min: str(this, 'min'),\n      max: str(this, 'max'),\n      calendar: calendarAttr(this, 'calendar'),\n      defaultCalendar: calendarAttr(this, 'default-calendar'),\n      locale: str(this, 'locale'),\n      name: str(this, 'name'),\n      hiddenInput: this.internals === null,\n      placeholder: str(this, 'placeholder'),\n      required: bool(this, 'required'),\n      disabled: bool(this, 'disabled'),\n      clearable: onUnlessFalse(this, 'clearable'),\n      showEquivalent: onUnlessFalse(this, 'show-equivalent'),\n      closeOnSelect: onUnlessFalse(this, 'close-on-select'),\n      theme: theme(this),\n      panelLayout: panelLayout(this),\n      mask: onUnlessFalse(this, 'mask'),\n      inline: this.hasAttribute('inline'),\n      persistCalendar: str(this, 'persist-calendar'),\n      weekStartsOn: weekday(this, 'week-starts-on'),\n      displayFormat: str(this, 'display-format'),\n      ariaLabel: str(this, 'label'),\n      id: str(this, 'input-id'),\n      presets: this.presets,\n    };\n  }\n\n  private syncForm(): void {\n    const view = this.view;\n    if (!view || !this.internals) {\n      return;\n    }\n    const state = view.getState();\n    this.internals.setFormValue(state.value === '' ? null : state.value, state.value);\n    if (state.error) {\n      this.internals.setValidity({ customError: true }, state.error.message, view.input);\n    } else if (bool(this, 'required') && state.value === '') {\n      this.internals.setValidity(\n        { valueMissing: true },\n        view.input.validationMessage || 'Please choose a date.',\n        view.input,\n      );\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n}\n","/** `@nepdatejs/vanilla/date-picker`: just the date picker (element, view and mount function). */\nimport type { DatePickerState } from '@nepdatejs/datepicker';\nimport { NepDatePickerElement } from './date-picker-element';\nimport { DatePickerView, type DatePickerViewOptions } from './picker-view';\nimport { defineElement, ELEMENT_NAMES } from './registry';\n\nexport { NepDatePickerElement };\nexport { DatePickerView, type DatePickerViewOptions, type Theme } from './picker-view';\n\n/** Register <nep-date-picker> (skipped if already defined). */\nexport function defineDatePicker(registry?: CustomElementRegistry): void {\n  defineElement(ELEMENT_NAMES.datePicker, NepDatePickerElement, registry);\n}\n\nexport interface DatePickerHandle {\n  readonly view: DatePickerView;\n  getValue(): string;\n  getState(): DatePickerState;\n  setValue(value: string): void;\n  setOptions(changes: Partial<DatePickerViewOptions>): void;\n  open(): void;\n  close(): void;\n  destroy(): void;\n}\n\n/**\n * Mount a date picker without custom elements.\n *\n * - Given a container, renders the field into it.\n * - Given an <input>, hides it and keeps its value in step with the picker\n *   (AD \"YYYY-MM-DD\"), so existing forms and server code keep working.\n */\nexport function createDatePicker(\n  target: HTMLElement,\n  options: DatePickerViewOptions = {},\n): DatePickerHandle {\n  const enhanced = target instanceof HTMLInputElement ? target : null;\n  let host = target;\n  if (enhanced) {\n    host = document.createElement('span');\n    enhanced.after(host);\n    enhanced.hidden = true;\n  }\n  const view = new DatePickerView(host, {\n    ...(enhanced\n      ? {\n          defaultValue: enhanced.value,\n          name: undefined,\n          required: enhanced.required,\n          disabled: enhanced.disabled,\n        }\n      : {}),\n    ...options,\n    onChange: (value, detail) => {\n      if (enhanced) {\n        enhanced.value = value;\n        enhanced.dispatchEvent(new Event('input', { bubbles: true }));\n        enhanced.dispatchEvent(new Event('change', { bubbles: true }));\n      }\n      options.onChange?.(value, detail);\n    },\n  });\n\n  return {\n    view,\n    getValue: () => view.getState().value,\n    getState: () => view.getState(),\n    setValue: (value) => {\n      view.store.actions.setValue(value);\n      if (enhanced) {\n        enhanced.value = view.getState().value;\n      }\n    },\n    setOptions: (changes) => {\n      view.setOptions(changes);\n    },\n    open: () => {\n      view.open();\n    },\n    close: () => {\n      view.close();\n    },\n    destroy: () => {\n      view.destroy();\n      if (enhanced) {\n        host.remove();\n        enhanced.hidden = false;\n      }\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/date-picker.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_date_picker = require("./date-picker-CQoabjlj.cjs");
+exports.DatePickerView = require_date_picker.DatePickerView;
+exports.NepDatePickerElement = require_date_picker.NepDatePickerElement;
+exports.createDatePicker = require_date_picker.createDatePicker;
+exports.defineDatePicker = require_date_picker.defineDatePicker;

package/dist/date-picker.d.cts

@@ -0,0 +1,3 @@
+import { a as Theme, i as DatePickerViewOptions, r as DatePickerView } from "./element-utils-BVye8UQq.cjs";
+import { i as NepDatePickerElement, n as createDatePicker, r as defineDatePicker, t as DatePickerHandle } from "./date-picker-BidCGOz0.cjs";
+export { DatePickerHandle, DatePickerView, type DatePickerViewOptions, NepDatePickerElement, type Theme, createDatePicker, defineDatePicker };

package/dist/date-picker.d.ts

@@ -0,0 +1,3 @@
+import { a as Theme, i as DatePickerViewOptions, r as DatePickerView } from "./element-utils-C-r5gPlk.js";
+import { i as NepDatePickerElement, n as createDatePicker, r as defineDatePicker, t as DatePickerHandle } from "./date-picker-DyvpYe29.js";
+export { DatePickerHandle, DatePickerView, type DatePickerViewOptions, NepDatePickerElement, type Theme, createDatePicker, defineDatePicker };

package/dist/date-picker.js

@@ -0,0 +1 @@
+export { i as DatePickerView, r as NepDatePickerElement, t as createDatePicker, n as defineDatePicker } from "./date-picker-ucoEFnMW.js";

package/dist/date-range-picker-BQKcZeqG.cjs

@@ -0,0 +1,489 @@
+const require_registry = require("./registry-3qzdVB7H.cjs");
+const require_preset_list = require("./preset-list-Cs8H12Wp.cjs");
+let _nepdatejs_core = require("@nepdatejs/core");
+let _nepdatejs_datepicker = require("@nepdatejs/datepicker");
+let _nepdatejs_dom = require("@nepdatejs/dom");
+//#region src/range-view.ts
+const VIEW_KEYS = /* @__PURE__ */ new Set([
+	"startName",
+	"endName",
+	"hiddenInput",
+	"disabled",
+	"required",
+	"theme",
+	"panelLayout",
+	"startLabel",
+	"endLabel",
+	"fiscalYearView",
+	"onOpenChange",
+	"onChange",
+	"onCalendarChange"
+]);
+/** Two date fields (start, end) sharing one panel calendar in range mode. */
+var DateRangePickerView = class {
+	constructor(host, options = {}) {
+		this.closePanel = null;
+		this.wasOpen = false;
+		this.onClick = (event) => {
+			const target = event.target instanceof Element ? event.target : null;
+			if (!target || this.calendarView.element.contains(target)) return;
+			const calendar = target.closest("[data-calendar]")?.dataset["calendar"];
+			if (calendar === "BS" || calendar === "AD") {
+				this.store.actions.switchCalendar(calendar);
+				return;
+			}
+			if (target.closest("[data-action=\"fiscal\"]")) {
+				const calendar = this.store.calendar;
+				calendar.actions.setView(calendar.getState().view === "fiscal" ? "day" : "fiscal");
+				this.calendarView.focusGrid();
+				return;
+			}
+			if (target.closest("[data-action=\"toggle\"]")) {
+				if (this.store.getState().open) this.close();
+				else this.open();
+			}
+		};
+		this.options = { ...options };
+		this.store = (0, _nepdatejs_datepicker.createDateRangePicker)({
+			...storeOptions(options),
+			onChange: (value, detail) => {
+				this.options.onChange?.(value, detail);
+			},
+			onCalendarChange: (calendar) => {
+				this.options.onCalendarChange?.(calendar);
+			}
+		});
+		const id = require_registry.uid("ndp-range");
+		const makeInput = (field) => {
+			const input = require_registry.el("input", {
+				class: "ndp-input__control",
+				id: `${id}-${field}`,
+				type: "text",
+				inputmode: "numeric",
+				autocomplete: "off",
+				"aria-controls": `${id}-panel`,
+				"data-field": field
+			});
+			input.addEventListener("input", () => {
+				this.store.actions.type(field, input.value);
+			});
+			input.addEventListener("blur", () => {
+				this.store.actions.blur(field);
+			});
+			input.addEventListener("keydown", (event) => {
+				if (event.key === "ArrowDown" && (event.altKey || input.value === "")) {
+					event.preventDefault();
+					this.open();
+				}
+			});
+			return input;
+		};
+		this.inputs = {
+			start: makeInput("start"),
+			end: makeInput("end")
+		};
+		this.toggleButton = require_registry.el("button", {
+			type: "button",
+			class: "ndp-icon-button",
+			"data-action": "toggle"
+		}, [require_registry.icon("calendar")]);
+		this.boxes = {
+			start: require_registry.el("div", { class: "ndp-input" }, [this.inputs.start]),
+			end: require_registry.el("div", { class: "ndp-input" }, [this.inputs.end, require_registry.el("span", { class: "ndp-input__actions" }, [this.toggleButton])])
+		};
+		this.hint = require_registry.el("p", {
+			class: "ndp-hint",
+			id: `${id}-hint`,
+			"aria-live": "polite",
+			hidden: true
+		});
+		this.hidden = {
+			start: require_registry.el("input", { type: "hidden" }),
+			end: require_registry.el("input", { type: "hidden" })
+		};
+		this.segment = require_registry.el("div", {
+			class: "ndp-segment",
+			role: "group"
+		}, [require_registry.el("button", {
+			type: "button",
+			class: "ndp-segment__item",
+			"data-calendar": "BS"
+		}), require_registry.el("button", {
+			type: "button",
+			class: "ndp-segment__item",
+			"data-calendar": "AD"
+		})]);
+		this.fiscalButton = require_registry.el("button", {
+			type: "button",
+			class: "ndp-button",
+			"data-action": "fiscal"
+		});
+		this.footer = require_registry.el("div", { class: "ndp-panel__footer" }, [this.segment, this.fiscalButton]);
+		const calendarRoot = require_registry.el("div", { class: "ndp-panel__calendar" });
+		this.presetList = new require_preset_list.PresetList((id) => {
+			if (this.store.actions.applyPreset(id) && !this.store.getState().open) (0, _nepdatejs_dom.restoreFocus)(this.inputs.start);
+		});
+		this.panel = require_registry.el("div", {
+			class: "ndp-panel",
+			id: `${id}-panel`,
+			hidden: true
+		}, [require_registry.el("div", { class: "ndp-panel__body" }, [this.presetList.element, calendarRoot]), this.footer]);
+		const row = require_registry.el("div", { class: "ndp-range" }, [
+			this.boxes.start,
+			require_registry.el("span", {
+				class: "ndp-range__separator",
+				"aria-hidden": "true"
+			}, ["→"]),
+			this.boxes.end
+		]);
+		this.field = require_registry.el("div", { class: "ndp-field" }, [
+			row,
+			this.hint,
+			this.panel,
+			this.hidden.start,
+			this.hidden.end
+		]);
+		host.append(this.field);
+		this.calendarView = new require_registry.CalendarView(calendarRoot, this.store.calendar, {
+			locale: () => this.options.locale,
+			onDayActivate: (date) => {
+				if (this.store.actions.select(date) && !this.store.getState().open) (0, _nepdatejs_dom.restoreFocus)(this.inputs.end);
+			}
+		});
+		this.field.addEventListener("click", this.onClick);
+		this.unsubscribe = this.store.subscribe(() => {
+			this.render();
+		});
+		this.render();
+	}
+	getState() {
+		return this.store.getState();
+	}
+	setOptions(changes) {
+		this.options = {
+			...this.options,
+			...changes
+		};
+		const forStore = storeOptions(changes);
+		if (Object.keys(forStore).length > 0) this.store.setOptions(forStore);
+		else this.render();
+	}
+	open() {
+		if (!this.options.disabled) this.store.actions.open();
+	}
+	close() {
+		this.store.actions.close();
+	}
+	destroy() {
+		this.closePanel?.();
+		this.unsubscribe();
+		this.calendarView.destroy();
+		this.field.remove();
+	}
+	render() {
+		const state = this.store.getState();
+		const locale = (0, _nepdatejs_core.getLocale)(this.options.locale);
+		const disabled = this.options.disabled ?? false;
+		const hintText = state.error?.message ?? null;
+		const texts = {
+			start: state.startText,
+			end: state.endText
+		};
+		const labels = {
+			start: this.options.startLabel,
+			end: this.options.endLabel
+		};
+		for (const field of ["start", "end"]) {
+			const input = this.inputs[field];
+			if (input.value !== texts[field]) input.value = texts[field];
+			const error = state.error;
+			const fieldError = error !== null && (error.field === field || error.field === "range");
+			input.setCustomValidity(fieldError ? error.message : "");
+			require_registry.setAttrs(input, {
+				placeholder: state.placeholder,
+				disabled,
+				required: this.options.required ?? false,
+				"aria-label": labels[field] ?? null,
+				"aria-invalid": fieldError ? "true" : null,
+				"aria-describedby": hintText ? this.hint.id : null
+			});
+			require_registry.setAttrs(this.boxes[field], {
+				"data-invalid": fieldError,
+				"data-disabled": disabled
+			});
+			const name = this.options.hiddenInput === false ? void 0 : field === "start" ? this.options.startName : this.options.endName;
+			require_registry.setAttrs(this.hidden[field], { name: name ?? null });
+			this.hidden[field].value = state.value[field];
+			this.hidden[field].disabled = name === void 0 || disabled;
+		}
+		require_registry.setAttrs(this.field, { "data-ndp-theme": this.options.theme ?? null });
+		require_registry.setAttrs(this.panel, {
+			"data-ndp-theme": this.options.theme ?? null,
+			"aria-label": locale.labels.chooseDate
+		});
+		require_registry.setAttrs(this.toggleButton, {
+			disabled,
+			"aria-label": locale.labels.openCalendar,
+			"aria-expanded": state.open ? "true" : "false"
+		});
+		this.hint.hidden = hintText === null;
+		require_registry.setText(this.hint, hintText ?? "");
+		require_registry.setAttrs(this.hint, { "data-error": hintText !== null });
+		this.segment.hidden = !state.canSwitchCalendar;
+		require_registry.setAttrs(this.segment, { "aria-label": locale.labels.calendar });
+		for (const button of this.segment.querySelectorAll("button")) {
+			const calendar = button.dataset["calendar"];
+			require_registry.setText(button, locale.calendarNames[calendar]);
+			require_registry.setAttrs(button, { "aria-pressed": calendar === state.calendar ? "true" : "false" });
+		}
+		this.presetList.render(state.presets, locale.labels.presets);
+		const fiscal = this.options.fiscalYearView ?? false;
+		this.fiscalButton.hidden = !fiscal;
+		require_registry.setText(this.fiscalButton, locale.labels.fiscalYear);
+		require_registry.setAttrs(this.fiscalButton, { "aria-pressed": state.calendarState.view === "fiscal" ? "true" : "false" });
+		this.footer.hidden = !fiscal && !state.canSwitchCalendar;
+		require_registry.setPopupMode(state, [this.inputs.start, this.inputs.end], this.toggleButton, this.panel);
+		this.syncPanel(state.open && !state.inline);
+		this.panel.hidden = !state.inline && !this.wasOpen;
+		this.panel.style.setProperty("--ndp-panel-width", state.inline ? `${String(this.panelWidth())}px` : null);
+	}
+	panelWidth() {
+		return this.store.getState().presets.length > 0 ? 492 : 320;
+	}
+	syncPanel(open) {
+		if (open === this.wasOpen) return;
+		this.wasOpen = open;
+		this.options.onOpenChange?.(open);
+		if (open) {
+			this.panel.hidden = false;
+			const anchor = this.field.querySelector(".ndp-range") ?? this.field;
+			const stopTracking = (0, _nepdatejs_dom.trackPosition)(anchor, this.panel, {
+				width: this.panelWidth(),
+				layout: this.options.panelLayout
+			});
+			const stopOutside = (0, _nepdatejs_dom.onOutsidePointer)([this.field], () => {
+				this.store.actions.close();
+			});
+			const stopBackdrop = (0, _nepdatejs_dom.onBackdropPointer)(this.panel, () => {
+				this.store.actions.close();
+			});
+			const stopEscape = (0, _nepdatejs_dom.onEscape)(() => {
+				this.store.actions.close();
+				(0, _nepdatejs_dom.restoreFocus)(this.inputs.start);
+			});
+			this.closePanel = () => {
+				stopTracking();
+				stopOutside();
+				stopBackdrop();
+				stopEscape();
+				this.panel.hidden = true;
+			};
+			this.calendarView.focusGrid();
+		} else {
+			this.closePanel?.();
+			this.closePanel = null;
+		}
+	}
+};
+function storeOptions(options) {
+	const out = {};
+	for (const [key, value] of Object.entries(options)) if (!VIEW_KEYS.has(key)) out[key] = value;
+	return out;
+}
+//#endregion
+//#region src/date-range-picker-element.ts
+/**
+* <nep-date-range-picker name="leave" min-days="1"></nep-date-range-picker>
+*
+* Two BS/AD fields sharing one panel. The form receives `${name}-start` and
+* `${name}-end` (or `start-name` / `end-name`). Fires `change` with { value }.
+*/
+var NepDateRangePickerElement = class extends require_registry.Base {
+	constructor() {
+		super();
+		this.view = null;
+		this.rich = {};
+		this.unsubscribe = null;
+		this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+		require_registry.swallowInnerChange(this);
+	}
+	get value() {
+		return this.view?.getState().value ?? {
+			start: "",
+			end: ""
+		};
+	}
+	set value(next) {
+		this.view?.store.actions.setValue(next);
+	}
+	set holidays(next) {
+		this.rich = {
+			...this.rich,
+			holidays: next
+		};
+		this.view?.setOptions({ holidays: next });
+	}
+	set isDateDisabled(next) {
+		this.rich = {
+			...this.rich,
+			isDateDisabled: next
+		};
+		this.view?.setOptions({ isDateDisabled: next });
+	}
+	/** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */
+	get presets() {
+		return this.customPresets ?? require_registry.presetIds(this);
+	}
+	set presets(next) {
+		this.customPresets = next;
+		this.view?.setOptions({ presets: this.presets });
+	}
+	connectedCallback() {
+		if (this.view) return;
+		const view = new DateRangePickerView(this, {
+			...this.readOptions(),
+			defaultValue: {
+				start: require_registry.str(this, "start") ?? "",
+				end: require_registry.str(this, "end") ?? ""
+			},
+			onChange: (value) => {
+				this.dispatchEvent(new CustomEvent("change", {
+					bubbles: true,
+					detail: { value }
+				}));
+			},
+			onOpenChange: (open) => {
+				this.dispatchEvent(new CustomEvent(open ? "nep-open" : "nep-close", { bubbles: true }));
+			}
+		});
+		this.view = view;
+		this.unsubscribe = view.store.subscribe(() => {
+			this.syncForm();
+		});
+		this.syncForm();
+	}
+	disconnectedCallback() {
+		this.unsubscribe?.();
+		this.view?.destroy();
+		this.view = null;
+	}
+	attributeChangedCallback() {
+		this.view?.setOptions(this.readOptions());
+		this.syncForm();
+	}
+	formResetCallback() {
+		this.view?.store.actions.reset();
+	}
+	formDisabledCallback(disabled) {
+		this.view?.setOptions({ disabled: disabled || require_registry.bool(this, "disabled") });
+	}
+	names() {
+		const name = require_registry.str(this, "name");
+		return {
+			start: require_registry.str(this, "start-name") ?? (name ? `${name}-start` : void 0),
+			end: require_registry.str(this, "end-name") ?? (name ? `${name}-end` : void 0)
+		};
+	}
+	readOptions() {
+		const names = this.names();
+		return {
+			...this.rich,
+			startName: names.start,
+			endName: names.end,
+			hiddenInput: this.internals === null,
+			min: require_registry.str(this, "min"),
+			max: require_registry.str(this, "max"),
+			calendar: require_registry.calendarAttr(this, "calendar"),
+			defaultCalendar: require_registry.calendarAttr(this, "default-calendar"),
+			locale: require_registry.str(this, "locale"),
+			minDays: require_registry.int(this, "min-days"),
+			maxDays: require_registry.int(this, "max-days"),
+			disabled: require_registry.bool(this, "disabled"),
+			required: require_registry.bool(this, "required"),
+			theme: require_registry.theme(this),
+			panelLayout: require_registry.panelLayout(this),
+			mask: require_registry.onUnlessFalse(this, "mask"),
+			inline: this.hasAttribute("inline"),
+			startLabel: require_registry.str(this, "start-label"),
+			endLabel: require_registry.str(this, "end-label"),
+			fiscalYearView: require_registry.bool(this, "fiscal-years"),
+			presets: this.presets
+		};
+	}
+	syncForm() {
+		const view = this.view;
+		if (!view || !this.internals) return;
+		const state = view.getState();
+		const names = this.names();
+		const data = new FormData();
+		if (names.start && state.value.start) data.append(names.start, state.value.start);
+		if (names.end && state.value.end) data.append(names.end, state.value.end);
+		this.internals.setFormValue(data);
+		if (state.error) this.internals.setValidity({ customError: true }, state.error.message, view.inputs.start);
+		else if (require_registry.bool(this, "required") && (state.value.start === "" || state.value.end === "")) this.internals.setValidity({ valueMissing: true }, "Please choose a start and end date.", view.inputs.start);
+		else this.internals.setValidity({});
+	}
+};
+NepDateRangePickerElement.formAssociated = true;
+NepDateRangePickerElement.observedAttributes = [
+	"start",
+	"end",
+	"name",
+	"start-name",
+	"end-name",
+	"min",
+	"max",
+	"calendar",
+	"default-calendar",
+	"locale",
+	"min-days",
+	"max-days",
+	"disabled",
+	"required",
+	"theme",
+	"panel-layout",
+	"mask",
+	"inline",
+	"start-label",
+	"end-label",
+	"presets",
+	"fiscal-years"
+];
+//#endregion
+//#region src/date-range-picker.ts
+/** `@nepdatejs/vanilla/date-range-picker`: just the range picker. */
+/** Register <nep-date-range-picker> (skipped if already defined). */
+function defineDateRangePicker(registry) {
+	require_registry.defineElement(require_registry.ELEMENT_NAMES.dateRangePicker, NepDateRangePickerElement, registry);
+}
+/** Mount a date range picker into a container. */
+function createDateRangePicker(container, options = {}) {
+	return new DateRangePickerView(container, options);
+}
+//#endregion
+Object.defineProperty(exports, "DateRangePickerView", {
+	enumerable: true,
+	get: function() {
+		return DateRangePickerView;
+	}
+});
+Object.defineProperty(exports, "NepDateRangePickerElement", {
+	enumerable: true,
+	get: function() {
+		return NepDateRangePickerElement;
+	}
+});
+Object.defineProperty(exports, "createDateRangePicker", {
+	enumerable: true,
+	get: function() {
+		return createDateRangePicker;
+	}
+});
+Object.defineProperty(exports, "defineDateRangePicker", {
+	enumerable: true,
+	get: function() {
+		return defineDateRangePicker;
+	}
+});
+
+//# sourceMappingURL=date-range-picker-BQKcZeqG.cjs.map