@astryx-vue/core 0.2.5 → 0.3.0

package/dist/DateInput-DT518j5E.js

@@ -0,0 +1,841 @@
+import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { n as resolveDateSurface, t as resolveDatePresentation } from "./useDatePresentation-C07PnOCw.js";
+import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
+import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as usePendingChange } from "./usePendingChange-ib-h8FZK.js";
+import { t as _sfc_main$5 } from "./BottomSheet-pt7m4CvC.js";
+import { t as _sfc_main$6 } from "./Icon-bteSId7T.js";
+import { n as isCalendarDateDisabled, r as toCalendarDate, t as _sfc_main$7 } from "./Calendar-B7vIowKq.js";
+import { t as _sfc_main$8 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$9 } from "./Field-D5gUEGw4.js";
+import { t as _sfc_main$10 } from "./Popover-DJf8POzL.js";
+import { t as formatInstant } from "./formatInstant-BDWUIxS7.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/date-input.css";
+//#region src/DateInput/NativeDateField.vue
+const _hoisted_1$1 = ["data-status"];
+const _hoisted_2$1 = [
+	"data-disabled",
+	"data-size",
+	"data-status"
+];
+const _hoisted_3$1 = ["disabled", "aria-label"];
+const _hoisted_4$1 = { class: "astryx-date-input-native" };
+const _hoisted_5$1 = [
+	"id",
+	"min",
+	"max",
+	"disabled",
+	"name",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-required",
+	"aria-busy"
+];
+const _hoisted_6$1 = ["data-placeholder"];
+const _hoisted_7$1 = ["aria-label"];
+const _hoisted_8$1 = {
+	class: "astryx-date-input-alert",
+	role: "alert"
+};
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "NativeDateField",
+	props: {
+		id: {},
+		modelValue: { default: null },
+		label: {},
+		description: {},
+		placeholder: {},
+		min: {},
+		max: {},
+		isDateDisabled: {},
+		dateConstraints: {},
+		name: {},
+		isLabelHidden: { type: Boolean },
+		isOptional: { type: Boolean },
+		isRequired: { type: Boolean },
+		labelTooltip: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledReason: {},
+		disabledMessage: {},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		changeAction: {},
+		hasClear: { type: Boolean },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: {},
+		size: { default: "md" },
+		status: {},
+		statusVariant: { default: "attached" },
+		format: {
+			type: [String, Function],
+			default: "date_long"
+		},
+		describedBy: {},
+		width: {},
+		inputId: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const inputRef = useTemplateRef("input");
+		const containerRef = useTemplateRef("container");
+		const focused = ref(false);
+		const rejected = ref(false);
+		const pending = usePendingChange(() => props.changeAction);
+		const busy = computed(() => props.isLoading || pending.busy.value);
+		const locked = computed(() => props.disabled || busy.value);
+		const disabledMessage = computed(() => props.disabledMessage?.trim() || props.disabledReason?.trim() || void 0);
+		const disabledMessageId = `${props.inputId}-disabled`;
+		const showsDisabledMessage = computed(() => locked.value && disabledMessage.value != null);
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const showsClear = computed(() => (props.hasClear || props.clearable) && Boolean(props.modelValue) && !locked.value);
+		function toIso(date) {
+			const month = String(date.getMonth() + 1).padStart(2, "0");
+			const day = String(date.getDate()).padStart(2, "0");
+			return `${date.getFullYear()}-${month}-${day}`;
+		}
+		function allowed(date) {
+			return !isCalendarDateDisabled(toCalendarDate(date), {
+				min: props.min,
+				max: props.max,
+				isDateDisabled: props.isDateDisabled,
+				dateConstraints: props.dateConstraints
+			});
+		}
+		const nativeValue = computed(() => props.modelValue ? toIso(props.modelValue) : "");
+		const overlay = computed(() => {
+			if (!props.modelValue) return props.placeholder ?? messages.value.dateInput.placeholder;
+			const iso = toIso(props.modelValue);
+			if (typeof props.format === "function") return props.format(iso);
+			if (props.format === "system_date") return iso;
+			return formatInstant(props.modelValue, props.format ?? "date_long", locale.value);
+		});
+		const statusType = computed(() => {
+			const status = props.status;
+			if (status == null || status === "default") return void 0;
+			return typeof status === "string" ? status : status.type;
+		});
+		const statusValue = computed(() => {
+			const status = props.status;
+			if (status == null || status === "default") return void 0;
+			if (typeof status === "string") return { type: status };
+			return status;
+		});
+		const minIso = computed(() => props.min ? toIso(props.min) : void 0);
+		const maxIso = computed(() => props.max ? toIso(props.max) : void 0);
+		function write(value) {
+			const input = inputRef.value;
+			if (input && input.value !== value) input.value = value;
+		}
+		function commit(value) {
+			if (locked.value) return;
+			emit("update:modelValue", value);
+			emit("change", value);
+			pending.run(value);
+		}
+		function read(raw) {
+			if (locked.value) return;
+			if (!raw) {
+				rejected.value = false;
+				if (props.modelValue) commit(null);
+				return;
+			}
+			const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
+			if (!match) return;
+			const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+			if (!allowed(date)) {
+				rejected.value = true;
+				return;
+			}
+			rejected.value = false;
+			if (!props.modelValue || toIso(props.modelValue) !== raw) commit(date);
+		}
+		function onNative() {
+			read(inputRef.value?.value ?? "");
+		}
+		function onFocus() {
+			focused.value = true;
+		}
+		function onBlur() {
+			focused.value = false;
+			rejected.value = false;
+			read(inputRef.value?.value ?? "");
+			write(nativeValue.value);
+		}
+		function onInputFocus(event) {
+			onFocus();
+			disabledTooltip.onFocus(event);
+		}
+		function onInputBlur() {
+			disabledTooltip.onBlur();
+			onBlur();
+		}
+		function openPicker() {
+			if (locked.value) return;
+			const input = inputRef.value;
+			if (!input) return;
+			input.focus();
+			if (typeof input.showPicker === "function") try {
+				input.showPicker();
+			} catch {}
+		}
+		function onClear(event) {
+			event.stopPropagation();
+			commit(null);
+			write("");
+		}
+		onMounted(() => {
+			write(nativeValue.value);
+			const input = inputRef.value;
+			input?.addEventListener("input", onNative);
+			input?.addEventListener("change", onNative);
+		});
+		onBeforeUnmount(() => {
+			const input = inputRef.value;
+			input?.removeEventListener("input", onNative);
+			input?.removeEventListener("change", onNative);
+		});
+		watch(nativeValue, (value) => {
+			if (!focused.value) write(value);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(_sfc_main$9, {
+					label: __props.label || unref(messages).dateInput.dialogLabel,
+					"input-id": __props.inputId,
+					description: __props.description,
+					width: __props.width,
+					"is-label-hidden": __props.isLabelHidden || !__props.label,
+					"is-disabled": locked.value,
+					"is-optional": __props.isOptional,
+					"is-required": __props.isRequired,
+					"label-tooltip": __props.labelTooltip,
+					status: statusValue.value,
+					"status-variant": __props.statusVariant
+				}, {
+					default: withCtx((field) => [createElementVNode("div", {
+						ref_key: "containerRef",
+						ref: containerRef,
+						class: normalizeClass(["astryx-date-input", [statusType.value ? `status-${statusType.value}` : void 0, `size-${__props.size}`]]),
+						"data-status": statusType.value,
+						"data-presentation": "native",
+						onPointerenter: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
+					}, [createElementVNode("div", {
+						class: "astryx-date-input-wrapper",
+						"data-disabled": locked.value ? "true" : void 0,
+						"data-size": __props.size,
+						"data-status": statusType.value
+					}, [
+						createElementVNode("button", {
+							type: "button",
+							class: "astryx-date-input-toggle",
+							disabled: locked.value,
+							"aria-label": unref(messages).dateInput.openCalendar,
+							tabindex: "-1",
+							onClick: openPicker
+						}, [createVNode(_sfc_main$6, {
+							icon: "calendar",
+							size: "sm"
+						})], 8, _hoisted_3$1),
+						createElementVNode("span", _hoisted_4$1, [createElementVNode("input", {
+							id: __props.inputId,
+							ref: "input",
+							class: "astryx-date-input-field",
+							type: "date",
+							min: minIso.value,
+							max: maxIso.value,
+							disabled: locked.value && !showsDisabledMessage.value,
+							name: __props.name,
+							"aria-label": __props.label ? void 0 : unref(messages).dateInput.dialogLabel,
+							"aria-labelledby": __props.label ? field.labelId : void 0,
+							"aria-describedby": [__props.describedBy, field.describedBy].filter(Boolean).join(" ") || void 0,
+							"aria-disabled": showsDisabledMessage.value || void 0,
+							"aria-invalid": statusType.value === "error" || rejected.value ? "true" : void 0,
+							"aria-required": __props.isRequired || void 0,
+							"aria-busy": busy.value || void 0,
+							autocomplete: "off",
+							onFocus: onInputFocus,
+							onBlur: onInputBlur
+						}, null, 40, _hoisted_5$1), createElementVNode("span", {
+							class: "astryx-date-input-overlay",
+							"data-placeholder": __props.modelValue ? void 0 : "true",
+							"aria-hidden": "true"
+						}, toDisplayString(overlay.value), 9, _hoisted_6$1)]),
+						showsClear.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "astryx-date-input-clear",
+							"aria-label": __props.clearLabel || unref(messages).dateInput.clear(__props.label),
+							tabindex: "-1",
+							onClick: onClear
+						}, [createVNode(_sfc_main$6, {
+							icon: "close",
+							size: "sm"
+						})], 8, _hoisted_7$1)) : createCommentVNode("v-if", true),
+						busy.value ? (openBlock(), createBlock(_sfc_main$8, {
+							key: 1,
+							size: "sm",
+							"aria-label": unref(messages).dateInput.loading
+						}, null, 8, ["aria-label"])) : statusType.value && __props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$4, {
+							key: 2,
+							type: statusType.value
+						}, null, 8, ["type"])) : createCommentVNode("v-if", true)
+					], 8, _hoisted_2$1), createElementVNode("div", _hoisted_8$1, toDisplayString(rejected.value ? unref(messages).dateInput.invalidDate : ""), 1)], 42, _hoisted_1$1)]),
+					_: 1
+				}, 8, [
+					"label",
+					"input-id",
+					"description",
+					"width",
+					"is-label-hidden",
+					"is-disabled",
+					"is-optional",
+					"is-required",
+					"label-tooltip",
+					"status",
+					"status-variant"
+				]),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 0,
+					id: disabledMessageId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$3, {
+					key: 1,
+					id: `${disabledMessageId}-tooltip`,
+					anchor: containerRef.value,
+					open: unref(disabledTooltip).isOpen.value,
+					text: disabledMessage.value ?? "",
+					onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+					onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+				}, null, 8, [
+					"id",
+					"anchor",
+					"open",
+					"text",
+					"onPointerEnter",
+					"onPointerLeave"
+				])) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+//#region src/DateInput/DateInput.vue
+const _hoisted_1 = ["data-status", "data-presentation"];
+const _hoisted_2 = [
+	"data-disabled",
+	"data-size",
+	"data-status"
+];
+const _hoisted_3 = {
+	key: 0,
+	class: "astryx-date-input-prefix"
+};
+const _hoisted_4 = ["disabled", "aria-label"];
+const _hoisted_5 = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-disabled",
+	"inputmode",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"aria-busy",
+	"aria-controls",
+	"aria-expanded"
+];
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = {
+	key: 2,
+	class: "astryx-date-input-suffix"
+};
+const _hoisted_8 = ["id"];
+const _hoisted_9 = ["id"];
+const _hoisted_10 = ["name", "value"];
+const TOUCH_POINTER_QUERY = "(pointer: coarse)";
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDateInput",
+	__name: "DateInput",
+	props: {
+		id: {},
+		describedBy: {},
+		modelValue: { default: null },
+		placeholder: {},
+		min: {},
+		max: {},
+		isDateDisabled: {},
+		dateConstraints: {},
+		name: {},
+		label: {},
+		description: {},
+		isLabelHidden: { type: Boolean },
+		isOptional: { type: Boolean },
+		isRequired: { type: Boolean },
+		labelTooltip: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledMessage: {},
+		disabledReason: {},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		changeAction: {},
+		hasClear: { type: Boolean },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: {},
+		size: { default: "md" },
+		status: {},
+		statusVariant: { default: "attached" },
+		format: {
+			type: [String, Function],
+			default: "date_long"
+		},
+		presentation: {},
+		nativePicker: {},
+		numberOfMonths: { default: 1 },
+		weekStartsOn: {},
+		width: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const PassThrough = defineComponent({
+			name: "DateInputPassThrough",
+			setup(_, { slots }) {
+				return () => slots.default?.({});
+			}
+		});
+		const generatedId = `astryx-date-input-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const popupId = computed(() => `${inputId.value}-popup`);
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const isCoarsePointer = useMediaQuery(TOUCH_POINTER_QUERY);
+		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.dateInput.placeholder);
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.dateInput.clear(props.label));
+		const dialogLabel = computed(() => props.label || messages.value.dateInput.dialogLabel);
+		const inputRef = useTemplateRef("inputRef");
+		const containerRef = useTemplateRef("containerRef");
+		const isOpen = ref(false);
+		const inputValue = ref("");
+		const disabledMessageId = `${generatedId}-disabled`;
+		const pending = usePendingChange(() => props.changeAction);
+		const busy = computed(() => props.isLoading || pending.busy.value);
+		const locked = computed(() => props.disabled || busy.value);
+		const disabledMessage = computed(() => props.disabledMessage?.trim() || props.disabledReason?.trim() || void 0);
+		const showsDisabledMessage = computed(() => locked.value && disabledMessage.value != null);
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const showsClear = computed(() => (props.hasClear || props.clearable) && Boolean(props.modelValue) && !locked.value);
+		const policy = computed(() => resolveDatePresentation(props.presentation, props.nativePicker));
+		const surface = computed(() => resolveDateSurface(policy.value, isCoarsePointer.value));
+		const useSheet = computed(() => surface.value === "sheet");
+		const popupWidth = computed(() => props.numberOfMonths === 2 ? "min(36rem, calc(100vw - 16px))" : 280);
+		function allowed(date) {
+			return !isCalendarDateDisabled(toCalendarDate(date), {
+				min: props.min,
+				max: props.max,
+				isDateDisabled: props.isDateDisabled,
+				dateConstraints: props.dateConstraints
+			});
+		}
+		function commit(value) {
+			if (locked.value) return;
+			emit("update:modelValue", value);
+			emit("change", value);
+			pending.run(value);
+		}
+		const modelValueRef = computed({
+			get: () => props.modelValue,
+			set: (value) => commit(value)
+		});
+		function toIso(date) {
+			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+		}
+		function formatCommitted(date) {
+			if (!date) return "";
+			const iso = toIso(date);
+			const format = props.format;
+			if (typeof format === "function") return format(iso);
+			if (format === "system_date") return iso;
+			return formatInstant(date, format, locale.value);
+		}
+		function parseDate(str) {
+			if (!str.trim()) return null;
+			const match = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+			if (match) {
+				const [, year, month, day] = match;
+				const date = new Date(Number(year), Number(month) - 1, Number(day));
+				if (!Number.isNaN(date.getTime()) && date.getFullYear() === Number(year) && date.getMonth() === Number(month) - 1 && date.getDate() === Number(day)) return date;
+			}
+			return null;
+		}
+		function syncDisplayValue() {
+			inputValue.value = formatCommitted(props.modelValue);
+		}
+		watch(() => [
+			props.modelValue,
+			props.format,
+			locale.value
+		], syncDisplayValue, { immediate: true });
+		function resolvedStatus(status) {
+			if (status == null || status === "default") return void 0;
+			if (typeof status === "string") return { type: status };
+			return status;
+		}
+		const statusValue = computed(() => resolvedStatus(props.status));
+		const statusType = computed(() => statusValue.value?.type);
+		const showsField = computed(() => {
+			if (props.isLabelHidden && !props.description && !statusValue.value?.message) return false;
+			return Boolean(props.label || props.description || statusValue.value?.message);
+		});
+		const shell = computed(() => showsField.value ? _sfc_main$9 : PassThrough);
+		const fieldBindings = computed(() => showsField.value ? {
+			label: props.label ?? "",
+			inputId: inputId.value,
+			description: props.description,
+			isLabelHidden: props.isLabelHidden || !props.label,
+			isDisabled: locked.value,
+			isOptional: props.isOptional,
+			isRequired: props.isRequired,
+			labelTooltip: props.labelTooltip,
+			width: props.width,
+			status: statusValue.value,
+			statusVariant: props.statusVariant
+		} : {});
+		const toggleLabel = computed(() => isOpen.value ? messages.value.dateInput.closeCalendar : messages.value.dateInput.openCalendar);
+		function describedBy(fieldIds) {
+			return [
+				props.describedBy,
+				fieldIds,
+				showsDisabledMessage.value ? disabledMessageId : void 0
+			].filter(Boolean).join(" ") || void 0;
+		}
+		function onInput(event) {
+			if (useSheet.value) return;
+			const target = event.target;
+			const value = target.value.trim();
+			inputValue.value = target.value;
+			const parsed = parseDate(value);
+			if (parsed && allowed(parsed)) modelValueRef.value = parsed;
+		}
+		function onBlur() {
+			disabledTooltip.onBlur();
+			if (!parseDate(inputValue.value.trim())) syncDisplayValue();
+		}
+		function onOpenChange(open) {
+			if (!useSheet.value) isOpen.value = open;
+		}
+		function openCalendar() {
+			if (!locked.value) isOpen.value = true;
+		}
+		function onToggleClick() {
+			if (useSheet.value) openCalendar();
+		}
+		function onInputKeyDown(event) {
+			if (locked.value || isOpen.value) return;
+			if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowDown") {
+				event.preventDefault();
+				openCalendar();
+			}
+		}
+		function onCalendarChange(date) {
+			modelValueRef.value = date;
+			isOpen.value = false;
+			inputRef.value?.blur();
+		}
+		function onClear(event) {
+			event.stopPropagation();
+			modelValueRef.value = null;
+			inputValue.value = "";
+			isOpen.value = false;
+			inputRef.value?.focus({ preventScroll: true });
+		}
+		function onToggleKeyDown(event) {
+			if (event.key === "Escape") disabledTooltip.hideImmediately();
+		}
+		__expose({
+			inputValue,
+			isOpen,
+			onCalendarChange,
+			onClear,
+			parseDate
+		});
+		syncDisplayValue();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				surface.value === "native" ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					"input-id": inputId.value,
+					"model-value": __props.modelValue,
+					label: __props.label,
+					description: __props.description,
+					placeholder: resolvedPlaceholder.value,
+					min: __props.min,
+					max: __props.max,
+					"is-date-disabled": __props.isDateDisabled,
+					"date-constraints": __props.dateConstraints,
+					name: __props.name,
+					"is-label-hidden": __props.isLabelHidden,
+					"is-optional": __props.isOptional,
+					"is-required": __props.isRequired,
+					"label-tooltip": __props.labelTooltip,
+					disabled: __props.disabled,
+					"disabled-reason": __props.disabledReason,
+					"is-loading": busy.value,
+					clearable: __props.clearable,
+					"clear-label": resolvedClearLabel.value,
+					size: __props.size,
+					status: __props.status,
+					"status-variant": __props.statusVariant,
+					format: __props.format,
+					"described-by": props.describedBy,
+					"disabled-message": disabledMessage.value,
+					width: __props.width,
+					"onUpdate:modelValue": commit
+				}, null, 8, [
+					"input-id",
+					"model-value",
+					"label",
+					"description",
+					"placeholder",
+					"min",
+					"max",
+					"is-date-disabled",
+					"date-constraints",
+					"name",
+					"is-label-hidden",
+					"is-optional",
+					"is-required",
+					"label-tooltip",
+					"disabled",
+					"disabled-reason",
+					"is-loading",
+					"clearable",
+					"clear-label",
+					"size",
+					"status",
+					"status-variant",
+					"format",
+					"described-by",
+					"disabled-message",
+					"width"
+				])) : (openBlock(), createBlock(resolveDynamicComponent(shell.value), normalizeProps(mergeProps({ key: 1 }, fieldBindings.value)), {
+					default: withCtx((field) => [createElementVNode("div", {
+						ref_key: "containerRef",
+						ref: containerRef,
+						class: normalizeClass(["astryx-date-input", [statusType.value ? `status-${statusType.value}` : void 0, `size-${props.size}`]]),
+						"data-status": statusType.value,
+						"data-presentation": useSheet.value ? "bottom-sheet" : "popover",
+						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
+					}, [
+						createVNode(_sfc_main$10, {
+							"is-open": useSheet.value ? false : isOpen.value,
+							"is-enabled": !useSheet.value && !locked.value,
+							placement: "below",
+							alignment: "start",
+							padding: 0,
+							width: popupWidth.value,
+							"has-close-button": false,
+							"is-modal": false,
+							"has-auto-focus": true,
+							role: "dialog",
+							label: dialogLabel.value,
+							onOpenChange
+						}, {
+							content: withCtx(() => [!useSheet.value ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								id: popupId.value
+							}, [createVNode(_sfc_main$7, {
+								"model-value": props.modelValue,
+								min: props.min,
+								max: props.max,
+								"is-date-disabled": props.isDateDisabled,
+								"date-constraints": props.dateConstraints,
+								"number-of-months": props.numberOfMonths,
+								"week-starts-on": props.weekStartsOn,
+								"onUpdate:modelValue": onCalendarChange
+							}, null, 8, [
+								"model-value",
+								"min",
+								"max",
+								"is-date-disabled",
+								"date-constraints",
+								"number-of-months",
+								"week-starts-on"
+							])], 8, _hoisted_8)) : createCommentVNode("v-if", true)]),
+							default: withCtx(() => [createElementVNode("div", {
+								class: "astryx-date-input-wrapper",
+								"data-disabled": locked.value ? "true" : void 0,
+								"data-size": props.size,
+								"data-status": statusType.value
+							}, [
+								_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("v-if", true),
+								createElementVNode("button", {
+									type: "button",
+									class: "astryx-date-input-toggle",
+									disabled: locked.value,
+									"aria-label": toggleLabel.value,
+									onClick: onToggleClick,
+									onKeydown: onToggleKeyDown
+								}, [createVNode(_sfc_main$6, {
+									icon: "calendar",
+									size: "sm"
+								})], 40, _hoisted_4),
+								createElementVNode("input", {
+									id: inputId.value,
+									ref_key: "inputRef",
+									ref: inputRef,
+									type: "text",
+									class: "astryx-date-input-field",
+									role: "combobox",
+									value: inputValue.value,
+									placeholder: resolvedPlaceholder.value,
+									disabled: locked.value && !showsDisabledMessage.value,
+									readonly: useSheet.value || showsDisabledMessage.value,
+									"aria-disabled": showsDisabledMessage.value || void 0,
+									inputmode: useSheet.value ? "none" : void 0,
+									"aria-label": showsField.value ? void 0 : props.label,
+									"aria-labelledby": showsField.value ? field?.labelId : void 0,
+									"aria-describedby": describedBy(field?.describedBy),
+									"aria-invalid": statusType.value === "error" ? "true" : void 0,
+									"aria-required": __props.isRequired || void 0,
+									"aria-busy": busy.value || void 0,
+									"aria-controls": popupId.value,
+									"aria-expanded": isOpen.value,
+									"aria-haspopup": "dialog",
+									autocomplete: "off",
+									onInput,
+									onBlur,
+									onFocus: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onFocus && unref(disabledTooltip).onFocus(...args)),
+									onClick: openCalendar,
+									onKeydown: onInputKeyDown
+								}, null, 40, _hoisted_5),
+								showsClear.value ? (openBlock(), createElementBlock("button", {
+									key: 1,
+									type: "button",
+									class: "astryx-date-input-clear",
+									"aria-label": resolvedClearLabel.value,
+									tabindex: "-1",
+									onClick: onClear
+								}, [createVNode(_sfc_main$6, {
+									icon: "close",
+									size: "sm"
+								})], 8, _hoisted_6)) : _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true),
+								busy.value ? (openBlock(), createBlock(_sfc_main$8, {
+									key: 3,
+									class: "astryx-date-input-spinner",
+									size: "sm",
+									"aria-label": unref(messages).dateInput.loading
+								}, null, 8, ["aria-label"])) : statusType.value && props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$4, {
+									key: 4,
+									type: statusType.value
+								}, null, 8, ["type"])) : createCommentVNode("v-if", true)
+							], 8, _hoisted_2)]),
+							_: 2
+						}, 1032, [
+							"is-open",
+							"is-enabled",
+							"width",
+							"label"
+						]),
+						useSheet.value ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 0,
+							"is-open": isOpen.value,
+							"onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => isOpen.value = $event),
+							label: dialogLabel.value,
+							height: "hug",
+							padding: 0
+						}, {
+							default: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$7, {
+								"model-value": props.modelValue,
+								min: props.min,
+								max: props.max,
+								"is-date-disabled": props.isDateDisabled,
+								"date-constraints": props.dateConstraints,
+								"number-of-months": props.numberOfMonths,
+								"week-starts-on": props.weekStartsOn,
+								"onUpdate:modelValue": onCalendarChange
+							}, null, 8, [
+								"model-value",
+								"min",
+								"max",
+								"is-date-disabled",
+								"date-constraints",
+								"number-of-months",
+								"week-starts-on"
+							])], 8, _hoisted_9)]),
+							_: 1
+						}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
+						props.name ? (openBlock(), createElementBlock("input", {
+							key: 1,
+							type: "hidden",
+							name: props.name,
+							value: props.modelValue ? toIso(props.modelValue) : ""
+						}, null, 8, _hoisted_10)) : createCommentVNode("v-if", true)
+					], 42, _hoisted_1)]),
+					_: 3
+				}, 16)),
+				showsDisabledMessage.value && surface.value !== "native" ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 2,
+					id: disabledMessageId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				showsDisabledMessage.value && surface.value !== "native" ? (openBlock(), createBlock(_sfc_main$3, {
+					key: 3,
+					id: `${disabledMessageId}-tooltip`,
+					anchor: containerRef.value,
+					open: unref(disabledTooltip).isOpen.value,
+					text: disabledMessage.value ?? "",
+					onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+					onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+				}, null, 8, [
+					"id",
+					"anchor",
+					"open",
+					"text",
+					"onPointerEnter",
+					"onPointerLeave"
+				])) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };