@nepdatejs/vanilla 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +124 -2
- package/dist/auto-define.cjs +11 -0
- package/dist/auto-define.cjs.map +1 -0
- package/dist/auto-define.d.cts +2 -0
- package/dist/auto-define.d.ts +2 -0
- package/dist/auto-define.js +9 -0
- package/dist/auto-define.js.map +1 -0
- package/dist/calendar-BAcO-jYq.js +142 -0
- package/dist/calendar-BAcO-jYq.js.map +1 -0
- package/dist/calendar-BNdN8qJv.d.ts +87 -0
- package/dist/calendar-C1LZI7XN.cjs +159 -0
- package/dist/calendar-C1LZI7XN.cjs.map +1 -0
- package/dist/calendar-QWPX0IfD.d.cts +87 -0
- package/dist/calendar.cjs +7 -0
- package/dist/calendar.d.cts +2 -0
- package/dist/calendar.d.ts +2 -0
- package/dist/calendar.js +3 -0
- package/dist/date-picker-BidCGOz0.d.cts +74 -0
- package/dist/date-picker-CQoabjlj.cjs +600 -0
- package/dist/date-picker-CQoabjlj.cjs.map +1 -0
- package/dist/date-picker-DyvpYe29.d.ts +74 -0
- package/dist/date-picker-ucoEFnMW.js +577 -0
- package/dist/date-picker-ucoEFnMW.js.map +1 -0
- package/dist/date-picker.cjs +6 -0
- package/dist/date-picker.d.cts +3 -0
- package/dist/date-picker.d.ts +3 -0
- package/dist/date-picker.js +1 -0
- package/dist/date-range-picker-BQKcZeqG.cjs +489 -0
- package/dist/date-range-picker-BQKcZeqG.cjs.map +1 -0
- package/dist/date-range-picker-D3eNvlgv.d.ts +98 -0
- package/dist/date-range-picker-DAkCzVgT.js +466 -0
- package/dist/date-range-picker-DAkCzVgT.js.map +1 -0
- package/dist/date-range-picker-SIl0vhUV.d.cts +98 -0
- package/dist/date-range-picker.cjs +6 -0
- package/dist/date-range-picker.d.cts +2 -0
- package/dist/date-range-picker.d.ts +2 -0
- package/dist/date-range-picker.js +1 -0
- package/dist/date-time-picker-BqweOP2u.js +487 -0
- package/dist/date-time-picker-BqweOP2u.js.map +1 -0
- package/dist/date-time-picker-Bxfn-a9T.cjs +510 -0
- package/dist/date-time-picker-Bxfn-a9T.cjs.map +1 -0
- package/dist/date-time-picker-BzSyQxrf.d.cts +92 -0
- package/dist/date-time-picker-DzDpzLMZ.d.ts +92 -0
- package/dist/date-time-picker.cjs +6 -0
- package/dist/date-time-picker.d.cts +2 -0
- package/dist/date-time-picker.d.ts +2 -0
- package/dist/date-time-picker.js +1 -0
- package/dist/define-7natoEH4.js +18 -0
- package/dist/define-7natoEH4.js.map +1 -0
- package/dist/define-B8NUA3yj.d.cts +16 -0
- package/dist/define-B8NUA3yj.d.ts +16 -0
- package/dist/define-DTTdLfIM.cjs +23 -0
- package/dist/define-DTTdLfIM.cjs.map +1 -0
- package/dist/element-utils-BVye8UQq.d.cts +82 -0
- package/dist/element-utils-C-r5gPlk.d.ts +82 -0
- package/dist/index.cjs +30 -0
- package/dist/index.d.cts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +8 -0
- package/dist/multi-date-picker-B2mQbjZM.d.ts +105 -0
- package/dist/multi-date-picker-BMEYUPBa.cjs +462 -0
- package/dist/multi-date-picker-BMEYUPBa.cjs.map +1 -0
- package/dist/multi-date-picker-BUNf5zyJ.d.cts +105 -0
- package/dist/multi-date-picker-XCg8Y0sF.js +439 -0
- package/dist/multi-date-picker-XCg8Y0sF.js.map +1 -0
- package/dist/multi-date-picker.cjs +6 -0
- package/dist/multi-date-picker.d.cts +2 -0
- package/dist/multi-date-picker.d.ts +2 -0
- package/dist/multi-date-picker.js +1 -0
- package/dist/nepdate-picker.global.js +3 -0
- package/dist/nepdate-picker.global.js.map +1 -0
- package/dist/preset-list-CASwnwmS.js +45 -0
- package/dist/preset-list-CASwnwmS.js.map +1 -0
- package/dist/preset-list-Cs8H12Wp.cjs +50 -0
- package/dist/preset-list-Cs8H12Wp.cjs.map +1 -0
- package/dist/registry-3qzdVB7H.cjs +591 -0
- package/dist/registry-3qzdVB7H.cjs.map +1 -0
- package/dist/registry-BvkGnkvV.js +466 -0
- package/dist/registry-BvkGnkvV.js.map +1 -0
- package/package.json +162 -3
- package/src/auto-define.ts +6 -0
- package/src/calendar-element.ts +129 -0
- package/src/calendar-view.ts +406 -0
- package/src/calendar.ts +45 -0
- package/src/date-picker-element.ts +249 -0
- package/src/date-picker.ts +91 -0
- package/src/date-range-picker-element.ts +201 -0
- package/src/date-range-picker.ts +20 -0
- package/src/date-time-picker-element.ts +191 -0
- package/src/date-time-picker.ts +20 -0
- package/src/datetime-view.ts +459 -0
- package/src/define.ts +16 -0
- package/src/dom.ts +109 -0
- package/src/element-utils.ts +86 -0
- package/src/global.ts +7 -0
- package/src/index.ts +15 -0
- package/src/multi-date-picker-element.ts +187 -0
- package/src/multi-date-picker.ts +53 -0
- package/src/multi-view.ts +345 -0
- package/src/picker-view.ts +448 -0
- package/src/preset-list.ts +51 -0
- package/src/range-view.ts +393 -0
- package/src/registry.ts +27 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-range-picker-DAkCzVgT.js","names":["createDateRangePicker"],"sources":["../src/range-view.ts","../src/date-range-picker-element.ts","../src/date-range-picker.ts"],"sourcesContent":["import { getLocale, type CalendarSystem } from '@nepdatejs/core';\nimport {\n createDateRangePicker,\n type DateRangePickerOptions,\n type DateRangePickerState,\n type DateRangePickerStore,\n type RangeField,\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';\nimport type { Theme } from './picker-view';\n\nexport interface DateRangePickerViewOptions extends DateRangePickerOptions {\n /** Field names for plain form posts; hidden inputs are rendered when set. */\n readonly startName?: string | undefined;\n readonly endName?: string | undefined;\n readonly hiddenInput?: boolean | undefined;\n readonly disabled?: boolean | undefined;\n readonly required?: 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 readonly startLabel?: string | undefined;\n readonly endLabel?: string | undefined;\n /** Show a \"Fiscal year\" button that switches the panel to fiscal-year tiles. */\n readonly fiscalYearView?: boolean | undefined;\n readonly onOpenChange?: ((open: boolean) => void) | undefined;\n}\n\nconst VIEW_KEYS = new Set([\n 'startName',\n 'endName',\n 'hiddenInput',\n 'disabled',\n 'required',\n 'theme',\n 'panelLayout',\n 'startLabel',\n 'endLabel',\n 'fiscalYearView',\n 'onOpenChange',\n 'onChange',\n 'onCalendarChange',\n]);\n\n/** Two date fields (start, end) sharing one panel calendar in range mode. */\nexport class DateRangePickerView {\n readonly store: DateRangePickerStore;\n readonly inputs: Record<RangeField, HTMLInputElement>;\n private options: DateRangePickerViewOptions;\n private readonly field: HTMLDivElement;\n private readonly boxes: Record<RangeField, HTMLDivElement>;\n private readonly toggleButton: HTMLButtonElement;\n private readonly hint: HTMLParagraphElement;\n private readonly panel: HTMLDivElement;\n private readonly segment: HTMLDivElement;\n private readonly fiscalButton: HTMLButtonElement;\n private readonly footer: HTMLDivElement;\n private readonly hidden: Record<RangeField, 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: DateRangePickerViewOptions = {}) {\n this.options = { ...options };\n this.store = createDateRangePicker({\n ...storeOptions(options),\n onChange: (value, detail) => {\n this.options.onChange?.(value, detail);\n },\n onCalendarChange: (calendar) => {\n this.options.onCalendarChange?.(calendar);\n },\n });\n const id = uid('ndp-range');\n const makeInput = (field: RangeField): HTMLInputElement => {\n const input = el('input', {\n class: 'ndp-input__control',\n id: `${id}-${field}`,\n type: 'text',\n inputmode: 'numeric',\n autocomplete: 'off',\n 'aria-controls': `${id}-panel`,\n 'data-field': field,\n });\n input.addEventListener('input', () => {\n this.store.actions.type(field, input.value);\n });\n input.addEventListener('blur', () => {\n this.store.actions.blur(field);\n });\n input.addEventListener('keydown', (event) => {\n if (event.key === 'ArrowDown' && (event.altKey || input.value === '')) {\n event.preventDefault();\n this.open();\n }\n });\n return input;\n };\n this.inputs = { start: makeInput('start'), end: makeInput('end') };\n this.toggleButton = el(\n 'button',\n { type: 'button', class: 'ndp-icon-button', 'data-action': 'toggle' },\n [icon('calendar')],\n );\n this.boxes = {\n start: el('div', { class: 'ndp-input' }, [this.inputs.start]),\n end: el('div', { class: 'ndp-input' }, [\n this.inputs.end,\n el('span', { class: 'ndp-input__actions' }, [this.toggleButton]),\n ]),\n };\n this.hint = el('p', {\n class: 'ndp-hint',\n id: `${id}-hint`,\n 'aria-live': 'polite',\n hidden: true,\n });\n this.hidden = {\n start: el('input', { type: 'hidden' }),\n end: el('input', { type: 'hidden' }),\n };\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.fiscalButton = el('button', {\n type: 'button',\n class: 'ndp-button',\n 'data-action': 'fiscal',\n });\n this.footer = el('div', { class: 'ndp-panel__footer' }, [\n this.segment,\n this.fiscalButton,\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.inputs.start);\n }\n });\n this.panel = el(\n 'div',\n {\n class: 'ndp-panel',\n id: `${id}-panel`,\n\n hidden: true,\n },\n [\n el('div', { class: 'ndp-panel__body' }, [this.presetList.element, calendarRoot]),\n this.footer,\n ],\n );\n const row = el('div', { class: 'ndp-range' }, [\n this.boxes.start,\n el('span', { class: 'ndp-range__separator', 'aria-hidden': 'true' }, ['→']),\n this.boxes.end,\n ]);\n this.field = el('div', { class: 'ndp-field' }, [\n row,\n this.hint,\n this.panel,\n this.hidden.start,\n this.hidden.end,\n ]);\n host.append(this.field);\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.inputs.end);\n }\n },\n });\n this.field.addEventListener('click', this.onClick);\n this.unsubscribe = this.store.subscribe(() => {\n this.render();\n });\n this.render();\n }\n\n getState(): DateRangePickerState {\n return this.store.getState();\n }\n\n setOptions(changes: Partial<DateRangePickerViewOptions>): 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 = state.error?.message ?? null;\n const texts: Record<RangeField, string> = {\n start: state.startText,\n end: state.endText,\n };\n const labels: Record<RangeField, string | undefined> = {\n start: this.options.startLabel,\n end: this.options.endLabel,\n };\n for (const field of ['start', 'end'] as const) {\n const input = this.inputs[field];\n if (input.value !== texts[field]) {\n input.value = texts[field];\n }\n const error = state.error;\n const fieldError =\n error !== null && (error.field === field || error.field === 'range');\n input.setCustomValidity(fieldError ? error.message : '');\n setAttrs(input, {\n placeholder: state.placeholder,\n disabled,\n required: this.options.required ?? false,\n 'aria-label': labels[field] ?? null,\n 'aria-invalid': fieldError ? 'true' : null,\n 'aria-describedby': hintText ? this.hint.id : null,\n });\n setAttrs(this.boxes[field], {\n 'data-invalid': fieldError,\n 'data-disabled': disabled,\n });\n const name =\n this.options.hiddenInput === false\n ? undefined\n : field === 'start'\n ? this.options.startName\n : this.options.endName;\n setAttrs(this.hidden[field], { name: name ?? null });\n this.hidden[field].value = state.value[field];\n this.hidden[field].disabled = name === undefined || 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': locale.labels.chooseDate,\n });\n setAttrs(this.toggleButton, {\n disabled,\n 'aria-label': locale.labels.openCalendar,\n 'aria-expanded': state.open ? 'true' : 'false',\n });\n this.hint.hidden = hintText === null;\n setText(this.hint, hintText ?? '');\n setAttrs(this.hint, { 'data-error': hintText !== null });\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 this.presetList.render(state.presets, locale.labels.presets);\n const fiscal = this.options.fiscalYearView ?? false;\n this.fiscalButton.hidden = !fiscal;\n setText(this.fiscalButton, locale.labels.fiscalYear);\n setAttrs(this.fiscalButton, {\n 'aria-pressed': state.calendarState.view === 'fiscal' ? 'true' : 'false',\n });\n this.footer.hidden = !fiscal && !state.canSwitchCalendar;\n setPopupMode(\n state,\n [this.inputs.start, this.inputs.end],\n this.toggleButton,\n this.panel,\n );\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 anchor = this.field.querySelector('.ndp-range') ?? this.field;\n const stopTracking = trackPosition(anchor, this.panel, {\n width: this.panelWidth(),\n layout: this.options.panelLayout,\n });\n const stopOutside = onOutsidePointer([this.field], () => {\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.inputs.start);\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 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 if (target.closest('[data-action=\"fiscal\"]')) {\n const calendar = this.store.calendar;\n calendar.actions.setView(calendar.getState().view === 'fiscal' ? 'day' : 'fiscal');\n this.calendarView.focusGrid();\n return;\n }\n if (target.closest('[data-action=\"toggle\"]')) {\n if (this.store.getState().open) {\n this.close();\n } else {\n this.open();\n }\n }\n };\n}\n\nfunction storeOptions(\n options: Partial<DateRangePickerViewOptions>,\n): Partial<DateRangePickerOptions> {\n const out: Record<string, unknown> = {};\n for (const [key, value] of Object.entries(options)) {\n if (!VIEW_KEYS.has(key)) {\n out[key] = value;\n }\n }\n\n return out;\n}\n","import type { RangePreset } from '@nepdatejs/datepicker';\nimport { DateRangePickerView, type DateRangePickerViewOptions } from './range-view';\nimport {\n Base,\n str,\n bool,\n calendarAttr,\n int,\n onUnlessFalse,\n panelLayout,\n theme,\n presetIds,\n swallowInnerChange,\n type RichProps,\n} from './element-utils';\n\n/**\n * <nep-date-range-picker name=\"leave\" min-days=\"1\"></nep-date-range-picker>\n *\n * Two BS/AD fields sharing one panel. The form receives `${name}-start` and\n * `${name}-end` (or `start-name` / `end-name`). Fires `change` with { value }.\n */\nexport class NepDateRangePickerElement extends Base {\n static readonly formAssociated = true;\n static readonly observedAttributes: readonly string[] = [\n 'start',\n 'end',\n 'name',\n 'start-name',\n 'end-name',\n 'min',\n 'max',\n 'calendar',\n 'default-calendar',\n 'locale',\n 'min-days',\n 'max-days',\n 'disabled',\n 'required',\n 'theme',\n 'panel-layout',\n 'mask',\n 'inline',\n 'start-label',\n 'end-label',\n 'presets',\n 'fiscal-years',\n ];\n\n view: DateRangePickerView | null = null;\n private readonly internals: ElementInternals | null;\n private rich: RichProps = {};\n private customPresets: readonly RangePreset[] | 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(): { start: string; end: string } {\n return this.view?.getState().value ?? { start: '', end: '' };\n }\n set value(next: { start: string; end: string }) {\n this.view?.store.actions.setValue(next);\n }\n set holidays(next: RichProps['holidays']) {\n this.rich = { ...this.rich, holidays: next };\n this.view?.setOptions({ holidays: next });\n }\n set isDateDisabled(next: RichProps['isDateDisabled']) {\n this.rich = { ...this.rich, isDateDisabled: next };\n this.view?.setOptions({ isDateDisabled: next });\n }\n /** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */\n get presets(): readonly RangePreset[] | undefined {\n return this.customPresets ?? (presetIds(this) as readonly RangePreset[] | undefined);\n }\n set presets(next: readonly RangePreset[] | undefined) {\n this.customPresets = next;\n this.view?.setOptions({ presets: this.presets });\n }\n\n connectedCallback(): void {\n if (this.view) {\n return;\n }\n const view = new DateRangePickerView(this, {\n ...this.readOptions(),\n defaultValue: { start: str(this, 'start') ?? '', end: str(this, 'end') ?? '' },\n onChange: (value) => {\n this.dispatchEvent(\n new CustomEvent('change', { bubbles: true, detail: { value } }),\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(): void {\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 private names(): { start: string | undefined; end: string | undefined } {\n const name = str(this, 'name');\n\n return {\n start: str(this, 'start-name') ?? (name ? `${name}-start` : undefined),\n end: str(this, 'end-name') ?? (name ? `${name}-end` : undefined),\n };\n }\n\n private readOptions(): DateRangePickerViewOptions {\n const names = this.names();\n\n return {\n ...this.rich,\n startName: names.start,\n endName: names.end,\n hiddenInput: this.internals === null,\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 minDays: int(this, 'min-days'),\n maxDays: int(this, 'max-days'),\n disabled: bool(this, 'disabled'),\n required: bool(this, 'required'),\n theme: theme(this),\n panelLayout: panelLayout(this),\n mask: onUnlessFalse(this, 'mask'),\n inline: this.hasAttribute('inline'),\n startLabel: str(this, 'start-label'),\n endLabel: str(this, 'end-label'),\n fiscalYearView: bool(this, 'fiscal-years'),\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 const names = this.names();\n const data = new FormData();\n if (names.start && state.value.start) {\n data.append(names.start, state.value.start);\n }\n if (names.end && state.value.end) {\n data.append(names.end, state.value.end);\n }\n this.internals.setFormValue(data);\n if (state.error) {\n this.internals.setValidity(\n { customError: true },\n state.error.message,\n view.inputs.start,\n );\n } else if (\n bool(this, 'required') &&\n (state.value.start === '' || state.value.end === '')\n ) {\n this.internals.setValidity(\n { valueMissing: true },\n 'Please choose a start and end date.',\n view.inputs.start,\n );\n } else {\n this.internals.setValidity({});\n }\n }\n}\n","/** `@nepdatejs/vanilla/date-range-picker`: just the range picker. */\nimport { NepDateRangePickerElement } from './date-range-picker-element';\nimport { DateRangePickerView, type DateRangePickerViewOptions } from './range-view';\nimport { defineElement, ELEMENT_NAMES } from './registry';\n\nexport { NepDateRangePickerElement };\nexport { DateRangePickerView, type DateRangePickerViewOptions } from './range-view';\n\n/** Register <nep-date-range-picker> (skipped if already defined). */\nexport function defineDateRangePicker(registry?: CustomElementRegistry): void {\n defineElement(ELEMENT_NAMES.dateRangePicker, NepDateRangePickerElement, registry);\n}\n\n/** Mount a date range picker into a container. */\nexport function createDateRangePicker(\n container: HTMLElement,\n options: DateRangePickerViewOptions = {},\n): DateRangePickerView {\n return new DateRangePickerView(container, options);\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { a as Theme, n as RichProps, t as Base } from "./element-utils-BVye8UQq.cjs";
|
|
2
|
+
import { PanelLayout } from "@nepdatejs/dom";
|
|
3
|
+
import { DateRangePickerOptions, DateRangePickerState, DateRangePickerStore, RangeField, RangePreset } from "@nepdatejs/datepicker";
|
|
4
|
+
//#region src/range-view.d.ts
|
|
5
|
+
interface DateRangePickerViewOptions extends DateRangePickerOptions {
|
|
6
|
+
/** Field names for plain form posts; hidden inputs are rendered when set. */
|
|
7
|
+
readonly startName?: string | undefined;
|
|
8
|
+
readonly endName?: string | undefined;
|
|
9
|
+
readonly hiddenInput?: boolean | undefined;
|
|
10
|
+
readonly disabled?: boolean | undefined;
|
|
11
|
+
readonly required?: boolean | undefined;
|
|
12
|
+
/** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
|
|
13
|
+
readonly panelLayout?: PanelLayout | undefined;
|
|
14
|
+
readonly theme?: Theme | undefined;
|
|
15
|
+
readonly startLabel?: string | undefined;
|
|
16
|
+
readonly endLabel?: string | undefined;
|
|
17
|
+
/** Show a "Fiscal year" button that switches the panel to fiscal-year tiles. */
|
|
18
|
+
readonly fiscalYearView?: boolean | undefined;
|
|
19
|
+
readonly onOpenChange?: ((open: boolean) => void) | undefined;
|
|
20
|
+
}
|
|
21
|
+
/** Two date fields (start, end) sharing one panel calendar in range mode. */
|
|
22
|
+
declare class DateRangePickerView {
|
|
23
|
+
readonly store: DateRangePickerStore;
|
|
24
|
+
readonly inputs: Record<RangeField, HTMLInputElement>;
|
|
25
|
+
private options;
|
|
26
|
+
private readonly field;
|
|
27
|
+
private readonly boxes;
|
|
28
|
+
private readonly toggleButton;
|
|
29
|
+
private readonly hint;
|
|
30
|
+
private readonly panel;
|
|
31
|
+
private readonly segment;
|
|
32
|
+
private readonly fiscalButton;
|
|
33
|
+
private readonly footer;
|
|
34
|
+
private readonly hidden;
|
|
35
|
+
private readonly calendarView;
|
|
36
|
+
private readonly presetList;
|
|
37
|
+
private readonly unsubscribe;
|
|
38
|
+
private closePanel;
|
|
39
|
+
private wasOpen;
|
|
40
|
+
constructor(host: HTMLElement, options?: DateRangePickerViewOptions);
|
|
41
|
+
getState(): DateRangePickerState;
|
|
42
|
+
setOptions(changes: Partial<DateRangePickerViewOptions>): void;
|
|
43
|
+
open(): void;
|
|
44
|
+
close(): void;
|
|
45
|
+
destroy(): void;
|
|
46
|
+
private render;
|
|
47
|
+
private panelWidth;
|
|
48
|
+
private syncPanel;
|
|
49
|
+
private readonly onClick;
|
|
50
|
+
}
|
|
51
|
+
//#endregion
|
|
52
|
+
//#region src/date-range-picker-element.d.ts
|
|
53
|
+
/**
|
|
54
|
+
* <nep-date-range-picker name="leave" min-days="1"></nep-date-range-picker>
|
|
55
|
+
*
|
|
56
|
+
* Two BS/AD fields sharing one panel. The form receives `${name}-start` and
|
|
57
|
+
* `${name}-end` (or `start-name` / `end-name`). Fires `change` with { value }.
|
|
58
|
+
*/
|
|
59
|
+
declare class NepDateRangePickerElement extends Base {
|
|
60
|
+
static readonly formAssociated = true;
|
|
61
|
+
static readonly observedAttributes: readonly string[];
|
|
62
|
+
view: DateRangePickerView | null;
|
|
63
|
+
private readonly internals;
|
|
64
|
+
private rich;
|
|
65
|
+
private customPresets;
|
|
66
|
+
private unsubscribe;
|
|
67
|
+
constructor();
|
|
68
|
+
get value(): {
|
|
69
|
+
start: string;
|
|
70
|
+
end: string;
|
|
71
|
+
};
|
|
72
|
+
set value(next: {
|
|
73
|
+
start: string;
|
|
74
|
+
end: string;
|
|
75
|
+
});
|
|
76
|
+
set holidays(next: RichProps["holidays"]);
|
|
77
|
+
set isDateDisabled(next: RichProps["isDateDisabled"]);
|
|
78
|
+
/** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */
|
|
79
|
+
get presets(): readonly RangePreset[] | undefined;
|
|
80
|
+
set presets(next: readonly RangePreset[] | undefined);
|
|
81
|
+
connectedCallback(): void;
|
|
82
|
+
disconnectedCallback(): void;
|
|
83
|
+
attributeChangedCallback(): void;
|
|
84
|
+
formResetCallback(): void;
|
|
85
|
+
formDisabledCallback(disabled: boolean): void;
|
|
86
|
+
private names;
|
|
87
|
+
private readOptions;
|
|
88
|
+
private syncForm;
|
|
89
|
+
}
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/date-range-picker.d.ts
|
|
92
|
+
/** Register <nep-date-range-picker> (skipped if already defined). */
|
|
93
|
+
declare function defineDateRangePicker(registry?: CustomElementRegistry): void;
|
|
94
|
+
/** Mount a date range picker into a container. */
|
|
95
|
+
declare function createDateRangePicker(container: HTMLElement, options?: DateRangePickerViewOptions): DateRangePickerView;
|
|
96
|
+
//#endregion
|
|
97
|
+
export { DateRangePickerViewOptions as a, DateRangePickerView as i, defineDateRangePicker as n, NepDateRangePickerElement as r, createDateRangePicker as t };
|
|
98
|
+
//# sourceMappingURL=date-range-picker-SIl0vhUV.d.cts.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_date_range_picker = require("./date-range-picker-BQKcZeqG.cjs");
|
|
3
|
+
exports.DateRangePickerView = require_date_range_picker.DateRangePickerView;
|
|
4
|
+
exports.NepDateRangePickerElement = require_date_range_picker.NepDateRangePickerElement;
|
|
5
|
+
exports.createDateRangePicker = require_date_range_picker.createDateRangePicker;
|
|
6
|
+
exports.defineDateRangePicker = require_date_range_picker.defineDateRangePicker;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as DateRangePickerViewOptions, i as DateRangePickerView, n as defineDateRangePicker, r as NepDateRangePickerElement, t as createDateRangePicker } from "./date-range-picker-SIl0vhUV.cjs";
|
|
2
|
+
export { DateRangePickerView, type DateRangePickerViewOptions, NepDateRangePickerElement, createDateRangePicker, defineDateRangePicker };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as DateRangePickerViewOptions, i as DateRangePickerView, n as defineDateRangePicker, r as NepDateRangePickerElement, t as createDateRangePicker } from "./date-range-picker-D3eNvlgv.js";
|
|
2
|
+
export { DateRangePickerView, type DateRangePickerViewOptions, NepDateRangePickerElement, createDateRangePicker, defineDateRangePicker };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { i as DateRangePickerView, r as NepDateRangePickerElement, t as createDateRangePicker, n as defineDateRangePicker } from "./date-range-picker-DAkCzVgT.js";
|
|
@@ -0,0 +1,487 @@
|
|
|
1
|
+
import { _ as icon, a as calendarAttr, b as setText, c as onUnlessFalse, d as str, f as swallowInnerChange, g as el, h as CalendarView, i as bool, l as panelLayout, n as defineElement, o as int, p as theme, r as Base, t as ELEMENT_NAMES, u as presetIds, v as setAttrs, x as uid, y as setPopupMode } from "./registry-BvkGnkvV.js";
|
|
2
|
+
import { t as PresetList } from "./preset-list-CASwnwmS.js";
|
|
3
|
+
import { getLocale } from "@nepdatejs/core";
|
|
4
|
+
import { createDateTimePicker } from "@nepdatejs/datepicker";
|
|
5
|
+
import { onBackdropPointer, onEscape, onOutsidePointer, restoreFocus, trackPosition } from "@nepdatejs/dom";
|
|
6
|
+
//#region src/datetime-view.ts
|
|
7
|
+
const VIEW_KEYS = /* @__PURE__ */ new Set([
|
|
8
|
+
"name",
|
|
9
|
+
"hiddenInput",
|
|
10
|
+
"required",
|
|
11
|
+
"disabled",
|
|
12
|
+
"theme",
|
|
13
|
+
"panelLayout",
|
|
14
|
+
"ariaLabel",
|
|
15
|
+
"timeLabel",
|
|
16
|
+
"id",
|
|
17
|
+
"onOpenChange",
|
|
18
|
+
"onChange"
|
|
19
|
+
]);
|
|
20
|
+
/** A date input and a time input sharing one panel: calendar plus hour/minute columns. */
|
|
21
|
+
var DateTimePickerView = class {
|
|
22
|
+
constructor(host, options = {}) {
|
|
23
|
+
this.closePanel = null;
|
|
24
|
+
this.wasOpen = false;
|
|
25
|
+
this.onClick = (event) => {
|
|
26
|
+
const target = event.target instanceof Element ? event.target : null;
|
|
27
|
+
if (!target || this.calendarView.element.contains(target)) return;
|
|
28
|
+
const item = target.closest(".ndp-time-item");
|
|
29
|
+
if (item) {
|
|
30
|
+
const unit = item.parentElement?.dataset["unit"];
|
|
31
|
+
const value = Number(item.dataset["value"]);
|
|
32
|
+
if (unit === "hour") this.store.actions.selectHour(value);
|
|
33
|
+
else this.store.actions.selectMinute(value);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
const calendar = target.closest("[data-calendar]")?.dataset["calendar"];
|
|
37
|
+
if (calendar === "BS" || calendar === "AD") {
|
|
38
|
+
this.store.actions.switchCalendar(calendar);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
switch (target.closest("[data-action]")?.dataset["action"]) {
|
|
42
|
+
case "toggle":
|
|
43
|
+
if (this.store.getState().open) this.close();
|
|
44
|
+
else this.open();
|
|
45
|
+
break;
|
|
46
|
+
case "now":
|
|
47
|
+
this.store.actions.selectNow();
|
|
48
|
+
break;
|
|
49
|
+
case "done":
|
|
50
|
+
this.close();
|
|
51
|
+
this.dateInput.focus();
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
this.options = { ...options };
|
|
55
|
+
this.store = createDateTimePicker({
|
|
56
|
+
...storeOptions(options),
|
|
57
|
+
onChange: (value, detail) => {
|
|
58
|
+
this.options.onChange?.(value, detail);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
const id = options.id ?? uid("ndp-datetime");
|
|
62
|
+
this.dateInput = el("input", {
|
|
63
|
+
class: "ndp-input__control",
|
|
64
|
+
id,
|
|
65
|
+
type: "text",
|
|
66
|
+
inputmode: "numeric",
|
|
67
|
+
autocomplete: "off",
|
|
68
|
+
"aria-controls": `${id}-panel`
|
|
69
|
+
});
|
|
70
|
+
this.timeInput = el("input", {
|
|
71
|
+
class: "ndp-input__control",
|
|
72
|
+
id: `${id}-time`,
|
|
73
|
+
type: "text",
|
|
74
|
+
autocomplete: "off"
|
|
75
|
+
});
|
|
76
|
+
this.toggleButton = el("button", {
|
|
77
|
+
type: "button",
|
|
78
|
+
class: "ndp-icon-button",
|
|
79
|
+
"data-action": "toggle"
|
|
80
|
+
}, [icon("calendar")]);
|
|
81
|
+
this.dateBox = el("div", { class: "ndp-input" }, [this.dateInput, el("span", { class: "ndp-input__actions" }, [this.toggleButton])]);
|
|
82
|
+
this.timeBox = el("div", { class: "ndp-input ndp-input--time" }, [this.timeInput]);
|
|
83
|
+
this.row = el("div", { class: "ndp-datetime" }, [this.dateBox, this.timeBox]);
|
|
84
|
+
this.hint = el("p", {
|
|
85
|
+
class: "ndp-hint",
|
|
86
|
+
id: `${id}-hint`,
|
|
87
|
+
"aria-live": "polite",
|
|
88
|
+
hidden: true
|
|
89
|
+
});
|
|
90
|
+
this.hidden = el("input", { type: "hidden" });
|
|
91
|
+
this.segment = el("div", {
|
|
92
|
+
class: "ndp-segment",
|
|
93
|
+
role: "group"
|
|
94
|
+
}, [el("button", {
|
|
95
|
+
type: "button",
|
|
96
|
+
class: "ndp-segment__item",
|
|
97
|
+
"data-calendar": "BS"
|
|
98
|
+
}), el("button", {
|
|
99
|
+
type: "button",
|
|
100
|
+
class: "ndp-segment__item",
|
|
101
|
+
"data-calendar": "AD"
|
|
102
|
+
})]);
|
|
103
|
+
this.nowButton = el("button", {
|
|
104
|
+
type: "button",
|
|
105
|
+
class: "ndp-button",
|
|
106
|
+
"data-action": "now"
|
|
107
|
+
});
|
|
108
|
+
this.doneButton = el("button", {
|
|
109
|
+
type: "button",
|
|
110
|
+
class: "ndp-button",
|
|
111
|
+
"data-variant": "primary",
|
|
112
|
+
"data-action": "done"
|
|
113
|
+
});
|
|
114
|
+
this.hours = el("div", {
|
|
115
|
+
class: "ndp-time__column",
|
|
116
|
+
role: "group",
|
|
117
|
+
"data-unit": "hour"
|
|
118
|
+
});
|
|
119
|
+
this.minutes = el("div", {
|
|
120
|
+
class: "ndp-time__column",
|
|
121
|
+
role: "group",
|
|
122
|
+
"data-unit": "minute"
|
|
123
|
+
});
|
|
124
|
+
this.time = el("div", {
|
|
125
|
+
class: "ndp-time",
|
|
126
|
+
role: "group"
|
|
127
|
+
}, [this.hours, this.minutes]);
|
|
128
|
+
const calendarRoot = el("div", { class: "ndp-panel__calendar" });
|
|
129
|
+
this.presetList = new PresetList((presetId) => {
|
|
130
|
+
this.store.actions.applyPreset(presetId);
|
|
131
|
+
});
|
|
132
|
+
this.panel = el("div", {
|
|
133
|
+
class: "ndp-panel",
|
|
134
|
+
id: `${id}-panel`,
|
|
135
|
+
hidden: true
|
|
136
|
+
}, [el("div", { class: "ndp-panel__body" }, [
|
|
137
|
+
this.presetList.element,
|
|
138
|
+
calendarRoot,
|
|
139
|
+
this.time
|
|
140
|
+
]), el("div", { class: "ndp-panel__footer" }, [this.segment, el("span", {}, [this.nowButton, this.doneButton])])]);
|
|
141
|
+
this.field = el("div", { class: "ndp-field" }, [
|
|
142
|
+
this.row,
|
|
143
|
+
this.hint,
|
|
144
|
+
this.panel,
|
|
145
|
+
this.hidden
|
|
146
|
+
]);
|
|
147
|
+
host.append(this.field);
|
|
148
|
+
this.calendarView = new CalendarView(calendarRoot, this.store.calendar, {
|
|
149
|
+
locale: () => this.options.locale,
|
|
150
|
+
onDayActivate: (date) => {
|
|
151
|
+
this.store.actions.selectDate(date);
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
this.dateInput.addEventListener("input", () => {
|
|
155
|
+
this.store.actions.typeDate(this.dateInput.value);
|
|
156
|
+
});
|
|
157
|
+
this.dateInput.addEventListener("blur", () => {
|
|
158
|
+
this.store.actions.blurDate();
|
|
159
|
+
});
|
|
160
|
+
this.dateInput.addEventListener("keydown", (event) => {
|
|
161
|
+
if (event.key === "ArrowDown" && (event.altKey || this.dateInput.value === "")) {
|
|
162
|
+
event.preventDefault();
|
|
163
|
+
this.open();
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
this.timeInput.addEventListener("input", () => {
|
|
167
|
+
this.store.actions.typeTime(this.timeInput.value);
|
|
168
|
+
});
|
|
169
|
+
this.timeInput.addEventListener("blur", () => {
|
|
170
|
+
this.store.actions.blurTime();
|
|
171
|
+
});
|
|
172
|
+
this.field.addEventListener("click", this.onClick);
|
|
173
|
+
this.unsubscribe = this.store.subscribe(() => {
|
|
174
|
+
this.render();
|
|
175
|
+
});
|
|
176
|
+
this.render();
|
|
177
|
+
}
|
|
178
|
+
getState() {
|
|
179
|
+
return this.store.getState();
|
|
180
|
+
}
|
|
181
|
+
setOptions(changes) {
|
|
182
|
+
this.options = {
|
|
183
|
+
...this.options,
|
|
184
|
+
...changes
|
|
185
|
+
};
|
|
186
|
+
const forStore = storeOptions(changes);
|
|
187
|
+
if (Object.keys(forStore).length > 0) this.store.setOptions(forStore);
|
|
188
|
+
else this.render();
|
|
189
|
+
}
|
|
190
|
+
open() {
|
|
191
|
+
if (!this.options.disabled) this.store.actions.open();
|
|
192
|
+
}
|
|
193
|
+
close() {
|
|
194
|
+
this.store.actions.close();
|
|
195
|
+
}
|
|
196
|
+
destroy() {
|
|
197
|
+
this.closePanel?.();
|
|
198
|
+
this.unsubscribe();
|
|
199
|
+
this.calendarView.destroy();
|
|
200
|
+
this.field.remove();
|
|
201
|
+
}
|
|
202
|
+
render() {
|
|
203
|
+
const state = this.store.getState();
|
|
204
|
+
const locale = getLocale(this.options.locale);
|
|
205
|
+
const disabled = this.options.disabled ?? false;
|
|
206
|
+
const hint = state.error?.message ?? state.equivalentText;
|
|
207
|
+
if (this.dateInput.value !== state.dateText) this.dateInput.value = state.dateText;
|
|
208
|
+
if (this.timeInput.value !== state.timeText) this.timeInput.value = state.timeText;
|
|
209
|
+
this.dateInput.setCustomValidity(state.error?.field === "date" ? state.error.message : "");
|
|
210
|
+
this.timeInput.setCustomValidity(state.error?.field === "time" ? state.error.message : "");
|
|
211
|
+
setAttrs(this.dateInput, {
|
|
212
|
+
placeholder: state.placeholder,
|
|
213
|
+
disabled,
|
|
214
|
+
required: this.options.required ?? false,
|
|
215
|
+
"aria-label": this.options.ariaLabel ?? null,
|
|
216
|
+
"aria-invalid": state.error?.field === "date" ? "true" : null,
|
|
217
|
+
"aria-describedby": hint ? this.hint.id : null
|
|
218
|
+
});
|
|
219
|
+
setAttrs(this.timeInput, {
|
|
220
|
+
placeholder: state.timePlaceholder,
|
|
221
|
+
disabled,
|
|
222
|
+
"aria-label": this.options.timeLabel ?? locale.labels.time,
|
|
223
|
+
"aria-invalid": state.error?.field === "time" ? "true" : null,
|
|
224
|
+
"aria-describedby": hint ? this.hint.id : null
|
|
225
|
+
});
|
|
226
|
+
setAttrs(this.dateBox, {
|
|
227
|
+
"data-invalid": state.error?.field === "date",
|
|
228
|
+
"data-disabled": disabled
|
|
229
|
+
});
|
|
230
|
+
setAttrs(this.timeBox, {
|
|
231
|
+
"data-invalid": state.error?.field === "time",
|
|
232
|
+
"data-disabled": disabled
|
|
233
|
+
});
|
|
234
|
+
setAttrs(this.field, { "data-ndp-theme": this.options.theme ?? null });
|
|
235
|
+
setAttrs(this.panel, {
|
|
236
|
+
"data-ndp-theme": this.options.theme ?? null,
|
|
237
|
+
"aria-label": locale.labels.chooseDate
|
|
238
|
+
});
|
|
239
|
+
setAttrs(this.toggleButton, {
|
|
240
|
+
disabled,
|
|
241
|
+
"aria-label": locale.labels.openCalendar,
|
|
242
|
+
"aria-expanded": state.open ? "true" : "false"
|
|
243
|
+
});
|
|
244
|
+
this.hint.hidden = hint === null;
|
|
245
|
+
setText(this.hint, hint ?? "");
|
|
246
|
+
setAttrs(this.hint, { "data-error": state.error !== null });
|
|
247
|
+
this.segment.hidden = !state.canSwitchCalendar;
|
|
248
|
+
setAttrs(this.segment, { "aria-label": locale.labels.calendar });
|
|
249
|
+
for (const button of this.segment.querySelectorAll("button")) {
|
|
250
|
+
const calendar = button.dataset["calendar"];
|
|
251
|
+
setText(button, locale.calendarNames[calendar]);
|
|
252
|
+
setAttrs(button, { "aria-pressed": calendar === state.calendar ? "true" : "false" });
|
|
253
|
+
}
|
|
254
|
+
setText(this.nowButton, locale.labels.now);
|
|
255
|
+
setText(this.doneButton, locale.labels.done);
|
|
256
|
+
setAttrs(this.time, { "aria-label": locale.labels.time });
|
|
257
|
+
setAttrs(this.hours, { "aria-label": locale.labels.hour });
|
|
258
|
+
setAttrs(this.minutes, { "aria-label": locale.labels.minute });
|
|
259
|
+
renderColumn(this.hours, state.hours);
|
|
260
|
+
renderColumn(this.minutes, state.minutes);
|
|
261
|
+
this.presetList.render(state.presets, locale.labels.presets);
|
|
262
|
+
const name = this.options.hiddenInput === false ? void 0 : this.options.name;
|
|
263
|
+
setAttrs(this.hidden, { name: name ?? null });
|
|
264
|
+
this.hidden.value = state.value;
|
|
265
|
+
this.hidden.disabled = name === void 0 || disabled;
|
|
266
|
+
setPopupMode(state, [this.dateInput], this.toggleButton, this.panel);
|
|
267
|
+
this.syncPanel(state.open && !state.inline);
|
|
268
|
+
this.panel.hidden = !state.inline && !this.wasOpen;
|
|
269
|
+
this.panel.style.setProperty("--ndp-panel-width", state.inline ? `${String(this.panelWidth())}px` : null);
|
|
270
|
+
}
|
|
271
|
+
panelWidth() {
|
|
272
|
+
return (this.store.getState().presets.length > 0 ? 492 : 320) + 136;
|
|
273
|
+
}
|
|
274
|
+
syncPanel(open) {
|
|
275
|
+
if (open === this.wasOpen) return;
|
|
276
|
+
this.wasOpen = open;
|
|
277
|
+
this.options.onOpenChange?.(open);
|
|
278
|
+
if (open) {
|
|
279
|
+
this.panel.hidden = false;
|
|
280
|
+
const stopTracking = trackPosition(this.row, this.panel, {
|
|
281
|
+
width: this.panelWidth(),
|
|
282
|
+
layout: this.options.panelLayout
|
|
283
|
+
});
|
|
284
|
+
const stopOutside = onOutsidePointer([this.field], () => {
|
|
285
|
+
this.store.actions.close();
|
|
286
|
+
});
|
|
287
|
+
const stopBackdrop = onBackdropPointer(this.panel, () => {
|
|
288
|
+
this.store.actions.close();
|
|
289
|
+
});
|
|
290
|
+
const stopEscape = onEscape(() => {
|
|
291
|
+
this.store.actions.close();
|
|
292
|
+
restoreFocus(this.dateInput);
|
|
293
|
+
});
|
|
294
|
+
this.closePanel = () => {
|
|
295
|
+
stopTracking();
|
|
296
|
+
stopOutside();
|
|
297
|
+
stopBackdrop();
|
|
298
|
+
stopEscape();
|
|
299
|
+
this.panel.hidden = true;
|
|
300
|
+
};
|
|
301
|
+
for (const item of this.time.querySelectorAll("[aria-pressed=\"true\"]")) if (typeof item.scrollIntoView === "function") item.scrollIntoView({ block: "nearest" });
|
|
302
|
+
this.calendarView.focusGrid();
|
|
303
|
+
} else {
|
|
304
|
+
this.closePanel?.();
|
|
305
|
+
this.closePanel = null;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
};
|
|
309
|
+
function renderColumn(column, cells) {
|
|
310
|
+
if (column.children.length !== cells.length) column.replaceChildren(...cells.map((cell) => el("button", {
|
|
311
|
+
type: "button",
|
|
312
|
+
class: "ndp-time-item",
|
|
313
|
+
"data-value": cell.value
|
|
314
|
+
})));
|
|
315
|
+
cells.forEach((cell, index) => {
|
|
316
|
+
const button = column.children[index];
|
|
317
|
+
if (button) {
|
|
318
|
+
setText(button, cell.label);
|
|
319
|
+
setAttrs(button, {
|
|
320
|
+
"data-value": cell.value,
|
|
321
|
+
"aria-pressed": cell.isSelected ? "true" : "false"
|
|
322
|
+
});
|
|
323
|
+
}
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
function storeOptions(options) {
|
|
327
|
+
const out = {};
|
|
328
|
+
for (const [key, value] of Object.entries(options)) if (!VIEW_KEYS.has(key)) out[key] = value;
|
|
329
|
+
return out;
|
|
330
|
+
}
|
|
331
|
+
//#endregion
|
|
332
|
+
//#region src/date-time-picker-element.ts
|
|
333
|
+
/**
|
|
334
|
+
* <nep-date-time-picker name="starts-at" minute-step="15"></nep-date-time-picker>
|
|
335
|
+
*
|
|
336
|
+
* A form-associated BS/AD date + time field. The form receives one instant as
|
|
337
|
+
* an ISO timestamp with the zone's offset ("2026-10-18T14:30:00+05:45").
|
|
338
|
+
* Fires `change` with { value, ad, bs, time }.
|
|
339
|
+
*/
|
|
340
|
+
var NepDateTimePickerElement = class extends Base {
|
|
341
|
+
constructor() {
|
|
342
|
+
super();
|
|
343
|
+
this.view = null;
|
|
344
|
+
this.rich = {};
|
|
345
|
+
this.unsubscribe = null;
|
|
346
|
+
this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
|
|
347
|
+
swallowInnerChange(this);
|
|
348
|
+
}
|
|
349
|
+
get value() {
|
|
350
|
+
return this.view?.getState().value ?? "";
|
|
351
|
+
}
|
|
352
|
+
set value(next) {
|
|
353
|
+
this.view?.store.actions.setValue(next);
|
|
354
|
+
}
|
|
355
|
+
set holidays(next) {
|
|
356
|
+
this.rich = {
|
|
357
|
+
...this.rich,
|
|
358
|
+
holidays: next
|
|
359
|
+
};
|
|
360
|
+
this.view?.setOptions({ holidays: next });
|
|
361
|
+
}
|
|
362
|
+
set isDateDisabled(next) {
|
|
363
|
+
this.rich = {
|
|
364
|
+
...this.rich,
|
|
365
|
+
isDateDisabled: next
|
|
366
|
+
};
|
|
367
|
+
this.view?.setOptions({ isDateDisabled: next });
|
|
368
|
+
}
|
|
369
|
+
connectedCallback() {
|
|
370
|
+
if (this.view) return;
|
|
371
|
+
const view = new DateTimePickerView(this, {
|
|
372
|
+
...this.readOptions(),
|
|
373
|
+
defaultValue: str(this, "value"),
|
|
374
|
+
onChange: (value, detail) => {
|
|
375
|
+
this.dispatchEvent(new CustomEvent("change", {
|
|
376
|
+
bubbles: true,
|
|
377
|
+
detail: {
|
|
378
|
+
value,
|
|
379
|
+
ad: detail?.ad ?? null,
|
|
380
|
+
bs: detail?.bs ?? null,
|
|
381
|
+
time: detail?.time ?? null
|
|
382
|
+
}
|
|
383
|
+
}));
|
|
384
|
+
},
|
|
385
|
+
onOpenChange: (open) => {
|
|
386
|
+
this.dispatchEvent(new CustomEvent(open ? "nep-open" : "nep-close", { bubbles: true }));
|
|
387
|
+
}
|
|
388
|
+
});
|
|
389
|
+
this.view = view;
|
|
390
|
+
this.unsubscribe = view.store.subscribe(() => {
|
|
391
|
+
this.syncForm();
|
|
392
|
+
});
|
|
393
|
+
this.syncForm();
|
|
394
|
+
}
|
|
395
|
+
disconnectedCallback() {
|
|
396
|
+
this.unsubscribe?.();
|
|
397
|
+
this.view?.destroy();
|
|
398
|
+
this.view = null;
|
|
399
|
+
}
|
|
400
|
+
attributeChangedCallback(name, previous, next) {
|
|
401
|
+
if (!this.view || previous === next) return;
|
|
402
|
+
if (name === "value") this.view.store.actions.setValue(next ?? "");
|
|
403
|
+
this.view.setOptions(this.readOptions());
|
|
404
|
+
this.syncForm();
|
|
405
|
+
}
|
|
406
|
+
formResetCallback() {
|
|
407
|
+
this.view?.store.actions.reset();
|
|
408
|
+
}
|
|
409
|
+
formDisabledCallback(disabled) {
|
|
410
|
+
this.view?.setOptions({ disabled: disabled || bool(this, "disabled") });
|
|
411
|
+
}
|
|
412
|
+
focus(options) {
|
|
413
|
+
this.view?.dateInput.focus(options);
|
|
414
|
+
}
|
|
415
|
+
readOptions() {
|
|
416
|
+
return {
|
|
417
|
+
...this.rich,
|
|
418
|
+
min: str(this, "min"),
|
|
419
|
+
max: str(this, "max"),
|
|
420
|
+
calendar: calendarAttr(this, "calendar"),
|
|
421
|
+
defaultCalendar: calendarAttr(this, "default-calendar"),
|
|
422
|
+
locale: str(this, "locale"),
|
|
423
|
+
name: str(this, "name"),
|
|
424
|
+
hiddenInput: this.internals === null,
|
|
425
|
+
required: bool(this, "required"),
|
|
426
|
+
disabled: bool(this, "disabled"),
|
|
427
|
+
theme: theme(this),
|
|
428
|
+
panelLayout: panelLayout(this),
|
|
429
|
+
mask: onUnlessFalse(this, "mask"),
|
|
430
|
+
inline: this.hasAttribute("inline"),
|
|
431
|
+
timeZone: str(this, "time-zone"),
|
|
432
|
+
hour12: bool(this, "hour12"),
|
|
433
|
+
minuteStep: int(this, "minute-step"),
|
|
434
|
+
defaultTime: str(this, "default-time"),
|
|
435
|
+
ariaLabel: str(this, "label"),
|
|
436
|
+
timeLabel: str(this, "time-label"),
|
|
437
|
+
presets: presetIds(this)
|
|
438
|
+
};
|
|
439
|
+
}
|
|
440
|
+
syncForm() {
|
|
441
|
+
const view = this.view;
|
|
442
|
+
if (!view || !this.internals) return;
|
|
443
|
+
const state = view.getState();
|
|
444
|
+
this.internals.setFormValue(state.value === "" ? null : state.value);
|
|
445
|
+
if (state.error) this.internals.setValidity({ customError: true }, state.error.message, state.error.field === "time" ? view.timeInput : view.dateInput);
|
|
446
|
+
else if (bool(this, "required") && state.value === "") this.internals.setValidity({ valueMissing: true }, "Please choose a date and time.", view.dateInput);
|
|
447
|
+
else this.internals.setValidity({});
|
|
448
|
+
}
|
|
449
|
+
};
|
|
450
|
+
NepDateTimePickerElement.formAssociated = true;
|
|
451
|
+
NepDateTimePickerElement.observedAttributes = [
|
|
452
|
+
"value",
|
|
453
|
+
"min",
|
|
454
|
+
"max",
|
|
455
|
+
"calendar",
|
|
456
|
+
"default-calendar",
|
|
457
|
+
"locale",
|
|
458
|
+
"name",
|
|
459
|
+
"required",
|
|
460
|
+
"disabled",
|
|
461
|
+
"theme",
|
|
462
|
+
"panel-layout",
|
|
463
|
+
"mask",
|
|
464
|
+
"inline",
|
|
465
|
+
"time-zone",
|
|
466
|
+
"hour12",
|
|
467
|
+
"minute-step",
|
|
468
|
+
"default-time",
|
|
469
|
+
"label",
|
|
470
|
+
"time-label",
|
|
471
|
+
"presets"
|
|
472
|
+
];
|
|
473
|
+
//#endregion
|
|
474
|
+
//#region src/date-time-picker.ts
|
|
475
|
+
/** `@nepdatejs/vanilla/date-time-picker`: just the date + time picker. */
|
|
476
|
+
/** Register <nep-date-time-picker> (skipped if already defined). */
|
|
477
|
+
function defineDateTimePicker(registry) {
|
|
478
|
+
defineElement(ELEMENT_NAMES.dateTimePicker, NepDateTimePickerElement, registry);
|
|
479
|
+
}
|
|
480
|
+
/** Mount a date + time picker into a container. */
|
|
481
|
+
function createDateTimePicker$1(container, options = {}) {
|
|
482
|
+
return new DateTimePickerView(container, options);
|
|
483
|
+
}
|
|
484
|
+
//#endregion
|
|
485
|
+
export { DateTimePickerView as i, defineDateTimePicker as n, NepDateTimePickerElement as r, createDateTimePicker$1 as t };
|
|
486
|
+
|
|
487
|
+
//# sourceMappingURL=date-time-picker-BqweOP2u.js.map
|