@nubisco/ui 5.18.0 → 5.19.0

package/dist/DatePicker-MDaQ2l8I.js

@@ -0,0 +1,715 @@
+import { t as e } from "./Icon-rREAqsu0.js";
+import { useSurfaceLayer as t } from "./composables/useSurfaceLayer.composable.mjs";
+import { usePhoneLayout as n } from "./composables/usePhoneLayout.composable.mjs";
+import { t as r } from "./Label-DGK5nxFy.js";
+import { t as i } from "./Message-CHkTWe0K.js";
+import { t as a } from "./Grid-iox-7xyH.js";
+import { useMenuSurface as o } from "./composables/useMenuSurface.composable.mjs";
+import { useVisualViewportVar as s } from "./composables/useVisualViewportVar.composable.mjs";
+import { Fragment as c, Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as ee, nextTick as v, normalizeClass as y, onBeforeUnmount as te, openBlock as b, ref as x, renderList as ne, renderSlot as re, toDisplayString as S, unref as C, useId as ie, watch as ae, withCtx as w, withModifiers as oe } from "vue";
+import { regular as se } from "@nubisco/ui/icons/caret-right";
+import { regular as T } from "@nubisco/ui/icons/calendar";
+import { regular as ce } from "@nubisco/ui/icons/caret-double-left";
+import { regular as le } from "@nubisco/ui/icons/caret-left";
+import { regular as ue } from "@nubisco/ui/icons/caret-double-right";
+//#region src/components/DatePicker.vue?vue&type=script&setup=true&lang.ts
+var de = { class: "nb-date-picker__col" }, fe = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"required",
+	"name",
+	"aria-invalid",
+	"aria-describedby"
+], pe = ["disabled", "aria-label"], me = {
+	key: 0,
+	class: "nb-date-picker__col"
+}, he = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], ge = ["disabled", "aria-label"], _e = {
+	key: 0,
+	class: "nb-date-picker__inner-header"
+}, ve = ["for"], ye = {
+	key: 0,
+	class: "nb-date-picker__asterisk",
+	"aria-hidden": "true"
+}, be = { class: "nb-date-picker__fluid-row" }, xe = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"required",
+	"name",
+	"aria-invalid"
+], Se = ["disabled", "aria-label"], Ce = {
+	key: 0,
+	class: "nb-date-picker__inner-header"
+}, we = ["for"], Te = {
+	key: 0,
+	class: "nb-date-picker__asterisk",
+	"aria-hidden": "true"
+}, Ee = { class: "nb-date-picker__fluid-row" }, De = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid"
+], Oe = ["disabled", "aria-label"], ke = ["aria-label"], Ae = { class: "nb-date-picker__cal-header" }, je = ["id"], Me = ["aria-labelledby"], Ne = { class: "nb-date-picker__cal-weekdays" }, Pe = ["abbr"], Fe = ["aria-selected", "aria-disabled"], Ie = [
+	"tabindex",
+	"disabled",
+	"aria-label",
+	"data-date",
+	"onClick"
+], Le = /* @__PURE__ */ _({
+	inheritAttrs: !1,
+	__name: "DatePicker",
+	props: {
+		modelValue: { default: null },
+		type: { default: "single" },
+		endValue: { default: null },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		weekStart: { default: 1 },
+		locale: { default: void 0 },
+		endPlaceholder: { default: "" },
+		endLabel: { default: "" },
+		endError: { default: "" },
+		endWarning: { default: "" },
+		disabledDates: {
+			type: [Array, Function],
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: { default: "" },
+		name: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		id: { default: void 0 },
+		label: { default: "" },
+		error: { default: "" },
+		warning: { default: "" },
+		helper: { default: "" },
+		variant: { default: "default" },
+		size: { default: "md" }
+	},
+	emits: [
+		"update:modelValue",
+		"update:endValue",
+		"change"
+	],
+	setup(_, { expose: Le, emit: Re }) {
+		let E = _, { layerProps: ze } = t({ overlay: !0 }), D = Re, Be = `nb-date-picker-${ie()}`, O = u(() => E.id ?? Be), k = u(() => `${O.value}-end`), Ve = u(() => `${O.value}-helper`), He = u(() => `${O.value}-message`), Ue = u(() => `${O.value}-end-message`), We = u(() => `${O.value}-cal-title`), A = x(null), Ge = u(() => A.value !== null), j = x(!1), M = x($(/* @__PURE__ */ new Date())), Ke = x(null), qe = x(null), N = x(null), Je = x(null);
+		o(Je);
+		let { phone: Ye } = n(), Xe = x(null);
+		s(() => j.value);
+		let Ze = x({
+			position: "fixed",
+			top: "0px",
+			left: "0px",
+			zIndex: "9999"
+		}), P = x("start"), F = u(() => E.locale || navigator.language || "pt-PT"), I = u(() => new Intl.DateTimeFormat(F.value).formatToParts(new Date(2e3, 0, 15)).map((e) => e.type === "day" ? "dd" : e.type === "month" ? "mm" : e.type === "year" ? "yyyy" : e.value).join(""));
+		function L(e) {
+			if (!e) return "";
+			let t = /* @__PURE__ */ new Date(e + "T00:00:00");
+			return isNaN(t.getTime()) ? e : t.toLocaleDateString(F.value);
+		}
+		function Qe(e) {
+			return (/* @__PURE__ */ new Date(e + "T00:00:00")).toLocaleDateString(F.value, {
+				weekday: "long",
+				year: "numeric",
+				month: "long",
+				day: "numeric"
+			});
+		}
+		let $e = u(() => L(E.modelValue ?? null)), et = u(() => L(E.endValue ?? null)), R = u(() => E.error ? {
+			variant: "error",
+			text: E.error
+		} : E.warning ? {
+			variant: "warning",
+			text: E.warning
+		} : null), z = u(() => E.type === "range" ? E.endError ? {
+			variant: "error",
+			text: E.endError
+		} : E.endWarning ? {
+			variant: "warning",
+			text: E.endWarning
+		} : null : null), B = u(() => R.value ? R.value : E.helper ? {
+			variant: "helper",
+			text: E.helper
+		} : null), tt = u(() => {
+			if (E.variant === "default") return R.value ? He.value : E.helper ? Ve.value : void 0;
+		}), nt = u(() => {
+			if (E.variant === "default") return z.value ? Ue.value : E.helper ? Ve.value : void 0;
+		}), rt = u(() => E.type === "range" && !!E.endLabel), it = u(() => E.endLabel || E.endPlaceholder);
+		function V(e) {
+			return E.min != null && e < E.min || E.max != null && e > E.max ? !0 : E.disabledDates ? typeof E.disabledDates == "function" ? E.disabledDates(e) : E.disabledDates.includes(e) : !1;
+		}
+		function at(e) {
+			let t = e.trim();
+			if (!t) return null;
+			if (/^\d{4}-\d{2}-\d{2}$/.test(t)) {
+				let e = /* @__PURE__ */ new Date(t + "T00:00:00");
+				return isNaN(e.getTime()) ? null : t;
+			}
+			let n = new Date(t);
+			return isNaN(n.getTime()) ? null : $(n);
+		}
+		function ot(e) {
+			let t = e.target.value, n = at(t);
+			n && V(n) || (n || t === "") && (D("update:modelValue", n), D("change", n));
+		}
+		function st(e) {
+			let t = e.target.value, n = at(t);
+			n && V(n) || (n || t === "") && D("update:endValue", n);
+		}
+		function H(e) {
+			A.value = e.target === N.value ? "end" : "start", E.type !== "simple" && !E.readonly && (P.value = A.value, j.value ? ct() : G());
+		}
+		function U() {
+			A.value = null;
+		}
+		function W(e) {
+			if (!(E.type === "simple" || E.readonly)) switch (e.key) {
+				case "Escape":
+					j.value && (K(), e.preventDefault());
+					break;
+				case "ArrowDown":
+					e.preventDefault(), j.value || G(), v(J);
+					break;
+				case "Enter":
+					j.value || (e.preventDefault(), G(), v(J));
+					break;
+			}
+		}
+		function ct() {
+			let e = Ke.value?.querySelectorAll(".nb-date-picker__input-wrapper");
+			if (!e?.length) return;
+			let t = (P.value === "end" && e.length > 1 ? e[1] : e[0]).getBoundingClientRect();
+			Ze.value = {
+				position: "fixed",
+				top: `${t.bottom + 4}px`,
+				left: `${t.left}px`,
+				zIndex: "9999"
+			};
+		}
+		function G() {
+			if (E.disabled || E.readonly || E.type === "simple" || j.value) return;
+			j.value = !0;
+			let e = P.value === "end" && E.endValue ? E.endValue : E.modelValue, t = e ? /* @__PURE__ */ new Date(e + "T00:00:00") : /* @__PURE__ */ new Date();
+			Z.value = t.getFullYear(), Q.value = t.getMonth(), M.value = e || $(/* @__PURE__ */ new Date()), ct();
+		}
+		function K() {
+			j.value && (j.value = !1, v(() => {
+				P.value === "end" && N.value ? N.value.focus() : qe.value?.focus();
+			}));
+		}
+		function q() {
+			j.value ? K() : (P.value = "start", G(), v(J));
+		}
+		function J() {
+			v(() => {
+				(Je.value?.querySelector(`[data-date="${M.value}"]`))?.focus();
+			});
+		}
+		function lt(e) {
+			V(e) || (E.type === "range" ? P.value === "start" ? (D("update:modelValue", e), D("change", e), P.value = "end", M.value = e, v(() => N.value?.focus())) : (E.modelValue && e < E.modelValue ? (D("update:endValue", E.modelValue), D("update:modelValue", e), D("change", e)) : D("update:endValue", e), K()) : (D("update:modelValue", e), D("change", e), K()));
+		}
+		function ut(e) {
+			let t = /* @__PURE__ */ new Date(M.value + "T00:00:00"), n = !0;
+			switch (e.key) {
+				case "ArrowRight":
+					Y(t, 1);
+					break;
+				case "ArrowLeft":
+					Y(t, -1);
+					break;
+				case "ArrowDown":
+					Y(t, 7);
+					break;
+				case "ArrowUp":
+					Y(t, -7);
+					break;
+				case "Home":
+					dt(t, "start");
+					break;
+				case "End":
+					dt(t, "end");
+					break;
+				case "PageUp":
+					e.shiftKey ? ft(t, -12) : ft(t, -1);
+					break;
+				case "PageDown":
+					e.shiftKey ? ft(t, 12) : ft(t, 1);
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), lt(M.value);
+					return;
+				case "Escape":
+					K();
+					break;
+				case "Tab":
+					K();
+					return;
+				default: n = !1;
+			}
+			n && e.preventDefault();
+		}
+		function Y(e, t) {
+			let n = new Date(e);
+			n.setDate(n.getDate() + t), pt(n);
+		}
+		function dt(e, t) {
+			let n = e.getDay();
+			E.weekStart === 1 && (n = n === 0 ? 6 : n - 1);
+			let r = t === "start" ? -n : 6 - n, i = new Date(e);
+			i.setDate(i.getDate() + r), pt(i);
+		}
+		function ft(e, t) {
+			let n = new Date(e);
+			n.setMonth(n.getMonth() + t), n.getDate() !== e.getDate() && n.setDate(0), pt(n);
+		}
+		function pt(e) {
+			let t = $(e);
+			E.min != null && t < E.min || E.max != null && t > E.max || (M.value = t, Z.value = e.getFullYear(), Q.value = e.getMonth(), J());
+		}
+		function mt(e) {
+			let t = e.target, n = Ke.value?.contains(t) ?? !1, r = Je.value?.contains(t) ?? !1, i = Xe.value?.contains(t) ?? !1;
+			!n && !r && !i && K();
+		}
+		function X() {
+			j.value && ct();
+		}
+		ae(j, (e) => {
+			e ? (document.addEventListener("mousedown", mt), window.addEventListener("scroll", X, !0), window.addEventListener("resize", X)) : (document.removeEventListener("mousedown", mt), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X));
+		}), te(() => {
+			document.removeEventListener("mousedown", mt), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X);
+		});
+		let Z = x((/* @__PURE__ */ new Date()).getFullYear()), Q = x((/* @__PURE__ */ new Date()).getMonth());
+		function ht(e) {
+			let t = Z.value * 12 + Q.value + e;
+			Z.value = Math.floor(t / 12), Q.value = (t % 12 + 12) % 12;
+			let n = (/* @__PURE__ */ new Date(M.value + "T00:00:00")).getDate(), r = new Date(Z.value, Q.value + 1, 0).getDate();
+			M.value = $(new Date(Z.value, Q.value, Math.min(n, r))), J();
+		}
+		let gt = () => ht(-1), _t = () => ht(1), vt = () => ht(-12), yt = () => ht(12), bt = u(() => {
+			let e = new Date(Z.value, Q.value, 1).toLocaleDateString(F.value, {
+				month: "long",
+				year: "numeric"
+			});
+			return e.charAt(0).toUpperCase() + e.slice(1);
+		}), xt = u(() => {
+			let e = [], t = new Date(2024, 0, E.weekStart === 0 ? 7 : 1);
+			for (let n = 0; n < 7; n++) {
+				let r = new Date(t);
+				r.setDate(t.getDate() + n);
+				let i = r.toLocaleDateString(F.value, { weekday: "narrow" }).toUpperCase(), a = r.toLocaleDateString(F.value, { weekday: "long" });
+				e.push({
+					narrow: i,
+					full: a.charAt(0).toUpperCase() + a.slice(1)
+				});
+			}
+			return e;
+		});
+		function $(e) {
+			return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+		}
+		let St = u(() => $(/* @__PURE__ */ new Date())), Ct = u(() => {
+			let e = Z.value, t = Q.value, n = new Date(e, t, 1), r = new Date(e, t + 1, 0), i = n.getDay();
+			E.weekStart === 1 && (i = i === 0 ? 6 : i - 1);
+			let a = [], o = E.modelValue ?? null, s = E.endValue ?? null, c = o && s ? o < s ? o : s : null, l = o && s ? o < s ? s : o : null;
+			function u(e, t) {
+				let n = $(e);
+				return {
+					key: n,
+					date: n,
+					day: e.getDate(),
+					inMonth: t,
+					isToday: n === St.value,
+					isSelected: n === o || n === s,
+					inRange: c != null && l != null && n > c && n < l,
+					isRangeStart: n === c && l != null,
+					isRangeEnd: n === l && c != null,
+					isDisabled: V(n)
+				};
+			}
+			for (let n = i - 1; n >= 0; n--) a.push(u(new Date(e, t, -n), !1));
+			for (let n = 1; n <= r.getDate(); n++) a.push(u(new Date(e, t, n), !0));
+			let d = 7 - a.length % 7;
+			if (d < 7) for (let n = 1; n <= d; n++) a.push(u(new Date(e, t + 1, n), !1));
+			return a;
+		}), wt = u(() => {
+			let e = [];
+			for (let t = 0; t < Ct.value.length; t += 7) e.push(Ct.value.slice(t, t + 7));
+			return e;
+		}), Tt = u(() => [
+			"nb-date-picker",
+			`nb-date-picker--${E.variant}`,
+			`nb-date-picker--${E.size}`,
+			`nb-date-picker--${E.type}`,
+			{
+				"nb-date-picker--focused": Ge.value,
+				"nb-date-picker--open": j.value,
+				"nb-date-picker--error": !!E.error || !!E.endError,
+				"nb-date-picker--warning": !E.error && !E.endError && (!!E.warning || !!E.endWarning),
+				"nb-date-picker--disabled": E.disabled,
+				"nb-date-picker--readonly": E.readonly
+			}
+		]), Et = u(() => ({
+			"nb-date-picker__input-wrapper--focused": A.value === "start",
+			"nb-date-picker__input-wrapper--error": !!E.error,
+			"nb-date-picker__input-wrapper--warning": !E.error && !!E.warning,
+			"nb-date-picker__input-wrapper--disabled": E.disabled,
+			"nb-date-picker__input-wrapper--readonly": E.readonly
+		})), Dt = u(() => ({
+			"nb-date-picker__input-wrapper--focused": A.value === "end",
+			"nb-date-picker__input-wrapper--error": !!E.endError,
+			"nb-date-picker__input-wrapper--warning": !E.endError && !!E.endWarning,
+			"nb-date-picker__input-wrapper--disabled": E.disabled,
+			"nb-date-picker__input-wrapper--readonly": E.readonly
+		}));
+		return Le({
+			open: G,
+			close: K,
+			focus: () => qe.value?.focus()
+		}), (t, n) => (b(), p(c, null, [m("div", {
+			ref_key: "rootRef",
+			ref: Ke,
+			class: y(Tt.value)
+		}, [_.variant === "default" ? (b(), p(c, { key: 0 }, [
+			t.$slots.label ? re(t.$slots, "label", { key: 0 }) : _.label && !rt.value ? (b(), d(r, {
+				key: 1,
+				for: O.value,
+				required: _.required,
+				disabled: _.disabled
+			}, {
+				default: w(() => [h(S(_.label), 1)]),
+				_: 1
+			}, 8, [
+				"for",
+				"required",
+				"disabled"
+			])) : f("", !0),
+			g(a, {
+				dir: "row",
+				gap: _.type === "range" ? "sm" : void 0,
+				class: "nb-date-picker__fields"
+			}, {
+				default: w(() => [m("div", de, [rt.value && _.label ? (b(), d(r, {
+					key: 0,
+					for: O.value,
+					required: _.required,
+					disabled: _.disabled
+				}, {
+					default: w(() => [h(S(_.label), 1)]),
+					_: 1
+				}, 8, [
+					"for",
+					"required",
+					"disabled"
+				])) : f("", !0), m("div", { class: y(["nb-date-picker__input-wrapper", Et.value]) }, [m("input", ee({
+					id: O.value,
+					ref_key: "inputRef",
+					ref: qe
+				}, t.$attrs, {
+					type: "text",
+					class: "nb-date-picker__field",
+					value: $e.value,
+					placeholder: _.placeholder || I.value,
+					disabled: _.disabled,
+					readonly: _.readonly,
+					required: _.required,
+					name: _.name,
+					"aria-invalid": _.error ? !0 : void 0,
+					"aria-describedby": tt.value,
+					onInput: n[0] ||= (e) => ot(e),
+					onFocus: H,
+					onBlur: U,
+					onKeydown: W
+				}), null, 16, fe), _.type === "simple" ? f("", !0) : (b(), p("button", {
+					key: 0,
+					type: "button",
+					class: "nb-date-picker__icon",
+					disabled: _.disabled || _.readonly,
+					tabindex: "-1",
+					"aria-label": _.modelValue ? `Change date, ${L(_.modelValue)}` : "Choose date",
+					onClick: q
+				}, [g(e, {
+					name: C(T),
+					size: 16
+				}, null, 8, ["name"])], 8, pe))], 2)]), _.type === "range" ? (b(), p("div", me, [rt.value ? (b(), d(r, {
+					key: 0,
+					for: k.value,
+					required: _.required,
+					disabled: _.disabled
+				}, {
+					default: w(() => [h(S(_.endLabel), 1)]),
+					_: 1
+				}, 8, [
+					"for",
+					"required",
+					"disabled"
+				])) : f("", !0), m("div", { class: y(["nb-date-picker__input-wrapper", Dt.value]) }, [m("input", {
+					id: k.value,
+					ref_key: "endInputRef",
+					ref: N,
+					type: "text",
+					class: "nb-date-picker__field",
+					value: et.value,
+					placeholder: _.endPlaceholder || I.value,
+					disabled: _.disabled,
+					readonly: _.readonly,
+					required: _.required,
+					"aria-invalid": _.endError ? !0 : void 0,
+					"aria-describedby": nt.value,
+					onInput: n[1] ||= (e) => st(e),
+					onFocus: H,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, he), m("button", {
+					type: "button",
+					class: "nb-date-picker__icon",
+					disabled: _.disabled || _.readonly,
+					tabindex: "-1",
+					"aria-label": _.endValue ? `Change end date, ${L(_.endValue)}` : "Choose end date",
+					onClick: q
+				}, [g(e, {
+					name: C(T),
+					size: 16
+				}, null, 8, ["name"])], 8, ge)], 2)])) : f("", !0)]),
+				_: 1
+			}, 8, ["gap"]),
+			R.value ? (b(), d(i, {
+				key: 2,
+				id: He.value,
+				variant: R.value.variant,
+				class: "nb-date-picker__message"
+			}, {
+				default: w(() => [h(S(R.value.text), 1)]),
+				_: 1
+			}, 8, ["id", "variant"])) : f("", !0),
+			z.value ? (b(), d(i, {
+				key: 3,
+				id: Ue.value,
+				variant: z.value.variant,
+				class: "nb-date-picker__message"
+			}, {
+				default: w(() => [h(S(z.value.text), 1)]),
+				_: 1
+			}, 8, ["id", "variant"])) : f("", !0),
+			!R.value && !z.value && _.helper ? (b(), d(i, {
+				key: 4,
+				id: Ve.value,
+				variant: "helper",
+				class: "nb-date-picker__message"
+			}, {
+				default: w(() => [h(S(_.helper), 1)]),
+				_: 1
+			}, 8, ["id"])) : f("", !0)
+		], 64)) : _.variant === "fluid" ? (b(), d(a, {
+			key: 1,
+			dir: "row",
+			gap: _.type === "range" ? "sm" : void 0,
+			class: "nb-date-picker__fields"
+		}, {
+			default: w(() => [m("div", { class: y(["nb-date-picker__input-wrapper nb-date-picker__input-wrapper--fluid", Et.value]) }, [_.label || t.$slots.label || B.value ? (b(), p("div", _e, [t.$slots.label ? re(t.$slots, "label", { key: 0 }) : (b(), p("label", {
+				key: 1,
+				for: O.value,
+				class: "nb-date-picker__inner-label"
+			}, [h(S(_.label) + " ", 1), _.required ? (b(), p("span", ye, "*")) : f("", !0)], 8, ve)), B.value ? (b(), d(i, {
+				key: 2,
+				variant: B.value.variant,
+				"icon-only": "",
+				class: "nb-date-picker__inner-message"
+			}, {
+				default: w(() => [h(S(B.value.text), 1)]),
+				_: 1
+			}, 8, ["variant"])) : f("", !0)])) : f("", !0), m("div", be, [m("input", ee({
+				id: O.value,
+				ref_key: "inputRef",
+				ref: qe
+			}, t.$attrs, {
+				type: "text",
+				class: "nb-date-picker__field",
+				value: $e.value,
+				placeholder: _.placeholder || I.value,
+				disabled: _.disabled,
+				readonly: _.readonly,
+				required: _.required,
+				name: _.name,
+				"aria-invalid": _.error ? !0 : void 0,
+				onInput: n[2] ||= (e) => ot(e),
+				onFocus: H,
+				onBlur: U,
+				onKeydown: W
+			}), null, 16, xe), _.type === "simple" ? f("", !0) : (b(), p("button", {
+				key: 0,
+				type: "button",
+				class: "nb-date-picker__icon",
+				disabled: _.disabled || _.readonly,
+				tabindex: "-1",
+				"aria-label": _.modelValue ? `Change date, ${L(_.modelValue)}` : "Choose date",
+				onClick: q
+			}, [g(e, {
+				name: C(T),
+				size: 16
+			}, null, 8, ["name"])], 8, Se))])], 2), _.type === "range" ? (b(), p("div", {
+				key: 0,
+				class: y(["nb-date-picker__input-wrapper nb-date-picker__input-wrapper--fluid", Dt.value])
+			}, [it.value || z.value ? (b(), p("div", Ce, [m("label", {
+				for: k.value,
+				class: "nb-date-picker__inner-label"
+			}, [h(S(it.value) + " ", 1), _.required ? (b(), p("span", Te, "*")) : f("", !0)], 8, we), z.value ? (b(), d(i, {
+				key: 0,
+				variant: z.value.variant,
+				"icon-only": "",
+				class: "nb-date-picker__inner-message"
+			}, {
+				default: w(() => [h(S(z.value.text), 1)]),
+				_: 1
+			}, 8, ["variant"])) : f("", !0)])) : f("", !0), m("div", Ee, [m("input", {
+				id: k.value,
+				ref_key: "endInputRef",
+				ref: N,
+				type: "text",
+				class: "nb-date-picker__field",
+				value: et.value,
+				placeholder: _.endPlaceholder || I.value,
+				disabled: _.disabled,
+				readonly: _.readonly,
+				required: _.required,
+				"aria-invalid": _.endError ? !0 : void 0,
+				onInput: n[3] ||= (e) => st(e),
+				onFocus: H,
+				onBlur: U,
+				onKeydown: W
+			}, null, 40, De), m("button", {
+				type: "button",
+				class: "nb-date-picker__icon",
+				disabled: _.disabled || _.readonly,
+				tabindex: "-1",
+				"aria-label": _.endValue ? `Change end date, ${L(_.endValue)}` : "Choose end date",
+				onClick: q
+			}, [g(e, {
+				name: C(T),
+				size: 16
+			}, null, 8, ["name"])], 8, Oe)])], 2)) : f("", !0)]),
+			_: 3
+		}, 8, ["gap"])) : f("", !0)], 2), (b(), d(l, { to: "body" }, [j.value && C(Ye) ? (b(), p("div", {
+			key: 0,
+			ref_key: "scrimRef",
+			ref: Xe,
+			class: "nb-date-picker__scrim",
+			"aria-hidden": "true",
+			onClick: K
+		}, null, 512)) : f("", !0), j.value ? (b(), p("div", ee({
+			key: 1,
+			ref_key: "calendarRef",
+			ref: Je,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": _.label ? `${_.label} calendar` : "Date picker",
+			class: ["nb-date-picker__calendar", { "nb-date-picker__calendar--sheet": C(Ye) }]
+		}, C(ze), {
+			style: C(Ye) ? void 0 : Ze.value,
+			onKeydown: ut,
+			onMousedown: n[4] ||= oe(() => {}, ["prevent"])
+		}), [m("div", Ae, [
+			m("button", {
+				type: "button",
+				class: "nb-date-picker__cal-nav",
+				"aria-label": "Previous year",
+				onClick: vt
+			}, [g(e, {
+				name: C(ce),
+				size: 16
+			}, null, 8, ["name"])]),
+			m("button", {
+				type: "button",
+				class: "nb-date-picker__cal-nav",
+				"aria-label": "Previous month",
+				onClick: gt
+			}, [g(e, {
+				name: C(le),
+				size: 16
+			}, null, 8, ["name"])]),
+			m("span", {
+				id: We.value,
+				class: "nb-date-picker__cal-title",
+				"aria-live": "polite"
+			}, S(bt.value), 9, je),
+			m("button", {
+				type: "button",
+				class: "nb-date-picker__cal-nav",
+				"aria-label": "Next month",
+				onClick: _t
+			}, [g(e, {
+				name: C(se),
+				size: 16
+			}, null, 8, ["name"])]),
+			m("button", {
+				type: "button",
+				class: "nb-date-picker__cal-nav",
+				"aria-label": "Next year",
+				onClick: yt
+			}, [g(e, {
+				name: C(ue),
+				size: 16
+			}, null, 8, ["name"])])
+		]), m("table", {
+			role: "grid",
+			"aria-labelledby": We.value,
+			class: "nb-date-picker__cal-table"
+		}, [m("thead", null, [m("tr", Ne, [(b(!0), p(c, null, ne(xt.value, (e) => (b(), p("th", {
+			key: e.narrow,
+			scope: "col",
+			class: "nb-date-picker__cal-weekday",
+			abbr: e.full
+		}, S(e.narrow), 9, Pe))), 128))])]), m("tbody", null, [(b(!0), p(c, null, ne(wt.value, (e, t) => (b(), p("tr", { key: t }, [(b(!0), p(c, null, ne(e, (e) => (b(), p("td", {
+			key: e.key,
+			role: "gridcell",
+			"aria-selected": e.isSelected || void 0,
+			"aria-disabled": e.isDisabled || void 0
+		}, [m("button", {
+			type: "button",
+			class: y(["nb-date-picker__cal-day", {
+				"nb-date-picker__cal-day--outside": !e.inMonth,
+				"nb-date-picker__cal-day--today": e.isToday,
+				"nb-date-picker__cal-day--selected": e.isSelected,
+				"nb-date-picker__cal-day--in-range": e.inRange,
+				"nb-date-picker__cal-day--range-start": e.isRangeStart,
+				"nb-date-picker__cal-day--range-end": e.isRangeEnd,
+				"nb-date-picker__cal-day--disabled": e.isDisabled,
+				"nb-date-picker__cal-day--focused": e.date === M.value
+			}]),
+			tabindex: e.date === M.value ? 0 : -1,
+			disabled: e.isDisabled,
+			"aria-label": Qe(e.date),
+			"data-date": e.date,
+			onClick: (t) => lt(e.date)
+		}, S(e.day), 11, Ie)], 8, Fe))), 128))]))), 128))])], 8, Me)], 16, ke)) : f("", !0)]))], 64));
+	}
+});
+//#endregion
+export { Le as t };