@vonage/vivid 5.15.1 → 5.17.0

package/bundled/time-selection-picker.template.js

@@ -1,174 +1,160 @@
-import { h as S, V as N, o as h, d as H, a as f, n as C, O as R, E as q, U as V, v as j } from "./vivid-element.js";
-import { P as B } from "./picker-field.template.js";
-import { S as z } from "./single-value-picker.js";
-import { s as U } from "./scrollIntoView.js";
-import { w as O } from "./when.js";
-import { i as W } from "./trapped-focus.js";
-import { r as K } from "./repeat.js";
-import { c as G } from "./class-names.js";
-import { L as J } from "./localized.js";
-import { r as Q } from "./ref.js";
-const w = (e) => {
-  const t = e.split(":");
-  if (t.length !== 3)
-    return !1;
-  const [o, r, i] = t;
-  if (o.length !== 2 || r.length !== 2 || i.length !== 2)
-    return !1;
-  const n = parseInt(o, 10), s = parseInt(r, 10), a = parseInt(i, 10);
-  return !(isNaN(n) || isNaN(s) || isNaN(a) || n < 0 || n > 23 || s < 0 || s > 59 || a < 0 || a > 59);
-}, P = (e) => Number.parseInt(e, 10), d = (e) => e.toString().padStart(2, "0"), l = (e) => {
-  const [t, o, r] = e.split(":"), i = P(t), n = P(o), s = P(r);
-  return {
-    hourStr: t,
-    hours: i,
-    minuteStr: o,
-    minutes: n,
-    secondStr: r,
-    seconds: s,
-    meridiem: i < 12 ? "AM" : "PM"
-  };
-}, ye = (e, t) => e > t ? 1 : e < t ? -1 : 0, M = (e) => e % 12 || 12, X = (e, t) => e === "AM" && t < 12 || e === "PM" && t >= 12, Y = (e, t, o) => {
-  const r = [], i = e ? l(e).hours : 0, n = t ? l(t).hours : 23;
-  for (let s = i; s <= n; s++)
-    o && !X(o, s) || r.push({
-      value: d(s),
-      label: d(o ? M(s) : s)
-    });
-  return r;
-}, Z = (e, t, o, r) => {
-  const i = [];
-  let n = 0, s = 59;
-  if (o) {
-    const { hourStr: a, minutes: c } = l(o);
-    t && l(t).hourStr === a && (n = c);
-  }
-  if (r) {
-    const { hourStr: a, minutes: c } = l(r);
-    t && l(t).hourStr === a && (s = c);
-  }
-  for (let a = n; a <= s; a += Math.max(1, e ?? 1)) {
-    const c = d(a);
-    i.push({
-      value: c,
-      label: c
-    });
-  }
-  return i;
-}, ee = (e, t, o, r) => {
-  const i = [];
-  let n = 0, s = 59;
-  if (o) {
-    const a = l(o);
-    t && (l(t).hourStr === a.hourStr && l(t).minuteStr) === a.minuteStr && (n = a.seconds);
-  }
-  if (r) {
-    const a = l(r);
-    t && (l(t).hourStr === a.hourStr && l(t).minuteStr) === a.minuteStr && (s = a.seconds);
-  }
-  for (let a = n; a <= s; a += Math.max(1, e)) {
-    const c = d(a);
-    i.push({
-      value: c,
-      label: c
-    });
-  }
-  return i;
-}, te = (e, t) => {
-  const o = [];
-  return e && l(e).meridiem === "PM" || o.push({
-    value: "AM",
-    label: "AM"
-  }), t && l(t).meridiem === "AM" || o.push({
-    value: "PM",
-    label: "PM"
-  }), o;
-}, x = {
-  id: "hours",
-  getLabel: (e) => e.locale.timePicker.hoursLabel,
-  getOptions: (e) => Y(
-    e.min,
-    e.max,
-    e.clock === "12h" ? k.getSelectedOptionValue(e) ?? k.getOptions(e)[0].value : void 0
-  ),
-  getSelectedOptionValue: (e) => e.value ? l(e.value).hourStr : void 0,
-  updatedValue: (e, t) => {
-    if (e.value) {
-      const { minuteStr: o, secondStr: r } = l(e.value);
-      return `${t}:${o}:${r}`;
-    } else
-      return `${t}:00:00`;
-  }
-}, y = {
-  id: "minutes",
-  getLabel: (e) => e.locale.timePicker.minutesLabel,
-  getOptions: (e) => Z(e.minutesStep, e.value, e.min, e.max),
-  getSelectedOptionValue: (e) => e.value ? l(e.value).minuteStr : void 0,
-  updatedValue: (e, t) => {
-    if (e.value) {
-      const { hourStr: o, secondStr: r } = l(e.value);
-      return `${o}:${t}:${r}`;
-    } else
-      return `00:${t}:00`;
-  }
-}, $ = {
-  id: "seconds",
-  getLabel: (e) => e.locale.timePicker.secondsLabel,
-  getOptions: (e) => ee(e.secondsStep, e.value, e.min, e.max),
-  getSelectedOptionValue: (e) => e.value ? l(e.value).secondStr : void 0,
-  updatedValue: (e, t) => {
-    if (e.value) {
-      const { hourStr: o, minuteStr: r } = l(e.value);
-      return `${o}:${r}:${t}`;
-    } else
-      return `00:00:${t}`;
-  }
-}, k = {
-  id: "meridies",
-  getLabel: (e) => e.locale.timePicker.meridiesLabel,
-  getOptions: (e) => te(e.min, e.max),
-  getSelectedOptionValue: (e) => e.value ? l(e.value).meridiem : void 0,
-  updatedValue: (e, t) => {
-    if (e.value) {
-      const { hours: o, minuteStr: r, secondStr: i } = l(e.value);
-      let n = o;
-      return t === "AM" && o >= 12 ? n -= 12 : t === "PM" && o < 12 && (n += 12), `${d(n)}:${r}:${i}`;
-    } else
-      return t === "AM" ? "00:00:00" : "12:00:00";
-  }
-}, E = (e) => e.secondsStep !== void 0, I = (e) => e.clock === "12h", oe = (e, t, o) => {
-  L(e, t.updatedValue(e, o)), m(e, t.id, o, "start");
-  const n = e.shadowRoot.querySelector(`#${t.id}`)?.closest(".picker-wrapper")?.nextElementSibling?.querySelector(
-    ".picker"
-  );
-  n ? n.focus() : e.$emit("last-column-selected", void 0, {
-    bubbles: !1
-  });
-}, re = (e, t, o) => {
-  const r = t.getOptions(e), i = t.getSelectedOptionValue(e), n = {
-    ArrowUp: -1,
-    ArrowDown: 1
-  }[o.key];
-  if (n) {
-    o.preventDefault();
-    const s = r.findIndex((_) => _.value === i), c = ((s === -1 ? 0 : s + n) + r.length) % r.length, u = r[c].value;
-    L(e, t.updatedValue(e, u)), m(e, t.id, u, "nearest"), e._clearFocusedClasses();
-  }
-  return !0;
-}, m = (e, t, o, r) => {
-  const i = e.shadowRoot.querySelector(
-    `#${t}-${o}`
-  );
-  i && U(i, i.parentElement, r);
-}, ie = (e, t) => {
-  if (t.key === "Tab") {
-    const o = e.shadowRoot.querySelectorAll(".picker"), r = t.shiftKey ? o[0] : o[o.length - 1];
-    e.shadowRoot.activeElement !== r && W(t), e._applyFocusedClass();
-  }
-  return !0;
-}, L = (e, t) => {
-  e.$emit("change", t, { bubbles: !1, composed: !1 });
-}, b = (e) => S`<div class="picker-wrapper">
+import { t as e } from "./localized.js";
+import { C as t, E as n, O as r, T as i, d as a, l as o, o as s, s as c, t as l, u, w as d } from "./vivid-element.js";
+import { n as f } from "./repeat.js";
+import { t as p } from "./ref.js";
+import { t as m } from "./when.js";
+import { t as h } from "./decorate.js";
+import { n as g } from "./trapped-focus.js";
+import { t as _ } from "./class-names.js";
+import { n as v } from "./picker-field.template.js";
+import { t as y } from "./scrollIntoView.js";
+import { t as b } from "./single-value-picker.js";
+//#region src/shared/datetime/time.ts
+var x = (e) => {
+	let t = e.split(":");
+	if (t.length !== 3) return !1;
+	let [n, r, i] = t;
+	if (n.length !== 2 || r.length !== 2 || i.length !== 2) return !1;
+	let a = parseInt(n, 10), o = parseInt(r, 10), s = parseInt(i, 10);
+	return !(isNaN(a) || isNaN(o) || isNaN(s) || a < 0 || a > 23 || o < 0 || o > 59 || s < 0 || s > 59);
+}, S = (e) => Number.parseInt(e, 10), C = (e) => e.toString().padStart(2, "0"), w = (e) => {
+	let [t, n, r] = e.split(":"), i = S(t);
+	return {
+		hourStr: t,
+		hours: i,
+		minuteStr: n,
+		minutes: S(n),
+		secondStr: r,
+		seconds: S(r),
+		meridiem: i < 12 ? "AM" : "PM"
+	};
+}, T = (e, t) => e > t ? 1 : e < t ? -1 : 0, E = (e) => e % 12 || 12, D = (e, t) => e === "AM" && t < 12 || e === "PM" && t >= 12, O = (e, t, n) => {
+	let r = [], i = e ? w(e).hours : 0, a = t ? w(t).hours : 23;
+	for (let e = i; e <= a; e++) n && !D(n, e) || r.push({
+		value: C(e),
+		label: C(n ? E(e) : e)
+	});
+	return r;
+}, k = (e, t, n, r) => {
+	let i = [], a = 0, o = 59;
+	if (n) {
+		let { hourStr: e, minutes: r } = w(n);
+		t && w(t).hourStr === e && (a = r);
+	}
+	if (r) {
+		let { hourStr: e, minutes: n } = w(r);
+		t && w(t).hourStr === e && (o = n);
+	}
+	for (let t = a; t <= o; t += Math.max(1, e ?? 1)) {
+		let e = C(t);
+		i.push({
+			value: e,
+			label: e
+		});
+	}
+	return i;
+}, A = (e, t, n, r) => {
+	let i = [], a = 0, o = 59;
+	if (n) {
+		let e = w(n);
+		t && (w(t).hourStr === e.hourStr && w(t).minuteStr) === e.minuteStr && (a = e.seconds);
+	}
+	if (r) {
+		let e = w(r);
+		t && (w(t).hourStr === e.hourStr && w(t).minuteStr) === e.minuteStr && (o = e.seconds);
+	}
+	for (let t = a; t <= o; t += Math.max(1, e)) {
+		let e = C(t);
+		i.push({
+			value: e,
+			label: e
+		});
+	}
+	return i;
+}, j = (e, t) => {
+	let n = [];
+	return e && w(e).meridiem === "PM" || n.push({
+		value: "AM",
+		label: "AM"
+	}), t && w(t).meridiem === "AM" || n.push({
+		value: "PM",
+		label: "PM"
+	}), n;
+}, M = {
+	id: "hours",
+	getLabel: (e) => e.locale.timePicker.hoursLabel,
+	getOptions: (e) => O(e.min, e.max, e.clock === "12h" ? F.getSelectedOptionValue(e) ?? F.getOptions(e)[0].value : void 0),
+	getSelectedOptionValue: (e) => e.value ? w(e.value).hourStr : void 0,
+	updatedValue: (e, t) => {
+		if (e.value) {
+			let { minuteStr: n, secondStr: r } = w(e.value);
+			return `${t}:${n}:${r}`;
+		} else return `${t}:00:00`;
+	}
+}, N = {
+	id: "minutes",
+	getLabel: (e) => e.locale.timePicker.minutesLabel,
+	getOptions: (e) => k(e.minutesStep, e.value, e.min, e.max),
+	getSelectedOptionValue: (e) => e.value ? w(e.value).minuteStr : void 0,
+	updatedValue: (e, t) => {
+		if (e.value) {
+			let { hourStr: n, secondStr: r } = w(e.value);
+			return `${n}:${t}:${r}`;
+		} else return `00:${t}:00`;
+	}
+}, P = {
+	id: "seconds",
+	getLabel: (e) => e.locale.timePicker.secondsLabel,
+	getOptions: (e) => A(e.secondsStep, e.value, e.min, e.max),
+	getSelectedOptionValue: (e) => e.value ? w(e.value).secondStr : void 0,
+	updatedValue: (e, t) => {
+		if (e.value) {
+			let { hourStr: n, minuteStr: r } = w(e.value);
+			return `${n}:${r}:${t}`;
+		} else return `00:00:${t}`;
+	}
+}, F = {
+	id: "meridies",
+	getLabel: (e) => e.locale.timePicker.meridiesLabel,
+	getOptions: (e) => j(e.min, e.max),
+	getSelectedOptionValue: (e) => e.value ? w(e.value).meridiem : void 0,
+	updatedValue: (e, t) => {
+		if (e.value) {
+			let { hours: n, minuteStr: r, secondStr: i } = w(e.value), a = n;
+			return t === "AM" && n >= 12 ? a -= 12 : t === "PM" && n < 12 && (a += 12), `${C(a)}:${r}:${i}`;
+		} else if (t === "AM") return "00:00:00";
+		else return "12:00:00";
+	}
+}, I = (e) => e.secondsStep !== void 0, L = (e) => e.clock === "12h", R = (e, t, n) => {
+	H(e, t.updatedValue(e, n)), B(e, t.id, n, "start");
+	let r = (e.shadowRoot.querySelector(`#${t.id}`)?.closest(".picker-wrapper")?.nextElementSibling)?.querySelector(".picker");
+	r ? r.focus() : e.$emit("last-column-selected", void 0, { bubbles: !1 });
+}, z = (e, t, n) => {
+	let r = t.getOptions(e), i = t.getSelectedOptionValue(e), a = {
+		ArrowUp: -1,
+		ArrowDown: 1
+	}[n.key];
+	if (a) {
+		n.preventDefault();
+		let o = r.findIndex((e) => e.value === i), s = r[((o === -1 ? 0 : o + a) + r.length) % r.length].value;
+		H(e, t.updatedValue(e, s)), B(e, t.id, s, "nearest"), e._clearFocusedClasses();
+	}
+	return !0;
+}, B = (e, t, n, r) => {
+	let i = e.shadowRoot.querySelector(`#${t}-${n}`);
+	i && y(i, i.parentElement, r);
+}, V = (e, t) => {
+	if (t.key === "Tab") {
+		let n = e.shadowRoot.querySelectorAll(".picker"), r = t.shiftKey ? n[0] : n[n.length - 1];
+		e.shadowRoot.activeElement !== r && g(t), e._applyFocusedClass();
+	}
+	return !0;
+}, H = (e, t) => {
+	e.$emit("change", t, {
+		bubbles: !1,
+		composed: !1
+	});
+}, U = (e) => a`<div class="picker-wrapper">
 		<ul
 			id="${e.id}"
 			class="picker"
@@ -176,401 +162,218 @@ const w = (e) => {
 			tabindex="0"
 			aria-label="${e.getLabel}"
 			aria-activedescendant="${(t) => e.getSelectedOptionValue(t) ? `${e.id}-${e.getSelectedOptionValue(t)}` : void 0}"
-			@keydown="${(t, o) => re(t, e, o.event)}"
+			@keydown="${(t, n) => z(t, e, n.event)}"
 		>
-			${K(
-  (t) => e.getOptions(t),
-  S`<li
+			${f((t) => e.getOptions(t), a`<li
 					id="${(t) => `${e.id}-${t.value}`}"
-					class="${(t, o) => G("option", [
-    "selected",
-    e.getSelectedOptionValue(o.parent) === t.value
-  ])}"
-					aria-selected="${(t, o) => e.getSelectedOptionValue(o.parent) === t.value}"
+					class="${(t, n) => _("option", ["selected", e.getSelectedOptionValue(n.parent) === t.value])}"
+					aria-selected="${(t, n) => e.getSelectedOptionValue(n.parent) === t.value}"
 					role="option"
-					@click="${(t, o) => oe(o.parent, e, t.value)}"
+					@click="${(t, n) => R(n.parent, e, t.value)}"
 				>
-					${(t) => t.label}
-				</li>`
-)}
+					${(e) => e.label}
+				</li>`)}
 		</ul>
-	</div>`, ne = () => S`<div
+	</div>`, W = () => a`<div
 		class="time-pickers"
-		@keydown="${(e, { event: t }) => ie(e, t)}"
+		@keydown="${(e, { event: t }) => V(e, t)}"
 		@focusout="${(e) => e._onFocusOut()}"
 		@pointerdown="${(e) => e._onPointerDown()}"
 	>
-		${b(x)} ${b(y)}
-		${O(E, b($))}
-		${O(I, b(k))}
-	</div>`;
-var se = Object.defineProperty, v = (e, t, o, r) => {
-  for (var i = void 0, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (i = s(t, o, i) || i);
-  return i && se(t, o, i), i;
+		${U(M)} ${U(N)}
+		${m(I, U(P))}
+		${m(L, U(F))}
+	</div>`, G = class extends e(l) {
+	constructor(...e) {
+		super(...e), this.minutesStep = 1, this.clock = "24h", this.focusedPickerClass = "focused", this._onFocusOut = () => {
+			this._clearFocusedClasses();
+		}, this._onPointerDown = () => {
+			this._clearFocusedClasses();
+		};
+	}
+	valueChanged(e, t) {
+		t !== void 0 && !x(t) && (this.value = void 0);
+	}
+	scrollSelectedOptionsToTop() {
+		M.getSelectedOptionValue(this) && B(this, "hours", M.getSelectedOptionValue(this), "start"), N.getSelectedOptionValue(this) && B(this, "minutes", N.getSelectedOptionValue(this), "start"), I(this) && P.getSelectedOptionValue(this) && B(this, "seconds", P.getSelectedOptionValue(this), "start"), L(this) && F.getSelectedOptionValue(this) && B(this, "meridies", F.getSelectedOptionValue(this), "start");
+	}
+	focus(e) {
+		this.shadowRoot.querySelector(".picker").focus(e), this._applyFocusedClass();
+	}
+	_applyFocusedClass() {
+		let e = this.shadowRoot.querySelectorAll(".picker");
+		requestAnimationFrame(() => {
+			let t = this.shadowRoot.activeElement;
+			e.forEach((e) => {
+				e === t ? e.parentElement?.classList.add(this.focusedPickerClass) : e.parentElement?.classList.remove(this.focusedPickerClass);
+			});
+		});
+	}
+	_clearFocusedClasses() {
+		this.shadowRoot.querySelectorAll(".picker").forEach((e) => {
+			e.parentElement?.classList.remove(this.focusedPickerClass);
+		});
+	}
 };
-class p extends J(N) {
-  constructor() {
-    super(...arguments), this.minutesStep = 1, this.clock = "24h", this.focusedPickerClass = "focused", this._onFocusOut = () => {
-      this._clearFocusedClasses();
-    }, this._onPointerDown = () => {
-      this._clearFocusedClasses();
-    };
-  }
-  valueChanged(t, o) {
-    o !== void 0 && !w(o) && (this.value = void 0);
-  }
-  scrollSelectedOptionsToTop() {
-    x.getSelectedOptionValue(this) && m(
-      this,
-      "hours",
-      x.getSelectedOptionValue(this),
-      "start"
-    ), y.getSelectedOptionValue(this) && m(
-      this,
-      "minutes",
-      y.getSelectedOptionValue(this),
-      "start"
-    ), E(this) && $.getSelectedOptionValue(this) && m(
-      this,
-      "seconds",
-      $.getSelectedOptionValue(this),
-      "start"
-    ), I(this) && k.getSelectedOptionValue(this) && m(
-      this,
-      "meridies",
-      k.getSelectedOptionValue(this),
-      "start"
-    );
-  }
-  focus(t) {
-    this.shadowRoot.querySelector(
-      ".picker"
-    ).focus(t), this._applyFocusedClass();
-  }
-  /**
-   * @internal
-   * Apply 'focused' class to the wrapper element of an active picker
-   */
-  _applyFocusedClass() {
-    const t = this.shadowRoot.querySelectorAll(".picker");
-    requestAnimationFrame(() => {
-      const o = this.shadowRoot.activeElement;
-      t.forEach((r) => {
-        r === o ? r.parentElement?.classList.add(this.focusedPickerClass) : r.parentElement?.classList.remove(this.focusedPickerClass);
-      });
-    });
-  }
-  /**
-   * @internal
-   * Clear 'focused' classes from all pickers wrappers
-   */
-  _clearFocusedClasses() {
-    this.shadowRoot.querySelectorAll(".picker").forEach((o) => {
-      o.parentElement?.classList.remove(this.focusedPickerClass);
-    });
-  }
-}
-v([
-  h
-], p.prototype, "value");
-v([
-  h
-], p.prototype, "minutesStep");
-v([
-  h
-], p.prototype, "secondsStep");
-v([
-  h
-], p.prototype, "clock");
-v([
-  h
-], p.prototype, "min");
-v([
-  h
-], p.prototype, "max");
-const ae = ':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))}', $e = H(
-  "inline-time-picker",
-  p,
-  ne,
-  [],
-  {
-    styles: ae,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), le = (e, t, o) => {
-  const r = l(e);
-  let n = `${d(
-    o ? M(r.hours) : r.hours
-  )}:${r.minuteStr}`;
-  return t && (n += `:${r.secondStr}`), o && (n += ` ${r.meridiem}`), n;
-}, T = (e) => e >= "0" && e <= "9", ce = (e, t) => {
-  const o = e.toLowerCase(), r = [];
-  let i;
-  for (let c = 0; c < o.length; c++) {
-    const u = o[c];
-    if (u === "a" && o[c + 1] === "m" && (c++, i = "AM"), u === "p" && o[c + 1] === "m" && (c++, i = "PM"), T(u)) {
-      let _ = u;
-      for (; T(o[c + 1]); )
-        c++, _ += o[c];
-      r.push(Number.parseInt(_, 10));
-    }
-  }
-  if (r.length === 0 || r.length > 3)
-    throw new Error("Invalid time format");
-  if (i && (r[0] < 1 || r[0] > 12))
-    throw new Error("Invalid time format");
-  (i || t) && r[0] === 12 && (r[0] = 0), i === "PM" && (r[0] = r[0] + 12);
-  const [n, s = 0, a = 0] = r;
-  if (n > 23 || s > 59 || a > 59)
-    throw new Error("Invalid value");
-  return [n, s, a].map(d).join(":");
+h([i], G.prototype, "value", void 0), h([i], G.prototype, "minutesStep", void 0), h([i], G.prototype, "secondsStep", void 0), h([i], G.prototype, "clock", void 0), h([i], G.prototype, "min", void 0), h([i], G.prototype, "max", void 0);
+//#endregion
+//#region src/shared/picker-field/mixins/inline-time-picker/definition.ts
+var K = s("inline-time-picker", G, W, [], {
+	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: !0 }
+});
+c(K);
+//#endregion
+//#region src/shared/picker-field/mixins/time-selection-picker.ts
+var q = (e) => {
+	class i extends e {
+		constructor(...e) {
+			super(...e), this.minutesStep = null, this.secondsStep = null;
+		}
+		get _displaySeconds() {
+			return this.secondsStep !== null;
+		}
+		get _use12hClock() {
+			return this.clock ? this.clock === "12h" : this.locale.timePicker.defaultTo12HourClock;
+		}
+		get _timePlaceholder() {
+			let e = "hh:mm";
+			return this._displaySeconds && (e += ":ss"), this._use12hClock && (e += " aa"), e;
+		}
+		#e = { handleChange: () => {
+			this.value && (this._presentationValue = this._toPresentationValue(this.value));
+		} };
+		#t;
+		#n() {
+			this.#t = d.binding(() => this._use12hClock, this.#e), this.#t.observe(this, t.default);
+		}
+		#r() {
+			this.#t.dispose();
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.#n();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.#r();
+		}
+		_onPickerButtonClick() {
+			super._onPickerButtonClick(), this._popupOpen && (r.process(), this._inlineTimePickerEl.scrollSelectedOptionsToTop());
+		}
+		_onInlineTimePickerChange(e) {
+			this._updateValueDueToUserInteraction(this._withUpdatedTime(e.detail), !1);
+		}
+		_onInlineTimePickerLastColumnSelected() {
+			this._closePopup();
+		}
+	}
+	return h([o({
+		attribute: "minutes-step",
+		converter: u
+	})], i.prototype, "minutesStep", void 0), h([o({
+		attribute: "seconds-step",
+		converter: u
+	})], i.prototype, "secondsStep", void 0), h([o], i.prototype, "clock", void 0), h([n], i.prototype, "_use12hClock", null), i;
+}, J = (e, t, n) => {
+	let r = w(e), i = `${C(n ? E(r.hours) : r.hours)}:${r.minuteStr}`;
+	return t && (i += `:${r.secondStr}`), n && (i += ` ${r.meridiem}`), i;
+}, Y = (e) => e >= "0" && e <= "9", X = (e, t) => {
+	let n = e.toLowerCase(), r = [], i;
+	for (let e = 0; e < n.length; e++) {
+		let t = n[e];
+		if (t === "a" && n[e + 1] === "m" && (e++, i = "AM"), t === "p" && n[e + 1] === "m" && (e++, i = "PM"), Y(t)) {
+			let i = t;
+			for (; Y(n[e + 1]);) e++, i += n[e];
+			r.push(Number.parseInt(i, 10));
+		}
+	}
+	if (r.length === 0 || r.length > 3 || i && (r[0] < 1 || r[0] > 12)) throw Error("Invalid time format");
+	(i || t) && r[0] === 12 && (r[0] = 0), i === "PM" && (r[0] += 12);
+	let [a, o = 0, s = 0] = r;
+	if (a > 23 || o > 59 || s > 59) throw Error("Invalid value");
+	return [
+		a,
+		o,
+		s
+	].map(C).join(":");
+}, Z = {
+	fromView: (e) => e && x(e) ? e : "",
+	toView(e) {
+		return e;
+	}
+}, Q = class extends q(b(v)) {
+	_toPresentationValue(e) {
+		return J(e, this._displaySeconds, this._use12hClock);
+	}
+	_parsePresentationValue(e) {
+		return X(e, this._use12hClock);
+	}
+	get _timeValue() {
+		return this.value;
+	}
+	_withUpdatedTime(e) {
+		return e;
+	}
+	get _resolvedMinTime() {
+		return this.min || null;
+	}
+	get _resolvedMaxTime() {
+		return this.max || null;
+	}
+	minChanged(e, t) {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.min = t, this.validate());
+	}
+	maxChanged(e, t) {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.max = t, this.validate());
+	}
+	constructor() {
+		super(), this._isValidValue = x, this.min = "", this.max = "", this.proxy.type = "time", this.proxy.step = "1";
+	}
+	get _textFieldPlaceholder() {
+		return this._timePlaceholder;
+	}
+	get _pickerButtonIcon() {
+		return "clock-line";
+	}
+	get _pickerButtonLabel() {
+		return this.value ? this.locale.timePicker.changeTimeLabel(this._toPresentationValue(this.value)) : this.locale.timePicker.chooseTimeLabel;
+	}
+	_onPickerButtonClick() {
+		super._onPickerButtonClick(), this._popupOpen && (r.process(), this._focusableElsWithinDialog()[0]?.focus());
+	}
+	get _dialogLabel() {
+		return this.locale.timePicker.chooseTimeLabel;
+	}
+	_focusableElsWithinDialog() {
+		return this._dialogEl.querySelectorAll("#inline-time-picker, .vwc-button");
+	}
+	_getCustomValidationError() {
+		return this._isPresentationValueInvalid() ? this.locale.timePicker.invalidTimeError : null;
+	}
 };
-var pe = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, g = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? ue(t, o) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && pe(t, o, i), i;
-};
-const de = (e) => {
-  class t extends e {
-    constructor() {
-      super(...arguments), this.minutesStep = null, this.secondsStep = null, this.#t = {
-        handleChange: () => {
-          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 r = "hh:mm";
-      return this._displaySeconds && (r += ":ss"), this._use12hClock && (r += " aa"), r;
-    }
-    #t;
-    #e;
-    #o() {
-      this.#e = R.binding(
-        () => this._use12hClock,
-        this.#t
-      ), this.#e.observe(this, q.default);
-    }
-    #r() {
-      this.#e.dispose();
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback(), this.#o();
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.#r();
-    }
-    // --- Picker button ---
-    /**
-     * @internal
-     */
-    _onPickerButtonClick() {
-      super._onPickerButtonClick(), this._popupOpen && (V.process(), this._inlineTimePickerEl.scrollSelectedOptionsToTop());
-    }
-    // --- Inline time picker ---
-    /**
-     * @internal
-     */
-    _onInlineTimePickerChange(r) {
-      this._updateValueDueToUserInteraction(
-        this._withUpdatedTime(r.detail),
-        !1
-      );
-    }
-    /**
-     * @internal
-     */
-    _onInlineTimePickerLastColumnSelected() {
-      this._closePopup();
-    }
-  }
-  return g([
-    f({ attribute: "minutes-step", converter: C })
-  ], t.prototype, "minutesStep", 2), g([
-    f({ attribute: "seconds-step", converter: C })
-  ], t.prototype, "secondsStep", 2), g([
-    f
-  ], t.prototype, "clock", 2), g([
-    j
-  ], t.prototype, "_use12hClock", 1), t;
-};
-var me = Object.defineProperty, A = (e, t, o, r) => {
-  for (var i = void 0, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (i = s(t, o, i) || i);
-  return i && me(t, o, i), i;
-};
-const F = {
-  fromView: (e) => e && w(e) ? e : "",
-  toView(e) {
-    return e;
-  }
-};
-class D extends de(
-  z(B)
-) {
-  // --- Core ---
-  constructor() {
-    super(), this._isValidValue = w, this.min = "", this.max = "", this.proxy.type = "time", this.proxy.step = "1";
-  }
-  /**
-   * @internal
-   */
-  _toPresentationValue(t) {
-    return le(
-      t,
-      this._displaySeconds,
-      this._use12hClock
-    );
-  }
-  /**
-   * @internal
-   */
-  _parsePresentationValue(t) {
-    return ce(t, this._use12hClock);
-  }
-  /**
-   * @internal
-   */
-  get _timeValue() {
-    return this.value;
-  }
-  /**
-   * @internal
-   */
-  _withUpdatedTime(t) {
-    return t;
-  }
-  /**
-   * @internal
-   */
-  get _resolvedMinTime() {
-    return this.min || null;
-  }
-  /**
-   * @internal
-   */
-  get _resolvedMaxTime() {
-    return this.max || null;
-  }
-  /**
-   * @internal
-   */
-  minChanged(t, o) {
-    this.proxy instanceof HTMLInputElement && (this.proxy.min = o, this.validate());
-  }
-  /**
-   * @internal
-   */
-  maxChanged(t, o) {
-    this.proxy instanceof HTMLInputElement && (this.proxy.max = o, this.validate());
-  }
-  // --- Text field ---
-  /**
-   * @internal
-   */
-  get _textFieldPlaceholder() {
-    return this._timePlaceholder;
-  }
-  // --- Picker button ---
-  /**
-   * @internal
-   */
-  get _pickerButtonIcon() {
-    return "clock-line";
-  }
-  /**
-   * @internal
-   */
-  get _pickerButtonLabel() {
-    return this.value ? this.locale.timePicker.changeTimeLabel(
-      this._toPresentationValue(this.value)
-    ) : this.locale.timePicker.chooseTimeLabel;
-  }
-  /**
-   * @internal
-   */
-  _onPickerButtonClick() {
-    super._onPickerButtonClick(), this._popupOpen && (V.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() {
-    return this._isPresentationValueInvalid() ? this.locale.timePicker.invalidTimeError : null;
-  }
-}
-A([
-  f({ converter: F })
-], D.prototype, "min");
-A([
-  f({ converter: F })
-], D.prototype, "max");
-const we = (e, t) => {
-  const o = e.tagFor(p);
-  return S`
-		<${o}
+h([o({ converter: Z })], Q.prototype, "min", void 0), h([o({ converter: Z })], Q.prototype, "max", void 0);
+//#endregion
+//#region src/shared/picker-field/mixins/time-selection-picker.template.ts
+var $ = (e, t) => {
+	let n = e.tagFor(G);
+	return a`
+		<${n}
 			id='inline-time-picker'
-			${Q("_inlineTimePickerEl")}
+			${p("_inlineTimePickerEl")}
 			style="--_inline-time-picker-num-options-visible: ${() => t}"
 			tabindex='1'
-			:value='${(r) => r._timeValue || void 0}'
-			:clock='${(r) => r._use12hClock ? "12h" : "24h"}'
-			:min='${(r) => r._resolvedMinTime || void 0}'
-			:max='${(r) => r._resolvedMaxTime || void 0}'
-			:minutesStep='${(r) => r.minutesStep ?? 1}'
-			:secondsStep='${(r) => r.secondsStep ?? void 0}'
-			@change='${(r, i) => r._onInlineTimePickerChange(i.event)}'
-			@last-column-selected='${(r) => r._onInlineTimePickerLastColumnSelected()}'
+			:value='${(e) => e._timeValue || void 0}'
+			:clock='${(e) => e._use12hClock ? "12h" : "24h"}'
+			:min='${(e) => e._resolvedMinTime || void 0}'
+			:max='${(e) => e._resolvedMaxTime || void 0}'
+			:minutesStep='${(e) => e.minutesStep ?? 1}'
+			:secondsStep='${(e) => e.secondsStep ?? void 0}'
+			@change='${(e, t) => e._onInlineTimePickerChange(t.event)}'
+			@last-column-selected='${(e) => e._onInlineTimePickerLastColumnSelected()}'
 		>
-		</${o}>
+		</${n}>
 	`;
 };
-export {
-  de as T,
-  F as V,
-  we as a,
-  $e as b,
-  ye as c,
-  D as d,
-  le as f,
-  w as i,
-  ce as p
-};
+//#endregion
+export { X as a, T as c, J as i, x as l, Q as n, q as o, Z as r, K as s, $ as t };