vectis-ui 0.12.0 → 0.14.0

package/dist/components/VTimeInput/VTimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTimeInput.js","names":[],"sources":["../../../src/components/VTimeInput/VTimeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose typing and clock modes from VInput and VTimePicker; list mode delegates to VCombobox.\n * JavaScript supplies masking and manual panel focus because text inputs cannot use\n * popovertarget.\n */\n\nimport { computed, inject, provide, ref, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCombobox from '../VCombobox/VCombobox.vue'\nimport type { ComboboxOption } from '../VCombobox/VCombobox.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport { schedule as scheduleIcon } from '../VIcon/icons/schedule'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\nimport VSeparator from '../VSeparator/VSeparator.vue'\nimport VTimePicker from '../VTimePicker/VTimePicker.vue'\nimport type { TimePickerFormat } from '../VTimePicker/VTimePicker.vue'\nimport {\n  isTimeAllowed,\n  limitsProblem,\n  nearestAllowedTime,\n  resolveLimits,\n} from '../VTimePicker/limits'\nimport type { TimePickerAllowed } from '../VTimePicker/limits'\nimport {\n  formatTime,\n  formatTimeDisplay,\n  hourCycleFor,\n  isValidTime,\n  parseTime,\n} from '../../utils/time'\nimport {\n  formatTimeMask,\n  parseTimeMask,\n  snapMinute,\n  timeCaret,\n  timeList,\n  timeToMask,\n  to12h,\n  withMeridiem,\n} from '../../utils/clock'\nimport type { Meridiem } from '../../utils/time'\nimport type { TimeOption } from '../../utils/clock'\nimport { readWrittenTime, timeMatches } from './search'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { digitsOf } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/**\n * Whether the field can be typed into, only filled from the clock, or picked from a list of\n * times.\n */\nexport type TimeInputMode = 'picker' | 'input' | 'list'\n\n/** What the `#footer` slot receives. */\nexport interface TimeInputFooterSlotProps {\n  /** Writes the time on the clock into the value, then closes. */\n  confirm: () => void\n  /** Closes and drops the time on the clock, the value left as it was. */\n  cancel: () => void\n  /** The same as `cancel`, under the name VDateInput's footer uses. */\n  close: () => void\n}\n\nconst MODES: TimeInputMode[] = ['picker', 'input', 'list']\n\n/** Where the panel opens relative to the field, whether it holds the clock or the list. */\nexport type TimeInputPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type TimeInputSize = 'sm' | 'md' | 'lg'\n\ninterface TimeInputProps {\n  /**\n   * Whether times are shown on a 12- or a 24-hour clock. Left out, the reader's language\n   * decides, which is almost always what one wants.\n   */\n  format?: TimePickerFormat\n  /**\n   * Which form the field takes: one that can be TYPED into, a `picker` one where the\n   * clock is the only way in (so the picker is forced on there), or a searchable LIST of\n   * times at a fixed interval, where a picker would make no sense.\n   */\n  mode?: TimeInputMode\n  /**\n   * Offers the picker beside a field one can type into: an icon at the end of the field, and a\n   * panel it opens.\n   */\n  showPicker?: boolean\n  /**\n   * The interval between two times that can be chosen. It applies to the picker, to the\n   * arrow keys and to the rows of the list.\n   */\n  minuteStep?: number\n  /**\n   * The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`.\n   * The picker and the list both LEAVE OUT what it rules out, and a time typed past it\n   * makes the field invalid.\n   */\n  min?: string\n  /** The latest time that can be chosen, inclusive, written like `min`. */\n  max?: string\n  /**\n   * Which hours can be chosen: the list of them, or a rule answering for one. The hour\n   * handed to a rule is always the 24-hour one, whichever clock is on display.\n   */\n  allowedHours?: TimePickerAllowed\n  /** Which minutes can be chosen: the list of them, or a rule answering for one. */\n  allowedMinutes?: TimePickerAllowed\n  /**\n   * A BCP 47 locale, which decides the clock and how a time is written out. It TAKES\n   * PRECEDENCE over the design system's global locale and falls back to it, which is why\n   * it has no literal default: `undefined` has to stay recognizable for the global locale\n   * to have its chance.\n   */\n  locale?: string\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: TimeInputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the time without letting it be changed: nothing can be typed, there is no clock and\n   * no clear cross.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached, in which case it\n   * needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the clock button does, in words. It names the button `pickerIcon` renders,\n   * and falls back to the design system dictionary.\n   */\n  pickerIconLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the clock icon. It says that\n   * something is being loaded and changes nothing else: the field can still be typed\n   * into and the panel still opens.\n   */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The icon that opens the PICKER, at the end of the field. It has no effect on the list\n   * form, whose chevron follows the combobox convention. The clear cross appears to its\n   * left rather than in its place.\n   */\n  pickerIcon?: IconSource\n  /** Where the panel opens relative to the field, whether it holds the clock or the list. */\n  placement?: TimeInputPlacement\n}\n\nconst props = withDefaults(defineProps<TimeInputProps>(), {\n  format: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and therefore\n  // what allows warning only the consumer who explicitly asked for something that cannot work.\n  mode: undefined,\n  showPicker: false,\n  minuteStep: 1,\n  min: undefined,\n  max: undefined,\n  allowedHours: undefined,\n  allowedMinutes: undefined,\n  locale: undefined,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerIconLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  pickerIcon: () => scheduleIcon,\n  placement: 'bottom-start',\n})\n\n/**\n * The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. A consumer\n * therefore never has to know which clock the reader's language uses.\n */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its place,\n   * as in VInput.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, after the AM/PM button when there is one and before\n   * the ones the field owns: the clear cross and the icon that opens the panel.\n   */\n  'value-end'?(): unknown\n  /**\n   * The strip at the foot of the clock, which REPLACES the Cancel and OK buttons rather than\n   * joining them.\n   */\n  footer?(props: TimeInputFooterSlotProps): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field on screen; the masked VInput or the list's VCombobox. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst listRef = ref<InstanceType<typeof VCombobox> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VTimePicker> | null>(null)\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\nconst resolvedMode = computed<TimeInputMode>(() => {\n  // The default is applied before the value is checked. A prop that was never given is not an\n  // unknown value, and treating it as one would warn on a bare `<VTimeInput />`.\n  const mode = props.mode ?? 'input'\n  return MODES.includes(mode) ? mode : 'input'\n})\nconst typing = computed(() => resolvedMode.value === 'input')\nconst isList = computed(() => resolvedMode.value === 'list')\n/**\n * Whether this component builds a panel of its own, which is the clock's: the list form hands\n * that job to VCombobox.\n */\nconst hasPanel = computed(\n  () => !props.readonly && (resolvedMode.value === 'picker' || (typing.value && props.showPicker)),\n)\n\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n/** The restrictions, resolved once. */\nconst limits = computed(() => resolveLimits(props))\n\n/** Whether the value is one the restrictions allow. Nothing at all is not a breach. */\nconst valueAllowed = computed(() => {\n  const parts = modelParts.value\n  return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n})\n\n// @devwarn\nif (isDev) {\n  // The clock receives `minuteStep` and the restrictions as they stand, so what it would say\n  // about them is said here, under the name the consumer wrote (utils/hostWarns).\n  provide(hostWarnsKey, true)\n  watchEffect(() => {\n    if (!Number.isInteger(props.minuteStep) || props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimeInput] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VTimeInput] unknown mode \"${props.mode}\": use \"input\" (the default), \"picker\" or \"list\".`,\n      )\n    if (isList.value && props.showPicker)\n      console.warn(\n        '[VTimeInput] showPicker is ignored in \"list\" mode: the list of times is the only panel.',\n      )\n    // The list form is a VCombobox, which draws the end of the field itself: its own chevron in\n    // place of the clock. The two props that describe this component's end icon therefore reach\n    // nothing at all, and their absence is invisible on screen.\n    const inert = ([] as string[]).concat(\n      props.pickerIcon !== scheduleIcon ? 'pickerIcon' : [],\n      props.pickerIconLabel ? 'pickerIconLabel' : [],\n    )\n    const isAre = inert.length > 1 ? 'are' : 'is'\n    if (isList.value && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored in \"list\" mode: the list draws its own chevron.`,\n      )\n    // A field one types into without the picker has no end icon either, as in VDateInput.\n    // A read-only field is left out: it is a state that comes and goes, not a configuration\n    // to correct.\n    if (typing.value && !props.showPicker && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored without showPicker: a field one types into has no clock icon unless it offers the clock.`,\n      )\n    const problem = limitsProblem(limits.value)\n    if (problem) console.warn(`[VTimeInput] ${problem}`)\n    if (isList.value && props.minuteStep < 5)\n      console.warn(\n        `[VTimeInput] minuteStep ${props.minuteStep} in \"list\" mode would render ${Math.ceil(1440 / props.minuteStep)} rows: a step of 15 or 30 minutes is expected.`,\n      )\n  })\n}\n\n/** The time being built on the clock, in the same canonical form as the value itself. */\nconst pickerDraft = ref<string | null>(null)\n\nconst modelParts = computed(() => parseTime(model.value))\n\n/** The half of the day chosen while no time is set: VTimePicker's own `pendingMeridiem`. */\nconst pendingMeridiem = ref<Meridiem>('AM')\n\n/**\n * The half of the day the FIELD is showing. It is what the mask needs: typing \"9:30\" says\n * nothing about the morning or the afternoon, so the answer has to be readable while the\n * panel is shut.\n */\nconst currentMeridiem = computed<Meridiem>(() => {\n  // With the picker open it is the DRAFT that is on screen, and this control has to read\n  // the same thing: two controls showing opposite halves of the day until OK is pressed\n  // is the one state that must not happen.\n  const parts = open.value && hasPanel.value ? parseTime(pickerDraft.value) : modelParts.value\n  return parts ? to12h(parts.hour).meridiem : pendingMeridiem.value\n})\n\n/**\n * The button beside the value flips the half of the day. There is no third state to reach,\n * so it names the half it is showing and swaps to the other one on a click.\n */\nfunction toggleMeridiem() {\n  const next: Meridiem = currentMeridiem.value === 'PM' ? 'AM' : 'PM'\n  pendingMeridiem.value = next\n  // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n  // and applies to the first time typed or chosen.\n  const moved = withMeridiem(model.value, next)\n  if (moved) model.value = moved\n  // With the picker open the draft has to follow as well, or OK would write back the\n  // half of the day the reader has just changed.\n  const pending = open.value && hasPanel.value ? withMeridiem(pickerDraft.value, next) : null\n  if (pending) pickerDraft.value = pending\n}\n\n/** Whether the button is rendered at all. */\nconst hasMeridiem = computed(\n  () => typing.value && !props.readonly && resolvedFormat.value === '12h',\n)\n\nconst hasValue = computed(() => !!modelParts.value)\nconst displayText = computed(() =>\n  model.value ? formatTimeDisplay(model.value, resolvedLocale.value, resolvedFormat.value) : '',\n)\n\n// @a11y\n// Where the focus goes when the panel opens. The picker publishes where its own focus belongs,\n// so nothing here has to know that the target is a slider; the same arrangement VDateInput has\n// with VDatePicker.\nfunction focusInPanel() {\n  pickerRef.value?.focus()\n}\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts). Nothing else is needed here: the\n// AM/PM button lives INSIDE the field, so a 12 hour field is one box like any other and\n// the row has nothing of its own to join.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The whole \"field plus panel\" shell, shared with VDateInput. What is specific to this\n// component is only what happens around it: preparing the draft as the panel opens, and\n// clearing the announcement as it closes.\nconst {\n  open,\n  panelId,\n  closeAndFocus,\n  focusField,\n  onFieldFocus,\n  toggleFromIcon,\n  onControlClick,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  // With no panel there is nothing to open. This is the composable's SINGLE cut-off point, and\n  // every way in passes through it; clicking the field, focusing it, the down arrow, Enter, the\n  // icon.\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel,\n  // Beside a field one types into, the panel opens on focus WITHOUT taking it, so typing\n  // carries on.\n  openOnFocus: () => typing.value,\n  onOpen: () => {\n    const parts = modelParts.value\n    if (parts) pickerDraft.value = formatTime(parts.hour, parts.minute)\n    // A clock opened BESIDE a field one types into starts empty: it opened because the\n    // field took the focus, not because a time was asked for, and a draft set to the\n    // current time would hand its half of the day to the digits about to be typed, so\n    // \"0930\" typed in the afternoon would become 21:30.\n    else if (typing.value) pickerDraft.value = null\n    else {\n      // Reading the clock is safe here: this runs from a handler, hence in a browser, never\n      // during a render; and it is why the picker itself never reads it, so that it stays\n      // identical on both sides of hydration. The instant is taken once: two reads could\n      // straddle a minute.\n      const now = new Date()\n      const wanted = snapMinute(now.getMinutes(), props.minuteStep)\n      // Pulled to the nearest time the restrictions allow, so that the panel never opens\n      // on one the reader would be refused. Null is a set of restrictions that allows\n      // nothing at all, which the warning above has already reported.\n      pickerDraft.value =\n        nearestAllowedTime(now.getHours(), wanted, limits.value) ??\n        formatTime(now.getHours(), wanted)\n    }\n    pickerRef.value?.reset()\n  },\n  onClose: () => {\n    pickerRef.value?.reset()\n  },\n})\n\n/** OK: the ONE route by which the picker's draft becomes the value. */\nfunction confirm() {\n  if (pickerDraft.value) model.value = pickerDraft.value\n  closeAndFocus()\n}\n\n/** Cancel: the draft is simply dropped with the panel. */\nconst cancel = closeAndFocus\n\n// @a11y\n// Spread popup wiring over forwarded attrs: absent panels must contribute no keys, while\n// present comboboxes require their own role and controls reference.\nconst inputAttrs = computed(() =>\n  hasPanel.value\n    ? {\n        ...fieldAttrs.value,\n        role: 'combobox',\n        'aria-haspopup': 'dialog',\n        'aria-expanded': open.value,\n        'aria-controls': panelId,\n      }\n    : fieldAttrs.value,\n)\n\n/*\n * Emptying the value, called by the field as it emits its clear event. The focus is taken\n * through `focusField`, whose note says why that stops the panel reopening.\n */\nfunction clearValue() {\n  model.value = null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  focusField()\n  emit('clear')\n}\n\n// Escape and the focus leaving both close WITHOUT committing, which is the picker's Cancel\n// behaviour: closing never writes the value, and only OK does.\n\nconst m = useMessages()\n\n// @core\n/**\n * Saying no to a time that is not one the restrictions allow. It is written unconditionally\n * rather than only while typing: the browser BARS a read-only control from constraint\n * validation, so the read-only form settles it without a branch here.\n */\nwatchEffect(\n  () => {\n    const el = fieldEl.value\n    if (!el) return\n    const own = m.value.timeInput.unavailable\n    if (!valueAllowed.value) el.setCustomValidity(own)\n    // Only the component's own message is taken back: a consumer's verdict written over it,\n    // a server saying the slot is taken, stays until the consumer clears it.\n    else if (el.validationMessage === own) el.setCustomValidity('')\n  },\n  { flush: 'post' },\n)\n\n/*\n * That is why the caret can be computed outright here, where a date has to look for a separator\n * it cannot predict; and why nothing distinguishes a final commit from a live one, there being\n * no equivalent of expanding a two-digit year.\n */\nconst {\n  draft,\n  fieldModel,\n  writeField,\n  commitOrRevert,\n  onFieldInput,\n  onKeydown: onMaskKeydown,\n  onPaste,\n} = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () => model.value,\n  writeValue: (time) => {\n    model.value = time\n    // With the clock open beside the field, it follows what is typed: otherwise OK would\n    // write the clock's time back over the one the reader has just typed.\n    if (open.value && hasPanel.value) pickerDraft.value = time\n  },\n  maxDigits: () => 4,\n  format: formatTimeMask,\n  caret: (_text, digitsBefore, inserting) => timeCaret(digitsBefore, inserting),\n  parse: (text) => parseTimeMask(text, resolvedFormat.value, currentMeridiem.value),\n  toMask: (time) => timeToMask(time, resolvedFormat.value),\n})\n\n// @keyboard\n// What the mask's keys mean for a time: typing anything that is not a digit,\n// the separator included so that \"9:30\" can be typed exactly as it reads, completes the\n// hour with a leading zero and moves on to the minutes; the down arrow is the one explicit\n// way from the field into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  onMaskKeydown(event, {\n    onSeparator: (el) => {\n      const digits = digitsOf(el.value)\n      if (digits.length === 1) writeField(formatTimeMask(`0${digits}`), 3)\n    },\n    onArrowDown: () => {\n      if (!open.value) return false\n      focusInPanel()\n      return true\n    },\n    onEnter: closeAndFocus,\n  })\n}\n\n/** Pasting. */\nfunction onFieldPaste(event: ClipboardEvent) {\n  onPaste(event, (pasted) =>\n    isValidTime(pasted)\n      ? pasted\n      : readWrittenTime(pasted, resolvedFormat.value, currentMeridiem.value),\n  )\n}\n\n/*\n * The list form must not reach these two at all, and being panel-less is not enough to keep it\n * out. `useFieldPanel.onKeydown` cancels the default on Enter before asking whether a panel can\n * open, so an Enter travelling up from the VCombobox would stop a surrounding form from being\n * submitted with nothing to show for it.\n */\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (!isList.value) onKeydown(event)\n}\n\nfunction onRootFocusout(event: FocusEvent) {\n  if (!isList.value) onFocusout(event)\n}\n\n/*\n * What is left is the three things a combobox cannot know about times: which rows to offer, how\n * a search matches one, and the fact that this component's value is a nullable string where a\n * combobox's is a plain one.\n */\n\n/**\n * The rows the step and the restrictions offer, which the value does not enter into: a\n * change of value must not format up to 1440 times again.\n */\nconst baseOptions = computed<TimeOption[]>(() => {\n  if (!isList.value) return []\n  return timeList(props.minuteStep, resolvedLocale.value, resolvedFormat.value).filter((row) => {\n    // A list is read before it is chosen from, so a time it may not take has no reason to be in\n    // it, which is the picker's own rule for its numerals.\n    const parts = parseTime(row.value)\n    return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n  })\n})\n\n/**\n * The rows on offer. Without it the field would fall back to showing the raw canonical string;\n * \"09:07\" in a field that spells every other row \"9:07 AM\"; since a combobox labels a value\n * through the option carrying it.\n */\nconst options = computed<TimeOption[]>(() => {\n  const rows = baseOptions.value\n  const current = model.value\n  if (!isValidTime(current) || rows.some((row) => row.value === current)) return rows\n  const at = rows.findIndex((row) => row.value > current)\n  const extra: TimeOption = {\n    value: current,\n    label: formatTimeDisplay(current, resolvedLocale.value, resolvedFormat.value),\n  }\n  return at < 0 ? [...rows, extra] : [...rows.slice(0, at), extra, ...rows.slice(at)]\n})\n\n/**\n * The search, which accepts the digit run as well as the words; \"930\" finds 9:30, the way the\n * typed form's mask reads what it is given.\n */\nconst matchTime = (option: ComboboxOption, query: string) =>\n  timeMatches(option.label, String(option.value), query)\n\n/**\n * The bridge to VCombobox, whose value is a plain string where this component's is\n * nullable: an emptied combobox says so with an empty string, which is not a time.\n */\nconst listModel = computed<string | string[]>({\n  get: () => model.value ?? '',\n  set: (value) => {\n    model.value = typeof value === 'string' && value ? value : null\n  },\n})\n\n/*\n * Whether the cross is shown has to be answered explicitly here: outside the typed mode the\n * field is read-only and would hide it, while the value comes from the panel. The `readonly`\n * PROP is the one case where that default answer was right: frozen, the field offers no route\n * to a new value, so it offers no route to none either.\n */\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, hasValue.value || (typing.value && !!draft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  hasPanel.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n/*\n * The label is passed always, even when no icon is rendered at all. The helper detecting a\n * click handler on an icon warns AT setup if one is attached without a label, and it has no way\n * of knowing whether an icon exists.\n */\nconst endIconLabel = computed(() => props.pickerIconLabel ?? m.value.timeInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.timeInput.clear)\n\n/*\n * The three of them go through whichever field is on screen: in the list form there is no\n * VInput of this component's own, the VCombobox owning the one the reader sees. Exposing\n * the same trio as the other fields is what keeps a consumer's `ref` working whatever the\n * mode, which is a runtime prop they may well be binding.\n */\nconst field = computed(() => (isList.value ? listRef.value : inputRef.value))\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => field.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => field.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => field.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-time-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @focusout=\"onRootFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <!--\n      All this component adds is the three things a combobox cannot know about times; the rows,\n      the search, and a value that may be nothing.\n    -->\n    <VCombobox\n      v-if=\"isList\"\n      ref=\"listRef\"\n      v-model=\"listModel\"\n      v-bind=\"fieldAttrs\"\n      :options=\"options\"\n      :filter=\"matchTime\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :disabled=\"resolvedDisabled\"\n      :readonly=\"readonly\"\n      :invalid=\"invalid\"\n      :icon-start=\"iconStart\"\n      :icon-start-label=\"iconStartLabel\"\n      :clearable=\"clearable\"\n      :clear-label=\"clearLabel\"\n      :loading=\"loading\"\n      :loading-text=\"loadingText\"\n      :placement=\"placement\"\n      @clear=\"emit('clear')\"\n    />\n\n    <div v-else class=\"v-time-input-control\" @click=\"onControlClick\">\n      <!--\n        The field is declared a combobox rather than left as the plain text box it implicitly\n        is, because a text box may not carry the attribute saying whether something is expanded;\n        the same reasoning as in VDateInput.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"fieldModel\"\n        :inputmode=\"typing ? 'numeric' : undefined\"\n        :autocomplete=\"typing ? 'off' : undefined\"\n        v-bind=\"inputAttrs\"\n        :readonly=\"readonly\"\n        :no-typing=\"!typing\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :placeholder=\"placeholder ?? (typing ? m.timeInput.maskPlaceholder : undefined)\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        @click:icon-end=\"toggleFromIcon\"\n        @clear=\"clearValue\"\n        @focus=\"onFieldFocus\"\n        @input=\"onFieldInput\"\n        @change=\"commitOrRevert\"\n        @blur=\"commitOrRevert\"\n        @keydown=\"onFieldKeydown\"\n        @paste=\"onFieldPaste\"\n      >\n        <!--\n          It is dropped when nothing follows it, or it would trail off the end of an otherwise\n          bare field.\n        -->\n        <template v-if=\"$slots.start\" #start><slot name=\"start\" /></template>\n        <template v-if=\"hasMeridiem || $slots['value-end']\" #value-end>\n          <button\n            v-if=\"hasMeridiem\"\n            type=\"button\"\n            class=\"v-input-action v-field-action v-time-input-meridiem\"\n            :disabled=\"resolvedDisabled\"\n            :aria-label=\"\n              m.timeInput.meridiemValue(\n                currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am,\n              )\n            \"\n            @click=\"toggleMeridiem\"\n          >\n            {{ currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am }}\n          </button>\n          <VSeparator\n            v-if=\"hasMeridiem && (clearVisible || endIcon)\"\n            orientation=\"vertical\"\n            class=\"v-time-input-divider\"\n          />\n          <slot name=\"value-end\" />\n        </template>\n      </VInput>\n    </div>\n\n    <!-- The absence of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--time-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      class=\"v-time-input-panel\"\n      :aria-label=\"label ?? m.timeInput.pickerLabel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <!--\n        The picker works on the DRAFT and not on the value, which makes OK the only way in:\n        Cancel, Escape and the focus leaving simply drop it. The two actions are handed to its\n        own footer slot, since they belong to this panel rather than to a clock shown on its\n        own.\n      -->\n      <VTimePicker\n        ref=\"pickerRef\"\n        v-model=\"pickerDraft\"\n        :format=\"resolvedFormat\"\n        :locale=\"resolvedLocale\"\n        :minute-step=\"minuteStep\"\n        :min=\"min\"\n        :max=\"max\"\n        :allowed-hours=\"allowedHours\"\n        :allowed-minutes=\"allowedMinutes\"\n        @confirm=\"confirm\"\n      >\n        <!--\n          The slot REPLACES the two buttons rather than sitting beside them, so it is handed\n          both actions: the clock writes a draft, and without `confirm` a footer of one's own\n          could never commit it; the value would become unchangeable through the panel. The\n          `remove` of VCombobox's `#chip` slot exists for the same reason.\n        -->\n        <template #footer>\n          <slot name=\"footer\" :confirm=\"confirm\" :cancel=\"cancel\" :close=\"cancel\">\n            <VButton variant=\"ghost\" tone=\"neutral\" @click=\"cancel\">{{ m.common.cancel }}</VButton>\n            <VButton @click=\"confirm\">{{ m.common.confirm }}</VButton>\n          </slot>\n        </template>\n      </VTimePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-time-input {\n    /* Confines the anchor name to this instance. It is declared on the root because that\n       is the common ancestor of the field and the panel. */\n    anchor-scope: --time-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-time-input:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: pointer;\n  }\n\n  /*\n   * Anchor through the clock/input wrapper only; list mode belongs to VCombobox and must retain\n   * its own anchor independently of stylesheet order.\n   */\n  .v-time-input-control .v-input-field {\n    anchor-name: --time-input-anchor;\n  }\n\n  /* A field one types into shows the text cursor rather than the pointer a clickable\n     control shows. Its figures are also given equal widths: with proportional ones the\n     text shifts as digits are typed, and the caret appears to jitter. */\n  .v-time-input[data-mode='input']:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: text;\n  }\n\n  .v-time-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Give the AM/PM action room for text while preserving the neighbouring icon buttons' minimum\n   * hit target.\n   */\n  .v-field-action.v-time-input-meridiem {\n    inline-size: auto;\n    min-inline-size: var(--control-action-size);\n    padding-inline: calc((var(--control-action-size) - var(--vectis-icon-size)) / 2);\n    font: inherit;\n  }\n\n  /*\n   * The rule between the AM/PM button and the field's own controls, which keeps a word from\n   * reading as a third icon in the row. A vertical VSeparator stretches to its flex line by\n   * contract, which here is the full height of the field: it would meet the border at both ends\n   * and read as a division of the box rather than a break in the row.\n   */\n  .v-separator[data-orientation='vertical'].v-time-input-divider {\n    align-self: center;\n    block-size: var(--control-action-size);\n  }\n\n  /*\n   * No `display` here either: the column layout is `.v-panel`'s, and a panel declaring its own\n   * is what the doubled-class `.v-overlay` guard exists to overrule. The selector compounds two\n   * classes VPopover puts on the same element, because the padding is also declared by the\n   * shared panel class: at equal specificity the winner would be whichever sheet the consumer's\n   * bundler put last.\n   */\n  .v-popover-panel.v-time-input-panel {\n    width: max-content;\n    padding: 0;\n  }\n\n  /*\n   * The list form is a VCombobox and takes everything from it; this is the one declaration that\n   * does not belong to a combobox in general. A column of times read down the panel is a column\n   * of FIGURES, and proportional ones slide the colon from row to row.\n   */\n  .v-time-input[data-mode='list'] .v-combobox-panel {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTimeInput.js","names":[],"sources":["../../../src/components/VTimeInput/VTimeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Compose typing and clock modes from VInput and VTimePicker; list mode delegates to VCombobox.\n * JavaScript supplies masking and manual panel focus because text inputs cannot use\n * popovertarget.\n */\n\nimport { computed, inject, provide, ref, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VCombobox from '../VCombobox/VCombobox.vue'\nimport type { ListboxOption } from '../../types'\nimport { inputGroupKey } from '../VInput/context'\nimport { schedule as scheduleIcon } from '../VIcon/icons/schedule'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\nimport VSeparator from '../VSeparator/VSeparator.vue'\nimport VTimePicker from '../VTimePicker/VTimePicker.vue'\nimport type { TimePickerFormat } from '../VTimePicker/VTimePicker.vue'\nimport {\n  isTimeAllowed,\n  limitsProblem,\n  nearestAllowedTime,\n  resolveLimits,\n} from '../VTimePicker/limits'\nimport type { TimePickerAllowed } from '../VTimePicker/limits'\nimport {\n  formatTime,\n  formatTimeDisplay,\n  hourCycleFor,\n  isValidTime,\n  parseTime,\n} from '../../utils/time'\nimport {\n  formatTimeMask,\n  parseTimeMask,\n  snapMinute,\n  timeCaret,\n  timeList,\n  timeToMask,\n  to12h,\n  withMeridiem,\n} from '../../utils/clock'\nimport type { Meridiem } from '../../utils/time'\nimport type { TimeOption } from '../../utils/clock'\nimport { readWrittenTime, timeMatches } from './search'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { digitsOf } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/**\n * Whether the field can be typed into, only filled from the clock, or picked from a list of\n * times.\n */\nexport type TimeInputMode = 'picker' | 'input' | 'list'\n\n/** What the `#footer` slot receives. */\nexport interface TimeInputFooterSlotProps {\n  /** Writes the time on the clock into the value, then closes. */\n  confirm: () => void\n  /** Closes and drops the time on the clock, the value left as it was. */\n  cancel: () => void\n  /** The same as `cancel`, under the name VDateInput's footer uses. */\n  close: () => void\n}\n\nconst MODES: TimeInputMode[] = ['picker', 'input', 'list']\n\n/** Where the panel opens relative to the field, whether it holds the clock or the list. */\nexport type TimeInputPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type TimeInputSize = 'sm' | 'md' | 'lg'\n\ninterface TimeInputProps {\n  /**\n   * Whether times are shown on a 12- or a 24-hour clock. Left out, the reader's language\n   * decides, which is almost always what one wants.\n   */\n  format?: TimePickerFormat\n  /**\n   * Which form the field takes: one that can be TYPED into, a `picker` one where the\n   * clock is the only way in (so the picker is forced on there), or a searchable LIST of\n   * times at a fixed interval, where a picker would make no sense.\n   */\n  mode?: TimeInputMode\n  /**\n   * Offers the picker beside a field one can type into: an icon at the end of the field, and a\n   * panel it opens.\n   */\n  showPicker?: boolean\n  /**\n   * The interval between two times that can be chosen. It applies to the picker, to the\n   * arrow keys and to the rows of the list.\n   */\n  minuteStep?: number\n  /**\n   * The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`.\n   * The picker and the list both LEAVE OUT what it rules out, and a time typed past it\n   * makes the field invalid.\n   */\n  min?: string\n  /** The latest time that can be chosen, inclusive, written like `min`. */\n  max?: string\n  /**\n   * Which hours can be chosen: the list of them, or a rule answering for one. The hour\n   * handed to a rule is always the 24-hour one, whichever clock is on display.\n   */\n  allowedHours?: TimePickerAllowed\n  /** Which minutes can be chosen: the list of them, or a rule answering for one. */\n  allowedMinutes?: TimePickerAllowed\n  /**\n   * A BCP 47 locale, which decides the clock and how a time is written out. It TAKES\n   * PRECEDENCE over the design system's global locale and falls back to it, which is why\n   * it has no literal default: `undefined` has to stay recognizable for the global locale\n   * to have its chance.\n   */\n  locale?: string\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: TimeInputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the time without letting it be changed: nothing can be typed, there is no clock and\n   * no clear cross.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes a\n   * real button as soon as a `@click:icon-start` listener is attached, in which case it\n   * needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * What the clock button does, in words. It names the button `pickerIcon` renders,\n   * and falls back to the design system dictionary.\n   */\n  pickerLabel?: string\n  /**\n   * Shows a spinner at the end of the field, in place of the clock icon. It says that\n   * something is being loaded and changes nothing else: the field can still be typed\n   * into and the panel still opens.\n   */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the design\n   * system dictionary.\n   */\n  loadingText?: string\n  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The icon that opens the PICKER, at the end of the field. It has no effect on the list\n   * form, whose chevron follows the combobox convention. The clear cross appears to its\n   * left rather than in its place.\n   */\n  pickerIcon?: IconSource\n  /** Where the panel opens relative to the field, whether it holds the clock or the list. */\n  placement?: TimeInputPlacement\n}\n\nconst props = withDefaults(defineProps<TimeInputProps>(), {\n  format: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and therefore\n  // what allows warning only the consumer who explicitly asked for something that cannot work.\n  mode: undefined,\n  showPicker: false,\n  minuteStep: 1,\n  min: undefined,\n  max: undefined,\n  allowedHours: undefined,\n  allowedMinutes: undefined,\n  locale: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  pickerLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  pickerIcon: () => scheduleIcon,\n  placement: 'bottom-start',\n})\n\n/**\n * The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. A consumer\n * therefore never has to know which clock the reader's language uses.\n */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the field. The value has already been reset. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after `iconStart` rather than in its place,\n   * as in VInput.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, after the AM/PM button when there is one and before\n   * the ones the field owns: the clear cross and the icon that opens the panel.\n   */\n  'value-end'?(): unknown\n  /**\n   * The strip at the foot of the clock, which REPLACES the Cancel and OK buttons rather than\n   * joining them.\n   */\n  footer?(props: TimeInputFooterSlotProps): unknown\n}>()\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field, which a\n// consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\n\n/** What reaches the field on screen; the masked VInput or the list's VCombobox. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst listRef = ref<InstanceType<typeof VCombobox> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VTimePicker> | null>(null)\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\nconst resolvedMode = computed<TimeInputMode>(() => {\n  // The default is applied before the value is checked. A prop that was never given is not an\n  // unknown value, and treating it as one would warn on a bare `<VTimeInput />`.\n  const mode = props.mode ?? 'input'\n  return MODES.includes(mode) ? mode : 'input'\n})\nconst typing = computed(() => resolvedMode.value === 'input')\nconst isList = computed(() => resolvedMode.value === 'list')\n/**\n * Whether this component builds a panel of its own, which is the clock's: the list form hands\n * that job to VCombobox.\n */\nconst hasPanel = computed(\n  () => !props.readonly && (resolvedMode.value === 'picker' || (typing.value && props.showPicker)),\n)\n\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n/** The restrictions, resolved once. */\nconst limits = computed(() => resolveLimits(props))\n\n/** Whether the value is one the restrictions allow. Nothing at all is not a breach. */\nconst valueAllowed = computed(() => {\n  const parts = modelParts.value\n  return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n})\n\n// @devwarn\nif (isDev) {\n  // The clock receives `minuteStep` and the restrictions as they stand, so what it would say\n  // about them is said here, under the name the consumer wrote (utils/hostWarns).\n  provide(hostWarnsKey, true)\n  watchEffect(() => {\n    if (!Number.isInteger(props.minuteStep) || props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimeInput] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VTimeInput] unknown mode \"${props.mode}\": use \"input\" (the default), \"picker\" or \"list\".`,\n      )\n    if (isList.value && props.showPicker)\n      console.warn(\n        '[VTimeInput] showPicker is ignored in \"list\" mode: the list of times is the only panel.',\n      )\n    // The list form is a VCombobox, which draws the end of the field itself: its own chevron in\n    // place of the clock. The two props that describe this component's end icon therefore reach\n    // nothing at all, and their absence is invisible on screen.\n    const inert = ([] as string[]).concat(\n      props.pickerIcon !== scheduleIcon ? 'pickerIcon' : [],\n      props.pickerLabel ? 'pickerLabel' : [],\n    )\n    const isAre = inert.length > 1 ? 'are' : 'is'\n    if (isList.value && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored in \"list\" mode: the list draws its own chevron.`,\n      )\n    // A field one types into without the picker has no end icon either, as in VDateInput.\n    // A read-only field is left out: it is a state that comes and goes, not a configuration\n    // to correct.\n    if (typing.value && !props.showPicker && inert.length > 0)\n      console.warn(\n        `[VTimeInput] ${inert.join(', ')} ${isAre} ignored without showPicker: a field one types into has no clock icon unless it offers the clock.`,\n      )\n    const problem = limitsProblem(limits.value)\n    if (problem) console.warn(`[VTimeInput] ${problem}`)\n    if (isList.value && props.minuteStep < 5)\n      console.warn(\n        `[VTimeInput] minuteStep ${props.minuteStep} in \"list\" mode would render ${Math.ceil(1440 / props.minuteStep)} rows: a step of 15 or 30 minutes is expected.`,\n      )\n  })\n}\n\n/** The time being built on the clock, in the same canonical form as the value itself. */\nconst pickerDraft = ref<string | null>(null)\n\nconst modelParts = computed(() => parseTime(model.value))\n\n/** The half of the day chosen while no time is set: VTimePicker's own `pendingMeridiem`. */\nconst pendingMeridiem = ref<Meridiem>('AM')\n\n/**\n * The half of the day the FIELD is showing. It is what the mask needs: typing \"9:30\" says\n * nothing about the morning or the afternoon, so the answer has to be readable while the\n * panel is shut.\n */\nconst currentMeridiem = computed<Meridiem>(() => {\n  // With the picker open it is the DRAFT that is on screen, and this control has to read\n  // the same thing: two controls showing opposite halves of the day until OK is pressed\n  // is the one state that must not happen.\n  const parts = open.value && hasPanel.value ? parseTime(pickerDraft.value) : modelParts.value\n  return parts ? to12h(parts.hour).meridiem : pendingMeridiem.value\n})\n\n/**\n * The button beside the value flips the half of the day. There is no third state to reach,\n * so it names the half it is showing and swaps to the other one on a click.\n */\nfunction toggleMeridiem() {\n  const next: Meridiem = currentMeridiem.value === 'PM' ? 'AM' : 'PM'\n  pendingMeridiem.value = next\n  // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n  // and applies to the first time typed or chosen.\n  const moved = withMeridiem(model.value, next)\n  if (moved) model.value = moved\n  // With the picker open the draft has to follow as well, or OK would write back the\n  // half of the day the reader has just changed.\n  const pending = open.value && hasPanel.value ? withMeridiem(pickerDraft.value, next) : null\n  if (pending) pickerDraft.value = pending\n}\n\n/** Whether the button is rendered at all. */\nconst hasMeridiem = computed(\n  () => typing.value && !props.readonly && resolvedFormat.value === '12h',\n)\n\nconst hasValue = computed(() => !!modelParts.value)\nconst displayText = computed(() =>\n  model.value ? formatTimeDisplay(model.value, resolvedLocale.value, resolvedFormat.value) : '',\n)\n\n// @a11y\n// Where the focus goes when the panel opens. The picker publishes where its own focus belongs,\n// so nothing here has to know that the target is a slider; the same arrangement VDateInput has\n// with VDatePicker.\nfunction focusInPanel() {\n  pickerRef.value?.focus()\n}\n\n// A VInputGroup joins several controls into one object, so the shape of this field is the\n// row's decision rather than its own (VInput/context.ts). Nothing else is needed here: the\n// AM/PM button lives INSIDE the field, so a 12 hour field is one box like any other and\n// the row has nothing of its own to join.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The whole \"field plus panel\" shell, shared with VDateInput. What is specific to this\n// component is only what happens around it: preparing the draft as the panel opens, and\n// clearing the announcement as it closes.\nconst {\n  open,\n  panelId,\n  popupAttrs,\n  closeAndFocus,\n  focusField,\n  onFieldFocus,\n  toggleFromIcon,\n  onControlClick,\n  onFocusout,\n  onKeydown,\n  onPanelMousedown,\n} = useFieldPanel({\n  rootEl,\n  panelRef,\n  field: inputRef,\n  // With no panel there is nothing to open. This is the composable's SINGLE cut-off point, and\n  // every way in passes through it; clicking the field, focusing it, the down arrow, Enter, the\n  // icon.\n  disabled: () => resolvedDisabled.value || !hasPanel.value,\n  focusInPanel,\n  // Beside a field one types into, the panel opens on focus WITHOUT taking it, so typing\n  // carries on.\n  openOnFocus: () => typing.value,\n  onOpen: () => {\n    const parts = modelParts.value\n    if (parts) pickerDraft.value = formatTime(parts.hour, parts.minute)\n    // A clock opened BESIDE a field one types into starts empty: it opened because the\n    // field took the focus, not because a time was asked for, and a draft set to the\n    // current time would hand its half of the day to the digits about to be typed, so\n    // \"0930\" typed in the afternoon would become 21:30.\n    else if (typing.value) pickerDraft.value = null\n    else {\n      // Reading the clock is safe here: this runs from a handler, hence in a browser, never\n      // during a render; and it is why the picker itself never reads it, so that it stays\n      // identical on both sides of hydration. The instant is taken once: two reads could\n      // straddle a minute.\n      const now = new Date()\n      const wanted = snapMinute(now.getMinutes(), props.minuteStep)\n      // Pulled to the nearest time the restrictions allow, so that the panel never opens\n      // on one the reader would be refused. Null is a set of restrictions that allows\n      // nothing at all, which the warning above has already reported.\n      pickerDraft.value =\n        nearestAllowedTime(now.getHours(), wanted, limits.value) ??\n        formatTime(now.getHours(), wanted)\n    }\n    pickerRef.value?.reset()\n  },\n  onClose: () => {\n    pickerRef.value?.reset()\n  },\n})\n\n// Escape and the focus leaving both close without committing, as Cancel does: only OK writes\n// the value.\n\n/** OK: the ONE route by which the picker's draft becomes the value. */\nfunction confirm() {\n  if (pickerDraft.value) model.value = pickerDraft.value\n  closeAndFocus()\n}\n\n/** Cancel: the draft is simply dropped with the panel. */\nconst cancel = closeAndFocus\n\nconst inputAttrs = popupAttrs(\n  () => fieldAttrs.value,\n  () => hasPanel.value,\n)\n\n/*\n * Emptying the value, called by the field as it emits its clear event. The focus is taken\n * through `focusField`, whose note says why that stops the panel reopening.\n */\nfunction clearValue() {\n  model.value = null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  focusField()\n  emit('clear')\n}\n\nconst m = useMessages()\n\n// @core\n/**\n * Saying no to a time that is not one the restrictions allow. It is written unconditionally\n * rather than only while typing: the browser BARS a read-only control from constraint\n * validation, so the read-only form settles it without a branch here.\n */\nwatchEffect(\n  () => {\n    const el = fieldEl.value\n    if (!el) return\n    const own = m.value.timeInput.unavailable\n    if (!valueAllowed.value) el.setCustomValidity(own)\n    // Only the component's own message is taken back: a consumer's verdict written over it,\n    // a server saying the slot is taken, stays until the consumer clears it.\n    else if (el.validationMessage === own) el.setCustomValidity('')\n  },\n  { flush: 'post' },\n)\n\n/*\n * A time always has the HH:MM shape, so the caret is computed outright where a date has to look\n * for a separator it cannot predict, and a final commit is no different from a live one: there\n * is no two-digit year to expand.\n */\nconst {\n  draft,\n  fieldModel,\n  writeField,\n  commitOrRevert,\n  onFieldInput,\n  onKeydown: onMaskKeydown,\n  onPaste,\n} = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () => model.value,\n  writeValue: (time) => {\n    model.value = time\n    // With the clock open beside the field, it follows what is typed: otherwise OK would\n    // write the clock's time back over the one the reader has just typed.\n    if (open.value && hasPanel.value) pickerDraft.value = time\n  },\n  maxDigits: () => 4,\n  format: formatTimeMask,\n  caret: (_text, digitsBefore, inserting) => timeCaret(digitsBefore, inserting),\n  parse: (text) => parseTimeMask(text, resolvedFormat.value, currentMeridiem.value),\n  toMask: (time) => timeToMask(time, resolvedFormat.value),\n})\n\n// @keyboard\n// What the mask's keys mean for a time: typing anything that is not a digit,\n// the separator included so that \"9:30\" can be typed exactly as it reads, completes the\n// hour with a leading zero and moves on to the minutes; the down arrow is the one explicit\n// way from the field into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  onMaskKeydown(event, {\n    onSeparator: (el) => {\n      const digits = digitsOf(el.value)\n      if (digits.length === 1) writeField(formatTimeMask(`0${digits}`), 3)\n    },\n    onArrowDown: () => {\n      if (!open.value) return false\n      focusInPanel()\n      return true\n    },\n    onEnter: closeAndFocus,\n  })\n}\n\n/** Pasting. */\nfunction onFieldPaste(event: ClipboardEvent) {\n  onPaste(event, (pasted) =>\n    isValidTime(pasted)\n      ? pasted\n      : readWrittenTime(pasted, resolvedFormat.value, currentMeridiem.value),\n  )\n}\n\n/*\n * The list form must not reach these two at all, and being panel-less is not enough to keep it\n * out. `useFieldPanel.onKeydown` cancels the default on Enter before asking whether a panel can\n * open, so an Enter travelling up from the VCombobox would stop a surrounding form from being\n * submitted with nothing to show for it.\n */\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (!isList.value) onKeydown(event)\n}\n\nfunction onRootFocusout(event: FocusEvent) {\n  if (!isList.value) onFocusout(event)\n}\n\n/*\n * The list form is a VCombobox, given what a combobox cannot know about times: which rows to\n * offer, how a search matches one, and a value that is a nullable string where a combobox's is a\n * plain one.\n */\n\n/**\n * The rows the step and the restrictions offer, which the value does not enter into: a\n * change of value must not format up to 1440 times again.\n */\nconst baseOptions = computed<TimeOption[]>(() => {\n  if (!isList.value) return []\n  return timeList(props.minuteStep, resolvedLocale.value, resolvedFormat.value).filter((row) => {\n    // A list is read before it is chosen from, so a time it may not take has no reason to be in\n    // it, which is the picker's own rule for its numerals.\n    const parts = parseTime(row.value)\n    return !parts || isTimeAllowed(parts.hour, parts.minute, limits.value)\n  })\n})\n\n/**\n * The rows on offer. Without it the field would fall back to showing the raw canonical string;\n * \"09:07\" in a field that spells every other row \"9:07 AM\"; since a combobox labels a value\n * through the option carrying it.\n */\nconst options = computed<TimeOption[]>(() => {\n  const rows = baseOptions.value\n  const current = model.value\n  if (!isValidTime(current) || rows.some((row) => row.value === current)) return rows\n  const at = rows.findIndex((row) => row.value > current)\n  const extra: TimeOption = {\n    value: current,\n    label: formatTimeDisplay(current, resolvedLocale.value, resolvedFormat.value),\n  }\n  return at < 0 ? [...rows, extra] : [...rows.slice(0, at), extra, ...rows.slice(at)]\n})\n\n/**\n * The search, which accepts the digit run as well as the words; \"930\" finds 9:30, the way the\n * typed form's mask reads what it is given.\n */\nconst matchTime = (option: ListboxOption, query: string) =>\n  timeMatches(option.label, String(option.value), query)\n\n/**\n * The bridge to VCombobox, whose value is a plain string where this component's is\n * nullable: an emptied combobox says so with an empty string, which is not a time.\n */\nconst listModel = computed<string | string[]>({\n  get: () => model.value ?? '',\n  set: (value) => {\n    model.value = typeof value === 'string' && value ? value : null\n  },\n})\n\n/*\n * Whether the cross is shown has to be answered explicitly here: outside the typed mode the\n * field is read-only and would hide it, while the value comes from the panel. The `readonly`\n * PROP is the one case where that default answer was right: frozen, the field offers no route\n * to a new value, so it offers no route to none either.\n */\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, hasValue.value || (typing.value && !!draft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  hasPanel.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n// Defined even when no icon is rendered: VInput warns at setup about a clickable icon without a\n// label, and cannot know whether the icon exists.\nconst endIconLabel = computed(() => props.pickerLabel ?? m.value.timeInput.openPicker)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.timeInput.clear)\n\n/*\n * The three of them go through whichever field is on screen: in the list form there is no\n * VInput of this component's own, the VCombobox owning the one the reader sees. Exposing\n * the same trio as the other fields is what keeps a consumer's `ref` working whatever the\n * mode, which is a runtime prop they may well be binding.\n */\nconst field = computed(() => (isList.value ? listRef.value : inputRef.value))\n\ndefineExpose({\n  /** Moves the focus to the text field. */\n  focus: (options?: FocusOptions) => field.value?.focus(options),\n  /** Selects what the field is showing. */\n  select: () => field.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => field.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-time-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    :data-disabled=\"resolvedDisabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @focusout=\"onRootFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <!--\n      All this component adds is the three things a combobox cannot know about times; the rows,\n      the search, and a value that may be nothing.\n    -->\n    <VCombobox\n      v-if=\"isList\"\n      ref=\"listRef\"\n      v-model=\"listModel\"\n      v-bind=\"fieldAttrs\"\n      :options=\"options\"\n      :filter=\"matchTime\"\n      :label=\"label\"\n      :hint=\"hint\"\n      :error=\"error\"\n      :required=\"required\"\n      :hide-label=\"hideLabel\"\n      :label-position=\"labelPosition\"\n      :placeholder=\"placeholder\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :disabled=\"resolvedDisabled\"\n      :readonly=\"readonly\"\n      :invalid=\"invalid\"\n      :icon-start=\"iconStart\"\n      :icon-start-label=\"iconStartLabel\"\n      :clearable=\"clearable\"\n      :clear-label=\"clearLabel\"\n      :loading=\"loading\"\n      :loading-text=\"loadingText\"\n      :placement=\"placement\"\n      @clear=\"emit('clear')\"\n    />\n\n    <div v-else class=\"v-time-input-control\" @click=\"onControlClick\">\n      <!--\n        The field is declared a combobox rather than left as the plain text box it implicitly\n        is, because a text box may not carry the attribute saying whether something is expanded;\n        the same reasoning as in VDateInput.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"fieldModel\"\n        :inputmode=\"typing ? 'numeric' : undefined\"\n        :autocomplete=\"typing ? 'off' : undefined\"\n        v-bind=\"inputAttrs\"\n        :readonly=\"readonly\"\n        :no-typing=\"!typing\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :placeholder=\"placeholder ?? (typing ? m.timeInput.maskPlaceholder : undefined)\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :disabled=\"resolvedDisabled\"\n        :invalid=\"invalid\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :loading=\"loading\"\n        :loading-text=\"loadingText\"\n        :icon-end=\"endIcon\"\n        :icon-end-label=\"endIconLabel\"\n        @click:icon-end=\"toggleFromIcon\"\n        @clear=\"clearValue\"\n        @focus=\"onFieldFocus\"\n        @input=\"onFieldInput\"\n        @change=\"commitOrRevert\"\n        @blur=\"commitOrRevert\"\n        @keydown=\"onFieldKeydown\"\n        @paste=\"onFieldPaste\"\n      >\n        <!--\n          It is dropped when nothing follows it, or it would trail off the end of an otherwise\n          bare field.\n        -->\n        <template v-if=\"$slots.start\" #start><slot name=\"start\" /></template>\n        <template v-if=\"hasMeridiem || $slots['value-end']\" #value-end>\n          <button\n            v-if=\"hasMeridiem\"\n            type=\"button\"\n            class=\"v-input-action v-field-action v-time-input-meridiem\"\n            :disabled=\"resolvedDisabled\"\n            :aria-label=\"\n              m.timeInput.meridiemValue(\n                currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am,\n              )\n            \"\n            @click=\"toggleMeridiem\"\n          >\n            {{ currentMeridiem === 'PM' ? m.timePicker.pm : m.timePicker.am }}\n          </button>\n          <VSeparator\n            v-if=\"hasMeridiem && (clearVisible || endIcon)\"\n            orientation=\"vertical\"\n            class=\"v-time-input-divider\"\n          />\n          <slot name=\"value-end\" />\n        </template>\n      </VInput>\n    </div>\n\n    <!-- The absence of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--time-input-anchor\"\n      :placement=\"placement\"\n      role=\"dialog\"\n      class=\"v-time-input-panel\"\n      :aria-label=\"label ?? m.timeInput.pickerLabel\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <!--\n        The picker works on the DRAFT and not on the value, which makes OK the only way in:\n        Cancel, Escape and the focus leaving simply drop it. The two actions are handed to its\n        own footer slot, since they belong to this panel rather than to a clock shown on its\n        own.\n      -->\n      <VTimePicker\n        ref=\"pickerRef\"\n        v-model=\"pickerDraft\"\n        :format=\"resolvedFormat\"\n        :locale=\"resolvedLocale\"\n        :minute-step=\"minuteStep\"\n        :min=\"min\"\n        :max=\"max\"\n        :allowed-hours=\"allowedHours\"\n        :allowed-minutes=\"allowedMinutes\"\n        @confirm=\"confirm\"\n      >\n        <!--\n          The slot REPLACES the two buttons rather than sitting beside them, so it is handed\n          both actions: the clock writes a draft, and without `confirm` a footer of one's own\n          could never commit it; the value would become unchangeable through the panel. The\n          `remove` of VCombobox's `#chip` slot exists for the same reason.\n        -->\n        <template #footer>\n          <slot name=\"footer\" :confirm=\"confirm\" :cancel=\"cancel\" :close=\"cancel\">\n            <VButton variant=\"ghost\" tone=\"neutral\" @click=\"cancel\">{{ m.common.cancel }}</VButton>\n            <VButton @click=\"confirm\">{{ m.common.confirm }}</VButton>\n          </slot>\n        </template>\n      </VTimePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-time-input {\n    /* Confines the anchor name to this instance. It is declared on the root because that\n       is the common ancestor of the field and the panel. */\n    anchor-scope: --time-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-time-input:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: pointer;\n  }\n\n  /*\n   * Anchor through the clock/input wrapper only; list mode belongs to VCombobox and must retain\n   * its own anchor independently of stylesheet order.\n   */\n  .v-time-input-control .v-input-field {\n    anchor-name: --time-input-anchor;\n  }\n\n  /* A field one types into shows the text cursor rather than the pointer a clickable\n     control shows. Its figures are also given equal widths: with proportional ones the\n     text shifts as digits are typed, and the caret appears to jitter. */\n  .v-time-input[data-mode='input']:not([data-disabled]):not([data-readonly]) .v-time-input-control {\n    cursor: text;\n  }\n\n  .v-time-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /*\n   * Give the AM/PM action room for text while preserving the neighbouring icon buttons' minimum\n   * hit target.\n   */\n  .v-field-action.v-time-input-meridiem {\n    inline-size: auto;\n    min-inline-size: var(--control-action-size);\n    padding-inline: calc((var(--control-action-size) - var(--vectis-icon-size)) / 2);\n    font: inherit;\n  }\n\n  /*\n   * The rule between the AM/PM button and the field's own controls, which keeps a word from\n   * reading as a third icon in the row. A vertical VSeparator stretches to its flex line by\n   * contract, which here is the full height of the field: it would meet the border at both ends\n   * and read as a division of the box rather than a break in the row.\n   */\n  .v-separator[data-orientation='vertical'].v-time-input-divider {\n    align-self: center;\n    block-size: var(--control-action-size);\n  }\n\n  /*\n   * No `display` here either: the column layout is `.v-panel`'s, and a panel declaring its own\n   * is what the doubled-class `.v-overlay` guard exists to overrule. The selector compounds two\n   * classes VPopover puts on the same element, because the padding is also declared by the\n   * shared panel class: at equal specificity the winner would be whichever sheet the consumer's\n   * bundler put last.\n   */\n  .v-popover-panel.v-time-input-panel {\n    width: max-content;\n    padding: 0;\n  }\n\n  /*\n   * The list form is a VCombobox and takes everything from it; this is the one declaration that\n   * does not belong to a combobox in general. A column of times read down the panel is a column\n   * of FIGURES, and proportional ones slide the colon from row to row.\n   */\n  .v-time-input[data-mode='list'] .v-combobox-panel {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}