@nepdatejs/vanilla 0.0.0-stage → 0.1.0

package/dist/date-picker-DyvpYe29.d.ts

@@ -0,0 +1,74 @@
+import { i as DatePickerViewOptions, n as RichProps, r as DatePickerView, t as Base } from "./element-utils-C-r5gPlk.js";
+import { DatePickerState, SinglePreset } from "@nepdatejs/datepicker";
+//#region src/date-picker-element.d.ts
+/**
+ * <nep-date-picker name="dob" min="2020-01-01"></nep-date-picker>
+ *
+ * A form-associated BS/AD date field: the form receives the AD "YYYY-MM-DD"
+ * value under `name`. Fires `change` with { value, ad, bs }, plus `nep-open`,
+ * `nep-close` and `nep-calendar-change`.
+ */
+declare class NepDatePickerElement extends Base {
+  static readonly formAssociated = true;
+  static readonly observedAttributes: readonly string[];
+  /** The view, once connected. */
+  view: DatePickerView | null;
+  private readonly internals;
+  private rich;
+  private customPresets;
+  private unsubscribe;
+  constructor();
+  get value(): string;
+  set value(next: string);
+  get holidays(): RichProps["holidays"];
+  set holidays(next: RichProps["holidays"]);
+  get events(): RichProps["events"];
+  set events(next: RichProps["events"]);
+  get isDateDisabled(): RichProps["isDateDisabled"];
+  set isDateDisabled(next: RichProps["isDateDisabled"]);
+  /** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */
+  get presets(): readonly SinglePreset[] | undefined;
+  set presets(next: readonly SinglePreset[] | undefined);
+  get form(): HTMLFormElement | null;
+  get validity(): ValidityState | undefined;
+  get validationMessage(): string;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+  formResetCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formStateRestoreCallback(state: string | File | FormData | null): void;
+  override focus(options?: FocusOptions): void;
+  open(): void;
+  close(): void;
+  private setRich;
+  private readOptions;
+  private syncForm;
+}
+//#endregion
+//#region src/date-picker.d.ts
+/** Register <nep-date-picker> (skipped if already defined). */
+declare function defineDatePicker(registry?: CustomElementRegistry): void;
+interface DatePickerHandle {
+  readonly view: DatePickerView;
+  getValue(): string;
+  getState(): DatePickerState;
+  setValue(value: string): void;
+  setOptions(changes: Partial<DatePickerViewOptions>): void;
+  open(): void;
+  close(): void;
+  destroy(): void;
+}
+/**
+ * Mount a date picker without custom elements.
+ *
+ * - Given a container, renders the field into it.
+ * - Given an <input>, hides it and keeps its value in step with the picker
+ *   (AD "YYYY-MM-DD"), so existing forms and server code keep working.
+ */
+declare function createDatePicker$1(target: HTMLElement, options?: DatePickerViewOptions): DatePickerHandle;
+//#endregion
+export { NepDatePickerElement as i, createDatePicker$1 as n, defineDatePicker as r, DatePickerHandle as t };
+//# sourceMappingURL=date-picker-DyvpYe29.d.ts.map

package/dist/date-picker-ucoEFnMW.js

