@auronui/vue 1.0.1 → 1.0.3

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,398 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { motion } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/motion/index.js";
+import { AnimatePresence_default } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/animate-presence/AnimatePresence.js";
+import { $ad063034c8620db8$export$aa8b41735afcabd2, $ad063034c8620db8$export$d0bdf45af03a6ea3 } from "../../node_modules/.pnpm/@internationalized_date@3.12.1/node_modules/@internationalized/date/dist/private/queries.js";
+import { $d07e34cce18680fd$export$93522d1a439f3617 } from "../../node_modules/.pnpm/@internationalized_date@3.12.1/node_modules/@internationalized/date/dist/private/conversion.js";
+import { $2aaf608024c21ca1$export$ca871e8dbb80966f } from "../../node_modules/.pnpm/@internationalized_date@3.12.1/node_modules/@internationalized/date/dist/private/CalendarDate.js";
+import Calendar_default from "../calendar/Calendar.js";
+import DateInput_default from "../date-input/DateInput.js";
+import DateTimePickerTimeScroller_default from "./DateTimePickerTimeScroller.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { dateTimePickerVariants } from "@auronui/styles";
+import { DatePickerContent, DatePickerRoot, DatePickerTrigger } from "reka-ui";
+//#region src/components/date-time-picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-hidden"];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	key: 1,
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2.5",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+};
+var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "DateTimePicker",
+	props: /* @__PURE__ */ mergeModels({
+		variant: {},
+		size: { default: "md" },
+		color: { default: "default" },
+		labelPlacement: { default: "inside" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		label: {},
+		description: {},
+		errorMessage: {},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		class: {},
+		granularity: { default: "minute" },
+		hourCycle: {},
+		hideTimeZone: {
+			type: Boolean,
+			default: false
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		locale: {},
+		defaultValue: {},
+		minValue: {},
+		maxValue: {},
+		isDateUnavailable: {},
+		isDateDisabled: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: void 0
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		const openModel = useModel(__props, "open");
+		const STEP_TITLES = {
+			date: "Pick a date",
+			time: "Pick a time"
+		};
+		const STEP_ORDER = ["date", "time"];
+		if (props.defaultOpen && openModel.value === void 0) openModel.value = true;
+		if (modelValue.value == null && props.defaultValue != null) modelValue.value = props.defaultValue;
+		const _today = $ad063034c8620db8$export$d0bdf45af03a6ea3($ad063034c8620db8$export$aa8b41735afcabd2());
+		const internalValue = shallowRef(modelValue.value ?? props.defaultValue ?? new $2aaf608024c21ca1$export$ca871e8dbb80966f(_today.year, _today.month, _today.day, 0, 0));
+		watch(modelValue, (v) => {
+			if (v instanceof $2aaf608024c21ca1$export$ca871e8dbb80966f) internalValue.value = v;
+		});
+		function onInputChange(v) {
+			if (!(v instanceof $2aaf608024c21ca1$export$ca871e8dbb80966f)) return;
+			internalValue.value = v;
+			modelValue.value = v;
+		}
+		const activeStep = ref("date");
+		const direction = ref(1);
+		watch(openModel, (open) => {
+			if (open) activeStep.value = "date";
+		});
+		function goTo(step) {
+			const from = STEP_ORDER.indexOf(activeStep.value);
+			direction.value = STEP_ORDER.indexOf(step) > from ? 1 : -1;
+			activeStep.value = step;
+		}
+		function goBack() {
+			const idx = STEP_ORDER.indexOf(activeStep.value);
+			if (idx > 0) goTo(STEP_ORDER[idx - 1]);
+		}
+		function goForward() {
+			const idx = STEP_ORDER.indexOf(activeStep.value);
+			if (idx < STEP_ORDER.length - 1) goTo(STEP_ORDER[idx + 1]);
+			else if (props.closeOnSelect) openModel.value = false;
+		}
+		const panelInitial = computed(() => ({
+			x: direction.value > 0 ? "100%" : "-100%",
+			opacity: 0
+		}));
+		const panelAnimate = {
+			x: "0%",
+			opacity: 1
+		};
+		const panelExit = computed(() => ({
+			x: direction.value > 0 ? "-100%" : "100%",
+			opacity: 0
+		}));
+		const calendarValue = computed({
+			get: () => $d07e34cce18680fd$export$93522d1a439f3617(internalValue.value),
+			set: (val) => {
+				if (!val) return;
+				internalValue.value = internalValue.value.set({
+					year: val.year,
+					month: val.month,
+					day: val.day
+				});
+				modelValue.value = internalValue.value;
+				goTo("time");
+			}
+		});
+		function onTimeUpdate(val) {
+			internalValue.value = val;
+			modelValue.value = val;
+		}
+		const slotFns = computed(() => dateTimePickerVariants({
+			isInvalid: props.isInvalid,
+			isDisabled: props.isDisabled,
+			fullWidth: props.fullWidth
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DatePickerRoot), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
+				open: openModel.value,
+				"onUpdate:open": _cache[3] || (_cache[3] = ($event) => openModel.value = $event),
+				"default-value": __props.defaultValue,
+				"default-open": __props.defaultOpen,
+				"min-value": __props.minValue,
+				"max-value": __props.maxValue,
+				"is-date-unavailable": __props.isDateUnavailable,
+				"is-date-disabled": __props.isDateDisabled,
+				locale: __props.locale,
+				granularity: __props.granularity,
+				"hour-cycle": __props.hourCycle,
+				disabled: __props.isDisabled,
+				readonly: __props.isReadOnly,
+				name: __props.name,
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+				"data-slot": "date-time-picker"
+			}, {
+				default: withCtx(() => [createVNode(DateInput_default, {
+					"model-value": internalValue.value,
+					"onUpdate:modelValue": onInputChange,
+					variant: __props.variant,
+					size: __props.size,
+					color: __props.color,
+					"label-placement": __props.labelPlacement,
+					"full-width": __props.fullWidth,
+					"default-value": __props.defaultValue,
+					granularity: __props.granularity,
+					"hour-cycle": __props.hourCycle,
+					locale: __props.locale,
+					label: __props.label,
+					description: __props.description,
+					"error-message": __props.errorMessage,
+					"is-invalid": __props.isInvalid,
+					"is-disabled": __props.isDisabled,
+					"is-read-only": __props.isReadOnly,
+					"is-required": __props.isRequired,
+					name: __props.name,
+					"hide-time-zone": __props.hideTimeZone
+				}, {
+					endContent: withCtx(() => [createVNode(unref(DatePickerTrigger), {
+						class: normalizeClass(slotFns.value.trigger()),
+						"aria-label": "Open date time picker",
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "selectorIcon", {}, () => [(openBlock(), createElementBlock("svg", {
+							class: normalizeClass(slotFns.value.triggerIndicator()),
+							xmlns: "http://www.w3.org/2000/svg",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true",
+							focusable: "false"
+						}, [..._cache[4] || (_cache[4] = [
+							createElementVNode("rect", {
+								x: "3",
+								y: "4",
+								width: "18",
+								height: "18",
+								rx: "2",
+								ry: "2"
+							}, null, -1),
+							createElementVNode("line", {
+								x1: "16",
+								y1: "2",
+								x2: "16",
+								y2: "6"
+							}, null, -1),
+							createElementVNode("line", {
+								x1: "8",
+								y1: "2",
+								x2: "8",
+								y2: "6"
+							}, null, -1),
+							createElementVNode("line", {
+								x1: "3",
+								y1: "10",
+								x2: "21",
+								y2: "10"
+							}, null, -1)
+						])], 2))])]),
+						_: 3
+					}, 8, ["class"])]),
+					_: 3
+				}, 8, [
+					"model-value",
+					"variant",
+					"size",
+					"color",
+					"label-placement",
+					"full-width",
+					"default-value",
+					"granularity",
+					"hour-cycle",
+					"locale",
+					"label",
+					"description",
+					"error-message",
+					"is-invalid",
+					"is-disabled",
+					"is-read-only",
+					"is-required",
+					"name",
+					"hide-time-zone"
+				]), createVNode(unref(DatePickerContent), {
+					class: normalizeClass(slotFns.value.popover()),
+					"data-slot": "popover",
+					"side-offset": 8
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						class: normalizeClass(slotFns.value.stepHeader()),
+						"data-slot": "step-header"
+					}, [
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(slotFns.value.navButton()),
+							"data-hidden": activeStep.value === "date" ? "true" : void 0,
+							"aria-label": "Previous step",
+							"data-slot": "back-button",
+							onClick: goBack
+						}, [..._cache[5] || (_cache[5] = [createElementVNode("svg", {
+							width: "14",
+							height: "14",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true"
+						}, [createElementVNode("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1),
+						createElementVNode("span", { class: normalizeClass(slotFns.value.stepTitle()) }, toDisplayString(STEP_TITLES[activeStep.value]), 3),
+						createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(slotFns.value.navButton()),
+							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
+							"data-slot": "forward-button",
+							onClick: goForward
+						}, [activeStep.value === "time" ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass(slotFns.value.doneLabel())
+						}, "Done", 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[6] || (_cache[6] = [createElementVNode("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2)
+					], 2), createElementVNode("div", {
+						class: normalizeClass(slotFns.value.panelWrap()),
+						style: { "overflow": "hidden" }
+					}, [createVNode(unref(AnimatePresence_default), { mode: "popLayout" }, {
+						default: withCtx(() => [activeStep.value === "date" ? (openBlock(), createBlock(unref(motion).div, {
+							key: "date",
+							initial: panelInitial.value,
+							animate: panelAnimate,
+							exit: panelExit.value,
+							transition: { duration: .15 },
+							class: "px-3 pb-3",
+							"data-slot": "calendar-panel"
+						}, {
+							default: withCtx(() => [createVNode(Calendar_default, {
+								modelValue: calendarValue.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => calendarValue.value = $event),
+								"default-value": __props.defaultValue,
+								"min-value": __props.minValue,
+								"max-value": __props.maxValue,
+								"is-date-disabled": __props.isDateDisabled,
+								"is-date-unavailable": __props.isDateUnavailable,
+								locale: __props.locale,
+								readonly: __props.isReadOnly,
+								disabled: __props.isDisabled
+							}, null, 8, [
+								"modelValue",
+								"default-value",
+								"min-value",
+								"max-value",
+								"is-date-disabled",
+								"is-date-unavailable",
+								"locale",
+								"readonly",
+								"disabled"
+							])]),
+							_: 1
+						}, 8, ["initial", "exit"])) : activeStep.value === "time" ? (openBlock(), createBlock(unref(motion).div, {
+							key: "time",
+							initial: panelInitial.value,
+							animate: panelAnimate,
+							exit: panelExit.value,
+							transition: { duration: .15 }
+						}, {
+							default: withCtx(() => [createVNode(DateTimePickerTimeScroller_default, {
+								"model-value": internalValue.value,
+								granularity: __props.granularity,
+								"hour-cycle": __props.hourCycle,
+								"onUpdate:modelValue": onTimeUpdate
+							}, null, 8, [
+								"model-value",
+								"granularity",
+								"hour-cycle"
+							])]),
+							_: 1
+						}, 8, ["initial", "exit"])) : createCommentVNode("", true)]),
+						_: 1
+					})], 2)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"open",
+				"default-value",
+				"default-open",
+				"min-value",
+				"max-value",
+				"is-date-unavailable",
+				"is-date-disabled",
+				"locale",
+				"granularity",
+				"hour-cycle",
+				"disabled",
+				"readonly",
+				"name",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { DateTimePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' | 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: string\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  locale?: string\n  defaultValue?: CalendarDateTime\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n  date: 'Pick a date',\n  time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 | -1>(1)\n\nwatch(openModel, (open) => {\n  if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n  const from = STEP_ORDER.indexOf(activeStep.value)\n  const to = STEP_ORDER.indexOf(step)\n  direction.value = to > from ? 1 : -1\n  activeStep.value = step\n}\n\nfunction goBack() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx < STEP_ORDER.length - 1) {\n    goTo(STEP_ORDER[idx + 1])\n  } else if (props.closeOnSelect) {\n    openModel.value = false\n  }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n    goTo('time')\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      @update:model-value=\"onInputChange\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n              <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" />\n              <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" />\n              <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\" />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <!-- Step header -->\n      <div :class=\"slotFns.stepHeader()\" data-slot=\"step-header\">\n        <button\n          type=\"button\"\n          :class=\"slotFns.navButton()\"\n          :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n          aria-label=\"Previous step\"\n          data-slot=\"back-button\"\n          @click=\"goBack\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </button>\n\n        <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n        <button\n          type=\"button\"\n          :class=\"slotFns.navButton()\"\n          :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n          data-slot=\"forward-button\"\n          @click=\"goForward\"\n        >\n          <span v-if=\"activeStep === 'time'\" :class=\"slotFns.doneLabel()\">Done</span>\n          <svg v-else width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Sliding panels -->\n      <div :class=\"slotFns.panelWrap()\" style=\"overflow: hidden;\">\n        <AnimatePresence mode=\"popLayout\">\n          <motion.div\n            v-if=\"activeStep === 'date'\"\n            key=\"date\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n            class=\"px-3 pb-3\"\n            data-slot=\"calendar-panel\"\n          >\n            <Calendar\n              v-model=\"calendarValue\"\n              :default-value=\"defaultValue\"\n              :min-value=\"minValue\"\n              :max-value=\"maxValue\"\n              :is-date-disabled=\"isDateDisabled\"\n              :is-date-unavailable=\"isDateUnavailable\"\n              :locale=\"locale\"\n              :readonly=\"isReadOnly\"\n              :disabled=\"isDisabled\"\n            />\n          </motion.div>\n\n          <motion.div\n            v-else-if=\"activeStep === 'time'\"\n            key=\"time\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n          >\n            <DateTimePickerTimeScroller\n              :model-value=\"internalValue\"\n              :granularity=\"granularity\"\n              :hour-cycle=\"hourCycle\"\n              @update:model-value=\"onTimeUpdate\"\n            />\n          </motion.div>\n\n        </AnimatePresence>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/date-time-picker/DateTimePickerTimeScroller.js

@@ -0,0 +1,7 @@
+import DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default from "./DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/date-time-picker/DateTimePickerTimeScroller.vue
+var DateTimePickerTimeScroller_default = DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DateTimePickerTimeScroller_default as default };
+
+//# sourceMappingURL=DateTimePickerTimeScroller.js.map

package/dist/components/date-time-picker/DateTimePickerTimeScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerTimeScroller.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePickerTimeScroller.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePickerTimeScroller.vue -->\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { CalendarDateTime } from '@internationalized/date'\n\nconst props = withDefaults(defineProps<{\n  modelValue: CalendarDateTime\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  class?: string\n}>(), {\n  granularity: 'minute',\n  hourCycle: 24,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: CalendarDateTime]\n}>()\n\n// ─── Column data ─────────────────────────────────────────────────────────\n\nconst hours24 = Array.from({ length: 24 }, (_, i) => i)\nconst hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] // 12,1..11\nconst minutes = Array.from({ length: 60 }, (_, i) => i)\nconst seconds = Array.from({ length: 60 }, (_, i) => i)\nconst ampm = ['AM', 'PM']\n\nconst hourItems = computed(() =>\n  props.hourCycle === 12 ? hours12 : hours24,\n)\n\nconst columns = computed(() => {\n  const cols: Array<{ key: string; items: (number | string)[] }> = [\n    { key: 'hour', items: hourItems.value },\n    { key: 'minute', items: minutes },\n  ]\n  if (props.granularity === 'second') cols.push({ key: 'second', items: seconds })\n  if (props.hourCycle === 12) cols.push({ key: 'ampm', items: ampm })\n  return cols\n})\n\n// ─── Current index computation ───────────────────────────────────────────\n\nfunction currentIndexFor(key: string): number {\n  const v = props.modelValue\n  if (key === 'hour') {\n    if (props.hourCycle === 12) {\n      const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12\n      return hours12.indexOf(h12)\n    }\n    return v.hour\n  }\n  if (key === 'minute') return v.minute\n  if (key === 'second') return v.second ?? 0\n  if (key === 'ampm') return v.hour >= 12 ? 1 : 0\n  return 0\n}\n\n// ─── Scroll-to-selected ──────────────────────────────────────────────────\n\nconst columnRefs = ref<HTMLElement[]>([])\n\nconst ITEM_H = 40 // 2.5rem at 16px base\n\nfunction scrollColumnToIndex(colEl: HTMLElement, index: number) {\n  colEl.scrollTop = index * ITEM_H\n}\n\nfunction syncScrollPositions() {\n  columns.value.forEach((col, i) => {\n    const el = columnRefs.value[i]\n    if (el) scrollColumnToIndex(el, currentIndexFor(col.key))\n  })\n}\n\nonMounted(() => nextTick(syncScrollPositions))\nwatch(() => props.modelValue, () => nextTick(syncScrollPositions))\n\n// ─── Scroll → value update ───────────────────────────────────────────────\n\nfunction onColumnScroll(key: string, colEl: HTMLElement) {\n  const idx = Math.round(colEl.scrollTop / ITEM_H)\n  const col = columns.value.find(c => c.key === key)!\n  const item = col.items[idx]\n  if (item === undefined) return\n\n  const v = props.modelValue\n  if (key === 'hour') {\n    let newHour: number\n    if (props.hourCycle === 12) {\n      const isPm = v.hour >= 12\n      const h12 = item as number\n      newHour = h12 === 12 ? (isPm ? 12 : 0) : isPm ? h12 + 12 : h12\n    } else {\n      newHour = item as number\n    }\n    emit('update:modelValue', v.set({ hour: newHour }))\n  } else if (key === 'minute') {\n    emit('update:modelValue', v.set({ minute: item as number }))\n  } else if (key === 'second') {\n    emit('update:modelValue', v.set({ second: item as number }))\n  } else if (key === 'ampm') {\n    const isPm = item === 'PM'\n    const currentPm = v.hour >= 12\n    if (isPm !== currentPm) {\n      emit('update:modelValue', v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }))\n    }\n  }\n}\n\n// ─── Keyboard navigation ─────────────────────────────────────────────────\n\nfunction onKeyDown(e: KeyboardEvent, colEl: HTMLElement) {\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    colEl.scrollTop += ITEM_H\n  } else if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    colEl.scrollTop -= ITEM_H\n  }\n}\n\n// ─── Click-to-select ─────────────────────────────────────────────────────\n\nfunction onItemClick(colEl: HTMLElement, idx: number) {\n  colEl.scrollTo({ top: idx * ITEM_H, behavior: 'smooth' })\n}\n\n// ─── Label helpers ───────────────────────────────────────────────────────\n\nfunction columnLabel(key: string): string {\n  if (key === 'hour') return 'Hour'\n  if (key === 'minute') return 'Minute'\n  if (key === 'second') return 'Second'\n  return 'AM/PM'\n}\n\nfunction itemLabel(_key: string, item: number | string): string {\n  if (typeof item === 'string') return item\n  return String(item).padStart(2, '0')\n}\n\n// expose for testing\ndefineExpose({ columnRefs, columns, currentIndexFor })\n</script>\n\n<template>\n  <div\n    :class=\"['date-time-picker__scroller-wrap', props.class]\"\n    data-slot=\"time-scroller\"\n  >\n    <div\n      v-for=\"(col, i) in columns\"\n      :key=\"col.key\"\n      :ref=\"(el) => { if (el) columnRefs[i] = el as HTMLElement }\"\n      class=\"date-time-picker__scroller-column\"\n      :aria-label=\"columnLabel(col.key)\"\n      data-slot=\"scroller-column\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      @scroll.passive=\"onColumnScroll(col.key, ($event.currentTarget as HTMLElement))\"\n      @keydown=\"onKeyDown($event, ($event.currentTarget as HTMLElement))\"\n    >\n      <div\n        v-for=\"(item, idx) in col.items\"\n        :key=\"idx\"\n        class=\"date-time-picker__scroller-item\"\n        :data-selected=\"idx === currentIndexFor(col.key) ? 'true' : undefined\"\n        :aria-selected=\"idx === currentIndexFor(col.key)\"\n        role=\"option\"\n        @click=\"onItemClick(columnRefs[i]!, idx)\"\n      >\n        {{ itemLabel(col.key, item) }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/date-time-picker/DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,157 @@
+import { Fragment, computed, createElementBlock, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, toDisplayString, watch } from "vue";
+//#region src/components/date-time-picker/DateTimePickerTimeScroller.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "onScrollPassive"];
+var _hoisted_2 = [
+	"data-selected",
+	"aria-selected",
+	"onClick"
+];
+var ITEM_H = 40;
+var DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DateTimePickerTimeScroller",
+	props: {
+		modelValue: {},
+		granularity: { default: "minute" },
+		hourCycle: { default: 24 },
+		class: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const hours24 = Array.from({ length: 24 }, (_, i) => i);
+		const hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)];
+		const minutes = Array.from({ length: 60 }, (_, i) => i);
+		const seconds = Array.from({ length: 60 }, (_, i) => i);
+		const ampm = ["AM", "PM"];
+		const hourItems = computed(() => props.hourCycle === 12 ? hours12 : hours24);
+		const columns = computed(() => {
+			const cols = [{
+				key: "hour",
+				items: hourItems.value
+			}, {
+				key: "minute",
+				items: minutes
+			}];
+			if (props.granularity === "second") cols.push({
+				key: "second",
+				items: seconds
+			});
+			if (props.hourCycle === 12) cols.push({
+				key: "ampm",
+				items: ampm
+			});
+			return cols;
+		});
+		function currentIndexFor(key) {
+			const v = props.modelValue;
+			if (key === "hour") {
+				if (props.hourCycle === 12) {
+					const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12;
+					return hours12.indexOf(h12);
+				}
+				return v.hour;
+			}
+			if (key === "minute") return v.minute;
+			if (key === "second") return v.second ?? 0;
+			if (key === "ampm") return v.hour >= 12 ? 1 : 0;
+			return 0;
+		}
+		const columnRefs = ref([]);
+		function scrollColumnToIndex(colEl, index) {
+			colEl.scrollTop = index * ITEM_H;
+		}
+		function syncScrollPositions() {
+			columns.value.forEach((col, i) => {
+				const el = columnRefs.value[i];
+				if (el) scrollColumnToIndex(el, currentIndexFor(col.key));
+			});
+		}
+		onMounted(() => nextTick(syncScrollPositions));
+		watch(() => props.modelValue, () => nextTick(syncScrollPositions));
+		function onColumnScroll(key, colEl) {
+			const idx = Math.round(colEl.scrollTop / ITEM_H);
+			const item = columns.value.find((c) => c.key === key).items[idx];
+			if (item === void 0) return;
+			const v = props.modelValue;
+			if (key === "hour") {
+				let newHour;
+				if (props.hourCycle === 12) {
+					const isPm = v.hour >= 12;
+					const h12 = item;
+					newHour = h12 === 12 ? isPm ? 12 : 0 : isPm ? h12 + 12 : h12;
+				} else newHour = item;
+				emit("update:modelValue", v.set({ hour: newHour }));
+			} else if (key === "minute") emit("update:modelValue", v.set({ minute: item }));
+			else if (key === "second") emit("update:modelValue", v.set({ second: item }));
+			else if (key === "ampm") {
+				const isPm = item === "PM";
+				if (isPm !== v.hour >= 12) emit("update:modelValue", v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }));
+			}
+		}
+		function onKeyDown(e, colEl) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				colEl.scrollTop += ITEM_H;
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				colEl.scrollTop -= ITEM_H;
+			}
+		}
+		function onItemClick(colEl, idx) {
+			colEl.scrollTo({
+				top: idx * ITEM_H,
+				behavior: "smooth"
+			});
+		}
+		function columnLabel(key) {
+			if (key === "hour") return "Hour";
+			if (key === "minute") return "Minute";
+			if (key === "second") return "Second";
+			return "AM/PM";
+		}
+		function itemLabel(_key, item) {
+			if (typeof item === "string") return item;
+			return String(item).padStart(2, "0");
+		}
+		__expose({
+			columnRefs,
+			columns,
+			currentIndexFor
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["date-time-picker__scroller-wrap", props.class]),
+				"data-slot": "time-scroller"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col, i) => {
+				return openBlock(), createElementBlock("div", {
+					key: col.key,
+					ref_for: true,
+					ref: (el) => {
+						if (el) columnRefs.value[i] = el;
+					},
+					class: "date-time-picker__scroller-column",
+					"aria-label": columnLabel(col.key),
+					"data-slot": "scroller-column",
+					role: "listbox",
+					tabindex: "0",
+					onScrollPassive: ($event) => onColumnScroll(col.key, $event.currentTarget),
+					onKeydown: _cache[0] || (_cache[0] = ($event) => onKeyDown($event, $event.currentTarget))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col.items, (item, idx) => {
+					return openBlock(), createElementBlock("div", {
+						key: idx,
+						class: "date-time-picker__scroller-item",
+						"data-selected": idx === currentIndexFor(col.key) ? "true" : void 0,
+						"aria-selected": idx === currentIndexFor(col.key),
+						role: "option",
+						onClick: ($event) => onItemClick(columnRefs.value[i], idx)
+					}, toDisplayString(itemLabel(col.key, item)), 9, _hoisted_2);
+				}), 128))], 40, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { DateTimePickerTimeScroller_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/date-time-picker/DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerTimeScroller.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePickerTimeScroller.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePickerTimeScroller.vue -->\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { CalendarDateTime } from '@internationalized/date'\n\nconst props = withDefaults(defineProps<{\n  modelValue: CalendarDateTime\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  class?: string\n}>(), {\n  granularity: 'minute',\n  hourCycle: 24,\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: CalendarDateTime]\n}>()\n\n// ─── Column data ─────────────────────────────────────────────────────────\n\nconst hours24 = Array.from({ length: 24 }, (_, i) => i)\nconst hours12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)] // 12,1..11\nconst minutes = Array.from({ length: 60 }, (_, i) => i)\nconst seconds = Array.from({ length: 60 }, (_, i) => i)\nconst ampm = ['AM', 'PM']\n\nconst hourItems = computed(() =>\n  props.hourCycle === 12 ? hours12 : hours24,\n)\n\nconst columns = computed(() => {\n  const cols: Array<{ key: string; items: (number | string)[] }> = [\n    { key: 'hour', items: hourItems.value },\n    { key: 'minute', items: minutes },\n  ]\n  if (props.granularity === 'second') cols.push({ key: 'second', items: seconds })\n  if (props.hourCycle === 12) cols.push({ key: 'ampm', items: ampm })\n  return cols\n})\n\n// ─── Current index computation ───────────────────────────────────────────\n\nfunction currentIndexFor(key: string): number {\n  const v = props.modelValue\n  if (key === 'hour') {\n    if (props.hourCycle === 12) {\n      const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12\n      return hours12.indexOf(h12)\n    }\n    return v.hour\n  }\n  if (key === 'minute') return v.minute\n  if (key === 'second') return v.second ?? 0\n  if (key === 'ampm') return v.hour >= 12 ? 1 : 0\n  return 0\n}\n\n// ─── Scroll-to-selected ──────────────────────────────────────────────────\n\nconst columnRefs = ref<HTMLElement[]>([])\n\nconst ITEM_H = 40 // 2.5rem at 16px base\n\nfunction scrollColumnToIndex(colEl: HTMLElement, index: number) {\n  colEl.scrollTop = index * ITEM_H\n}\n\nfunction syncScrollPositions() {\n  columns.value.forEach((col, i) => {\n    const el = columnRefs.value[i]\n    if (el) scrollColumnToIndex(el, currentIndexFor(col.key))\n  })\n}\n\nonMounted(() => nextTick(syncScrollPositions))\nwatch(() => props.modelValue, () => nextTick(syncScrollPositions))\n\n// ─── Scroll → value update ───────────────────────────────────────────────\n\nfunction onColumnScroll(key: string, colEl: HTMLElement) {\n  const idx = Math.round(colEl.scrollTop / ITEM_H)\n  const col = columns.value.find(c => c.key === key)!\n  const item = col.items[idx]\n  if (item === undefined) return\n\n  const v = props.modelValue\n  if (key === 'hour') {\n    let newHour: number\n    if (props.hourCycle === 12) {\n      const isPm = v.hour >= 12\n      const h12 = item as number\n      newHour = h12 === 12 ? (isPm ? 12 : 0) : isPm ? h12 + 12 : h12\n    } else {\n      newHour = item as number\n    }\n    emit('update:modelValue', v.set({ hour: newHour }))\n  } else if (key === 'minute') {\n    emit('update:modelValue', v.set({ minute: item as number }))\n  } else if (key === 'second') {\n    emit('update:modelValue', v.set({ second: item as number }))\n  } else if (key === 'ampm') {\n    const isPm = item === 'PM'\n    const currentPm = v.hour >= 12\n    if (isPm !== currentPm) {\n      emit('update:modelValue', v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }))\n    }\n  }\n}\n\n// ─── Keyboard navigation ─────────────────────────────────────────────────\n\nfunction onKeyDown(e: KeyboardEvent, colEl: HTMLElement) {\n  if (e.key === 'ArrowDown') {\n    e.preventDefault()\n    colEl.scrollTop += ITEM_H\n  } else if (e.key === 'ArrowUp') {\n    e.preventDefault()\n    colEl.scrollTop -= ITEM_H\n  }\n}\n\n// ─── Click-to-select ─────────────────────────────────────────────────────\n\nfunction onItemClick(colEl: HTMLElement, idx: number) {\n  colEl.scrollTo({ top: idx * ITEM_H, behavior: 'smooth' })\n}\n\n// ─── Label helpers ───────────────────────────────────────────────────────\n\nfunction columnLabel(key: string): string {\n  if (key === 'hour') return 'Hour'\n  if (key === 'minute') return 'Minute'\n  if (key === 'second') return 'Second'\n  return 'AM/PM'\n}\n\nfunction itemLabel(_key: string, item: number | string): string {\n  if (typeof item === 'string') return item\n  return String(item).padStart(2, '0')\n}\n\n// expose for testing\ndefineExpose({ columnRefs, columns, currentIndexFor })\n</script>\n\n<template>\n  <div\n    :class=\"['date-time-picker__scroller-wrap', props.class]\"\n    data-slot=\"time-scroller\"\n  >\n    <div\n      v-for=\"(col, i) in columns\"\n      :key=\"col.key\"\n      :ref=\"(el) => { if (el) columnRefs[i] = el as HTMLElement }\"\n      class=\"date-time-picker__scroller-column\"\n      :aria-label=\"columnLabel(col.key)\"\n      data-slot=\"scroller-column\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      @scroll.passive=\"onColumnScroll(col.key, ($event.currentTarget as HTMLElement))\"\n      @keydown=\"onKeyDown($event, ($event.currentTarget as HTMLElement))\"\n    >\n      <div\n        v-for=\"(item, idx) in col.items\"\n        :key=\"idx\"\n        class=\"date-time-picker__scroller-item\"\n        :data-selected=\"idx === currentIndexFor(col.key) ? 'true' : undefined\"\n        :aria-selected=\"idx === currentIndexFor(col.key)\"\n        role=\"option\"\n        @click=\"onItemClick(columnRefs[i]!, idx)\"\n      >\n        {{ itemLabel(col.key, item) }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}