@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/time-selection-picker.template.cjs

@@ -1,278 +1,223 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const pickerField_template = require('./picker-field.template.cjs');
-const singleValuePicker = require('./single-value-picker.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const scrollIntoView = require('./scrollIntoView.cjs');
-const trappedFocus = require('./trapped-focus.cjs');
-const localized = require('./localized.cjs');
-
-const isValidTimeStr = (timeStr) => {
-  const parts = timeStr.split(":");
-  if (parts.length !== 3) {
-    return false;
-  }
-  const [hours, minutes, seconds] = parts;
-  if (hours.length !== 2 || minutes.length !== 2 || seconds.length !== 2) {
-    return false;
-  }
-  const hoursNum = parseInt(hours, 10);
-  const minutesNum = parseInt(minutes, 10);
-  const secondsNum = parseInt(seconds, 10);
-  if (isNaN(hoursNum) || isNaN(minutesNum) || isNaN(secondsNum)) {
-    return false;
-  }
-  if (hoursNum < 0 || hoursNum > 23) {
-    return false;
-  }
-  if (minutesNum < 0 || minutesNum > 59) {
-    return false;
-  }
-  if (secondsNum < 0 || secondsNum > 59) {
-    return false;
-  }
-  return true;
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_localized = require("./localized.cjs");
+const require_trapped_focus = require("./trapped-focus.cjs");
+const require_picker_field_template = require("./picker-field.template.cjs");
+const require_single_value_picker = require("./single-value-picker.cjs");
+const require_scrollIntoView = require("./scrollIntoView.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/shared/datetime/time.ts
+var isValidTimeStr = (timeStr) => {
+	const parts = timeStr.split(":");
+	if (parts.length !== 3) return false;
+	const [hours, minutes, seconds] = parts;
+	if (hours.length !== 2 || minutes.length !== 2 || seconds.length !== 2) return false;
+	const hoursNum = parseInt(hours, 10);
+	const minutesNum = parseInt(minutes, 10);
+	const secondsNum = parseInt(seconds, 10);
+	if (isNaN(hoursNum) || isNaN(minutesNum) || isNaN(secondsNum)) return false;
+	if (hoursNum < 0 || hoursNum > 23) return false;
+	if (minutesNum < 0 || minutesNum > 59) return false;
+	if (secondsNum < 0 || secondsNum > 59) return false;
+	return true;
 };
-const parseTimePart = (partStr) => Number.parseInt(partStr, 10);
-const formatTimePart = (part) => part.toString().padStart(2, "0");
-const parseTimeStr = (timeStr) => {
-  const [hoursStr, minutesStr, secondsStr] = timeStr.split(":");
-  const hours = parseTimePart(hoursStr);
-  const minutes = parseTimePart(minutesStr);
-  const seconds = parseTimePart(secondsStr);
-  return {
-    hourStr: hoursStr,
-    hours,
-    minuteStr: minutesStr,
-    minutes,
-    secondStr: secondsStr,
-    seconds,
-    meridiem: hours < 12 ? "AM" : "PM"
-  };
+var parseTimePart = (partStr) => Number.parseInt(partStr, 10);
+var formatTimePart = (part) => part.toString().padStart(2, "0");
+var parseTimeStr = (timeStr) => {
+	const [hoursStr, minutesStr, secondsStr] = timeStr.split(":");
+	const hours = parseTimePart(hoursStr);
+	return {
+		hourStr: hoursStr,
+		hours,
+		minuteStr: minutesStr,
+		minutes: parseTimePart(minutesStr),
+		secondStr: secondsStr,
+		seconds: parseTimePart(secondsStr),
+		meridiem: hours < 12 ? "AM" : "PM"
+	};
 };
-const compareTimeStr = (a, b) => a > b ? 1 : a < b ? -1 : 0;
-const hoursAs12hClock = (hour) => hour % 12 || 12;
-
-const fallsIntoMeridiem = (meridiem, hour) => meridiem === "AM" && hour < 12 || meridiem === "PM" && hour >= 12;
-const getHoursOptions = (min, max, forMeridiem) => {
-  const result = [];
-  const minHour = min ? parseTimeStr(min).hours : 0;
-  const maxHour = max ? parseTimeStr(max).hours : 23;
-  for (let i = minHour; i <= maxHour; i++) {
-    if (forMeridiem && !fallsIntoMeridiem(forMeridiem, i)) {
-      continue;
-    }
-    result.push({
-      value: formatTimePart(i),
-      label: formatTimePart(forMeridiem ? hoursAs12hClock(i) : i)
-    });
-  }
-  return result;
+var compareTimeStr = (a, b) => a > b ? 1 : a < b ? -1 : 0;
+var hoursAs12hClock = (hour) => hour % 12 || 12;
+//#endregion
+//#region src/shared/picker-field/mixins/inline-time-picker/picker-option.ts
+var fallsIntoMeridiem = (meridiem, hour) => meridiem === "AM" && hour < 12 || meridiem === "PM" && hour >= 12;
+var getHoursOptions = (min, max, forMeridiem) => {
+	const result = [];
+	const minHour = min ? parseTimeStr(min).hours : 0;
+	const maxHour = max ? parseTimeStr(max).hours : 23;
+	for (let i = minHour; i <= maxHour; i++) {
+		if (forMeridiem && !fallsIntoMeridiem(forMeridiem, i)) continue;
+		result.push({
+			value: formatTimePart(i),
+			label: formatTimePart(forMeridiem ? hoursAs12hClock(i) : i)
+		});
+	}
+	return result;
 };
-const getMinutesOptions = (step, value, min, max) => {
-  const result = [];
-  let minMinute = 0;
-  let maxMinute = 59;
-  if (min) {
-    const { hourStr: minHourStr, minutes: minMinutes } = parseTimeStr(min);
-    if (value && parseTimeStr(value).hourStr === minHourStr) {
-      minMinute = minMinutes;
-    }
-  }
-  if (max) {
-    const { hourStr: maxHourStr, minutes: maxMinutes } = parseTimeStr(max);
-    if (value && parseTimeStr(value).hourStr === maxHourStr) {
-      maxMinute = maxMinutes;
-    }
-  }
-  for (let i = minMinute; i <= maxMinute; i += Math.max(1, step ?? 1)) {
-    const minutes = formatTimePart(i);
-    result.push({
-      value: minutes,
-      label: minutes
-    });
-  }
-  return result;
+var getMinutesOptions = (step, value, min, max) => {
+	const result = [];
+	let minMinute = 0;
+	let maxMinute = 59;
+	if (min) {
+		const { hourStr: minHourStr, minutes: minMinutes } = parseTimeStr(min);
+		if (value && parseTimeStr(value).hourStr === minHourStr) minMinute = minMinutes;
+	}
+	if (max) {
+		const { hourStr: maxHourStr, minutes: maxMinutes } = parseTimeStr(max);
+		if (value && parseTimeStr(value).hourStr === maxHourStr) maxMinute = maxMinutes;
+	}
+	for (let i = minMinute; i <= maxMinute; i += Math.max(1, step ?? 1)) {
+		const minutes = formatTimePart(i);
+		result.push({
+			value: minutes,
+			label: minutes
+		});
+	}
+	return result;
 };
-const getSecondsOptions = (step, value, min, max) => {
-  const result = [];
-  let minSecond = 0;
-  let maxSecond = 59;
-  if (min) {
-    const minTime = parseTimeStr(min);
-    if (value && (parseTimeStr(value).hourStr === minTime.hourStr && parseTimeStr(value).minuteStr) === minTime.minuteStr) {
-      minSecond = minTime.seconds;
-    }
-  }
-  if (max) {
-    const maxTime = parseTimeStr(max);
-    if (value && (parseTimeStr(value).hourStr === maxTime.hourStr && parseTimeStr(value).minuteStr) === maxTime.minuteStr) {
-      maxSecond = maxTime.seconds;
-    }
-  }
-  for (let i = minSecond; i <= maxSecond; i += Math.max(1, step)) {
-    const seconds = formatTimePart(i);
-    result.push({
-      value: seconds,
-      label: seconds
-    });
-  }
-  return result;
+var getSecondsOptions = (step, value, min, max) => {
+	const result = [];
+	let minSecond = 0;
+	let maxSecond = 59;
+	if (min) {
+		const minTime = parseTimeStr(min);
+		if (value && (parseTimeStr(value).hourStr === minTime.hourStr && parseTimeStr(value).minuteStr) === minTime.minuteStr) minSecond = minTime.seconds;
+	}
+	if (max) {
+		const maxTime = parseTimeStr(max);
+		if (value && (parseTimeStr(value).hourStr === maxTime.hourStr && parseTimeStr(value).minuteStr) === maxTime.minuteStr) maxSecond = maxTime.seconds;
+	}
+	for (let i = minSecond; i <= maxSecond; i += Math.max(1, step)) {
+		const seconds = formatTimePart(i);
+		result.push({
+			value: seconds,
+			label: seconds
+		});
+	}
+	return result;
 };
-const getMeridiesOptions = (min, max) => {
-  const result = [];
-  const hideAM = min ? parseTimeStr(min).meridiem === "PM" : false;
-  if (!hideAM) {
-    result.push({
-      value: "AM",
-      label: "AM"
-    });
-  }
-  const hidePM = max ? parseTimeStr(max).meridiem === "AM" : false;
-  if (!hidePM) {
-    result.push({
-      value: "PM",
-      label: "PM"
-    });
-  }
-  return result;
+var getMeridiesOptions = (min, max) => {
+	const result = [];
+	if (!(min ? parseTimeStr(min).meridiem === "PM" : false)) result.push({
+		value: "AM",
+		label: "AM"
+	});
+	if (!(max ? parseTimeStr(max).meridiem === "AM" : false)) result.push({
+		value: "PM",
+		label: "PM"
+	});
+	return result;
 };
-
-const HoursColumn = {
-  id: "hours",
-  getLabel: (x) => x.locale.timePicker.hoursLabel,
-  getOptions: (x) => getHoursOptions(
-    x.min,
-    x.max,
-    x.clock === "12h" ? MeridiesColumn.getSelectedOptionValue(x) ?? MeridiesColumn.getOptions(x)[0].value : void 0
-  ),
-  getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).hourStr : void 0,
-  updatedValue: (x, optionValue) => {
-    if (x.value) {
-      const { minuteStr, secondStr } = parseTimeStr(x.value);
-      return `${optionValue}:${minuteStr}:${secondStr}`;
-    } else {
-      return `${optionValue}:00:00`;
-    }
-  }
+//#endregion
+//#region src/shared/picker-field/mixins/inline-time-picker/columns.ts
+var HoursColumn = {
+	id: "hours",
+	getLabel: (x) => x.locale.timePicker.hoursLabel,
+	getOptions: (x) => getHoursOptions(x.min, x.max, x.clock === "12h" ? MeridiesColumn.getSelectedOptionValue(x) ?? MeridiesColumn.getOptions(x)[0].value : void 0),
+	getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).hourStr : void 0,
+	updatedValue: (x, optionValue) => {
+		if (x.value) {
+			const { minuteStr, secondStr } = parseTimeStr(x.value);
+			return `${optionValue}:${minuteStr}:${secondStr}`;
+		} else return `${optionValue}:00:00`;
+	}
 };
-const MinutesColumn = {
-  id: "minutes",
-  getLabel: (x) => x.locale.timePicker.minutesLabel,
-  getOptions: (x) => getMinutesOptions(x.minutesStep, x.value, x.min, x.max),
-  getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).minuteStr : void 0,
-  updatedValue: (x, optionValue) => {
-    if (x.value) {
-      const { hourStr, secondStr } = parseTimeStr(x.value);
-      return `${hourStr}:${optionValue}:${secondStr}`;
-    } else {
-      return `00:${optionValue}:00`;
-    }
-  }
+var MinutesColumn = {
+	id: "minutes",
+	getLabel: (x) => x.locale.timePicker.minutesLabel,
+	getOptions: (x) => getMinutesOptions(x.minutesStep, x.value, x.min, x.max),
+	getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).minuteStr : void 0,
+	updatedValue: (x, optionValue) => {
+		if (x.value) {
+			const { hourStr, secondStr } = parseTimeStr(x.value);
+			return `${hourStr}:${optionValue}:${secondStr}`;
+		} else return `00:${optionValue}:00`;
+	}
 };
-const SecondsColumn = {
-  id: "seconds",
-  getLabel: (x) => x.locale.timePicker.secondsLabel,
-  getOptions: (x) => getSecondsOptions(x.secondsStep, x.value, x.min, x.max),
-  getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).secondStr : void 0,
-  updatedValue: (x, optionValue) => {
-    if (x.value) {
-      const { hourStr, minuteStr } = parseTimeStr(x.value);
-      return `${hourStr}:${minuteStr}:${optionValue}`;
-    } else {
-      return `00:00:${optionValue}`;
-    }
-  }
+var SecondsColumn = {
+	id: "seconds",
+	getLabel: (x) => x.locale.timePicker.secondsLabel,
+	getOptions: (x) => getSecondsOptions(x.secondsStep, x.value, x.min, x.max),
+	getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).secondStr : void 0,
+	updatedValue: (x, optionValue) => {
+		if (x.value) {
+			const { hourStr, minuteStr } = parseTimeStr(x.value);
+			return `${hourStr}:${minuteStr}:${optionValue}`;
+		} else return `00:00:${optionValue}`;
+	}
 };
-const MeridiesColumn = {
-  id: "meridies",
-  getLabel: (x) => x.locale.timePicker.meridiesLabel,
-  getOptions: (x) => getMeridiesOptions(x.min, x.max),
-  getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).meridiem : void 0,
-  updatedValue: (x, optionValue) => {
-    if (x.value) {
-      const { hours, minuteStr, secondStr } = parseTimeStr(x.value);
-      let adjustedHours = hours;
-      if (optionValue === "AM" && hours >= 12) {
-        adjustedHours -= 12;
-      } else if (optionValue === "PM" && hours < 12) {
-        adjustedHours += 12;
-      }
-      return `${formatTimePart(adjustedHours)}:${minuteStr}:${secondStr}`;
-    } else {
-      if (optionValue === "AM") {
-        return "00:00:00";
-      } else {
-        return "12:00:00";
-      }
-    }
-  }
+var MeridiesColumn = {
+	id: "meridies",
+	getLabel: (x) => x.locale.timePicker.meridiesLabel,
+	getOptions: (x) => getMeridiesOptions(x.min, x.max),
+	getSelectedOptionValue: (x) => x.value ? parseTimeStr(x.value).meridiem : void 0,
+	updatedValue: (x, optionValue) => {
+		if (x.value) {
+			const { hours, minuteStr, secondStr } = parseTimeStr(x.value);
+			let adjustedHours = hours;
+			/* v8 ignore else -- @preserve */
+			if (optionValue === "AM" && hours >= 12) adjustedHours -= 12;
+			else if (optionValue === "PM" && hours < 12) adjustedHours += 12;
+			return `${formatTimePart(adjustedHours)}:${minuteStr}:${secondStr}`;
+		} else if (optionValue === "AM") return "00:00:00";
+		else return "12:00:00";
+	}
 };
-
-const shouldDisplaySecondsPicker = (x) => x.secondsStep !== void 0;
-const shouldDisplay12hClock = (x) => x.clock === "12h";
-const onPickerOptionClick = (x, column, optionValue) => {
-  emitChange(x, column.updatedValue(x, optionValue));
-  scrollToOption(x, column.id, optionValue, "start");
-  const currentPicker = x.shadowRoot.querySelector(`#${column.id}`)?.closest(".picker-wrapper");
-  const nextPickerWrapper = currentPicker?.nextElementSibling;
-  const nextPickerEl = nextPickerWrapper?.querySelector(
-    ".picker"
-  );
-  if (nextPickerEl) {
-    nextPickerEl.focus();
-  } else {
-    x.$emit("last-column-selected", void 0, {
-      bubbles: false
-    });
-  }
+//#endregion
+//#region src/shared/picker-field/mixins/inline-time-picker/inline-time-picker.template.ts
+var shouldDisplaySecondsPicker = (x) => x.secondsStep !== void 0;
+var shouldDisplay12hClock = (x) => x.clock === "12h";
+var onPickerOptionClick = (x, column, optionValue) => {
+	emitChange(x, column.updatedValue(x, optionValue));
+	scrollToOption(x, column.id, optionValue, "start");
+	const nextPickerEl = ((x.shadowRoot.querySelector(`#${column.id}`)?.closest(".picker-wrapper"))?.nextElementSibling)?.querySelector(".picker");
+	if (nextPickerEl) nextPickerEl.focus();
+	else x.$emit("last-column-selected", void 0, { bubbles: false });
 };
-const onPickerKeyDown = (x, column, event) => {
-  const options = column.getOptions(x);
-  const selectedValue = column.getSelectedOptionValue(x);
-  const offset = {
-    ArrowUp: -1,
-    ArrowDown: 1
-  }[event.key];
-  if (offset) {
-    event.preventDefault();
-    const index = options.findIndex((h) => h.value === selectedValue);
-    const newRawIndex = index === -1 ? 0 : index + offset;
-    const newIndex = (newRawIndex + options.length) % options.length;
-    const newValue = options[newIndex].value;
-    emitChange(x, column.updatedValue(x, newValue));
-    scrollToOption(x, column.id, newValue, "nearest");
-    x._clearFocusedClasses();
-  }
-  return true;
+var onPickerKeyDown = (x, column, event) => {
+	const options = column.getOptions(x);
+	const selectedValue = column.getSelectedOptionValue(x);
+	const offset = {
+		ArrowUp: -1,
+		ArrowDown: 1
+	}[event.key];
+	if (offset) {
+		event.preventDefault();
+		const index = options.findIndex((h) => h.value === selectedValue);
+		const newValue = options[((index === -1 ? 0 : index + offset) + options.length) % options.length].value;
+		emitChange(x, column.updatedValue(x, newValue));
+		scrollToOption(x, column.id, newValue, "nearest");
+		x._clearFocusedClasses();
+	}
+	return true;
 };
-const scrollToOption = (x, picker, optionValue, position) => {
-  const element = x.shadowRoot.querySelector(
-    `#${picker}-${optionValue}`
-  );
-  if (!element) {
-    return;
-  }
-  scrollIntoView.scrollIntoView(element, element.parentElement, position);
+var scrollToOption = (x, picker, optionValue, position) => {
+	const element = x.shadowRoot.querySelector(`#${picker}-${optionValue}`);
+	if (!element) return;
+	require_scrollIntoView.scrollIntoView(element, element.parentElement, position);
 };
-const onBaseKeyDown = (x, event) => {
-  if (event.key === "Tab") {
-    const focusableElements = x.shadowRoot.querySelectorAll(".picker");
-    const terminalElement = event.shiftKey ? focusableElements[0] : focusableElements[focusableElements.length - 1];
-    if (x.shadowRoot.activeElement !== terminalElement) {
-      trappedFocus.ignoreEventInFocusTraps(event);
-    }
-    x._applyFocusedClass();
-  }
-  return true;
+var onBaseKeyDown = (x, event) => {
+	if (event.key === "Tab") {
+		const focusableElements = x.shadowRoot.querySelectorAll(".picker");
+		const terminalElement = event.shiftKey ? focusableElements[0] : focusableElements[focusableElements.length - 1];
+		if (x.shadowRoot.activeElement !== terminalElement) require_trapped_focus.ignoreEventInFocusTraps(event);
+		x._applyFocusedClass();
+	}
+	return true;
 };
-const emitChange = (x, time) => {
-  x.$emit("change", time, { bubbles: false, composed: false });
+var emitChange = (x, time) => {
+	x.$emit("change", time, {
+		bubbles: false,
+		composed: false
+	});
 };
-const renderPicker = (column) => {
-  return fastElement.html`<div class="picker-wrapper">
+/**
+* Renders a picker for hours/minutes/etc. using a listbox pattern.
+*/
+var renderPicker = (column) => {
+	return _microsoft_fast_element.html`<div class="picker-wrapper">
 		<ul
 			id="${column.id}"
 			class="picker"
@@ -282,516 +227,382 @@ const renderPicker = (column) => {
 			aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
 			@keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
 		>
-			${fastElement.repeat(
-    (x) => column.getOptions(x),
-    fastElement.html`<li
+			${(0, _microsoft_fast_element.repeat)((x) => column.getOptions(x), _microsoft_fast_element.html`<li
 					id="${(x) => `${column.id}-${x.value}`}"
-					class="${(x, c) => fastWebUtilities.classNames("option", [
-      "selected",
-      column.getSelectedOptionValue(c.parent) === x.value
-    ])}"
+					class="${(x, c) => (0, _microsoft_fast_web_utilities.classNames)("option", ["selected", column.getSelectedOptionValue(c.parent) === x.value])}"
 					aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
 					role="option"
 					@click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
 				>
 					${(x) => x.label}
-				</li>`
-  )}
+				</li>`)}
 		</ul>
 	</div>`;
 };
-const InlineTimePickerTemplate = () => {
-  return fastElement.html`<div
+var InlineTimePickerTemplate = () => {
+	return _microsoft_fast_element.html`<div
 		class="time-pickers"
 		@keydown="${(x, { event }) => onBaseKeyDown(x, event)}"
 		@focusout="${(x) => x._onFocusOut()}"
 		@pointerdown="${(x) => x._onPointerDown()}"
 	>
 		${renderPicker(HoursColumn)} ${renderPicker(MinutesColumn)}
-		${fastElement.when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
-		${fastElement.when(shouldDisplay12hClock, renderPicker(MeridiesColumn))}
+		${(0, _microsoft_fast_element.when)(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
+		${(0, _microsoft_fast_element.when)(shouldDisplay12hClock, renderPicker(MeridiesColumn))}
 	</div>`;
 };
-
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$2(target, key, result);
-  return result;
+//#endregion
+//#region src/shared/picker-field/mixins/inline-time-picker/inline-time-picker.ts
+var InlineTimePicker = class extends require_localized.Localized(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.minutesStep = 1;
+		this.clock = "24h";
+		this.focusedPickerClass = "focused";
+		this._onFocusOut = () => {
+			this._clearFocusedClasses();
+		};
+		this._onPointerDown = () => {
+			this._clearFocusedClasses();
+		};
+	}
+	valueChanged(_, newValue) {
+		if (newValue !== void 0 && !isValidTimeStr(newValue)) this.value = void 0;
+	}
+	scrollSelectedOptionsToTop() {
+		if (HoursColumn.getSelectedOptionValue(this)) scrollToOption(this, "hours", HoursColumn.getSelectedOptionValue(this), "start");
+		if (MinutesColumn.getSelectedOptionValue(this)) scrollToOption(this, "minutes", MinutesColumn.getSelectedOptionValue(this), "start");
+		if (shouldDisplaySecondsPicker(this) && SecondsColumn.getSelectedOptionValue(this)) scrollToOption(this, "seconds", SecondsColumn.getSelectedOptionValue(this), "start");
+		if (shouldDisplay12hClock(this) && MeridiesColumn.getSelectedOptionValue(this)) scrollToOption(this, "meridies", MeridiesColumn.getSelectedOptionValue(this), "start");
+	}
+	focus(options) {
+		this.shadowRoot.querySelector(".picker").focus(options);
+		this._applyFocusedClass();
+	}
+	/**
+	* @internal
+	* Apply 'focused' class to the wrapper element of an active picker
+	*/
+	_applyFocusedClass() {
+		const pickers = this.shadowRoot.querySelectorAll(".picker");
+		requestAnimationFrame(() => {
+			const active = this.shadowRoot.activeElement;
+			pickers.forEach((el) => {
+				if (el === active) el.parentElement?.classList.add(this.focusedPickerClass);
+				else el.parentElement?.classList.remove(this.focusedPickerClass);
+			});
+		});
+	}
+	/**
+	* @internal
+	* Clear 'focused' classes from all pickers wrappers
+	*/
+	_clearFocusedClasses() {
+		this.shadowRoot.querySelectorAll(".picker").forEach((el) => {
+			el.parentElement?.classList.remove(this.focusedPickerClass);
+		});
+	}
 };
-class InlineTimePicker extends localized.Localized(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.minutesStep = 1;
-    this.clock = "24h";
-    this.focusedPickerClass = "focused";
-    /**
-     * @internal
-     */
-    this._onFocusOut = () => {
-      this._clearFocusedClasses();
-    };
-    /**
-     * @internal
-     */
-    this._onPointerDown = () => {
-      this._clearFocusedClasses();
-    };
-  }
-  valueChanged(_, newValue) {
-    if (newValue !== void 0 && !isValidTimeStr(newValue)) {
-      this.value = void 0;
-    }
-  }
-  scrollSelectedOptionsToTop() {
-    if (HoursColumn.getSelectedOptionValue(this)) {
-      scrollToOption(
-        this,
-        "hours",
-        HoursColumn.getSelectedOptionValue(this),
-        "start"
-      );
-    }
-    if (MinutesColumn.getSelectedOptionValue(this)) {
-      scrollToOption(
-        this,
-        "minutes",
-        MinutesColumn.getSelectedOptionValue(this),
-        "start"
-      );
-    }
-    if (shouldDisplaySecondsPicker(this) && SecondsColumn.getSelectedOptionValue(this)) {
-      scrollToOption(
-        this,
-        "seconds",
-        SecondsColumn.getSelectedOptionValue(this),
-        "start"
-      );
-    }
-    if (shouldDisplay12hClock(this) && MeridiesColumn.getSelectedOptionValue(this)) {
-      scrollToOption(
-        this,
-        "meridies",
-        MeridiesColumn.getSelectedOptionValue(this),
-        "start"
-      );
-    }
-  }
-  focus(options) {
-    const firstFocusableElement = this.shadowRoot.querySelector(
-      ".picker"
-    );
-    firstFocusableElement.focus(options);
-    this._applyFocusedClass();
-  }
-  /**
-   * @internal
-   * Apply 'focused' class to the wrapper element of an active picker
-   */
-  _applyFocusedClass() {
-    const pickers = this.shadowRoot.querySelectorAll(".picker");
-    requestAnimationFrame(() => {
-      const active = this.shadowRoot.activeElement;
-      pickers.forEach((el) => {
-        if (el === active) {
-          el.parentElement?.classList.add(this.focusedPickerClass);
-        } else {
-          el.parentElement?.classList.remove(this.focusedPickerClass);
-        }
-      });
-    });
-  }
-  /**
-   * @internal
-   * Clear 'focused' classes from all pickers wrappers
-   */
-  _clearFocusedClasses() {
-    const pickers = this.shadowRoot.querySelectorAll(".picker");
-    pickers.forEach((el) => {
-      el.parentElement?.classList.remove(this.focusedPickerClass);
-    });
-  }
-}
-__decorateClass$2([
-  fastElement.observable
-], InlineTimePicker.prototype, "value");
-__decorateClass$2([
-  fastElement.observable
-], InlineTimePicker.prototype, "minutesStep");
-__decorateClass$2([
-  fastElement.observable
-], InlineTimePicker.prototype, "secondsStep");
-__decorateClass$2([
-  fastElement.observable
-], InlineTimePicker.prototype, "clock");
-__decorateClass$2([
-  fastElement.observable
-], InlineTimePicker.prototype, "min");
-__decorateClass$2([
-  fastElement.observable
-], InlineTimePicker.prototype, "max");
-
-const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color: transparent;--focus-inset: -2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}@media(hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media(hover:hover){.time-pickers .option.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.time-pickers .option.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .option.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}";
-
-const inlineTimePickerDefinition = vividElement.defineVividComponent(
-  "inline-time-picker",
-  InlineTimePicker,
-  InlineTimePickerTemplate,
-  [],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-
-const formatPresentationTime = (timeStr, includeSeconds, use12HourClock) => {
-  const time = parseTimeStr(timeStr);
-  const hoursStr = formatTimePart(
-    use12HourClock ? hoursAs12hClock(time.hours) : time.hours
-  );
-  let result = `${hoursStr}:${time.minuteStr}`;
-  if (includeSeconds) {
-    result += `:${time.secondStr}`;
-  }
-  if (use12HourClock) {
-    result += ` ${time.meridiem}`;
-  }
-  return result;
+require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "value", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "minutesStep", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "secondsStep", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "clock", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "min", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], InlineTimePicker.prototype, "max", void 0);
+//#endregion
+//#region src/shared/picker-field/mixins/inline-time-picker/definition.ts
+/**
+* @internal
+*/
+var inlineTimePickerDefinition = require_vivid_element.defineVividComponent("inline-time-picker", InlineTimePicker, InlineTimePickerTemplate, [], {
+	styles: ":host{display:inline-block}.time-pickers{block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));justify-content:center;gap:4px;padding:4px;display:flex;overflow:hidden}.time-pickers .picker-wrapper{border-radius:4px;flex-direction:column;display:flex;position:relative}.time-pickers .picker-wrapper.focused:has(.picker:focus-visible){--focus-stroke-gap-color:transparent;--focus-inset:-2px;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.time-pickers .picker{scrollbar-width:none;border-radius:4px;flex-direction:column;gap:4px;inline-size:50px;margin:0 -4px;padding:0 4px;list-style:none;display:flex;position:relative;overflow:hidden scroll}@media (hover:hover){.time-pickers .picker:hover{scrollbar-width:auto}}.time-pickers .picker:after{block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\";flex-shrink:0;display:block}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary:var(--vvd-time-picker-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-time-picker-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-time-picker-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-time-picker-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-time-picker-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-time-picker-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.time-pickers .option.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.time-pickers .option:active:where(:not(.disabled,:disabled)),.time-pickers .option.active:where(:not(.disabled,:disabled)),.time-pickers .option.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.time-pickers .option.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.time-pickers .option.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.time-pickers .option.selected:disabled,.time-pickers .option.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.time-pickers .option{background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;inline-size:50px;display:flex}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}",
+	shadowOptions: { delegatesFocus: true }
+});
+require_vivid_element.createRegisterFunction(inlineTimePickerDefinition);
+//#endregion
+//#region src/shared/datetime/presentationTime.ts
+var formatPresentationTime = (timeStr, includeSeconds, use12HourClock) => {
+	const time = parseTimeStr(timeStr);
+	let result = `${formatTimePart(use12HourClock ? hoursAs12hClock(time.hours) : time.hours)}:${time.minuteStr}`;
+	if (includeSeconds) result += `:${time.secondStr}`;
+	if (use12HourClock) result += ` ${time.meridiem}`;
+	return result;
 };
-const isDigit = (char) => char >= "0" && char <= "9";
-const parsePresentationTime = (input, use12HourClock) => {
-  const cleanedInput = input.toLowerCase();
-  const numerals = [];
-  let meridiem;
-  for (let i = 0; i < cleanedInput.length; i++) {
-    const char = cleanedInput[i];
-    if (char === "a" && cleanedInput[i + 1] === "m") {
-      i++;
-      meridiem = "AM";
-    }
-    if (char === "p" && cleanedInput[i + 1] === "m") {
-      i++;
-      meridiem = "PM";
-    }
-    if (isDigit(char)) {
-      let numeral = char;
-      while (isDigit(cleanedInput[i + 1])) {
-        i++;
-        numeral += cleanedInput[i];
-      }
-      numerals.push(Number.parseInt(numeral, 10));
-    }
-  }
-  if (numerals.length === 0 || numerals.length > 3) {
-    throw new Error("Invalid time format");
-  }
-  if (meridiem && (numerals[0] < 1 || numerals[0] > 12)) {
-    throw new Error("Invalid time format");
-  }
-  if (meridiem || use12HourClock) {
-    if (numerals[0] === 12) {
-      numerals[0] = 0;
-    }
-  }
-  if (meridiem === "PM") {
-    numerals[0] = numerals[0] + 12;
-  }
-  const [hours, minutes = 0, seconds = 0] = numerals;
-  if (hours > 23 || minutes > 59 || seconds > 59) {
-    throw new Error("Invalid value");
-  }
-  return [hours, minutes, seconds].map(formatTimePart).join(":");
+var isDigit = (char) => char >= "0" && char <= "9";
+var parsePresentationTime = (input, use12HourClock) => {
+	const cleanedInput = input.toLowerCase();
+	const numerals = [];
+	let meridiem;
+	for (let i = 0; i < cleanedInput.length; i++) {
+		const char = cleanedInput[i];
+		if (char === "a" && cleanedInput[i + 1] === "m") {
+			i++;
+			meridiem = "AM";
+		}
+		if (char === "p" && cleanedInput[i + 1] === "m") {
+			i++;
+			meridiem = "PM";
+		}
+		if (isDigit(char)) {
+			let numeral = char;
+			while (isDigit(cleanedInput[i + 1])) {
+				i++;
+				numeral += cleanedInput[i];
+			}
+			numerals.push(Number.parseInt(numeral, 10));
+		}
+	}
+	if (numerals.length === 0 || numerals.length > 3) throw new Error("Invalid time format");
+	if (meridiem && (numerals[0] < 1 || numerals[0] > 12)) throw new Error("Invalid time format");
+	if (meridiem || use12HourClock) {
+		if (numerals[0] === 12) numerals[0] = 0;
+	}
+	if (meridiem === "PM") numerals[0] = numerals[0] + 12;
+	const [hours, minutes = 0, seconds = 0] = numerals;
+	if (hours > 23 || minutes > 59 || seconds > 59) throw new Error("Invalid value");
+	return [
+		hours,
+		minutes,
+		seconds
+	].map(formatTimePart).join(":");
 };
-
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
-  return result;
+//#endregion
+//#region src/shared/picker-field/mixins/time-selection-picker.ts
+/**
+* Mixin for pickers that allow selecting a time.
+*/
+var TimeSelectionPicker = (Base) => {
+	class TimeSelectionPickerElement extends Base {
+		constructor(..._args) {
+			super(..._args);
+			this.minutesStep = null;
+			this.secondsStep = null;
+		}
+		/**
+		* @internal
+		*/
+		get _displaySeconds() {
+			return this.secondsStep !== null;
+		}
+		/**
+		* @internal
+		*/
+		get _use12hClock() {
+			return this.clock ? this.clock === "12h" : this.locale.timePicker.defaultTo12HourClock;
+		}
+		/**
+		* @internal
+		*/
+		get _timePlaceholder() {
+			let format = "hh:mm";
+			if (this._displaySeconds) format += ":ss";
+			if (this._use12hClock) format += " aa";
+			return format;
+		}
+		#clockChangeHandler = { handleChange: () => {
+			if (this.value) this._presentationValue = this._toPresentationValue(this.value);
+		} };
+		#clockChangeObserver;
+		#startObservingClockChanges() {
+			this.#clockChangeObserver = _microsoft_fast_element.Observable.binding(() => this._use12hClock, this.#clockChangeHandler);
+			this.#clockChangeObserver.observe(this, _microsoft_fast_element.ExecutionContext.default);
+		}
+		#stopObservingClockChanges() {
+			this.#clockChangeObserver.dispose();
+		}
+		/**
+		* @internal
+		*/
+		connectedCallback() {
+			super.connectedCallback();
+			this.#startObservingClockChanges();
+		}
+		/**
+		* @internal
+		*/
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.#stopObservingClockChanges();
+		}
+		/**
+		* @internal
+		*/
+		_onPickerButtonClick() {
+			super._onPickerButtonClick();
+			if (this._popupOpen) {
+				_microsoft_fast_element.Updates.process();
+				this._inlineTimePickerEl.scrollSelectedOptionsToTop();
+			}
+		}
+		/**
+		* @internal
+		*/
+		_onInlineTimePickerChange(event) {
+			this._updateValueDueToUserInteraction(this._withUpdatedTime(event.detail), false);
+		}
+		/**
+		* @internal
+		*/
+		_onInlineTimePickerLastColumnSelected() {
+			this._closePopup();
+		}
+	}
+	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+		attribute: "minutes-step",
+		converter: _microsoft_fast_element.nullableNumberConverter
+	})], TimeSelectionPickerElement.prototype, "minutesStep", void 0);
+	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+		attribute: "seconds-step",
+		converter: _microsoft_fast_element.nullableNumberConverter
+	})], TimeSelectionPickerElement.prototype, "secondsStep", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.attr], TimeSelectionPickerElement.prototype, "clock", void 0);
+	require_decorate.__decorate([_microsoft_fast_element.volatile], TimeSelectionPickerElement.prototype, "_use12hClock", null);
+	return TimeSelectionPickerElement;
 };