@@ -0,0 +1,577 @@
+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, m as weekday, n as defineElement, p as theme, r as Base, s as isoOf, t as ELEMENT_NAMES, u as presetIds, v as setAttrs, x as uid, y as setPopupMode } from "./registry-BvkGnkvV.js";
+import { t as PresetList } from "./preset-list-CASwnwmS.js";
+import { fromIsoDate, getLocale } from "@nepdatejs/core";
+import { createDatePicker } from "@nepdatejs/datepicker";
+import { onBackdropPointer, onEscape, onOutsidePointer, restoreFocus, trackPosition } from "@nepdatejs/dom";
+//#region src/picker-view.ts
+const VIEW_KEYS = /* @__PURE__ */ new Set([
+	"name",
+	"hiddenInput",
+	"id",
+	"placeholder",
+	"required",
+	"disabled",
+	"clearable",
+	"showEquivalent",
+	"theme",
+	"panelLayout",
+	"persistCalendar",
+	"ariaLabel",
+	"onOpenChange",
+	"onInput"
+]);
+/**
+* The date picker field and panel, rendered with the @nepdatejs/styles markup
+* into `host`. Used by <nep-date-picker> and by createDatePicker().
+*/
+var DatePickerView = class {
+	constructor(host, options = {}) {
+		this.closePanel = null;
+		this.wasOpen = false;
+		this.onTextInput = () => {
+			this.store.actions.type(this.input.value);
+			this.options.onInput?.(this.input.value);
+		};
+		this.onInputKeyDown = (event) => {
+			if (event.key === "ArrowDown" && (event.altKey || this.input.value === "")) {
+				event.preventDefault();
+				this.open();
+			}
+		};
+		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;
+			}
+			switch (target.closest("[data-action]")?.dataset["action"]) {
+				case "clear":
+					this.store.actions.clear();
+					this.input.focus();
+					break;
+				case "switch":
+					this.store.actions.switchCalendar(this.store.getState().calendar === "BS" ? "AD" : "BS");
+					break;
+				case "toggle":
+					if (this.store.getState().open) this.close();
+					else this.open();
+					break;
+				case "today": if (this.store.actions.selectToday()) restoreFocus(this.input);
+			}
+		};
+		this.options = { ...options };
+		this.store = createDatePicker({
+			...storeOptions(options),
+			onChange: (value, detail) => {
+				this.options.onChange?.(value, detail);
+			},
+			onCalendarChange: (calendar) => {
+				this.remember(calendar);
+				this.options.onCalendarChange?.(calendar);
+			}
+		});
+		const inputId = options.id ?? uid("ndp-input");
+		const panelId = `${inputId}-panel`;
+		this.input = el("input", {
+			class: "ndp-input__control",
+			id: inputId,
+			type: "text",
+			inputmode: "numeric",
+			autocomplete: "off",
+			spellcheck: "false",
+			"aria-controls": panelId
+		});
+		this.clearButton = el("button", {
+			type: "button",
+			class: "ndp-icon-button",
+			"data-action": "clear"
+		}, [icon("close")]);
+		this.switchButton = el("button", {
+			type: "button",
+			class: "ndp-input__switch",
+			"data-action": "switch"
+		});
+		this.toggleButton = el("button", {
+			type: "button",
+			class: "ndp-icon-button",
+			"data-action": "toggle"
+		}, [icon("calendar")]);
+		this.box = el("div", { class: "ndp-input" }, [this.input, el("span", { class: "ndp-input__actions" }, [
+			this.clearButton,
+			this.switchButton,
+			this.toggleButton
+		])]);
+		this.hint = el("p", {
+			class: "ndp-hint",
+			id: `${inputId}-hint`,
+			"aria-live": "polite",
+			hidden: true
+		});
+		this.hidden = el("input", { type: "hidden" });
+		this.segment = el("div", {
+			class: "ndp-segment",
+			role: "group"
+		}, [el("button", {
+			type: "button",
+			class: "ndp-segment__item",
+			"data-calendar": "BS"
+		}), el("button", {
+			type: "button",
+			class: "ndp-segment__item",
+			"data-calendar": "AD"
+		})]);
+		this.todayButton = el("button", {
+			type: "button",
+			class: "ndp-button",
+			"data-action": "today"
+		});
+		const calendarRoot = el("div", { class: "ndp-panel__calendar" });
+		this.presetList = new PresetList((id) => {
+			if (this.store.actions.applyPreset(id) && !this.store.getState().open) restoreFocus(this.input);
+		});
+		this.panel = el("div", {
+			class: "ndp-panel",
+			id: panelId,
+			hidden: true
+		}, [el("div", { class: "ndp-panel__body" }, [this.presetList.element, calendarRoot]), el("div", { class: "ndp-panel__footer" }, [this.segment, this.todayButton])]);
+		this.field = el("div", { class: "ndp-field" }, [
+			this.box,
+			this.hint,
+			this.panel,
+			this.hidden
+		]);
+		host.append(this.field);
+		this.calendarView = new CalendarView(calendarRoot, this.store.calendar, {
+			locale: () => this.options.locale,
+			onDayActivate: (date) => {
+				if (this.store.actions.select(date) && !this.store.getState().open) restoreFocus(this.input);
+			}
+		});
+		this.input.addEventListener("input", this.onTextInput);
+		this.input.addEventListener("blur", () => {
+			this.store.actions.blur();
+		});
+		this.input.addEventListener("keydown", this.onInputKeyDown);
+		this.field.addEventListener("click", this.onClick);
+		this.unsubscribe = this.store.subscribe(() => {
+			this.render();
+		});
+		this.restoreCalendar();
+		this.render();
+	}
+	getState() {
+		return this.store.getState();
+	}
+	/** Change view or store options. Unknown keys are ignored. */
+	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 = getLocale(this.options.locale);
+		const disabled = this.options.disabled ?? false;
+		const hintText = state.error?.message ?? (this.options.showEquivalent ?? true ? state.equivalentText : null);
+		if (this.input.value !== state.text) this.input.value = state.text;
+		this.input.setCustomValidity(state.error?.message ?? "");
+		setAttrs(this.input, {
+			placeholder: this.options.placeholder ?? state.placeholder,
+			disabled,
+			required: this.options.required ?? false,
+			"aria-label": this.options.ariaLabel ?? null,
+			"aria-invalid": state.error ? "true" : null,
+			"aria-describedby": hintText ? this.hint.id : null
+		});
+		setAttrs(this.box, {
+			"data-invalid": state.error !== null,
+			"data-disabled": disabled
+		});
+		setAttrs(this.field, { "data-ndp-theme": this.options.theme ?? null });
+		setAttrs(this.panel, {
+			"data-ndp-theme": this.options.theme ?? null,
+			"aria-label": this.options.ariaLabel ? `${this.options.ariaLabel}: ${locale.labels.calendar}` : locale.labels.chooseDate
+		});
+		this.clearButton.hidden = !(this.options.clearable ?? true) || state.text === "" || disabled;
+		setAttrs(this.clearButton, { "aria-label": locale.labels.clear });
+		this.switchButton.hidden = !state.canSwitchCalendar;
+		setText(this.switchButton, locale.calendarNames[state.calendar]);
+		const other = state.calendar === "BS" ? "AD" : "BS";
+		setAttrs(this.switchButton, {
+			disabled,
+			"aria-label": `${locale.labels.calendar}: ${locale.calendarNames[state.calendar]} → ${locale.calendarNames[other]}`
+		});
+		setAttrs(this.toggleButton, {
+			disabled,
+			"aria-label": locale.labels.openCalendar,
+			"aria-expanded": state.open ? "true" : "false"
+		});
+		this.hint.hidden = hintText === null;
+		setText(this.hint, hintText ?? "");
+		setAttrs(this.hint, { "data-error": state.error !== null });
+		this.segment.hidden = !state.canSwitchCalendar;
+		setAttrs(this.segment, { "aria-label": locale.labels.calendar });
+		for (const button of this.segment.querySelectorAll("button")) {
+			const calendar = button.dataset["calendar"];
+			setText(button, locale.calendarNames[calendar]);
+			setAttrs(button, { "aria-pressed": calendar === state.calendar ? "true" : "false" });
+		}
+		setText(this.todayButton, locale.labels.today);
+		this.presetList.render(state.presets, locale.labels.presets);
+		const name = this.options.hiddenInput === false ? void 0 : this.options.name;
+		setAttrs(this.hidden, {
+			name: name ?? null,
+			value: state.value
+		});
+		this.hidden.value = state.value;
+		this.hidden.disabled = name === void 0 || disabled;
+		setPopupMode(state, [this.input], 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 stopTracking = trackPosition(this.box, this.panel, {
+				width: this.panelWidth(),
+				layout: this.options.panelLayout
+			});
+			const stopOutside = onOutsidePointer([this.field, this.panel], () => {
+				this.store.actions.close();
+			});
+			const stopBackdrop = onBackdropPointer(this.panel, () => {
+				this.store.actions.close();
+			});
+			const stopEscape = onEscape(() => {
+				this.store.actions.close();
+				restoreFocus(this.input);
+			});
+			this.closePanel = () => {
+				stopTracking();
+				stopOutside();
+				stopBackdrop();
+				stopEscape();
+				this.panel.hidden = true;
+			};
+			this.calendarView.focusGrid();
+		} else {
+			this.closePanel?.();
+			this.closePanel = null;
+		}
+	}
+	remember(calendar) {
+		const key = this.options.persistCalendar;
+		if (!key) return;
+		try {
+			window.localStorage.setItem(key, calendar);
+		} catch {}
+	}
+	restoreCalendar() {
+		const key = this.options.persistCalendar;
+		if (!key) return;
+		const stored = readStorage(key);
+		if (stored === "BS" || stored === "AD") this.store.actions.switchCalendar(stored);
+	}
+};
+/** Only the keys the picker store understands, minus the view's own callbacks. */
+function storeOptions(options) {
+	const out = {};
+	for (const [key, value] of Object.entries(options)) if (!VIEW_KEYS.has(key) && key !== "onChange" && key !== "onCalendarChange") out[key] = value;
+	return out;
+}
+function readStorage(key) {
+	try {
+		return window.localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+//#endregion
+//#region src/date-picker-element.ts
+/**
+* <nep-date-picker name="dob" min="2020-01-01"></nep-date-picker>
+*
+* A form-associated BS/AD date field: the form receives the AD "YYYY-MM-DD"
+* value under `name`. Fires `change` with { value, ad, bs }, plus `nep-open`,
+* `nep-close` and `nep-calendar-change`.
+*/
+var NepDatePickerElement = class extends Base {
+	constructor() {
+		super();
+		this.view = null;
+		this.rich = {};
+		this.unsubscribe = null;
+		this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+		swallowInnerChange(this);
+	}
+	get value() {
+		return this.view?.getState().value ?? isoOf(fromIsoDate(this.getAttribute("value")));
+	}
+	set value(next) {
+		this.view?.store.actions.setValue(next);
+	}
+	get holidays() {
+		return this.rich.holidays;
+	}
+	set holidays(next) {
+		this.setRich({ holidays: next });
+	}
+	get events() {
+		return this.rich.events;
+	}
+	set events(next) {
+		this.setRich({ events: next });
+	}
+	get isDateDisabled() {
+		return this.rich.isDateDisabled;
+	}
+	set isDateDisabled(next) {
+		this.setRich({ isDateDisabled: next });
+	}
+	/** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */
+	get presets() {
+		return this.customPresets ?? presetIds(this);
+	}
+	set presets(next) {
+		this.customPresets = next;
+		this.view?.setOptions({ presets: this.presets });
+	}
+	get form() {
+		return this.internals?.form ?? null;
+	}
+	get validity() {
+		return this.internals?.validity;
+	}
+	get validationMessage() {
+		return this.internals?.validationMessage ?? "";
+	}
+	checkValidity() {
+		return this.internals?.checkValidity() ?? true;
+	}
+	reportValidity() {
+		return this.internals?.reportValidity() ?? true;
+	}
+	connectedCallback() {
+		if (this.view) return;
+		const view = new DatePickerView(this, {
+			...this.readOptions(),
+			defaultValue: str(this, "value"),
+			onChange: (value, detail) => {
+				this.dispatchEvent(new CustomEvent("change", {
+					bubbles: true,
+					detail: {
+						value,
+						ad: detail?.ad ?? null,
+						bs: detail?.bs ?? null
+					}
+				}));
+			},
+			onCalendarChange: (calendar) => {
+				this.dispatchEvent(new CustomEvent("nep-calendar-change", {
+					bubbles: true,
+					detail: { calendar }
+				}));
+			},
+			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(name, previous, next) {
+		if (!this.view || previous === next) return;
+		if (name === "value") this.view.store.actions.setValue(next ?? "");
+		this.view.setOptions(this.readOptions());
+		this.syncForm();
+	}
+	formResetCallback() {
+		this.view?.store.actions.reset();
+	}
+	formDisabledCallback(disabled) {
+		this.view?.setOptions({ disabled: disabled || bool(this, "disabled") });
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.view?.store.actions.setValue(state);
+	}
+	focus(options) {
+		this.view?.input.focus(options);
+	}
+	open() {
+		this.view?.open();
+	}
+	close() {
+		this.view?.close();
+	}
+	setRich(changes) {
+		this.rich = {
+			...this.rich,
+			...changes
+		};
+		this.view?.setOptions(changes);
+	}
+	readOptions() {
+		return {
+			...this.rich,
+			min: str(this, "min"),
+			max: str(this, "max"),
+			calendar: calendarAttr(this, "calendar"),
+			defaultCalendar: calendarAttr(this, "default-calendar"),
+			locale: str(this, "locale"),
+			name: str(this, "name"),
+			hiddenInput: this.internals === null,
+			placeholder: str(this, "placeholder"),
+			required: bool(this, "required"),
+			disabled: bool(this, "disabled"),
+			clearable: onUnlessFalse(this, "clearable"),
+			showEquivalent: onUnlessFalse(this, "show-equivalent"),
+			closeOnSelect: onUnlessFalse(this, "close-on-select"),
+			theme: theme(this),
+			panelLayout: panelLayout(this),
+			mask: onUnlessFalse(this, "mask"),
+			inline: this.hasAttribute("inline"),
+			persistCalendar: str(this, "persist-calendar"),
+			weekStartsOn: weekday(this, "week-starts-on"),
+			displayFormat: str(this, "display-format"),
+			ariaLabel: str(this, "label"),
+			id: str(this, "input-id"),
+			presets: this.presets
+		};
+	}
+	syncForm() {
+		const view = this.view;
+		if (!view || !this.internals) return;
+		const state = view.getState();
+		this.internals.setFormValue(state.value === "" ? null : state.value, state.value);
+		if (state.error) this.internals.setValidity({ customError: true }, state.error.message, view.input);
+		else if (bool(this, "required") && state.value === "") this.internals.setValidity({ valueMissing: true }, view.input.validationMessage || "Please choose a date.", view.input);
+		else this.internals.setValidity({});
+	}
+};
+NepDatePickerElement.formAssociated = true;
+NepDatePickerElement.observedAttributes = [
+	"value",
+	"min",
+	"max",
+	"calendar",
+	"default-calendar",
+	"locale",
+	"name",
+	"placeholder",
+	"required",
+	"disabled",
+	"clearable",
+	"show-equivalent",
+	"theme",
+	"panel-layout",
+	"mask",
+	"inline",
+	"persist-calendar",
+	"week-starts-on",
+	"display-format",
+	"label",
+	"close-on-select",
+	"input-id",
+	"presets"
+];
+//#endregion
+//#region src/date-picker.ts
+/** Register <nep-date-picker> (skipped if already defined). */
+function defineDatePicker(registry) {
+	defineElement(ELEMENT_NAMES.datePicker, NepDatePickerElement, registry);
+}
+/**
+* Mount a date picker without custom elements.
+*
+* - Given a container, renders the field into it.
+* - Given an <input>, hides it and keeps its value in step with the picker
+*   (AD "YYYY-MM-DD"), so existing forms and server code keep working.
+*/
+function createDatePicker$1(target, options = {}) {
+	const enhanced = target instanceof HTMLInputElement ? target : null;
+	let host = target;
+	if (enhanced) {
+		host = document.createElement("span");
+		enhanced.after(host);
+		enhanced.hidden = true;
+	}
+	const view = new DatePickerView(host, {
+		...enhanced ? {
+			defaultValue: enhanced.value,
+			name: void 0,
+			required: enhanced.required,
+			disabled: enhanced.disabled
+		} : {},
+		...options,
+		onChange: (value, detail) => {
+			if (enhanced) {
+				enhanced.value = value;
+				enhanced.dispatchEvent(new Event("input", { bubbles: true }));
+				enhanced.dispatchEvent(new Event("change", { bubbles: true }));
+			}
+			options.onChange?.(value, detail);
+		}
+	});
+	return {
+		view,
+		getValue: () => view.getState().value,
+		getState: () => view.getState(),
+		setValue: (value) => {
+			view.store.actions.setValue(value);
+			if (enhanced) enhanced.value = view.getState().value;
+		},
+		setOptions: (changes) => {
+			view.setOptions(changes);
+		},
+		open: () => {
+			view.open();
+		},
+		close: () => {
+			view.close();
+		},
+		destroy: () => {
+			view.destroy();
+			if (enhanced) {
+				host.remove();
+				enhanced.hidden = false;
+			}
+		}
+	};
+}
+//#endregion
+export { DatePickerView as i, defineDatePicker as n, NepDatePickerElement as r, createDatePicker$1 as t };
+
+//# sourceMappingURL=date-picker-ucoEFnMW.js.map