@francofantomius/material-components 1.1.1 → 1.2.0

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

@@ -1,785 +0,0 @@
-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