@francofantomius/material-components 1.0.1 → 1.1.0

package/dist/chunks/date-picker-DJeHi4w-.js

@@ -0,0 +1,777 @@
+import { t as i } from "./decorate-DXuynaiA.js";
+import { t as $ } from "./form-associated-Cty_ZaS9.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import "./button-D2vn7kJ8.js";
+import "./icon-button-BQz73GLa.js";
+import { css as C, html as n, nothing as x } from "lit";
+import { customElement as T, property as s, query as A, state as y } from "lit/decorators.js";
+var z = C`
+  :host {
+    display: inline-block;
+    font-family: var(--md-sys-typescale-font-family, Roboto, sans-serif);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    box-sizing: border-box;
+  }
+
+  :host([variant="modal"]) {
+    display: contents;
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  /* --- Picker Surface Container --- */
+  .picker-surface {
+    display: flex;
+    flex-direction: column;
+    width: 328px;
+    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+    overflow: hidden;
+    position: relative;
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    user-select: none;
+    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([variant="docked"]) .picker-surface {
+    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  /* --- Header --- */
+  .header {
+    padding: 20px 24px 16px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    position: relative;
+  }
+
+  .header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .subhead {
+    font-size: var(--md-sys-typescale-label-medium-size, 12px);
+    line-height: 16px;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+
+  .headline {
+    font-size: var(--md-sys-typescale-headline-large-size, 28px);
+    line-height: 36px;
+    font-weight: 400;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    word-break: break-word;
+  }
+
+  .headline.placeholder {
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    font-size: 24px;
+  }
+
+  .header-divider {
+    height: 1px;
+    background-color: var(--md-sys-color-outline-variant, #CAC4D0);
+    margin: 0 16px;
+  }
+
+  /* --- Navigation Controls --- */
+  .navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px 4px 16px;
+  }
+
+  .month-year-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: none;
+    padding: 8px 12px;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    font-family: inherit;
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    cursor: pointer;
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .month-year-btn:hover {
+    background-color: rgba(73, 69, 79, 0.08);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  .month-year-btn .dropdown-icon {
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .month-year-btn.open .dropdown-icon {
+    transform: rotate(180deg);
+  }
+
+  .nav-arrows {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* --- Calendar View --- */
+  .calendar-content {
+    padding: 0 12px 12px 12px;
+  }
+
+  .weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    padding: 8px 0;
+  }
+
+  .weekday {
+    font-size: var(--md-sys-typescale-body-small-size, 12px);
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    row-gap: 4px;
+  }
+
+  .day-cell {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Range Highlight Band */
+  .range-band {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--md-sys-color-primary-container, #EADDFF);
+    z-index: 0;
+  }
+
+  .day-cell.range-start .range-band {
+    left: 50%;
+  }
+
+  .day-cell.range-end .range-band {
+    right: 50%;
+  }
+
+  .day-cell.range-start.range-end .range-band {
+    display: none;
+  }
+
+  /* Day Button */
+  .day-btn {
+    position: relative;
+    z-index: 1;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    font-family: inherit;
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+  }
+
+  .day-btn:hover:not(.disabled):not(.selected):not(.range-start):not(.range-end) {
+    background-color: rgba(103, 80, 164, 0.08);
+  }
+
+  /* Today state */
+  .day-btn.today {
+    border-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-primary, #6750A4);
+    font-weight: 500;
+  }
+
+  /* In range middle state */
+  .day-cell.in-range .day-btn {
+    color: var(--md-sys-color-on-primary-container, #21005D);
+    background-color: transparent;
+  }
+
+  /* Selected / Range Start / Range End */
+  .day-btn.selected,
+  .day-btn.range-start,
+  .day-btn.range-end {
+    background-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-on-primary, #FFFFFF);
+    font-weight: 500;
+  }
+
+  .day-btn.disabled {
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    opacity: 0.38;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* --- Year Picker View --- */
+  .year-picker-view {
+    height: 280px;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding: 12px 16px;
+    align-content: start;
+  }
+
+  .year-btn {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    padding: 10px 0;
+    font-family: inherit;
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .year-btn:hover:not(.selected) {
+    background-color: rgba(103, 80, 164, 0.08);
+  }
+
+  .year-btn.selected {
+    background-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-on-primary, #FFFFFF);
+    font-weight: 500;
+  }
+
+  .year-btn.current {
+    border-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  /* --- Actions Footer --- */
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 8px 16px 16px 16px;
+  }
+
+  /* --- Supporting / Error Text --- */
+  .supporting-text {
+    padding: 4px 16px 0;
+    font-size: var(--md-sys-typescale-body-small-size, 12px);
+    line-height: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host([error]) .supporting-text {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* --- Modal Scrim & Dialog Container --- */
+  dialog {
+    padding: 0;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+    background: transparent;
+    color: inherit;
+    box-shadow: var(--md-sys-elevation-level3, 0px 1px 3px 0px rgba(0, 0, 0, 0.30));
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    z-index: 1000;
+    overflow: visible;
+  }
+
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.32);
+    backdrop-filter: blur(2px);
+    animation: md-fade-in 150ms ease-out forwards;
+  }
+
+  dialog[open] {
+    animation: md-dialog-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;
+  }
+
+  @keyframes md-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes md-dialog-in {
+    from {
+      opacity: 0;
+      transform: scale(0.92);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`, V = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], N = [
+  "S",
+  "M",
+  "T",
+  "W",
+  "T",
+  "F",
+  "S"
+], B = [
+  "M",
+  "T",
+  "W",
+  "T",
+  "F",
+  "S",
+  "S"
+];
+function M(r) {
+  return r < 10 ? `0${r}` : `${r}`;
+}
+function E(r, e, t) {
+  return `${r}-${M(e + 1)}-${M(t)}`;
+}
+function p(r) {
+  if (!r || typeof r != "string") return null;
+  const e = r.split("-");
+  if (e.length !== 3) return null;
+  const t = parseInt(e[0], 10), l = parseInt(e[1], 10) - 1, o = parseInt(e[2], 10);
+  return isNaN(t) || isNaN(l) || isNaN(o) ? null : {
+    year: t,
+    month: l,
+    day: o
+  };
+}
+function _() {
+  const r = /* @__PURE__ */ new Date();
+  return E(r.getFullYear(), r.getMonth(), r.getDate());
+}
+function I(r) {
+  const e = p(r);
+  return e ? new Date(e.year, e.month, e.day).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  }) : "";
+}
+function v(r) {
+  const e = p(r);
+  return e ? new Date(e.year, e.month, e.day).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  }) : "";
+}
+var a = class extends $ {
+  constructor(...e) {
+    super(...e), this.variant = "docked", this.range = !1, this.value = "", this.startDate = "", this.endDate = "", this.min = "", this.max = "", this.label = "", this.headline = "", this.open = !1, this.error = !1, this.errorText = "", this.supportingText = "", this.firstDayOfWeek = 0, this.showActions = !1, this.viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this.viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this.viewMode = "calendar", this.hoverDate = null, this.selectingEnd = !1, this.handlePrevMonth = () => {
+      this.viewMonth === 0 ? (this.viewMonth = 11, this.viewYear -= 1) : this.viewMonth -= 1;
+    }, this.handleNextMonth = () => {
+      this.viewMonth === 11 ? (this.viewMonth = 0, this.viewYear += 1) : this.viewMonth += 1;
+    }, this.toggleViewMode = () => {
+      this.viewMode = this.viewMode === "calendar" ? "year" : "calendar";
+    }, this.selectYear = (t) => {
+      this.viewYear = t, this.viewMode = "calendar";
+    }, this.handleDayClick = (t) => {
+      if (!this.isDateDisabled(t)) {
+        if (!this.range) {
+          this.value = t, this.setFormValue(this.value), this.emitEvent("input", { value: this.value }), this.emitEvent("change", { value: this.value }), this.emitEvent("select", {
+            date: t,
+            type: "single"
+          });
+          return;
+        }
+        !this.selectingEnd || !this.startDate ? (this.startDate = t, this.endDate = "", this.value = t, this.selectingEnd = !0, this.setFormValue(this.value), this.emitEvent("select", {
+          date: t,
+          type: "start"
+        }), this.emitEvent("input", { value: this.value })) : t < this.startDate ? (this.startDate = t, this.endDate = "", this.value = t, this.selectingEnd = !0, this.setFormValue(this.value), this.emitEvent("select", {
+          date: t,
+          type: "start"
+        }), this.emitEvent("input", { value: this.value })) : (this.endDate = t, this.value = `${this.startDate}/${this.endDate}`, this.selectingEnd = !1, this.setFormValue(this.value), this.emitEvent("select", {
+          date: t,
+          type: "end"
+        }), this.emitEvent("input", { value: this.value }), this.emitEvent("change", {
+          value: this.value,
+          startDate: this.startDate,
+          endDate: this.endDate
+        }));
+      }
+    }, this.handleDayMouseEnter = (t) => {
+      this.range && this.selectingEnd && this.startDate && (this.hoverDate = t);
+    }, this.handleDayMouseLeave = () => {
+      this.hoverDate = null;
+    }, this.handleCancel = (t) => {
+      t && t.preventDefault(), this.emitEvent("cancel"), this.close();
+    }, this.handleConfirm = () => {
+      this.emitEvent("change", {
+        value: this.value,
+        startDate: this.startDate,
+        endDate: this.endDate
+      }), this.close();
+    };
+  }
+  static {
+    this.styles = [$.styles, z];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.syncInitialState(), this.setFormValue(this.value);
+  }
+  willUpdate(e) {
+    if (super.willUpdate(e), e.has("value") && (this.handleValueChange(), this.setFormValue(this.value), this.validateInput()), (e.has("startDate") || e.has("endDate")) && this.range) {
+      const t = this.startDate && this.endDate ? `${this.startDate}/${this.endDate}` : this.startDate || "";
+      this.value !== t && (this.value = t, this.setFormValue(this.value));
+    }
+    (e.has("min") || e.has("max") || e.has("required")) && this.validateInput();
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && this.variant === "modal" && (this.open ? (this.dialogElement && !this.dialogElement.open && this.dialogElement.showModal(), this.emitEvent("open")) : (this.dialogElement && this.dialogElement.open && this.dialogElement.close(), this.emitEvent("close")));
+  }
+  syncInitialState() {
+    const e = p(this.startDate || (this.range ? this.value.split("/")[0] ?? "" : this.value));
+    if (e)
+      this.viewYear = e.year, this.viewMonth = e.month;
+    else {
+      const t = /* @__PURE__ */ new Date();
+      this.viewYear = t.getFullYear(), this.viewMonth = t.getMonth();
+    }
+    if (this.range && this.value && this.value.includes("/")) {
+      const [t, l] = this.value.split("/");
+      this.startDate = t || "", this.endDate = l || "";
+    }
+  }
+  handleValueChange() {
+    if (this.range)
+      if (this.value.includes("/")) {
+        const [e, t] = this.value.split("/");
+        this.startDate = e || "", this.endDate = t || "";
+      } else
+        this.startDate = this.value, this.endDate = "";
+    else {
+      const e = p(this.value);
+      e && (this.viewYear = e.year, this.viewMonth = e.month);
+    }
+  }
+  formResetCallback() {
+    this.value = "", this.startDate = "", this.endDate = "", this.error = !1, this.selectingEnd = !1, this.setFormValue(null);
+    const e = /* @__PURE__ */ new Date();
+    this.viewYear = e.getFullYear(), this.viewMonth = e.getMonth(), this.viewMode = "calendar";
+  }
+  showModal() {
+    this.open = !0;
+  }
+  show() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1;
+  }
+  reset() {
+    this.formResetCallback();
+  }
+  validateInput() {
+    if (this.required && !this.value) {
+      this.setValidity({ valueMissing: !0 }, this.errorText || "A date is required"), this.error = !0;
+      return;
+    }
+    if (this.min && this.value) {
+      const e = this.range ? this.startDate : this.value;
+      if (e && e < this.min) {
+        this.setValidity({ rangeUnderflow: !0 }, this.errorText || `Date must be after ${this.min}`), this.error = !0;
+        return;
+      }
+    }
+    if (this.max && this.value) {
+      const e = this.range ? this.endDate || this.startDate : this.value;
+      if (e && e > this.max) {
+        this.setValidity({ rangeOverflow: !0 }, this.errorText || `Date must be before ${this.max}`), this.error = !0;
+        return;
+      }
+    }
+    this.setValidity({}), this.errorText || (this.error = !1);
+  }
+  isDateDisabled(e) {
+    return !!(this.disabled || this.min && e < this.min || this.max && e > this.max);
+  }
+  getFormattedHeadline() {
+    if (this.headline) return this.headline;
+    if (!this.range)
+      return this.value ? I(this.value) : "Select date";
+    if (!this.startDate && !this.endDate) return "Select range";
+    if (this.startDate && !this.endDate) return `${v(this.startDate)} – End date`;
+    if (this.startDate && this.endDate) {
+      const e = p(this.startDate), t = p(this.endDate);
+      return e && t && e.year === t.year ? `${v(this.startDate)} – ${v(this.endDate)}, ${e.year}` : `${v(this.startDate)} – ${v(this.endDate)}`;
+    }
+    return "Select range";
+  }
+  renderCalendarGrid() {
+    const e = this.viewYear, t = this.viewMonth, l = new Date(e, t + 1, 0).getDate();
+    let o = new Date(e, t, 1).getDay();
+    this.firstDayOfWeek === 1 && (o = (o + 6) % 7);
+    const d = this.firstDayOfWeek === 1 ? B : N, D = _(), u = [];
+    for (let c = 0; c < o; c++) u.push(n`<div class="day-cell empty"></div>`);
+    for (let c = 1; c <= l; c++) {
+      const h = E(e, t, c), F = h === D, w = this.isDateDisabled(h);
+      let m = !1, g = !1, f = !1, k = !1;
+      if (!this.range) m = this.value === h;
+      else {
+        const b = this.endDate || (this.selectingEnd ? this.hoverDate : null);
+        g = this.startDate === h, f = b === h, m = g || f, this.startDate && b && b > this.startDate && (k = h >= this.startDate && h <= b);
+      }
+      const S = [
+        "day-cell",
+        g ? "range-start" : "",
+        f ? "range-end" : "",
+        k ? "in-range" : ""
+      ].filter(Boolean).join(" "), Y = [
+        "day-btn",
+        m ? "selected" : "",
+        F ? "today" : "",
+        g ? "range-start" : "",
+        f ? "range-end" : "",
+        w ? "disabled" : ""
+      ].filter(Boolean).join(" ");
+      u.push(n`
+        <div class=${S}>
+          ${k ? n`<div class="range-band"></div>` : x}
+          <button
+            type="button"
+            class=${Y}
+            ?disabled=${w}
+            aria-label=${h}
+            aria-selected=${m ? "true" : "false"}
+            @click=${() => this.handleDayClick(h)}
+            @mouseenter=${() => this.handleDayMouseEnter(h)}
+            @mouseleave=${this.handleDayMouseLeave}
+          >
+            <md-ripple ?disabled=${w}></md-ripple>
+            ${c}
+          </button>
+        </div>
+      `);
+    }
+    return n`
+      <div class="calendar-content">
+        <div class="weekdays" role="row">
+          ${d.map((c) => n`<div class="weekday" role="columnheader">${c}</div>`)}
+        </div>
+        <div class="days-grid" role="grid">
+          ${u}
+        </div>
+      </div>
+    `;
+  }
+  renderYearPicker() {
+    const e = (/* @__PURE__ */ new Date()).getFullYear(), t = e - 50, l = e + 50, o = [];
+    for (let d = t; d <= l; d++) {
+      const D = d === this.viewYear, u = d === e;
+      o.push(n`
+        <button
+          type="button"
+          class="year-btn ${D ? "selected" : ""} ${u ? "current" : ""}"
+          @click=${() => this.selectYear(d)}
+        >
+          <md-ripple></md-ripple>
+          ${d}
+        </button>
+      `);
+    }
+    return n`
+      <div class="year-picker-view">
+        ${o}
+      </div>
+    `;
+  }
+  renderPickerSurface() {
+    const e = this.viewMode === "year", t = this.label || (this.range ? "Select range" : "Select date"), l = this.getFormattedHeadline(), o = !!(this.range ? this.startDate : this.value), d = this.showActions || this.variant === "modal";
+    return n`
+      <div class="picker-surface">
+        <div class="header">
+          <div class="header-top">
+            <span class="subhead">${t}</span>
+            <md-icon-button
+              icon=${e ? "calendar_month" : "edit_calendar"}
+              aria-label=${e ? "Switch to calendar view" : "Switch to year view"}
+              @click=${this.toggleViewMode}
+            ></md-icon-button>
+          </div>
+          <div class="headline ${o ? "" : "placeholder"}">
+            ${l}
+          </div>
+        </div>
+
+        <div class="header-divider"></div>
+
+        <div class="navigation">
+          <button
+            type="button"
+            class="month-year-btn ${e ? "open" : ""}"
+            @click=${this.toggleViewMode}
+            aria-label="Toggle year selection"
+          >
+            <span>${V[this.viewMonth]} ${this.viewYear}</span>
+            <md-icon class="dropdown-icon" name="arrow_drop_down"></md-icon>
+          </button>
+
+          ${e ? x : n`
+                <div class="nav-arrows">
+                  <md-icon-button
+                    icon="chevron_left"
+                    aria-label="Previous month"
+                    @click=${this.handlePrevMonth}
+                  ></md-icon-button>
+                  <md-icon-button
+                    icon="chevron_right"
+                    aria-label="Next month"
+                    @click=${this.handleNextMonth}
+                  ></md-icon-button>
+                </div>
+              `}
+        </div>
+
+        ${e ? this.renderYearPicker() : this.renderCalendarGrid()}
+
+        ${d ? n`
+              <div class="actions">
+                <slot name="actions">
+                  <md-button variant="text" @click=${this.handleCancel}>Cancel</md-button>
+                  <md-button variant="text" @click=${this.handleConfirm}>OK</md-button>
+                </slot>
+              </div>
+            ` : x}
+      </div>
+
+      ${this.supportingText || this.errorText ? n`
+            <div class="supporting-text">
+              ${this.error ? this.errorText || this.supportingText : this.supportingText}
+            </div>
+          ` : x}
+    `;
+  }
+  render() {
+    return this.variant === "modal" ? n`
+        <dialog
+          @cancel=${this.handleCancel}
+          @click=${(e) => {
+      e.target === this.dialogElement && this.handleCancel();
+    }}
+        >
+          ${this.renderPickerSurface()}
+        </dialog>
+      ` : this.renderPickerSurface();
+  }
+};
+i([s({
+  type: String,
+  reflect: !0
+})], a.prototype, "variant", void 0);
+i([s({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "range", void 0);
+i([s({
+  type: String,
+  reflect: !0
+})], a.prototype, "value", void 0);
+i([s({
+  type: String,
+  attribute: "start-date"
+})], a.prototype, "startDate", void 0);
+i([s({
+  type: String,
+  attribute: "end-date"
+})], a.prototype, "endDate", void 0);
+i([s({ type: String })], a.prototype, "min", void 0);
+i([s({ type: String })], a.prototype, "max", void 0);
+i([s({ type: String })], a.prototype, "label", void 0);
+i([s({ type: String })], a.prototype, "headline", void 0);
+i([s({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "open", void 0);
+i([s({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "error", void 0);
+i([s({
+  type: String,
+  attribute: "error-text"
+})], a.prototype, "errorText", void 0);
+i([s({
+  type: String,
+  attribute: "supporting-text"
+})], a.prototype, "supportingText", void 0);
+i([s({
+  type: Number,
+  attribute: "first-day-of-week"
+})], a.prototype, "firstDayOfWeek", void 0);
+i([s({
+  type: Boolean,
+  attribute: "show-actions"
+})], a.prototype, "showActions", void 0);
+i([y()], a.prototype, "viewYear", void 0);
+i([y()], a.prototype, "viewMonth", void 0);
+i([y()], a.prototype, "viewMode", void 0);
+i([y()], a.prototype, "hoverDate", void 0);
+i([y()], a.prototype, "selectingEnd", void 0);
+i([A("dialog")], a.prototype, "dialogElement", void 0);
+a = i([T("md-date-picker")], a);
+export {
+  a as t
+};
+
+//# sourceMappingURL=date-picker-DJeHi4w-.js.map