-const TimeSelectionPicker = (Base) => {
-  class TimeSelectionPickerElement extends Base {
-    constructor() {
-      super(...arguments);
-      this.minutesStep = null;
-      this.secondsStep = null;
-      // Reformat the presentation value when the clock changes
-      this.#clockChangeHandler = {
-        handleChange: () => {
-          if (this.value) {
-            this._presentationValue = this._toPresentationValue(this.value);
-          }
-        }
-      };
-    }
-    // --- Core ---
-    /**
-     * @internal
-     */
-    get _displaySeconds() {
-      return this.secondsStep !== null;
-    }
-    get _use12hClock() {
-      return this.clock ? this.clock === "12h" : this.locale.timePicker.defaultTo12HourClock;
-    }
-    /**
-     * @internal
-     */
-    get _timePlaceholder() {
-      let format = "hh:mm";
-      if (this._displaySeconds) {
-        format += ":ss";
-      }
-      if (this._use12hClock) {
-        format += " aa";
-      }
-      return format;
-    }
-    #clockChangeHandler;
-    #clockChangeObserver;
-    #startObservingClockChanges() {
-      this.#clockChangeObserver = fastElement.Observable.binding(
-        () => this._use12hClock,
-        this.#clockChangeHandler
-      );
-      this.#clockChangeObserver.observe(this, fastElement.ExecutionContext.default);
-    }
-    #stopObservingClockChanges() {
-      this.#clockChangeObserver.dispose();
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback();
-      this.#startObservingClockChanges();
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.#stopObservingClockChanges();
-    }
-    // --- Picker button ---
-    /**
-     * @internal
-     */
-    _onPickerButtonClick() {
-      super._onPickerButtonClick();
-      if (this._popupOpen) {
-        fastElement.Updates.process();
-        this._inlineTimePickerEl.scrollSelectedOptionsToTop();
-      }
-    }
-    // --- Inline time picker ---
-    /**
-     * @internal
-     */
-    _onInlineTimePickerChange(event) {
-      this._updateValueDueToUserInteraction(
-        this._withUpdatedTime(event.detail),
-        false
-      );
-    }
-    /**
-     * @internal
-     */
-    _onInlineTimePickerLastColumnSelected() {
-      this._closePopup();
-    }
-  }
-  __decorateClass$1([
-    fastElement.attr({ attribute: "minutes-step", converter: fastElement.nullableNumberConverter })
-  ], TimeSelectionPickerElement.prototype, "minutesStep", 2);
-  __decorateClass$1([
-    fastElement.attr({ attribute: "seconds-step", converter: fastElement.nullableNumberConverter })
-  ], TimeSelectionPickerElement.prototype, "secondsStep", 2);
-  __decorateClass$1([
-    fastElement.attr
-  ], TimeSelectionPickerElement.prototype, "clock", 2);
-  __decorateClass$1([
-    fastElement.volatile
-  ], TimeSelectionPickerElement.prototype, "_use12hClock", 1);
-  return TimeSelectionPickerElement;
+//#endregion
+//#region src/lib/time-picker/time-picker.ts
+var ValidTimeFilter = {
+	fromView: (value) => {
+		if (value && isValidTimeStr(value)) return value;
+		return "";
+	},
+	toView(value) {
+		return value;
+	}
 };
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+/**
+* @public
+* @component time-picker
+* @slot helper-text - Describes how to use the time-picker. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} input - Emitted when the time is changed by the user.
+* @event {CustomEvent<undefined>} change - Emitted when the time is changed by the user.
+* @vueModel modelValue value input `event.currentTarget.value`
+* @testAction selectTime selectTime
+*/
+var TimePicker = class extends TimeSelectionPicker(require_single_value_picker.SingleValuePicker(require_picker_field_template.PickerField)) {
+	/**
+	* @internal
+	*/
+	_toPresentationValue(value) {
+		return formatPresentationTime(value, this._displaySeconds, this._use12hClock);
+	}
+	/**
+	* @internal
+	*/
+	_parsePresentationValue(presentationValue) {
+		return parsePresentationTime(presentationValue, this._use12hClock);
+	}
+	/**
+	* @internal
+	*/
+	get _timeValue() {
+		return this.value;
+	}
+	/**
+	* @internal
+	*/
+	_withUpdatedTime(timeStr) {
+		return timeStr;
+	}
+	/**
+	* @internal
+	*/
+	get _resolvedMinTime() {
+		return this.min || null;
+	}
+	/**
+	* @internal
+	*/
+	get _resolvedMaxTime() {
+		return this.max || null;
+	}
+	/**
+	* @internal
+	*/
+	minChanged(_, newMin) {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.min = newMin;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	maxChanged(_, newMax) {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.max = newMax;
+			this.validate();
+		}
+	}
+	constructor() {
+		super();
+		this._isValidValue = isValidTimeStr;
+		this.min = "";
+		this.max = "";
+		this.proxy.type = "time";
+		this.proxy.step = "1";
+	}
+	/**
+	* @internal
+	*/
+	get _textFieldPlaceholder() {
+		return this._timePlaceholder;
+	}
+	/**
+	* @internal
+	*/
+	get _pickerButtonIcon() {
+		return "clock-line";
+	}
+	/**
+	* @internal
+	*/
+	get _pickerButtonLabel() {
+		if (this.value) return this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value));
+		return this.locale.timePicker.chooseTimeLabel;
+	}
+	/**
+	* @internal
+	*/
+	_onPickerButtonClick() {
+		super._onPickerButtonClick();
+		if (this._popupOpen) {
+			_microsoft_fast_element.Updates.process();
+			this._focusableElsWithinDialog()[0]?.focus();
+		}
+	}
+	/**
+	* @internal
+	*/
+	get _dialogLabel() {
+		return this.locale.timePicker.chooseTimeLabel;
+	}
+	/**
+	* @internal
+	*/
+	_focusableElsWithinDialog() {
+		return this._dialogEl.querySelectorAll("#inline-time-picker, .vwc-button");
+	}
+	/**
+	* @internal
+	*/
+	_getCustomValidationError() {
+		if (this._isPresentationValueInvalid()) return this.locale.timePicker.invalidTimeError;
+		return null;
+	}
 };
