@francofantomius/material-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,774 @@
+import { t as e } from "./decorate-DknOJ8FJ.js";
+import { t } from "./form-associated-Do5uXckv.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.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/date-picker/date-picker.css.ts
+var l = n`
+  :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);
+    }
+  }
+`, u = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+], d = [
+	"S",
+	"M",
+	"T",
+	"W",
+	"T",
+	"F",
+	"S"
+], f = [
+	"M",
+	"T",
+	"W",
+	"T",
+	"F",
+	"S",
+	"S"
+];
+function p(e) {
+	return e < 10 ? `0${e}` : `${e}`;
+}
+function m(e, t, n) {
+	return `${e}-${p(t + 1)}-${p(n)}`;
+}
+function h(e) {
+	if (!e || typeof e != "string") return null;
+	let t = e.split("-");
+	if (t.length !== 3) return null;
+	let n = parseInt(t[0], 10), r = parseInt(t[1], 10) - 1, i = parseInt(t[2], 10);
+	return isNaN(n) || isNaN(r) || isNaN(i) ? null : {
+		year: n,
+		month: r,
+		day: i
+	};
+}
+function g() {
+	let e = /* @__PURE__ */ new Date();
+	return m(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function _(e) {
+	let t = h(e);
+	return t ? new Date(t.year, t.month, t.day).toLocaleDateString("en-US", {
+		weekday: "short",
+		month: "short",
+		day: "numeric"
+	}) : "";
+}
+function v(e) {
+	let t = h(e);
+	return t ? new Date(t.year, t.month, t.day).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	}) : "";
+}
+var y = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "docked", this.range = !1, this.value = "", this.startDate = "", this.endDate = "", this.nameStart = "", this.nameEnd = "", 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.initialValue = "", this.initialStartDate = "", this.initialEndDate = "", this.handlePrevMonth = () => {
+			this.viewMonth === 0 ? (this.viewMonth = 11, --this.viewYear) : --this.viewMonth;
+		}, 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 = (e) => {
+			this.viewYear = e, this.viewMode = "calendar";
+		}, this.handleDayClick = (e) => {
+			if (!this.isDateDisabled(e)) {
+				if (!this.range) {
+					this.value = e, this.updateFormValue(), this.validateInput(), this.emitEvent("input", { value: this.value }), this.emitEvent("change", { value: this.value }), this.emitEvent("select", {
+						date: e,
+						type: "single"
+					});
+					return;
+				}
+				!this.selectingEnd || !this.startDate || e < this.startDate ? (this.startDate = e, this.endDate = "", this.value = e, this.selectingEnd = !0, this.updateFormValue(), this.validateInput(), this.emitEvent("select", {
+					date: e,
+					type: "start"
+				}), this.emitEvent("input", { value: this.value })) : (this.endDate = e, this.value = `${this.startDate}/${this.endDate}`, this.selectingEnd = !1, this.updateFormValue(), this.validateInput(), this.emitEvent("select", {
+					date: e,
+					type: "end"
+				}), this.emitEvent("input", { value: this.value }), this.emitEvent("change", {
+					value: this.value,
+					startDate: this.startDate,
+					endDate: this.endDate
+				}));
+			}
+		}, this.handleDayMouseEnter = (e) => {
+			this.range && this.selectingEnd && this.startDate && (this.hoverDate = e);
+		}, this.handleDayMouseLeave = () => {
+			this.hoverDate = null;
+		}, this.handleCancel = (e) => {
+			e && e.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 = [t.styles, l];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.range && (this.startDate || this.endDate) && (this.value = this.startDate && this.endDate ? `${this.startDate}/${this.endDate}` : this.startDate || ""), this.initialValue = this.value, this.initialStartDate = this.startDate, this.initialEndDate = this.endDate, this.syncInitialState(), this.updateFormValue(), this.validateInput();
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("value") && this.handleValueChange(), (e.has("startDate") || e.has("endDate")) && this.range) {
+			let e = this.startDate && this.endDate ? `${this.startDate}/${this.endDate}` : this.startDate || "";
+			this.value !== e && (this.value = e);
+		}
+		(e.has("value") || e.has("startDate") || e.has("endDate") || e.has("range") || e.has("name") || e.has("nameStart") || e.has("nameEnd") || e.has("disabled") || e.has("required") || e.has("min") || e.has("max")) && (this.updateFormValue(), 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() {
+		let e = h(this.startDate || (this.range ? this.value.split("/")[0] ?? "" : this.value));
+		if (e) this.viewYear = e.year, this.viewMonth = e.month;
+		else {
+			let e = /* @__PURE__ */ new Date();
+			this.viewYear = e.getFullYear(), this.viewMonth = e.getMonth();
+		}
+		if (this.range && this.value && this.value.includes("/")) {
+			let [e, t] = this.value.split("/");
+			this.startDate = e || "", this.endDate = t || "";
+		}
+	}
+	handleValueChange() {
+		if (this.range) {
+			if (this.value.includes("/")) {
+				let [e, t] = this.value.split("/");
+				this.startDate = e || "", this.endDate = t || "";
+			} else this.startDate = this.value, this.endDate = "";
+		} else {
+			let e = h(this.value);
+			e && (this.viewYear = e.year, this.viewMonth = e.month);
+		}
+	}
+	updateFormValue() {
+		if (this.disabled) {
+			this.setFormValue(null);
+			return;
+		}
+		if (this.range) {
+			if (this.nameStart || this.nameEnd) {
+				let e = new FormData();
+				this.nameStart && e.append(this.nameStart, this.startDate), this.nameEnd && e.append(this.nameEnd, this.endDate), this.setFormValue(e);
+			} else {
+				let e = this.startDate && this.endDate ? `${this.startDate}/${this.endDate}` : this.startDate || this.value || "";
+				this.setFormValue(e || null);
+			}
+		} else this.setFormValue(this.value || null);
+	}
+	formDisabledCallback(e) {
+		this.disabled = e, this.updateFormValue(), this.validateInput();
+	}
+	formResetCallback() {
+		this.value = this.initialValue, this.startDate = this.initialStartDate, this.endDate = this.initialEndDate, this.selectingEnd = !1, this.syncInitialState(), this.updateFormValue(), this.validateInput();
+	}
+	showModal() {
+		this.open = !0;
+	}
+	show() {
+		this.open = !0;
+	}
+	close() {
+		this.open = !1;
+	}
+	reset() {
+		this.formResetCallback();
+	}
+	validateInput() {
+		if (this.disabled) {
+			this.setValidity({}), this.errorText || (this.error = !1);
+			return;
+		}
+		if (this.required && (this.range ? !this.startDate || !this.endDate : !this.value)) {
+			this.setValidity({ valueMissing: !0 }, this.errorText || "A date is required"), this.error = !0;
+			return;
+		}
+		if (this.min && this.value) {
+			let 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) {
+			let 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 ? _(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) {
+			let e = h(this.startDate), t = h(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() {
+		let e = this.viewYear, t = this.viewMonth, n = new Date(e, t + 1, 0).getDate(), a = new Date(e, t, 1).getDay();
+		this.firstDayOfWeek === 1 && (a = (a + 6) % 7);
+		let o = this.firstDayOfWeek === 1 ? f : d, s = g(), c = [];
+		for (let e = 0; e < a; e++) c.push(r`<div class="day-cell empty"></div>`);
+		for (let a = 1; a <= n; a++) {
+			let n = m(e, t, a), o = n === s, l = this.isDateDisabled(n), u = !1, d = !1, f = !1, p = !1;
+			if (!this.range) u = this.value === n;
+			else {
+				let e = this.endDate || (this.selectingEnd ? this.hoverDate : null);
+				d = this.startDate === n, f = e === n, u = d || f, this.startDate && e && e > this.startDate && (p = n >= this.startDate && n <= e);
+			}
+			let h = [
+				"day-cell",
+				d ? "range-start" : "",
+				f ? "range-end" : "",
+				p ? "in-range" : ""
+			].filter(Boolean).join(" "), g = [
+				"day-btn",
+				u ? "selected" : "",
+				o ? "today" : "",
+				d ? "range-start" : "",
+				f ? "range-end" : "",
+				l ? "disabled" : ""
+			].filter(Boolean).join(" ");
+			c.push(r`
+        <div class=${h}>
+          ${p ? r`<div class="range-band"></div>` : i}
+          <button
+            type="button"
+            class=${g}
+            ?disabled=${l}
+            aria-label=${n}
+            aria-selected=${u ? "true" : "false"}
+            @click=${() => this.handleDayClick(n)}
+            @mouseenter=${() => this.handleDayMouseEnter(n)}
+            @mouseleave=${this.handleDayMouseLeave}
+          >
+            <md-ripple ?disabled=${l}></md-ripple>
+            ${a}
+          </button>
+        </div>
+      `);
+		}
+		return r`
+      <div class="calendar-content">
+        <div class="weekdays" role="row">
+          ${o.map((e) => r`<div class="weekday" role="columnheader">${e}</div>`)}
+        </div>
+        <div class="days-grid" role="grid">
+          ${c}
+        </div>
+      </div>
+    `;
+	}
+	renderYearPicker() {
+		let e = (/* @__PURE__ */ new Date()).getFullYear(), t = e - 50, n = e + 50, i = [];
+		for (let a = t; a <= n; a++) {
+			let t = a === this.viewYear, n = a === e;
+			i.push(r`
+        <button
+          type="button"
+          class="year-btn ${t ? "selected" : ""} ${n ? "current" : ""}"
+          @click=${() => this.selectYear(a)}
+        >
+          <md-ripple></md-ripple>
+          ${a}
+        </button>
+      `);
+		}
+		return r`
+      <div class="year-picker-view">
+        ${i}
+      </div>
+    `;
+	}
+	renderPickerSurface() {
+		let e = this.viewMode === "year", t = this.label || (this.range ? "Select range" : "Select date"), n = this.getFormattedHeadline(), a = !!(this.range ? this.startDate : this.value), o = this.showActions || this.variant === "modal";
+		return r`
+      <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 ${a ? "" : "placeholder"}">
+            ${n}
+          </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>${u[this.viewMonth]} ${this.viewYear}</span>
+            <md-icon class="dropdown-icon" name="arrow_drop_down"></md-icon>
+          </button>
+
+          ${e ? i : r`
+                <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()}
+
+        ${o ? r`
+              <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>
+            ` : i}
+      </div>
+
+      ${this.supportingText || this.errorText ? r`
+            <div class="supporting-text">
+              ${this.error && this.errorText || this.supportingText}
+            </div>
+          ` : i}
+    `;
+	}
+	render() {
+		return this.variant === "modal" ? r`
+        <dialog
+          @cancel=${this.handleCancel}
+          @click=${(e) => {
+			e.target === this.dialogElement && this.handleCancel();
+		}}
+        >
+          ${this.renderPickerSurface()}
+        </dialog>
+      ` : this.renderPickerSurface();
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], y.prototype, "variant", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "range", void 0), e([o({
+	type: String,
+	reflect: !0
+})], y.prototype, "value", void 0), e([o({
+	type: String,
+	attribute: "start-date"
+})], y.prototype, "startDate", void 0), e([o({
+	type: String,
+	attribute: "end-date"
+})], y.prototype, "endDate", void 0), e([o({
+	type: String,
+	attribute: "name-start"
+})], y.prototype, "nameStart", void 0), e([o({
+	type: String,
+	attribute: "name-end"
+})], y.prototype, "nameEnd", void 0), e([o({ type: String })], y.prototype, "min", void 0), e([o({ type: String })], y.prototype, "max", void 0), e([o({ type: String })], y.prototype, "label", void 0), e([o({ type: String })], y.prototype, "headline", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "open", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "error", void 0), e([o({
+	type: String,
+	attribute: "error-text"
+})], y.prototype, "errorText", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], y.prototype, "supportingText", void 0), e([o({
+	type: Number,
+	attribute: "first-day-of-week"
+})], y.prototype, "firstDayOfWeek", void 0), e([o({
+	type: Boolean,
+	attribute: "show-actions"
+})], y.prototype, "showActions", void 0), e([c()], y.prototype, "viewYear", void 0), e([c()], y.prototype, "viewMonth", void 0), e([c()], y.prototype, "viewMode", void 0), e([c()], y.prototype, "hoverDate", void 0), e([c()], y.prototype, "selectingEnd", void 0), e([s("dialog")], y.prototype, "dialogElement", void 0), y = e([a("md-date-picker")], y);
+//#endregion
+export { y as t };
+
+//# sourceMappingURL=date-picker-B15_rR0f.js.map