@francofantomius/material-components 1.0.1 → 1.1.0

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

@@ -0,0 +1,785 @@
+import { t as a } from "./decorate-DXuynaiA.js";
+import { t as x } from "./form-associated-Cty_ZaS9.js";
+import "./icon-DrNqcNEL.js";
+import "./button-D2vn7kJ8.js";
+import "./icon-button-BQz73GLa.js";
+import { css as M, html as d, nothing as m } from "lit";
+import { customElement as $, property as p, query as y, state as f } from "lit/decorators.js";
+var w = M`
+  :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;
+  }
+`, r = class extends x {
+  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.activeField = "hour", this.selectedHour = 12, this.selectedMinute = 0, this.selectedPeriod = "AM", this.isDragging = !1, this.handleDialPointerDown = (t) => {
+      this.disabled || (this.isDragging = !0, t.currentTarget.setPointerCapture(t.pointerId), this.updateDialFromPointer(t));
+    }, this.handleDialPointerMove = (t) => {
+      !this.isDragging || this.disabled || this.updateDialFromPointer(t);
+    }, this.handleDialPointerUp = (t) => {
+      !this.isDragging || this.disabled || (this.isDragging = !1, this.updateDialFromPointer(t), 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 = (t) => {
+      const n = t.target;
+      let s = parseInt(n.value, 10);
+      isNaN(s) || (this.format === "24h" ? s = Math.min(23, Math.max(0, s)) : s = Math.min(12, Math.max(1, s)), this.selectedHour = s, this.syncFormValue(), this.notifyInput(), n.value.length >= 2 && this.minuteInputElement && (this.minuteInputElement.focus(), this.minuteInputElement.select()));
+    }, this.handleMinuteInput = (t) => {
+      const n = t.target;
+      let s = parseInt(n.value, 10);
+      isNaN(s) || (s = Math.min(59, Math.max(0, s)), this.selectedMinute = s, 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 = [x.styles, w];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.parseValue(this.value), this.syncFormValue();
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("value") && (this.parseValue(this.value), this.syncFormValue());
+  }
+  parseValue(e) {
+    if (!e || typeof e != "string") {
+      const i = /* @__PURE__ */ new Date();
+      let l = i.getHours();
+      const o = i.getMinutes();
+      let u = "AM";
+      this.format === "12h" && (u = l >= 12 ? "PM" : "AM", l = l % 12 || 12), this.selectedHour = l, this.selectedMinute = o, this.selectedPeriod = u;
+      return;
+    }
+    const t = e.trim(), n = t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i), s = t.match(/^(\d{1,2}):(\d{2})$/);
+    if (n) {
+      let i = parseInt(n[1], 10);
+      const l = Math.min(59, Math.max(0, parseInt(n[2], 10))), o = n[3].toUpperCase();
+      this.format === "24h" ? (o === "PM" && i < 12 && (i += 12), o === "AM" && i === 12 && (i = 0)) : i = Math.min(12, Math.max(1, i)), this.selectedHour = i, this.selectedMinute = l, this.selectedPeriod = o;
+    } else if (s) {
+      let i = parseInt(s[1], 10);
+      const l = Math.min(59, Math.max(0, parseInt(s[2], 10)));
+      if (this.format === "12h") {
+        const o = i >= 12 ? "PM" : "AM";
+        i = i % 12 || 12, this.selectedPeriod = o;
+      } else i = Math.min(23, Math.max(0, i));
+      this.selectedHour = i, this.selectedMinute = l;
+    }
+  }
+  getFormattedTime() {
+    const 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() {
+    const e = this.selectedMinute.toString().padStart(2, "0");
+    let 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() {
+    const e = this.selectedMinute.toString().padStart(2, "0");
+    let 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() {
+    const e = this.getFormattedTime();
+    this.value = e, this.setFormValue(e);
+  }
+  formResetCallback() {
+    this.parseValue(""), this.syncFormValue(), this.activeField = "hour";
+  }
+  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();
+    const 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;
+    const t = this.dialContainer.getBoundingClientRect(), n = t.left + t.width / 2, s = t.top + t.height / 2, i = e.clientX - n, l = e.clientY - s;
+    let o = Math.atan2(l, i) * (180 / Math.PI) + 90;
+    o < 0 && (o += 360);
+    const u = Math.hypot(i, l);
+    if (this.activeField === "hour")
+      if (this.format === "24h") {
+        const c = u < 80;
+        let h = Math.round(o / 30) % 12;
+        h === 0 && (h = 12), c ? this.selectedHour = h : this.selectedHour = h === 12 ? 0 : h + 12;
+      } else {
+        let c = Math.round(o / 30) % 12;
+        c === 0 && (c = 12), this.selectedHour = c;
+      }
+    else {
+      const c = Math.round(o / 6) % 60;
+      this.selectedMinute = c;
+    }
+    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);
+    const n = this.activeField === "minute" && this.selectedMinute % 5 !== 0;
+    return d`
+      <div
+        class="dial-hand"
+        style="transform: rotate(${e}deg); height: ${t}px;"
+      >
+        <div class="dial-selector-head">
+          ${n ? d`<div class="dial-inner-dot"></div>` : m}
+        </div>
+      </div>
+    `;
+  }
+  renderDialNumbers() {
+    const t = [];
+    if (this.activeField === "hour")
+      if (this.format === "24h") {
+        const s = [
+          12,
+          1,
+          2,
+          3,
+          4,
+          5,
+          6,
+          7,
+          8,
+          9,
+          10,
+          11
+        ];
+        for (let o = 0; o < 12; o++) {
+          const u = s[o] === 12 ? 0 : s[o] + 12, c = u.toString().padStart(2, "0"), h = (o * 30 - 90) * (Math.PI / 180), v = 128 + 98 * Math.cos(h), g = 128 + 98 * Math.sin(h), b = this.selectedHour === u;
+          t.push(d`
+            <span
+              class="dial-number small ${b ? "selected" : ""}"
+              style="left: ${v}px; top: ${g}px;"
+            >
+              ${c}
+            </span>
+          `);
+        }
+        const i = 64, l = [
+          12,
+          1,
+          2,
+          3,
+          4,
+          5,
+          6,
+          7,
+          8,
+          9,
+          10,
+          11
+        ];
+        for (let o = 0; o < 12; o++) {
+          const u = l[o], c = u.toString(), h = (o * 30 - 90) * (Math.PI / 180), v = 128 + i * Math.cos(h), g = 128 + i * Math.sin(h), b = this.selectedHour === u;
+          t.push(d`
+            <span
+              class="dial-number ${b ? "selected" : ""}"
+              style="left: ${v}px; top: ${g}px;"
+            >
+              ${c}
+            </span>
+          `);
+        }
+      } else {
+        const s = [
+          12,
+          1,
+          2,
+          3,
+          4,
+          5,
+          6,
+          7,
+          8,
+          9,
+          10,
+          11
+        ];
+        for (let i = 0; i < 12; i++) {
+          const l = s[i], o = (i * 30 - 90) * (Math.PI / 180), u = 128 + 96 * Math.cos(o), c = 128 + 96 * Math.sin(o), h = this.selectedHour === l;
+          t.push(d`
+            <span
+              class="dial-number ${h ? "selected" : ""}"
+              style="left: ${u}px; top: ${c}px;"
+            >
+              ${l}
+            </span>
+          `);
+        }
+      }
+    else
+      for (let s = 0; s < 12; s++) {
+        const i = s * 5, l = i.toString().padStart(2, "0"), o = (s * 30 - 90) * (Math.PI / 180), u = 128 + 96 * Math.cos(o), c = 128 + 96 * Math.sin(o), h = this.selectedMinute === i;
+        t.push(d`
+          <span
+            class="dial-number ${h ? "selected" : ""}"
+            style="left: ${u}px; top: ${c}px;"
+          >
+            ${l}
+          </span>
+        `);
+      }
+    return t;
+  }
+  render() {
+    const e = this.selectedHour.toString().padStart(2, "0"), t = this.selectedMinute.toString().padStart(2, "0");
+    return d`
+      ${this.modal ? d`<div class="scrim" @click=${this.cancel}></div>` : m}
+
+      <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" ? d`
+                  <div class="time-card ${this.activeField === "hour" ? "active" : ""}">
+                    <input
+                      id="hour-input"
+                      class="time-input"
+                      type="text"
+                      inputmode="numeric"
+                      maxlength="2"
+                      .value=${e}
+                      @input=${this.handleHourInput}
+                      @blur=${this.handleHourBlur}
+                      @focus=${() => this.setField("hour")}
+                      aria-label="Hour"
+                    />
+                  </div>
+                ` : d`
+                  <button
+                    type="button"
+                    class="time-card ${this.activeField === "hour" ? "active" : ""}"
+                    @click=${() => this.setField("hour")}
+                    aria-label="Select hour"
+                  >
+                    ${e}
+                  </button>
+                `}
+            ${this.view === "input" ? d`<span class="time-card-label">Hour</span>` : m}
+          </div>
+
+          <span class="time-separator" aria-hidden="true">:</span>
+
+          <div class="time-card-wrapper">
+            ${this.view === "input" ? d`
+                  <div class="time-card ${this.activeField === "minute" ? "active" : ""}">
+                    <input
+                      id="minute-input"
+                      class="time-input"
+                      type="text"
+                      inputmode="numeric"
+                      maxlength="2"
+                      .value=${t}
+                      @input=${this.handleMinuteInput}
+                      @blur=${this.handleMinuteBlur}
+                      @focus=${() => this.setField("minute")}
+                      aria-label="Minute"
+                    />
+                  </div>
+                ` : d`
+                  <button
+                    type="button"
+                    class="time-card ${this.activeField === "minute" ? "active" : ""}"
+                    @click=${() => this.setField("minute")}
+                    aria-label="Select minute"
+                  >
+                    ${t}
+                  </button>
+                `}
+            ${this.view === "input" ? d`<span class="time-card-label">Minute</span>` : m}
+          </div>
+
+          ${this.format === "12h" ? d`
+                <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>
+              ` : m}
+        </div>
+
+        ${this.view === "dial" ? d`
+              <div
+                class="dial-container"
+                @pointerdown=${this.handleDialPointerDown}
+                @pointermove=${this.handleDialPointerMove}
+                @pointerup=${this.handleDialPointerUp}
+              >
+                <div class="dial-center-pin"></div>
+                ${this.renderDialHand()}
+                ${this.renderDialNumbers()}
+              </div>
+            ` : m}
+
+        <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>
+    `;
+  }
+};
+a([p({ type: String })], r.prototype, "value", void 0);
+a([p({ type: String })], r.prototype, "format", void 0);
+a([p({ type: String })], r.prototype, "view", void 0);
+a([p({
+  type: Boolean,
+  reflect: !0
+})], r.prototype, "modal", void 0);
+a([p({
+  type: Boolean,
+  reflect: !0
+})], r.prototype, "open", void 0);
+a([p({ type: String })], r.prototype, "headline", void 0);
+a([p({
+  type: String,
+  attribute: "return-value"
+})], r.prototype, "returnValue", void 0);
+a([p({
+  type: Boolean,
+  attribute: "auto-switch-to-minute"
+})], r.prototype, "autoSwitchToMinute", void 0);
+a([p({
+  type: String,
+  attribute: "cancel-label"
+})], r.prototype, "cancelLabel", void 0);
+a([p({
+  type: String,
+  attribute: "confirm-label"
+})], r.prototype, "confirmLabel", void 0);
+a([f()], r.prototype, "activeField", void 0);
+a([f()], r.prototype, "selectedHour", void 0);
+a([f()], r.prototype, "selectedMinute", void 0);
+a([f()], r.prototype, "selectedPeriod", void 0);
+a([f()], r.prototype, "isDragging", void 0);
+a([y(".dial-container")], r.prototype, "dialContainer", void 0);
+a([y("#hour-input")], r.prototype, "hourInputElement", void 0);
+a([y("#minute-input")], r.prototype, "minuteInputElement", void 0);
+r = a([$("md-time-picker")], r);
+export {
+  r as t
+};
+
+//# sourceMappingURL=time-picker-CZnb2sWz.js.map