-const ValidTimeFilter = {
-  fromView: (value) => {
-    if (value && isValidTimeStr(value)) {
-      return value;
-    }
-    return "";
-  },
-  toView(value) {
-    return value;
-  }
-};
-class TimePicker extends TimeSelectionPicker(
-  singleValuePicker.SingleValuePicker(pickerField_template.PickerField)
-) {
-  // --- Core ---
-  constructor() {
-    super();
-    /**
-     * @internal
-     */
-    this._isValidValue = isValidTimeStr;
-    this.min = "";
-    this.max = "";
-    this.proxy.type = "time";
-    this.proxy.step = "1";
-  }
-  /**
-   * @internal
-   */
-  _toPresentationValue(value) {
-    return formatPresentationTime(
-      value,
-      this._displaySeconds,
-      this._use12hClock
-    );
-  }
-  /**
-   * @internal
-   */
-  _parsePresentationValue(presentationValue) {
-    return parsePresentationTime(presentationValue, this._use12hClock);
-  }
-  /**
-   * @internal
-   */
-  get _timeValue() {
-    return this.value;
-  }
-  /**
-   * @internal
-   */
-  _withUpdatedTime(timeStr) {
-    return timeStr;
-  }
-  /**
-   * @internal
-   */
-  get _resolvedMinTime() {
-    return this.min || null;
-  }
-  /**
-   * @internal
-   */
-  get _resolvedMaxTime() {
-    return this.max || null;
-  }
-  /**
-   * @internal
-   */
-  minChanged(_, newMin) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.min = newMin;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  maxChanged(_, newMax) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.max = newMax;
-      this.validate();
-    }
-  }
-  // --- Text field ---
-  /**
-   * @internal
-   */
-  get _textFieldPlaceholder() {
-    return this._timePlaceholder;
-  }
-  // --- Picker button ---
-  /**
-   * @internal
-   */
-  get _pickerButtonIcon() {
-    return "clock-line";
-  }
-  /**
-   * @internal
-   */
-  get _pickerButtonLabel() {
-    if (this.value) {
-      return this.locale.timePicker.changeTimeLabel(
-        this._toPresentationValue(this.value)
-      );
-    }
-    return this.locale.timePicker.chooseTimeLabel;
-  }
-  /**
-   * @internal
-   */
-  _onPickerButtonClick() {
-    super._onPickerButtonClick();
-    if (this._popupOpen) {
-      fastElement.Updates.process();
-      this._focusableElsWithinDialog()[0]?.focus();
-    }
-  }
-  // --- Dialog ---
-  /**
-   * @internal
-   */
-  get _dialogLabel() {
-    return this.locale.timePicker.chooseTimeLabel;
-  }
-  /**
-   * @internal
-   */
-  _focusableElsWithinDialog() {
-    return this._dialogEl.querySelectorAll(
-      "#inline-time-picker, .vwc-button"
-    );
-  }
-  // --- Validation ---
-  /**
-   * @internal
-   */
-  _getCustomValidationError() {
-    if (this._isPresentationValueInvalid()) {
-      return this.locale.timePicker.invalidTimeError;
-    }
-    return null;
-  }
-}
-__decorateClass([
-  fastElement.attr({ converter: ValidTimeFilter })
-], TimePicker.prototype, "min");
-__decorateClass([
-  fastElement.attr({ converter: ValidTimeFilter })
-], TimePicker.prototype, "max");
-
-const TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
-  const inlineTimePickerTag = context.tagFor(InlineTimePicker);
-  return fastElement.html`
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: ValidTimeFilter })], TimePicker.prototype, "min", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: ValidTimeFilter })], TimePicker.prototype, "max", void 0);
+//#endregion
+//#region src/shared/picker-field/mixins/time-selection-picker.template.ts
+var TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
+	const inlineTimePickerTag = context.tagFor(InlineTimePicker);
+	return _microsoft_fast_element.html`
 		<${inlineTimePickerTag}
 			id='inline-time-picker'
