@astryx-vue/core 0.2.2 → 0.2.3

package/dist/DateInput-zm8sNc0t.js

@@ -0,0 +1,743 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { n as resolveDateSurface, t as resolveDatePresentation } from "./useDatePresentation-C07PnOCw.js";
+import { t as usePendingChange } from "./usePendingChange-ib-h8FZK.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-DmOLCubj.js";
+import { t as _sfc_main$2 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$3 } from "./BottomSheet-Dg95HB1s.js";
+import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
+import { n as isCalendarDateDisabled, r as toCalendarDate, t as _sfc_main$5 } from "./Calendar-CnOsSjMY.js";
+import { t as _sfc_main$6 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$7 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$8 } from "./Popover-D7zqpFwU.js";
+import { t as formatInstant } from "./formatInstant-BDWUIxS7.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, 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-invalid",
+	"aria-required",
+	"aria-busy",
+	"title"
+];
+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: {},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		changeAction: {},
+		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 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);
+		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 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(), createBlock(_sfc_main$7, {
+				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", {
+					class: normalizeClass(["astryx-date-input", [statusType.value ? `status-${statusType.value}` : void 0, `size-${__props.size}`]]),
+					"data-status": statusType.value,
+					"data-presentation": "native"
+				}, [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$4, {
+						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,
+						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-invalid": statusType.value === "error" || rejected.value ? "true" : void 0,
+						"aria-required": __props.isRequired || void 0,
+						"aria-busy": busy.value || void 0,
+						title: __props.disabledReason,
+						autocomplete: "off",
+						onFocus,
+						onBlur
+					}, 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)]),
+					__props.clearable && __props.modelValue && !locked.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$4, {
+						icon: "close",
+						size: "sm"
+					})], 8, _hoisted_7$1)) : createCommentVNode("v-if", true),
+					busy.value ? (openBlock(), createBlock(_sfc_main$6, {
+						key: 1,
+						size: "sm",
+						"aria-label": unref(messages).dateInput.loading
+					}, null, 8, ["aria-label"])) : statusType.value && __props.statusVariant !== "tooltip" ? (openBlock(), createBlock(_sfc_main$2, {
+						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)], 10, _hoisted_1$1)]),
+				_: 1
+			}, 8, [
+				"label",
+				"input-id",
+				"description",
+				"width",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"label-tooltip",
+				"status",
+				"status-variant"
+			]);
+		};
+	}
+});
+//#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",
+	"inputmode",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"aria-busy",
+	"aria-controls",
+	"aria-expanded",
+	"title"
+];
+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
+		},
+		disabledReason: {},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		changeAction: {},
+		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 isOpen = ref(false);
+		const inputValue = ref("");
+		const pending = usePendingChange(() => props.changeAction);
+		const busy = computed(() => props.isLoading || pending.busy.value);
+		const locked = computed(() => props.disabled || busy.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$7 : 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].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() {
+			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;
+		}
+		__expose({
+			inputValue,
+			isOpen,
+			onCalendarChange,
+			onClear,
+			parseDate
+		});
+		syncDisplayValue();
+		return (_ctx, _cache) => {
+			return 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,
+				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",
+				"width"
+			])) : (openBlock(), createBlock(resolveDynamicComponent(shell.value), normalizeProps(mergeProps({ key: 1 }, fieldBindings.value)), {
+				default: withCtx((field) => [createElementVNode("div", {
+					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"
+				}, [
+					createVNode(_sfc_main$8, {
+						"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$5, {
+							"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
+							}, [createVNode(_sfc_main$4, {
+								icon: "calendar",
+								size: "sm"
+							})], 8, _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,
+								readonly: useSheet.value,
+								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",
+								title: props.disabledReason,
+								autocomplete: "off",
+								onInput,
+								onBlur,
+								onClick: openCalendar,
+								onKeydown: onInputKeyDown
+							}, null, 40, _hoisted_5),
+							props.clearable && props.modelValue && !locked.value ? (openBlock(), createElementBlock("button", {
+								key: 1,
+								type: "button",
+								class: "astryx-date-input-clear",
+								"aria-label": resolvedClearLabel.value,
+								tabindex: "-1",
+								onClick: onClear
+							}, [createVNode(_sfc_main$4, {
+								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$6, {
+								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$2, {
+								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$3, {
+						key: 0,
+						"is-open": isOpen.value,
+						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => isOpen.value = $event),
+						label: dialogLabel.value,
+						height: "hug",
+						padding: 0
+					}, {
+						default: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$5, {
+							"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)
+				], 10, _hoisted_1)]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };