@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/time-picker-JTcLcJuz.js

@@ -0,0 +1,810 @@
+import { t as e } from "./decorate-DknOJ8FJ.js";
+import { t } from "./form-associated-Do5uXckv.js";
+import "./icon-FvKeXi61.js";
+import "./button-DeQQlYds.js";
+import "./icon-button-CulnCZpZ.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s, state as c } from "lit/decorators.js";
+//#region src/components/time-picker/time-picker.css.ts
+var l = n`
+  :host {
+    display: inline-block;
+    color: var(--md-sys-color-on-surface, #1d1b20);
+    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);
+    user-select: none;
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([modal]) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  :host([modal][open]) {
+    pointer-events: auto;
+  }
+
+  :host([modal]:not([open])) {
+    display: none;
+  }
+
+  /* Scrim Backdrop for Modal */
+  .scrim {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.32);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([modal][open]) .scrim {
+    opacity: 1;
+  }
+
+  /* Picker Container / Surface */
+  .picker-surface {
+    background-color: var(--md-sys-color-surface-container-high, #ece6f0);
+    color: var(--md-sys-color-on-surface, #1d1b20);
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3));
+    max-width: 360px;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  :host(:not([modal])) .picker-surface {
+    box-shadow: var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3));
+    border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+    background-color: var(--md-sys-color-surface, #fef7ff);
+  }
+
+  /* Headline / Header */
+  .header {
+    width: 100%;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .headline {
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.1px;
+    line-height: 20px;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    margin: 0;
+  }
+
+  /* Time Display Input / Cards Row */
+  .time-display-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 24px;
+    width: 100%;
+  }
+
+  .time-card-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .time-card {
+    width: 96px;
+    height: 72px;
+    background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
+    color: var(--md-sys-color-on-surface, #1d1b20);
+    border-radius: var(--md-sys-shape-corner-medium, 8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 45px;
+    font-weight: 400;
+    line-height: 52px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+    box-sizing: border-box;
+    position: relative;
+    outline: none;
+  }
+
+  .time-card:focus-visible {
+    border-color: var(--md-sys-color-primary, #6750a4);
+  }
+
+  .time-card.active {
+    background-color: var(--md-sys-color-primary-container, #eaddff);
+    color: var(--md-sys-color-on-primary-container, #21005d);
+    border-color: var(--md-sys-color-primary, #6750a4);
+  }
+
+  .time-input {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    text-align: center;
+    font-size: 45px;
+    font-weight: 400;
+    line-height: 52px;
+    color: inherit;
+    font-family: inherit;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .time-card-label {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    text-transform: capitalize;
+  }
+
+  .time-separator {
+    font-size: 45px;
+    font-weight: 400;
+    line-height: 52px;
+    color: var(--md-sys-color-on-surface, #1d1b20);
+    margin: 0 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 20px;
+  }
+
+  /* Period Toggle (AM / PM) */
+  .period-toggle {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--md-sys-color-outline, #79747e);
+    border-radius: var(--md-sys-shape-corner-medium, 8px);
+    overflow: hidden;
+    height: 72px;
+    width: 48px;
+    margin-left: 4px;
+    box-sizing: border-box;
+  }
+
+  .period-button {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.15s, color 0.15s;
+    user-select: none;
+  }
+
+  .period-button:first-child {
+    border-bottom: 1px solid var(--md-sys-color-outline, #79747e);
+  }
+
+  .period-button.selected {
+    background-color: var(--md-sys-color-tertiary-container, #ffd8e4);
+    color: var(--md-sys-color-on-tertiary-container, #31111d);
+  }
+
+  .period-button:focus-visible {
+    background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
+  }
+
+  /* Clock Dial Surface */
+  .dial-container {
+    width: 256px;
+    height: 256px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    cursor: pointer;
+    margin: 8px 0;
+  }
+
+  .dial-center-pin {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-primary, #6750a4);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  .dial-hand {
+    position: absolute;
+    bottom: 50%;
+    left: 50%;
+    width: 2px;
+    background-color: var(--md-sys-color-primary, #6750a4);
+    transform-origin: bottom center;
+    z-index: 2;
+    pointer-events: none;
+    transition: height 0.15s cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .dial-selector-head {
+    position: absolute;
+    top: -24px;
+    left: -23px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-primary, #6750a4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .dial-inner-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-on-primary, #ffffff);
+  }
+
+  .dial-number {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface, #1d1b20);
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    pointer-events: none;
+    transition: color 0.15s ease;
+  }
+
+  .dial-number.small {
+    font-size: 13px;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+  }
+
+  .dial-number.selected {
+    color: var(--md-sys-color-on-primary, #ffffff);
+  }
+
+  /* Actions Row */
+  .actions-row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 16px;
+  }
+
+  .mode-switch-btn {
+    background: transparent;
+    border: none;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    transition: background-color 0.15s;
+  }
+
+  .mode-switch-btn:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+  }
+
+  .mode-switch-btn:focus-visible {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  .dialog-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+`, u = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.format = "12h", this.view = "dial", this.modal = !1, this.open = !1, this.headline = "Select time", this.returnValue = "", this.autoSwitchToMinute = !0, this.cancelLabel = "Cancel", this.confirmLabel = "OK", this.min = "", this.max = "", this.error = !1, this.errorText = "", this.activeField = "hour", this.selectedHour = 12, this.selectedMinute = 0, this.selectedPeriod = "AM", this.isDragging = !1, this.initialValue = "", this.handleDialPointerDown = (e) => {
+			this.disabled || (this.isDragging = !0, e.currentTarget.setPointerCapture(e.pointerId), this.updateDialFromPointer(e));
+		}, this.handleDialPointerMove = (e) => {
+			!this.isDragging || this.disabled || this.updateDialFromPointer(e);
+		}, this.handleDialPointerUp = (e) => {
+			!this.isDragging || this.disabled || (this.isDragging = !1, this.updateDialFromPointer(e), this.syncFormValue(), this.emitEvent("change", {
+				value: this.value,
+				hour: this.selectedHour,
+				minute: this.selectedMinute,
+				period: this.selectedPeriod,
+				formatted24: this.getFormatted24(),
+				formatted12: this.getFormatted12()
+			}), this.activeField === "hour" && this.autoSwitchToMinute && (this.activeField = "minute"));
+		}, this.handleHourInput = (e) => {
+			let t = e.target, n = parseInt(t.value, 10);
+			isNaN(n) || (n = this.format === "24h" ? Math.min(23, Math.max(0, n)) : Math.min(12, Math.max(1, n)), this.selectedHour = n, this.syncFormValue(), this.notifyInput(), t.value.length >= 2 && this.minuteInputElement && (this.minuteInputElement.focus(), this.minuteInputElement.select()));
+		}, this.handleMinuteInput = (e) => {
+			let t = e.target, n = parseInt(t.value, 10);
+			isNaN(n) || (n = Math.min(59, Math.max(0, n)), this.selectedMinute = n, this.syncFormValue(), this.notifyInput());
+		}, this.handleHourBlur = () => {
+			this.hourInputElement && (this.hourInputElement.value = this.selectedHour.toString().padStart(2, "0")), this.syncFormValue(), this.emitEvent("change", {
+				value: this.value,
+				hour: this.selectedHour,
+				minute: this.selectedMinute,
+				period: this.selectedPeriod
+			});
+		}, this.handleMinuteBlur = () => {
+			this.minuteInputElement && (this.minuteInputElement.value = this.selectedMinute.toString().padStart(2, "0")), this.syncFormValue(), this.emitEvent("change", {
+				value: this.value,
+				hour: this.selectedHour,
+				minute: this.selectedMinute,
+				period: this.selectedPeriod
+			});
+		};
+	}
+	static {
+		this.styles = [t.styles, l];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.initialValue = this.value, this.parseValue(this.value), this.syncFormValue(), this.validateInput();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this.value ? (this.parseValue(this.value), this.syncFormValue()) : this.setFormValue(null)), (e.has("value") || e.has("name") || e.has("disabled") || e.has("required") || e.has("min") || e.has("max") || e.has("format")) && (this.disabled ? this.setFormValue(null) : this.setFormValue(this.value || null), this.validateInput());
+	}
+	parseValue(e) {
+		if (!e || typeof e != "string") {
+			let e = /* @__PURE__ */ new Date(), t = e.getHours(), n = e.getMinutes(), r = "AM";
+			this.format === "12h" && (r = t >= 12 ? "PM" : "AM", t = t % 12 || 12), this.selectedHour = t, this.selectedMinute = n, this.selectedPeriod = r;
+			return;
+		}
+		let t = e.trim(), n = t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i), r = t.match(/^(\d{1,2}):(\d{2})$/);
+		if (n) {
+			let e = parseInt(n[1], 10), t = Math.min(59, Math.max(0, parseInt(n[2], 10))), r = n[3].toUpperCase();
+			this.format === "24h" ? (r === "PM" && e < 12 && (e += 12), r === "AM" && e === 12 && (e = 0)) : e = Math.min(12, Math.max(1, e)), this.selectedHour = e, this.selectedMinute = t, this.selectedPeriod = r;
+		} else if (r) {
+			let e = parseInt(r[1], 10), t = Math.min(59, Math.max(0, parseInt(r[2], 10)));
+			if (this.format === "12h") {
+				let t = e >= 12 ? "PM" : "AM";
+				e = e % 12 || 12, this.selectedPeriod = t;
+			} else e = Math.min(23, Math.max(0, e));
+			this.selectedHour = e, this.selectedMinute = t;
+		}
+	}
+	getFormattedTime() {
+		let e = this.selectedMinute.toString().padStart(2, "0");
+		return this.format === "24h" ? `${this.selectedHour.toString().padStart(2, "0")}:${e}` : `${this.selectedHour.toString().padStart(2, "0")}:${e} ${this.selectedPeriod}`;
+	}
+	getFormatted24() {
+		let e = this.selectedMinute.toString().padStart(2, "0"), t = this.selectedHour;
+		return this.format === "12h" && (this.selectedPeriod === "PM" && t < 12 && (t += 12), this.selectedPeriod === "AM" && t === 12 && (t = 0)), `${t.toString().padStart(2, "0")}:${e}`;
+	}
+	getFormatted12() {
+		let e = this.selectedMinute.toString().padStart(2, "0"), t = this.selectedHour, n = this.selectedPeriod;
+		return this.format === "24h" && (n = t >= 12 ? "PM" : "AM", t = t % 12 || 12), `${t.toString().padStart(2, "0")}:${e} ${n}`;
+	}
+	syncFormValue() {
+		let e = this.getFormattedTime();
+		this.value = e, this.disabled ? this.setFormValue(null) : this.setFormValue(e || null);
+	}
+	timeToMinutes(e) {
+		if (!e || typeof e != "string") return null;
+		let t = e.trim(), n = t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i), r = t.match(/^(\d{1,2}):(\d{2})$/);
+		if (n) {
+			let e = parseInt(n[1], 10), t = parseInt(n[2], 10), r = n[3].toUpperCase();
+			return r === "PM" && e < 12 && (e += 12), r === "AM" && e === 12 && (e = 0), e * 60 + t;
+		}
+		if (r) {
+			let e = parseInt(r[1], 10), t = parseInt(r[2], 10);
+			return e * 60 + t;
+		}
+		return null;
+	}
+	validateInput() {
+		if (this.disabled) {
+			this.setValidity({}), this.errorText || (this.error = !1);
+			return;
+		}
+		if (this.required && !this.value) {
+			this.setValidity({ valueMissing: !0 }, this.errorText || "A time is required"), this.error = !0;
+			return;
+		}
+		let e = this.timeToMinutes(this.getFormatted24());
+		if (this.min && e !== null) {
+			let t = this.timeToMinutes(this.min);
+			if (t !== null && e < t) {
+				this.setValidity({ rangeUnderflow: !0 }, this.errorText || `Time must be at or after ${this.min}`), this.error = !0;
+				return;
+			}
+		}
+		if (this.max && e !== null) {
+			let t = this.timeToMinutes(this.max);
+			if (t !== null && e > t) {
+				this.setValidity({ rangeOverflow: !0 }, this.errorText || `Time must be at or before ${this.max}`), this.error = !0;
+				return;
+			}
+		}
+		this.setValidity({}), this.errorText || (this.error = !1);
+	}
+	formDisabledCallback(e) {
+		this.disabled = e, this.syncFormValue(), this.validateInput();
+	}
+	formResetCallback() {
+		this.value = this.initialValue, this.parseValue(this.initialValue), this.syncFormValue(), this.activeField = "hour", this.validateInput();
+	}
+	reset() {
+		this.formResetCallback();
+	}
+	showModal() {
+		this.modal = !0, this.open = !0, this.emitEvent("open");
+	}
+	show() {
+		this.open = !0, this.emitEvent("open");
+	}
+	close(e) {
+		e !== void 0 && (this.returnValue = e), this.open = !1, this.emitEvent("close", { returnValue: this.returnValue });
+	}
+	confirm() {
+		this.syncFormValue();
+		let e = {
+			value: this.value,
+			hour: this.selectedHour,
+			minute: this.selectedMinute,
+			period: this.selectedPeriod,
+			formatted24: this.getFormatted24(),
+			formatted12: this.getFormatted12()
+		};
+		this.emitEvent("change", e), this.emitEvent("confirm", e), this.modal && this.close("confirm");
+	}
+	cancel() {
+		this.emitEvent("cancel"), this.modal && this.close("cancel");
+	}
+	toggleView() {
+		this.view = this.view === "dial" ? "input" : "dial";
+	}
+	setField(e) {
+		this.activeField = e;
+	}
+	setPeriod(e) {
+		this.selectedPeriod !== e && (this.selectedPeriod = e, this.syncFormValue(), this.notifyInput());
+	}
+	notifyInput() {
+		this.emitEvent("input", {
+			value: this.getFormattedTime(),
+			hour: this.selectedHour,
+			minute: this.selectedMinute,
+			period: this.selectedPeriod,
+			formatted24: this.getFormatted24(),
+			formatted12: this.getFormatted12()
+		});
+	}
+	updateDialFromPointer(e) {
+		if (!this.dialContainer) return;
+		let t = this.dialContainer.getBoundingClientRect(), n = t.left + t.width / 2, r = t.top + t.height / 2, i = e.clientX - n, a = e.clientY - r, o = 180 / Math.PI * Math.atan2(a, i) + 90;
+		o < 0 && (o += 360);
+		let s = Math.hypot(i, a);
+		if (this.activeField === "hour") {
+			if (this.format === "24h") {
+				let e = s < 80, t = Math.round(o / 30) % 12;
+				t === 0 && (t = 12), this.selectedHour = e ? t : t === 12 ? 0 : t + 12;
+			} else {
+				let e = Math.round(o / 30) % 12;
+				e === 0 && (e = 12), this.selectedHour = e;
+			}
+		} else {
+			let e = Math.round(o / 6) % 60;
+			this.selectedMinute = e;
+		}
+		this.notifyInput();
+	}
+	renderDialHand() {
+		let e = 0, t = 96;
+		this.activeField === "hour" ? this.format === "24h" ? this.selectedHour >= 1 && this.selectedHour <= 12 ? (e = this.selectedHour % 12 * 30, t = 64) : (e = (this.selectedHour === 0 ? 12 : this.selectedHour - 12) % 12 * 30, t = 98) : (e = this.selectedHour % 12 * 30, t = 96) : (e = this.selectedMinute * 6, t = 96);
+		let n = this.activeField === "minute" && this.selectedMinute % 5 != 0;
+		return r`
+      <div
+        class="dial-hand"
+        style="transform: rotate(${e}deg); height: ${t}px;"
+      >
+        <div class="dial-selector-head">
+          ${n ? r`<div class="dial-inner-dot"></div>` : i}
+        </div>
+      </div>
+    `;
+	}
+	renderDialNumbers() {
+		let e = [];
+		if (this.activeField === "hour") {
+			if (this.format === "24h") {
+				let t = [
+					12,
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					10,
+					11
+				];
+				for (let n = 0; n < 12; n++) {
+					let i = t[n] === 12 ? 0 : t[n] + 12, a = i.toString().padStart(2, "0"), o = (n * 30 - 90) * (Math.PI / 180), s = 128 + 98 * Math.cos(o), c = 128 + 98 * Math.sin(o), l = this.selectedHour === i;
+					e.push(r`
+            <span
+              class="dial-number small ${l ? "selected" : ""}"
+              style="left: ${s}px; top: ${c}px;"
+            >
+              ${a}
+            </span>
+          `);
+				}
+				let n = [
+					12,
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					10,
+					11
+				];
+				for (let t = 0; t < 12; t++) {
+					let i = n[t], a = i.toString(), o = (t * 30 - 90) * (Math.PI / 180), s = 128 + 64 * Math.cos(o), c = 128 + 64 * Math.sin(o), l = this.selectedHour === i;
+					e.push(r`
+            <span
+              class="dial-number ${l ? "selected" : ""}"
+              style="left: ${s}px; top: ${c}px;"
+            >
+              ${a}
+            </span>
+          `);
+				}
+			} else {
+				let t = [
+					12,
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					10,
+					11
+				];
+				for (let n = 0; n < 12; n++) {
+					let i = t[n], a = (n * 30 - 90) * (Math.PI / 180), o = 128 + 96 * Math.cos(a), s = 128 + 96 * Math.sin(a), c = this.selectedHour === i;
+					e.push(r`
+            <span
+              class="dial-number ${c ? "selected" : ""}"
+              style="left: ${o}px; top: ${s}px;"
+            >
+              ${i}
+            </span>
+          `);
+				}
+			}
+		} else for (let t = 0; t < 12; t++) {
+			let n = t * 5, i = n.toString().padStart(2, "0"), a = (t * 30 - 90) * (Math.PI / 180), o = 128 + 96 * Math.cos(a), s = 128 + 96 * Math.sin(a), c = this.selectedMinute === n;
+			e.push(r`
+          <span
+            class="dial-number ${c ? "selected" : ""}"
+            style="left: ${o}px; top: ${s}px;"
+          >
+            ${i}
+          </span>
+        `);
+		}
+		return e;
+	}
+	render() {
+		let e = this.selectedHour.toString().padStart(2, "0"), t = this.selectedMinute.toString().padStart(2, "0");
+		return r`
+      ${this.modal ? r`<div class="scrim" @click=${this.cancel}></div>` : i}
+
+      <div class="picker-surface" role="dialog" aria-modal=${this.modal ? "true" : "false"}>
+        <div class="header">
+          <h2 class="headline">${this.headline}</h2>
+        </div>
+
+        <div class="time-display-row">
+          <div class="time-card-wrapper">
+            ${this.view === "input" ? r`
+                  <div class="time-card ${this.activeField === "hour" ? "active" : ""}">
+                    <input
+                      id="hour-input"
+                      class="time-input"
+                      type="text"
+                      inputmode="numeric"
+                      maxlength="2"
+                      .value=${e}
+                      ?disabled=${this.disabled}
+                      @input=${this.handleHourInput}
+                      @blur=${this.handleHourBlur}
+                      @focus=${() => this.setField("hour")}
+                      aria-label="Hour"
+                    />
+                  </div>
+                ` : r`
+                  <button
+                    type="button"
+                    class="time-card ${this.activeField === "hour" ? "active" : ""}"
+                    ?disabled=${this.disabled}
+                    @click=${() => this.setField("hour")}
+                    aria-label="Select hour"
+                  >
+                    ${e}
+                  </button>
+                `}
+            ${this.view === "input" ? r`<span class="time-card-label">Hour</span>` : i}
+          </div>
+
+          <span class="time-separator" aria-hidden="true">:</span>
+
+          <div class="time-card-wrapper">
+            ${this.view === "input" ? r`
+                  <div class="time-card ${this.activeField === "minute" ? "active" : ""}">
+                    <input
+                      id="minute-input"
+                      class="time-input"
+                      type="text"
+                      inputmode="numeric"
+                      maxlength="2"
+                      .value=${t}
+                      ?disabled=${this.disabled}
+                      @input=${this.handleMinuteInput}
+                      @blur=${this.handleMinuteBlur}
+                      @focus=${() => this.setField("minute")}
+                      aria-label="Minute"
+                    />
+                  </div>
+                ` : r`
+                  <button
+                    type="button"
+                    class="time-card ${this.activeField === "minute" ? "active" : ""}"
+                    ?disabled=${this.disabled}
+                    @click=${() => this.setField("minute")}
+                    aria-label="Select minute"
+                  >
+                    ${t}
+                  </button>
+                `}
+            ${this.view === "input" ? r`<span class="time-card-label">Minute</span>` : i}
+          </div>
+
+          ${this.format === "12h" ? r`
+                <div class="period-toggle" role="group" aria-label="Period selector">
+                  <button
+                    type="button"
+                    class="period-button ${this.selectedPeriod === "AM" ? "selected" : ""}"
+                    @click=${() => this.setPeriod("AM")}
+                    aria-pressed=${this.selectedPeriod === "AM"}
+                  >
+                    AM
+                  </button>
+                  <button
+                    type="button"
+                    class="period-button ${this.selectedPeriod === "PM" ? "selected" : ""}"
+                    @click=${() => this.setPeriod("PM")}
+                    aria-pressed=${this.selectedPeriod === "PM"}
+                  >
+                    PM
+                  </button>
+                </div>
+              ` : i}
+        </div>
+
+        ${this.view === "dial" ? r`
+              <div
+                class="dial-container"
+                @pointerdown=${this.handleDialPointerDown}
+                @pointermove=${this.handleDialPointerMove}
+                @pointerup=${this.handleDialPointerUp}
+              >
+                <div class="dial-center-pin"></div>
+                ${this.renderDialHand()}
+                ${this.renderDialNumbers()}
+              </div>
+            ` : i}
+
+        <div class="actions-row">
+          <button
+            type="button"
+            class="mode-switch-btn"
+            aria-label=${this.view === "dial" ? "Switch to text input" : "Switch to clock dial"}
+            @click=${this.toggleView}
+          >
+            <md-icon name=${this.view === "dial" ? "keyboard" : "schedule"}></md-icon>
+          </button>
+
+          <div class="dialog-buttons">
+            <md-button variant="text" @click=${this.cancel}>${this.cancelLabel}</md-button>
+            <md-button variant="text" @click=${this.confirm}>${this.confirmLabel}</md-button>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([o({ type: String })], u.prototype, "value", void 0), e([o({ type: String })], u.prototype, "format", void 0), e([o({ type: String })], u.prototype, "view", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "modal", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "open", void 0), e([o({ type: String })], u.prototype, "headline", void 0), e([o({
+	type: String,
+	attribute: "return-value"
+})], u.prototype, "returnValue", void 0), e([o({
+	type: Boolean,
+	attribute: "auto-switch-to-minute"
+})], u.prototype, "autoSwitchToMinute", void 0), e([o({
+	type: String,
+	attribute: "cancel-label"
+})], u.prototype, "cancelLabel", void 0), e([o({
+	type: String,
+	attribute: "confirm-label"
+})], u.prototype, "confirmLabel", void 0), e([o({ type: String })], u.prototype, "min", void 0), e([o({ type: String })], u.prototype, "max", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "error", void 0), e([o({
+	type: String,
+	attribute: "error-text"
+})], u.prototype, "errorText", void 0), e([c()], u.prototype, "activeField", void 0), e([c()], u.prototype, "selectedHour", void 0), e([c()], u.prototype, "selectedMinute", void 0), e([c()], u.prototype, "selectedPeriod", void 0), e([c()], u.prototype, "isDragging", void 0), e([s(".dial-container")], u.prototype, "dialContainer", void 0), e([s("#hour-input")], u.prototype, "hourInputElement", void 0), e([s("#minute-input")], u.prototype, "minuteInputElement", void 0), u = e([a("md-time-picker")], u);
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=time-picker-JTcLcJuz.js.map