-			${fastElement.ref("_inlineTimePickerEl")}
+			${(0, _microsoft_fast_element.ref)("_inlineTimePickerEl")}
 			style="--_inline-time-picker-num-options-visible: ${() => numOptionsVisible}"
 			tabindex='1'
 			:value='${(x) => x._timeValue || void 0}'
@@ -806,13 +617,58 @@ const TimeSelectionPickerTemplate = (context, numOptionsVisible) => {
 		</${inlineTimePickerTag}>
 	`;
 };
-
-exports.TimePicker = TimePicker;
-exports.TimeSelectionPicker = TimeSelectionPicker;
-exports.TimeSelectionPickerTemplate = TimeSelectionPickerTemplate;
-exports.ValidTimeFilter = ValidTimeFilter;
-exports.compareTimeStr = compareTimeStr;
-exports.formatPresentationTime = formatPresentationTime;
-exports.inlineTimePickerDefinition = inlineTimePickerDefinition;
-exports.isValidTimeStr = isValidTimeStr;
-exports.parsePresentationTime = parsePresentationTime;
+//#endregion
+Object.defineProperty(exports, "TimePicker", {
+	enumerable: true,
+	get: function() {
+		return TimePicker;
+	}
+});
+Object.defineProperty(exports, "TimeSelectionPicker", {
+	enumerable: true,
+	get: function() {
+		return TimeSelectionPicker;
+	}
+});
+Object.defineProperty(exports, "TimeSelectionPickerTemplate", {
+	enumerable: true,
+	get: function() {
+		return TimeSelectionPickerTemplate;
+	}
+});
+Object.defineProperty(exports, "ValidTimeFilter", {
+	enumerable: true,
+	get: function() {
+		return ValidTimeFilter;
+	}
+});
+Object.defineProperty(exports, "compareTimeStr", {
+	enumerable: true,
+	get: function() {
+		return compareTimeStr;
+	}
+});
+Object.defineProperty(exports, "formatPresentationTime", {
+	enumerable: true,
+	get: function() {
+		return formatPresentationTime;
+	}
+});
+Object.defineProperty(exports, "inlineTimePickerDefinition", {
+	enumerable: true,
+	get: function() {
+		return inlineTimePickerDefinition;
+	}
+});
+Object.defineProperty(exports, "isValidTimeStr", {
+	enumerable: true,
+	get: function() {
+		return isValidTimeStr;
+	}
+});
+Object.defineProperty(exports, "parsePresentationTime", {
+	enumerable: true,
+	get: function() {
+		return parsePresentationTime;
+	}
+});