@getufy/flint-ui 0.1.0

package/dist/_shared/flint-time-picker-D00w7wjz.js

@@ -0,0 +1,817 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r, nothing as i, svg as a, unsafeCSS as o } from "lit";
+import { customElement as s, property as c, state as l } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { repeat as d } from "lit/directives/repeat.js";
+//#region src/time-picker/flint-time-field.css?inline
+var f = ":host{font-family:var(--flint-font-family);display:inline-block}.label{color:var(--flint-text-color-muted);margin-bottom:5px;font-size:.75rem;font-weight:500;display:block}.label.focused{color:var(--flint-primary-color)}:host([error]) .label{color:var(--flint-error-color)}.container{background:var(--flint-input-bg);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);height:var(--flint-time-field-height,44px);min-width:var(--flint-time-field-min-width,160px);cursor:text;box-sizing:border-box;align-items:center;gap:4px;padding:0 10px;transition:border-color .15s,box-shadow .15s;display:inline-flex}.container.focused{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}:host([error]) .container{border-color:var(--flint-error-color)}:host([disabled]) .container{background:var(--flint-input-disabled-bg);border-color:var(--flint-border-color);cursor:not-allowed}.segments{outline:none;flex:1;align-items:center;gap:1px;min-height:100%;display:flex}.seg{font-variant-numeric:tabular-nums;color:var(--flint-text-color);cursor:text;-webkit-user-select:none;user-select:none;border-radius:3px;justify-content:center;align-items:center;min-width:2ch;padding:2px 4px;font-size:.9375rem;line-height:1;transition:background .1s;display:inline-flex}.seg.active{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.seg.placeholder{color:var(--flint-text-color-muted)}.seg.meridiem{min-width:3ch}.sep{color:var(--flint-text-color-muted);pointer-events:none;font-size:.9375rem}.icon-btn{cursor:pointer;width:24px;height:24px;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:auto;font-size:.875rem;transition:background .12s;display:flex}.icon-btn:hover{background:var(--flint-hover-color)}.helper{color:var(--flint-text-color-muted);margin-top:5px;font-size:.75rem;display:block}:host([error]) .helper{color:var(--flint-error-color)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", p = ":host{font-family:var(--flint-font-family);display:block}.clock{max-height:var(--flint-digital-clock-height,300px);scrollbar-width:thin;padding:4px 0;overflow-y:auto}.item{color:var(--flint-text-color);cursor:pointer;box-sizing:border-box;font-variant-numeric:tabular-nums;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;width:100%;padding:10px 16px;font-family:inherit;font-size:.9375rem;transition:background .1s;display:flex}.item:hover{background:var(--flint-hover-color)}.item.selected{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);border-radius:6px;font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = ":host{font-family:var(--flint-font-family);display:inline-block}.msdc{border-radius:var(--flint-border-radius-xl);gap:0;display:flex;overflow:hidden}.col{width:72px;max-height:var(--flint-msdc-height,240px);scrollbar-width:none;background:var(--flint-surface-1);flex-direction:column;display:flex;position:relative;overflow-y:auto}.col::-webkit-scrollbar{display:none}.col+.col{border-left:1px solid var(--flint-border-color)}.col-header{background:var(--flint-surface-1);text-transform:uppercase;letter-spacing:.06em;color:var(--flint-text-color-muted);text-align:center;border-bottom:1px solid var(--flint-border-color);z-index:1;padding:6px 0 4px;font-size:.65rem;font-weight:700;position:sticky;top:0}.item{font-variant-numeric:tabular-nums;color:var(--flint-text-color);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:100%;padding:8px 4px;font-family:inherit;font-size:.9375rem;line-height:1;transition:background .1s;display:flex}.item:hover{background:var(--flint-hover-color)}.item.sel{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);border-radius:6px;font-weight:700}.col-spacer{min-height:80px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", h = ":host{-webkit-user-select:none;user-select:none;display:inline-block}.clock-wrap{flex-direction:column;align-items:center;gap:12px;display:flex}.clock-header{font-size:2rem;font-weight:700;font-family:var(--flint-font-family);color:var(--flint-text-color,#111827);gap:4px;display:flex}.clock-seg{cursor:pointer;border-radius:8px;padding:4px 10px;transition:background .12s,color .12s}.clock-seg.active{background:var(--flint-primary-color,#2563eb);color:var(--flint-text-color-on-primary,#fff);border-radius:8px}.clock-seg:hover:not(.active){background:var(--flint-hover-color,#0000000f)}.clock-sep{color:var(--flint-text-color-muted,#4b5563)}.clock-mer{color:var(--flint-text-color-muted,#4b5563);align-self:flex-end;margin-bottom:6px;font-size:1rem;font-weight:600}svg{touch-action:none;cursor:pointer;outline:none}svg.dragging{cursor:grabbing}svg:focus-visible{outline:2px solid var(--flint-primary-color,#2563eb);outline-offset:4px;border-radius:50%}.face{fill:var(--flint-time-clock-face-bg,var(--flint-surface-variant,#f1f5f9))}.face-inner{fill:var(--flint-time-clock-inner-bg,#0000000a);stroke:var(--flint-time-clock-inner-border,var(--flint-border-color,#e5e7eb));stroke-width:1px}.hand{stroke:var(--flint-time-clock-hand-color,var(--flint-primary-color,#2563eb));stroke-width:2px;stroke-linecap:round}.hand-center,.hand-tip{fill:var(--flint-time-clock-hand-color,var(--flint-primary-color,#2563eb))}.num{font-size:var(--flint-time-clock-num-size,14px);font-weight:500;font-family:var(--flint-font-family,system-ui, sans-serif);fill:var(--flint-text-color,#111827);text-anchor:middle;pointer-events:none}.num.inner-label{font-size:var(--flint-time-clock-inner-num-size,12px);fill:var(--flint-text-color-muted,#4b5563)}.num.selected{fill:var(--flint-text-color-on-primary,#fff);font-weight:700}.num-bg{fill:#0000;cursor:pointer}.num-bg.selected{fill:var(--flint-primary-color,#2563eb)}.am-pm{border-radius:var(--flint-time-clock-ampm-radius,20px);border:1.5px solid var(--flint-border-color,#e5e7eb);display:inline-flex;overflow:hidden}.am-pm-btn{cursor:pointer;color:var(--flint-text-color,#111827);background:0 0;border:none;padding:5px 18px;font-family:inherit;font-size:.875rem;font-weight:500;transition:all .12s;position:relative}.am-pm-btn:first-child{border-right:1.5px solid var(--flint-border-color,#e5e7eb)}.am-pm-btn.sel{background:var(--flint-primary-color,#2563eb);color:var(--flint-text-color-on-primary,#fff);border-color:var(--flint-primary-color,#2563eb)}.am-pm-btn:hover:not(.sel){background:var(--flint-hover-color,#0000000f)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", g = ":host{font-family:var(--flint-font-family);display:inline-block}.surface{border-radius:var(--flint-border-radius-xl);box-shadow:0 1px 4px #00000014,0 0 0 1px var(--flint-border-color);display:inline-block;overflow:hidden}", _ = ":host{display:inline-block}";
+//#endregion
+//#region src/time-picker/flint-time-picker.ts
+function v(e) {
+	return String(e).padStart(2, "0");
+}
+function y(e) {
+	if (!e) return null;
+	let t = e.split(":").map(Number);
+	return t.length < 2 || t.some(isNaN) ? null : {
+		h: t[0],
+		m: t[1],
+		s: t[2] ?? 0
+	};
+}
+function b(e, t, n = 0) {
+	return `${v(e)}:${v(t)}:${v(n)}`;
+}
+function x(e) {
+	return {
+		hour: e % 12 || 12,
+		ampm: e < 12 ? "AM" : "PM"
+	};
+}
+function S(e, t) {
+	return t === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12;
+}
+function C(e, t, n = !1) {
+	let r = y(e);
+	if (!r) return "";
+	let i = t ? x(r.h).hour : r.h, a = t ? ` ${x(r.h).ampm}` : "";
+	return `${v(i)}:${v(r.m)}${n ? ":" + v(r.s) : ""}${a}`;
+}
+function w(e, t, n, r = 140, i = 140) {
+	let a = (e / t - .25) * Math.PI * 2;
+	return {
+		x: r + n * Math.cos(a),
+		y: i + n * Math.sin(a)
+	};
+}
+function T(e, t, n = 140, r = 140) {
+	let i = Math.atan2(t - r, e - n) * 180 / Math.PI + 90;
+	return i < 0 && (i += 360), i;
+}
+var E = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.label = "", this.ampm = !0, this.seconds = !1, this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._h = null, this._m = null, this._s = null, this._mer = "AM", this._active = null, this._focused = !1, this._buf = "";
+	}
+	static {
+		this.styles = o(f);
+	}
+	get _segs() {
+		let e = ["hour", "minute"];
+		return this.seconds && e.push("second"), this.ampm && e.push("meridiem"), e;
+	}
+	willUpdate(e) {
+		if (e.has("value") && this.value) {
+			let e = y(this.value);
+			if (e) {
+				let { hour: t, ampm: n } = x(e.h);
+				this._h = this.ampm ? t : e.h, this._m = e.m, this._s = e.s, this._mer = n;
+			}
+		}
+	}
+	clear() {
+		this._h = null, this._m = null, this._s = null, this._buf = "", this.dispatchEvent(new CustomEvent("flint-time-picker-clear", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_emit() {
+		if (this._h === null || this._m === null) return;
+		let e = b(this.ampm ? S(this._h, this._mer) : this._h, this._m, this._s ?? 0);
+		e !== this.value && (this.value = e, this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_commitBuf() {
+		if (!this._buf || !this._active) return;
+		let e = parseInt(this._buf);
+		if (isNaN(e)) return;
+		let t = this.ampm ? 12 : 23;
+		this._active === "hour" && e >= (this.ampm ? 1 : 0) && e <= t ? this._h = e : this._active === "minute" && e >= 0 && e <= 59 ? this._m = e : this._active === "second" && e >= 0 && e <= 59 && (this._s = e), this._emit();
+	}
+	_setActive(e) {
+		this._commitBuf(), this._active = e, this._buf = "";
+	}
+	_next() {
+		let e = this._segs, t = e.indexOf(this._active);
+		t < e.length - 1 && this._setActive(e[t + 1]);
+	}
+	_prev() {
+		let e = this._segs, t = e.indexOf(this._active);
+		t > 0 && this._setActive(e[t - 1]);
+	}
+	_canNext() {
+		let e = this._segs;
+		return e.indexOf(this._active) < e.length - 1;
+	}
+	_canPrev() {
+		return this._segs.indexOf(this._active) > 0;
+	}
+	_digit(e) {
+		if (this._active || this._setActive("hour"), this._active === "meridiem") return;
+		let t = this._buf + e, n = this.ampm ? 12 : 23;
+		if (this._active === "hour") if (t.length === 1) e >= (this.ampm ? 2 : 3) ? (this._h = e, this._buf = "", this._next()) : this._buf = t;
+		else {
+			let r = parseInt(t);
+			r >= (this.ampm ? 1 : 0) && r <= n ? (this._h = r, this._buf = "", this._next()) : (this._buf = String(e), e >= (this.ampm ? 2 : 3) && (this._h = e, this._buf = "", this._next()));
+		}
+		else if (this._active === "minute" || this._active === "second") if (t.length === 1) e >= 6 ? (this[this._active === "minute" ? "_m" : "_s"] = e, this._buf = "", this._next()) : this._buf = t;
+		else {
+			let n = parseInt(t);
+			n >= 0 && n <= 59 ? (this[this._active === "minute" ? "_m" : "_s"] = n, this._buf = "", this._next()) : (this._buf = String(e), e >= 6 && (this[this._active === "minute" ? "_m" : "_s"] = e, this._buf = "", this._next()));
+		}
+		this._emit();
+	}
+	_adjust(e) {
+		this._buf = "";
+		let t = this.ampm ? 12 : 23, n = this.ampm ? 1 : 0;
+		this._active === "hour" ? this._h = Math.min(t, Math.max(n, (this._h ?? (e > 0 ? n - 1 : t + 1)) + e)) : this._active === "minute" ? this._m = ((this._m ?? (e > 0 ? -1 : 60)) + e + 60) % 60 : this._active === "second" ? this._s = ((this._s ?? (e > 0 ? -1 : 60)) + e + 60) % 60 : this._active === "meridiem" && (this._mer = this._mer === "AM" ? "PM" : "AM"), this._emit();
+	}
+	_onKey(e) {
+		if (!(this.disabled || this.readonly)) {
+			if (e.key >= "0" && e.key <= "9") {
+				e.preventDefault(), e.stopPropagation(), this._active || this._setActive("hour"), this._digit(+e.key);
+				return;
+			}
+			if ((e.key === "a" || e.key === "A") && this.ampm && !e.metaKey) {
+				e.preventDefault(), e.stopPropagation(), this._mer = "AM", this._emit();
+				return;
+			}
+			if ((e.key === "p" || e.key === "P") && this.ampm && !e.metaKey) {
+				e.preventDefault(), e.stopPropagation(), this._mer = "PM", this._emit();
+				return;
+			}
+			switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), e.stopPropagation(), this._prev();
+					break;
+				case "ArrowRight":
+				case ":":
+					e.preventDefault(), e.stopPropagation(), this._next();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), e.stopPropagation(), this._active || this._setActive("hour"), this._adjust(1);
+					break;
+				case "ArrowDown":
+					e.preventDefault(), e.stopPropagation(), this._active || this._setActive("hour"), this._adjust(-1);
+					break;
+				case "Tab":
+					!e.shiftKey && this._canNext() ? (e.preventDefault(), e.stopPropagation(), this._next()) : e.shiftKey && this._canPrev() && (e.preventDefault(), e.stopPropagation(), this._prev());
+					break;
+				case "Backspace":
+				case "Delete":
+					e.preventDefault(), e.stopPropagation(), this._buf = "", this._active === "hour" ? this._h = null : this._active === "minute" ? this._m = null : this._active === "second" && (this._s = null);
+					break;
+				case "Escape":
+					e.preventDefault(), e.stopPropagation(), this.clear();
+					break;
+			}
+		}
+	}
+	_segText(e) {
+		let t = this._active === e;
+		return e === "meridiem" ? {
+			text: this._mer,
+			ph: !1
+		} : t && this._buf ? (e === "hour" && this.ampm, {
+			text: this._buf.padEnd(2, "_"),
+			ph: !1
+		}) : e === "hour" ? this._h === null ? {
+			text: "HH",
+			ph: !0
+		} : {
+			text: v(this._h),
+			ph: !1
+		} : e === "minute" ? this._m === null ? {
+			text: "MM",
+			ph: !0
+		} : {
+			text: v(this._m),
+			ph: !1
+		} : this._s === null ? {
+			text: "SS",
+			ph: !0
+		} : {
+			text: v(this._s),
+			ph: !1
+		};
+	}
+	render() {
+		let e = this._h !== null || this._m !== null;
+		return r`
+      ${this.label ? r`<label class="label ${this._focused ? "focused" : ""}">${this.label}</label>` : i}
+      <div class="container ${this._focused ? "focused" : ""}">
+        <div class="segments" tabindex=${this.disabled ? -1 : 0} role="group" aria-label=${this.label || "Time"}
+          @keydown=${this._onKey}
+          @focus=${() => {
+			this._focused = !0, this._active || this._setActive("hour");
+		}}
+          @blur=${(e) => {
+			this.shadowRoot?.contains(e.relatedTarget) || (this._focused = !1, this._active = null, this._buf = "");
+		}}
+        >
+          ${this._segs.map((e, t) => {
+			let { text: n, ph: a } = this._segText(e);
+			return r`${t > 0 && e !== "meridiem" ? r`<span class="sep">:</span>` : e === "meridiem" ? r`<span class="sep"> </span>` : i}<span
+              class=${u({
+				seg: !0,
+				active: this._active === e,
+				placeholder: a,
+				meridiem: e === "meridiem"
+			})}
+              @click=${(t) => {
+				t.stopPropagation(), this._setActive(e), (this.shadowRoot?.querySelector(".segments"))?.focus();
+			}}
+            >${n}</span>`;
+		})}
+        </div>
+        ${e && !this.disabled ? r`<button class="icon-btn" tabindex="-1" aria-label="Clear" @click=${(e) => {
+			e.stopPropagation(), this.clear();
+		}}>✕</button>` : i}
+      </div>
+      ${this.helperText ? r`<small class="helper">${this.helperText}</small>` : i}
+    `;
+	}
+};
+e([c({ type: String })], E.prototype, "value", void 0), e([c({ type: String })], E.prototype, "label", void 0), e([c({ type: Boolean })], E.prototype, "ampm", void 0), e([c({ type: Boolean })], E.prototype, "seconds", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "disabled", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "readonly", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "error", void 0), e([c({
+	type: String,
+	attribute: "helper-text"
+})], E.prototype, "helperText", void 0), e([l()], E.prototype, "_h", void 0), e([l()], E.prototype, "_m", void 0), e([l()], E.prototype, "_s", void 0), e([l()], E.prototype, "_mer", void 0), e([l()], E.prototype, "_active", void 0), e([l()], E.prototype, "_focused", void 0), e([l()], E.prototype, "_buf", void 0), E = e([s("flint-time-field")], E);
+var D = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.step = 30, this.ampm = !0;
+	}
+	static {
+		this.styles = o(p);
+	}
+	_items() {
+		let e = [];
+		for (let t = 0; t < 1440; t += this.step) {
+			let n = Math.floor(t / 60), r = t % 60;
+			e.push(b(n, r));
+		}
+		return e;
+	}
+	_label(e) {
+		return C(e, this.ampm);
+	}
+	_select(e) {
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onItemKeyDown(e, t) {
+		let n = this._items(), r = n.indexOf(t), i = -1;
+		if (e.key === "ArrowDown") e.preventDefault(), i = Math.min(r + 1, n.length - 1);
+		else if (e.key === "ArrowUp") e.preventDefault(), i = Math.max(r - 1, 0);
+		else if (e.key === "Home") e.preventDefault(), i = 0;
+		else if (e.key === "End") e.preventDefault(), i = n.length - 1;
+		else return;
+		i >= 0 && i !== r && (this._select(n[i]), this.updateComplete.then(() => {
+			let e = this.shadowRoot?.querySelectorAll(".item")[i];
+			e?.focus(), e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+		}));
+	}
+	updated() {
+		let e = this.shadowRoot?.querySelector(".selected");
+		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "center" });
+	}
+	render() {
+		return r`
+      <div class="clock" role="listbox" aria-label="Select time">
+        ${d(this._items(), (e) => e, (e) => r`
+          <button class=${u({
+			item: !0,
+			selected: e === this.value
+		})}
+            role="option" aria-selected=${e === this.value ? "true" : i}
+            @click=${() => this._select(e)}
+            @keydown=${(t) => this._onItemKeyDown(t, e)}
+          >${this._label(e)}</button>
+        `)}
+      </div>
+    `;
+	}
+};
+e([c({ type: String })], D.prototype, "value", void 0), e([c({ type: Number })], D.prototype, "step", void 0), e([c({ type: Boolean })], D.prototype, "ampm", void 0), D = e([s("flint-digital-clock")], D);
+var O = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.ampm = !0, this.seconds = !1;
+	}
+	static {
+		this.styles = o(m);
+	}
+	_t() {
+		return y(this.value) ?? {
+			h: 0,
+			m: 0,
+			s: 0
+		};
+	}
+	_set(e, t, n) {
+		let r = b(e, t, n);
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: r },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_colKeyDown(e, t) {
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+		e.preventDefault();
+		let n = this._t(), r = e.key === "ArrowDown" ? 1 : -1;
+		if (t === "h") if (this.ampm) {
+			let { hour: e, ampm: t } = x(n.h), i = (e - 1 + r + 12) % 12 + 1;
+			this._set(S(i, t), n.m, n.s);
+		} else this._set((n.h + r + 24) % 24, n.m, n.s);
+		else if (t === "m") this._set(n.h, (n.m + r + 60) % 60, n.s);
+		else if (t === "s") this._set(n.h, n.m, (n.s + r + 60) % 60);
+		else if (t === "mer") {
+			let { hour: e, ampm: t } = x(n.h);
+			this._set(S(e, t === "AM" ? "PM" : "AM"), n.m, n.s);
+		}
+	}
+	_col(e) {
+		let t = this._t(), n = x(t.h);
+		if (e === "mer") return r`
+        <div class="col" @keydown=${(e) => this._colKeyDown(e, "mer")}>
+          <div class="col-header">AM/PM</div>
+          ${["AM", "PM"].map((e) => r`
+            <button class=${u({
+			item: !0,
+			sel: n.ampm === e
+		})}
+              @click=${() => this._set(S(n.hour, e), t.m, t.s)}>${e}</button>
+          `)}
+          <div class="col-spacer"></div>
+        </div>
+      `;
+		let i = Array.from({ length: 12 }, (e, t) => t + 1), a = Array.from({ length: 24 }, (e, t) => t), o = Array.from({ length: 60 }, (e, t) => t);
+		if (e === "h") {
+			let e = this.ampm ? i : a, o = this.ampm ? n.hour : t.h;
+			return r`
+        <div class="col" @keydown=${(e) => this._colKeyDown(e, "h")}>
+          <div class="col-header">Hr</div>
+          ${e.map((e) => r`
+            <button class=${u({
+				item: !0,
+				sel: o === e
+			})}
+              @click=${() => {
+				let r = this.ampm ? S(e, n.ampm) : e;
+				this._set(r, t.m, t.s);
+			}}>${v(e)}</button>
+          `)}
+          <div class="col-spacer"></div>
+        </div>
+      `;
+		}
+		return e === "m" ? r`
+      <div class="col" @keydown=${(e) => this._colKeyDown(e, "m")}>
+        <div class="col-header">Min</div>
+        ${o.map((e) => r`
+          <button class=${u({
+			item: !0,
+			sel: t.m === e
+		})}
+            @click=${() => this._set(t.h, e, t.s)}>${v(e)}</button>
+        `)}
+        <div class="col-spacer"></div>
+      </div>
+    ` : r`
+      <div class="col" @keydown=${(e) => this._colKeyDown(e, "s")}>
+        <div class="col-header">Sec</div>
+        ${o.map((e) => r`
+          <button class=${u({
+			item: !0,
+			sel: t.s === e
+		})}
+            @click=${() => this._set(t.h, t.m, e)}>${v(e)}</button>
+        `)}
+        <div class="col-spacer"></div>
+      </div>
+    `;
+	}
+	updated() {
+		this.shadowRoot?.querySelectorAll(".col").forEach((e) => {
+			let t = e.querySelector(".sel");
+			t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "center" });
+		});
+	}
+	render() {
+		return r`
+      <div class="msdc">
+        ${this._col("h")}
+        ${this._col("m")}
+        ${this.seconds ? this._col("s") : i}
+        ${this.ampm ? this._col("mer") : i}
+      </div>
+    `;
+	}
+};
+e([c({ type: String })], O.prototype, "value", void 0), e([c({ type: Boolean })], O.prototype, "ampm", void 0), e([c({ type: Boolean })], O.prototype, "seconds", void 0), O = e([s("flint-multi-section-digital-clock")], O);
+var k = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.ampm = !0, this.seconds = !1, this.view = "hours", this._isDragging = !1, this._liveValue = "", this._onPointerDown = (e) => {
+			e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), this._isDragging = !0;
+			let { mx: t, my: n } = this._getSvgCoords(e);
+			this._liveValue = this._calcValue(t, n);
+			let r = y(this._liveValue);
+			r && this._emit(r.h, r.m, r.s);
+		}, this._onPointerMove = (e) => {
+			if (!this._isDragging) return;
+			let { mx: t, my: n } = this._getSvgCoords(e);
+			this._liveValue = this._calcValue(t, n);
+			let r = y(this._liveValue);
+			r && this._emit(r.h, r.m, r.s);
+		}, this._onPointerUp = (e) => {
+			if (!this._isDragging) return;
+			this._isDragging = !1;
+			let { mx: t, my: n } = this._getSvgCoords(e), r = this._calcValue(t, n);
+			this._liveValue = "";
+			let i = y(r);
+			i && this._emit(i.h, i.m, i.s), this.view === "hours" ? this._switchView("minutes") : this.view === "minutes" && this.seconds && this._switchView("seconds");
+		};
+	}
+	static {
+		this.styles = o(h);
+	}
+	get _t() {
+		return y(this.value) ?? {
+			h: 0,
+			m: 0,
+			s: 0
+		};
+	}
+	get _renderT() {
+		return y(this._isDragging && this._liveValue ? this._liveValue : this.value) ?? {
+			h: 0,
+			m: 0,
+			s: 0
+		};
+	}
+	_emit(e, t, n) {
+		let r = b(e, t, n);
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: r },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_switchView(e) {
+		this.view = e, this.dispatchEvent(new CustomEvent("flint-time-clock-view-change", {
+			detail: { view: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_getSvgCoords(e) {
+		let t = this.shadowRoot.querySelector("svg").getBoundingClientRect();
+		return {
+			mx: (e.clientX - t.left) * (280 / t.width),
+			my: (e.clientY - t.top) * (280 / t.height)
+		};
+	}
+	_calcValue(e, t) {
+		let n = T(e, t, 140, 140), r = this._t;
+		if (this.view === "hours") {
+			let i = Math.sqrt((e - 140) ** 2 + (t - 140) ** 2), a = !this.ampm && i < 82, o = Math.round(n / 30) % 12;
+			return a ? o = o === 0 ? 0 : o + 12 : (o ||= 12, this.ampm && (o = S(o, x(r.h).ampm))), b(o, r.m, r.s);
+		} else if (this.view === "minutes") {
+			let e = Math.round(n / 6) % 60;
+			return b(r.h, e, r.s);
+		} else {
+			let e = Math.round(n / 6) % 60;
+			return b(r.h, r.m, e);
+		}
+	}
+	_onClockKeyDown(e) {
+		let t = this._t, n = 0;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") e.preventDefault(), n = 1;
+		else if (e.key === "ArrowLeft" || e.key === "ArrowDown") e.preventDefault(), n = -1;
+		else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), this.view === "hours" ? this._switchView("minutes") : this.view === "minutes" && this.seconds && this._switchView("seconds");
+			return;
+		} else return;
+		if (this.view === "hours") if (this.ampm) {
+			let { hour: e, ampm: r } = x(t.h), i = (e - 1 + n + 12) % 12 + 1;
+			this._emit(S(i, r), t.m, t.s);
+		} else this._emit((t.h + n + 24) % 24, t.m, t.s);
+		else this.view === "minutes" ? this._emit(t.h, (t.m + n + 60) % 60, t.s) : this._emit(t.h, t.m, (t.s + n + 60) % 60);
+	}
+	_renderFace() {
+		let e = this._renderT, t = 0, n = 100;
+		if (this.view === "hours") {
+			let r;
+			r = this.ampm ? x(e.h).hour : e.h === 0 || e.h > 12 ? e.h % 12 : e.h, t = r / 12 * 360, n = this.ampm ? 100 : e.h === 0 || e.h > 12 ? 64 : 100;
+		} else this.view === "minutes" ? (t = e.m / 60 * 360, n = 100) : (t = e.s / 60 * 360, n = 100);
+		let o = (e) => (e - 90) * Math.PI / 180, s = 140 + n * Math.cos(o(t)), c = 140 + n * Math.sin(o(t)), l = [];
+		if (this.view === "hours") if (this.ampm) for (let e = 1; e <= 12; e++) l.push({
+			val: e,
+			label: String(e),
+			r: 100
+		});
+		else {
+			for (let e = 1; e <= 12; e++) l.push({
+				val: e,
+				label: String(e),
+				r: 100
+			});
+			for (let e = 13; e <= 24; e++) l.push({
+				val: e % 24,
+				label: e === 24 ? "00" : String(e),
+				r: 64,
+				inner: !0
+			});
+		}
+		else for (let e = 0; e < 12; e++) {
+			let t = e * 5;
+			l.push({
+				val: t,
+				label: v(t),
+				r: 100
+			});
+		}
+		let d = this.view === "hours" ? 12 : 60;
+		return r`
+      <svg width="280" height="280" viewBox="0 0 280 280" tabindex="0"
+        class=${this._isDragging ? "dragging" : ""}
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+        @pointerup=${this._onPointerUp}
+        @keydown=${this._onClockKeyDown}>
+        <circle cx=${140} cy=${140} r="125" class="face"></circle>
+        ${this.view === "hours" && !this.ampm ? a`<circle cx=${140} cy=${140} r="82" class="face-inner"></circle>` : i}
+        <line x1=${140} y1=${140} x2=${s} y2=${c} class="hand"></line>
+        <circle cx=${s} cy=${c} r="17" class="hand-tip"></circle>
+        <circle cx=${140} cy=${140} r="4" class="hand-center"></circle>
+        ${l.map((t) => {
+			let n = w(t.inner ? t.val % 12 : t.val, d, t.r, 140, 140), r = this.view === "hours" ? this.ampm ? x(e.h).hour === t.val : e.h === t.val : this.view === "minutes" ? e.m === t.val : e.s === t.val;
+			return a`
+          <circle cx=${n.x} cy=${n.y} r="17" class=${u({
+				"num-bg": !0,
+				selected: r
+			})}></circle>
+          <text x=${n.x} y=${n.y} dominant-baseline="central" class=${u({
+				num: !0,
+				selected: r,
+				"inner-label": !!t.inner
+			})}>${t.label}</text>
+        `;
+		})}
+      </svg>
+    `;
+	}
+	render() {
+		let e = this._t, { hour: t, ampm: n } = x(e.h), a = this.ampm ? v(t) : v(e.h);
+		return r`
+      <div class="clock-wrap">
+        <div class="clock-header">
+          <span class=${u({
+			"clock-seg": !0,
+			active: this.view === "hours"
+		})} @click=${() => this._switchView("hours")}>${a}</span>
+          <span class="clock-sep">:</span>
+          <span class=${u({
+			"clock-seg": !0,
+			active: this.view === "minutes"
+		})} @click=${() => this._switchView("minutes")}>${v(e.m)}</span>
+          ${this.seconds ? r`<span class="clock-sep">:</span><span class=${u({
+			"clock-seg": !0,
+			active: this.view === "seconds"
+		})} @click=${() => this._switchView("seconds")}>${v(e.s)}</span>` : i}
+          ${this.ampm ? r`<span class="clock-mer">${n}</span>` : i}
+        </div>
+        ${this.ampm ? r`
+          <div class="am-pm">
+            <button class=${u({
+			"am-pm-btn": !0,
+			sel: n === "AM"
+		})} @click=${() => {
+			let e = this._t;
+			this._emit(S(x(e.h).hour, "AM"), e.m, e.s);
+		}}>AM</button>
+            <button class=${u({
+			"am-pm-btn": !0,
+			sel: n === "PM"
+		})} @click=${() => {
+			let e = this._t;
+			this._emit(S(x(e.h).hour, "PM"), e.m, e.s);
+		}}>PM</button>
+          </div>
+        ` : i}
+        ${this._renderFace()}
+      </div>
+    `;
+	}
+};
+e([c({ type: String })], k.prototype, "value", void 0), e([c({ type: Boolean })], k.prototype, "ampm", void 0), e([c({ type: Boolean })], k.prototype, "seconds", void 0), e([c({ type: String })], k.prototype, "view", void 0), e([l()], k.prototype, "_isDragging", void 0), e([l()], k.prototype, "_liveValue", void 0), k = e([s("flint-time-clock")], k);
+var A = n`
+  :host { display:inline-block; font-family:var(--flint-font-family,'Inter',sans-serif); }
+  .popover-anchor { position:relative; display:inline-block; }
+  .click-away { display:none; position:fixed; inset:0; z-index:1399; }
+  .click-away.open { display:block; }
+  .popover {
+    position:absolute; top:calc(100% + 6px); left:0; z-index:1400;
+    background:var(--flint-surface-background,#fff);
+    border-radius:var(--flint-border-radius-xl,12px);
+    box-shadow:0 8px 24px -4px rgba(0,0,0,.18), 0 2px 8px -2px rgba(0,0,0,.1);
+    transform-origin:top left; transform:scale(.94) translateY(-4px);
+    opacity:0; visibility:hidden; pointer-events:none;
+    transition:transform .15s cubic-bezier(.4,0,.2,1), opacity .15s, visibility .15s;
+  }
+  .popover.open { transform:scale(1) translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
+  .actions {
+    display:flex; justify-content:flex-end; gap:8px;
+    padding:8px 12px 12px; border-top:1px solid var(--flint-border-color,#f3f4f6);
+  }
+  .btn { font-family:inherit; font-size:.875rem; font-weight:600; padding:6px 14px;
+    border:none; border-radius:6px; cursor:pointer; transition:background .12s; }
+  .btn-cancel { background:transparent; color:var(--flint-text-color-muted,#4b5563); }
+  .btn-cancel:hover { background:var(--flint-hover-color, rgba(0,0,0,.06)); }
+  .btn-ok { background:var(--flint-primary-color,#2563eb); color:var(--flint-text-color-on-primary, #fff); }
+  .btn-ok:hover { background:var(--flint-primary-color-hover,#2563eb); }
+`, j = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.label = "Time", this.ampm = !0, this.seconds = !1, this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._open = !1;
+	}
+	static {
+		this.styles = [A];
+	}
+	_commit(e) {
+		this.value = e, this.dispatchEvent(new CustomEvent("change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})), this._open = !1;
+	}
+	render() {
+		return r`
+      <div class="popover-anchor">
+        <flint-time-field .value=${this.value} .label=${this.label} .ampm=${this.ampm} ?seconds=${this.seconds}
+          ?disabled=${this.disabled} ?readonly=${this.readonly} ?error=${this.error} helper-text=${this.helperText}
+          @change=${(e) => this._commit(e.detail.value)}
+          @focus=${() => {
+			!this.disabled && !this.readonly && (this._open = !0);
+		}}
+        ></flint-time-field>
+        <div class="click-away ${this._open ? "open" : ""}" @click=${() => this._open = !1}></div>
+        <div class="popover ${this._open ? "open" : ""}" role="dialog" aria-label="Time picker">
+          <flint-multi-section-digital-clock .value=${this.value || b(12, 0)} .ampm=${this.ampm} ?seconds=${this.seconds}
+            @change=${(e) => {
+			this.value = e.detail.value;
+		}}
+          ></flint-multi-section-digital-clock>
+          <div class="actions">
+            <button class="btn btn-cancel" @click=${() => this._open = !1}>Cancel</button>
+            <button class="btn btn-ok" @click=${() => this._commit(this.value || b(12, 0))}>OK</button>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([c({ type: String })], j.prototype, "value", void 0), e([c({ type: String })], j.prototype, "label", void 0), e([c({ type: Boolean })], j.prototype, "ampm", void 0), e([c({ type: Boolean })], j.prototype, "seconds", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], j.prototype, "disabled", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], j.prototype, "readonly", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], j.prototype, "error", void 0), e([c({
+	type: String,
+	attribute: "helper-text"
+})], j.prototype, "helperText", void 0), e([l()], j.prototype, "_open", void 0), j = e([s("flint-desktop-time-picker")], j);
+var M = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.label = "Time", this.ampm = !0, this.seconds = !1, this.disabled = !1, this.error = !1, this.helperText = "", this._open = !1, this._pending = "", this._view = "hours";
+	}
+	static {
+		this.styles = [A];
+	}
+	render() {
+		return r`
+      <flint-time-field .value=${this.value} .label=${this.label} .ampm=${this.ampm} ?seconds=${this.seconds}
+        ?disabled=${this.disabled} ?error=${this.error} helper-text=${this.helperText} readonly
+        @focus=${() => {
+			this.disabled || (this._pending = this.value, this._view = "hours", this._open = !0);
+		}}
+        @change=${(e) => {
+			this.value = e.detail.value, this.dispatchEvent(new CustomEvent("change", {
+				detail: e.detail,
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+      ></flint-time-field>
+      <flint-dialog .open=${this._open} disable-backdrop-close @close=${() => this._open = !1} style="--flint-dialog-width:320px">
+        <flint-dialog-title>Select Time</flint-dialog-title>
+        <flint-dialog-content style="padding:12px;display:flex;justify-content:center;">
+          <flint-time-clock .value=${this._pending || this.value || b(12, 0)} .ampm=${this.ampm} ?seconds=${this.seconds} .view=${this._view}
+            @change=${(e) => {
+			this._pending = e.detail.value;
+		}}
+            @flint-time-clock-view-change=${(e) => {
+			this._view = e.detail.view;
+		}}
+          ></flint-time-clock>
+        </flint-dialog-content>
+        <flint-dialog-actions>
+          <button class="btn btn-cancel" @click=${() => {
+			this._pending = this.value, this._open = !1;
+		}}>Cancel</button>
+          <button class="btn btn-ok" @click=${() => {
+			let e = this._pending || this.value;
+			this.value = e, this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: e },
+				bubbles: !0,
+				composed: !0
+			})), this._open = !1;
+		}}>OK</button>
+        </flint-dialog-actions>
+      </flint-dialog>
+    `;
+	}
+};
+e([c({ type: String })], M.prototype, "value", void 0), e([c({ type: String })], M.prototype, "label", void 0), e([c({ type: Boolean })], M.prototype, "ampm", void 0), e([c({ type: Boolean })], M.prototype, "seconds", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], M.prototype, "disabled", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], M.prototype, "error", void 0), e([c({
+	type: String,
+	attribute: "helper-text"
+})], M.prototype, "helperText", void 0), e([l()], M.prototype, "_open", void 0), e([l()], M.prototype, "_pending", void 0), e([l()], M.prototype, "_view", void 0), M = e([s("flint-mobile-time-picker")], M);
+var N = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.ampm = !0, this.seconds = !1;
+	}
+	static {
+		this.styles = o(g);
+	}
+	render() {
+		return r`
+      <div class="surface">
+        <flint-multi-section-digital-clock .value=${this.value || b(12, 0)} .ampm=${this.ampm} ?seconds=${this.seconds}
+          @change=${(e) => {
+			this.value = e.detail.value, this.dispatchEvent(new CustomEvent("change", {
+				detail: e.detail,
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+        ></flint-multi-section-digital-clock>
+      </div>
+    `;
+	}
+};
+e([c({ type: String })], N.prototype, "value", void 0), e([c({ type: Boolean })], N.prototype, "ampm", void 0), e([c({ type: Boolean })], N.prototype, "seconds", void 0), N = e([s("flint-static-time-picker")], N);
+var P = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.label = "Time", this.variant = "desktop", this.ampm = !0, this.seconds = !1, this.disabled = !1, this.error = !1, this.helperText = "";
+	}
+	static {
+		this.styles = o(_);
+	}
+	get _v() {
+		return this.variant === "auto" ? window.matchMedia("(pointer:coarse)").matches ? "mobile" : "desktop" : this.variant;
+	}
+	_onChange(e) {
+		this.value = e.detail.value, this.dispatchEvent(new CustomEvent("change", {
+			detail: e.detail,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this._v;
+		return e === "static" ? r`<flint-static-time-picker .value=${this.value} .ampm=${this.ampm} ?seconds=${this.seconds} @change=${this._onChange}></flint-static-time-picker>` : e === "mobile" ? r`<flint-mobile-time-picker .value=${this.value} .label=${this.label} .ampm=${this.ampm} ?seconds=${this.seconds} ?disabled=${this.disabled} ?error=${this.error} helper-text=${this.helperText} @change=${this._onChange}></flint-mobile-time-picker>` : r`<flint-desktop-time-picker .value=${this.value} .label=${this.label} .ampm=${this.ampm} ?seconds=${this.seconds} ?disabled=${this.disabled} ?error=${this.error} helper-text=${this.helperText} @change=${this._onChange}></flint-desktop-time-picker>`;
+	}
+};
+e([c({ type: String })], P.prototype, "value", void 0), e([c({ type: String })], P.prototype, "label", void 0), e([c({ type: String })], P.prototype, "variant", void 0), e([c({ type: Boolean })], P.prototype, "ampm", void 0), e([c({ type: Boolean })], P.prototype, "seconds", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], P.prototype, "disabled", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], P.prototype, "error", void 0), e([c({
+	type: String,
+	attribute: "helper-text"
+})], P.prototype, "helperText", void 0), P = e([s("flint-time-picker")], P);
+//#endregion
+export { N as a, P as c, O as i, D as n, k as o, M as r, E as s, j as t };