@skf-design-system/ui-components 1.0.1-beta.0 → 1.0.1-beta.1

package/dist/components/date-picker/datepicker.calendar.component.js

@@ -0,0 +1,382 @@
+import { dateFormatter as c } from "../date-picker-input/datepicker-input.helpers.js";
+import { compareDates as y } from "./datepicker.helpers.js";
+import { SkfElement as _ } from "../../internal/components/skf-element.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { Temporal as l } from "@js-temporal/polyfill";
+import $ from "../../styles/component.styles.js";
+import { html as u } from "lit";
+import { property as o, state as b } from "lit/decorators.js";
+import { repeat as D } from "lit/directives/repeat.js";
+import { styles as M } from "./datepicker.calendar.styles.js";
+var O = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (h, t, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? w(t, e) : t, i = h.length - 1, d; i >= 0; i--)
+    (d = h[i]) && (s = (a ? d(t, e, s) : d(s)) || s);
+  return a && s && O(t, e, s), s;
+};
+const g = class g extends _ {
+  constructor() {
+    super(...arguments), this._secondCalendarOffset = 0, this.date = /* @__PURE__ */ new Date(), this.firstDayOfWeek = 0, this.locale = "en-CA", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
+      start: null,
+      end: null
+    }, this._numberOfDays = 0, this._numberOfDaysLastMonth = 0, this.dateSelectable = (t) => {
+      var d;
+      const e = (d = this.invalidDates) == null ? void 0 : d.split(",").includes(t), a = !this.selectableTo || y(t, this.selectableTo) < 0, s = !this.selectableFrom || y(t, this.selectableFrom) > 0;
+      return { matchesInvalidDates: e, dateWithinRange: !(a && s) };
+    };
+  }
+  firstUpdated() {
+    this._secondCalendarOffset = this.id.endsWith("-range-end") ? -1 : 0;
+  }
+  /** For single select, the selected date */
+  attributeChangedCallback(t, e, a) {
+    t === "selected-date" && e !== a && (this.selectedDate = new Date(a));
+  }
+  handleDateChange() {
+    var t, e;
+    this._numberOfDays = ((t = this._plainDate(this.date)) == null ? void 0 : t.daysInMonth) ?? 0, this._numberOfDaysLastMonth = ((e = this._plainDate(this.date)) == null ? void 0 : e.subtract({
+      months: 1
+    }).daysInMonth) ?? 0;
+  }
+  _createDate({ year: t, month: e, day: a = 1 }, s) {
+    switch (e ?? (e = this.date.getMonth()), t ?? (t = this.date.getFullYear()), !0) {
+      case e < 0:
+        e = 11, t--;
+        break;
+      case e > 11:
+        e = 0, t++;
+        break;
+    }
+    if (s)
+      try {
+        return l.PlainDate.from({
+          year: t,
+          month: e + 1,
+          day: a
+        });
+      } catch (i) {
+        console.error("error", i);
+      }
+    return new Date(t, e, a);
+  }
+  /** @internal Converts a new Date object to PlainDate type. If no argument sent, uses 'this.date' */
+  _plainDate(t) {
+    if (!t) return null;
+    const e = {
+      year: t.getFullYear(),
+      month: t.getMonth() + 1,
+      // Months are 0-based in Date, but 1-based in Temporal
+      day: t.getDate()
+    };
+    try {
+      return l.PlainDate.from(e);
+    } catch (a) {
+      return console.log(e), console.error("error", a), null;
+    }
+  }
+  /** @internal Check if a day is between two dates */
+  _isDateBetween(t, e, a) {
+    if (!e || !a) return !1;
+    const s = l.PlainDate.compare(t, e) > 0, i = l.PlainDate.compare(t, a) < 0;
+    return s && i;
+  }
+  render() {
+    return u`
+			${this.getCalendarHead()}
+
+			<!-- weekdays -->
+			<ul class="weekdays grid">
+				${D(
+      Array.from({ length: 7 }, (t, e) => e),
+      (t) => t,
+      (t) => u`<li>
+							${new Intl.DateTimeFormat(this.locale, {
+        weekday: "short"
+      }).format(new Date(2018, 0, t)).slice(0, 2)}
+						</li>`
+    )}
+			</ul>
+
+			<!-- start of calendar -->
+			<ol class="calendar grid">
+				<!-- previous month -->
+				${this.getCalendarPreMonthDays()}
+				<!-- current days -->
+				${D(
+      Array.from({ length: this._numberOfDays }, (t, e) => e + 1),
+      (t) => t,
+      (t) => {
+        const e = this._createDate({ day: t }, !0).toString(), a = this.returnDayClasses(t);
+        return u`<li>
+							<button
+								class="day ${a}"
+								data-date=${e}
+								aria-label="Choose ${this._createDate({
+          day: t
+        }).toLocaleDateString(this.locale, {
+          weekday: "long",
+          year: "numeric",
+          month: "short",
+          day: "numeric"
+        })}"
+								@click="${() => {
+          this.handleSelectDay({ day: t });
+        }}"
+								?disabled="${a.includes("invalid")}"
+							>
+								${t}
+							</button>
+						</li>`;
+      }
+    )}
+				<!-- next month -->
+				${this.getCalendarRemaningDays()}
+			</ol>
+			<slot></slot>
+			<div class="triangle"></div>
+		`;
+  }
+  /** @internal */
+  returnDayClasses(t) {
+    var m, p, f;
+    const e = [], a = this._createDate({ day: t }).getDate(), s = ((m = this.selectedDate) == null ? void 0 : m.getMonth()) === this.date.getMonth();
+    this.range && this._isDateBetween(
+      this._createDate({ day: t }, !0),
+      this._plainDate(this.selectedDateRange.start) ?? void 0,
+      this._plainDate(this.selectedDateRange.end) ?? void 0
+    ) && e.push("in-range"), this.range && this.selectedDateRange.start && (this.selectedDateRange.start.getMonth() === this.date.getMonth() && this.selectedDateRange.start.getDate() === a && e.push("selected selected-start"), ((p = this.selectedDateRange.end) == null ? void 0 : p.getMonth()) === this.date.getMonth() && this.selectedDateRange.end.getDate() === a && e.push("selected selected-end"));
+    const { matchesInvalidDates: i, dateWithinRange: d } = this.dateSelectable(
+      this._createDate({ day: t }, !0).toString()
+    );
+    (i || d) && e.push("invalid");
+    const v = ((f = this.selectedDate) == null ? void 0 : f.getDate()) === a;
+    return !this.range && v && s && (console.log("is single date selected", this.selectedDate), e.push("selected")), this._createDate({ day: t }, !0).equals(String(this._plainDate(/* @__PURE__ */ new Date()))) && e.push("today"), e.join(" ");
+  }
+  /** @internal */
+  handleSelectDay({
+    year: t = this.date.getFullYear(),
+    month: e = this.date.getMonth(),
+    day: a
+  }) {
+    this.emit("selected-date-changed", {
+      detail: {
+        date: new Date(t, e, a),
+        id: this.eventid
+      }
+    });
+  }
+  /** @internal */
+  getCalendarPreMonthDays() {
+    return D(
+      Array.from(
+        {
+          length: this.getCalendarStartDay().getDay()
+        },
+        (t, e) => this._numberOfDaysLastMonth - this.getCalendarStartDay().getDay() + 1 + e
+      ),
+      (t) => t,
+      (t) => {
+        const e = ["prevmonth"], a = this._createDate(
+          {
+            year: this.date.getFullYear(),
+            month: this.date.getMonth() - 1,
+            day: t + 1
+          },
+          !0
+        ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
+        return (s || i) && e.push("invalid"), u`<li class="day ">
+					<button
+						class=${e.join(" ")}
+						data-date=${a}
+						@click="${() => {
+          this.handleSelectDay({
+            month: this.date.getMonth() - 1,
+            day: t
+          }), this.emit("update-calendar-view", {
+            detail: l.PlainDate.from(c(this.date)).subtract({ months: 1 }).toString()
+          });
+        }}"
+						?disabled=${e.includes("invalid")}
+					>
+						${t}
+					</button>
+				</li>`;
+      }
+    );
+  }
+  /** @internal */
+  getCalendarRemaningDays() {
+    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : D(
+      Array.from(
+        {
+          length: 7 - this._createDate({
+            year: this.date.getFullYear(),
+            month: this.date.getMonth(),
+            day: this._numberOfDays + 1
+          }).getDay()
+        },
+        (t, e) => e
+      ),
+      (t) => t,
+      (t) => {
+        const e = ["nextmonth"], a = this._createDate(
+          {
+            year: this.date.getFullYear(),
+            month: this.date.getMonth() + 1,
+            day: t + 1
+          },
+          !0
+        ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
+        return (s || i) && e.push("invalid"), u`<li class="day">
+					<button
+						data-date=${a}
+						class=${e.join(" ")}
+						@click="${() => {
+          this.handleSelectDay({
+            month: this.date.getMonth() + 1,
+            day: t + 1
+          }), this.emit("update-calendar-view", {
+            detail: l.PlainDate.from(c(this.date)).add({ months: 1 }).toString()
+          });
+        }}"
+						?disabled=${e.includes("invalid")}
+					>
+						${t + 1}
+					</button>
+				</li>`;
+      }
+    );
+  }
+  /** @internal */
+  calendarMonthStartsOn({
+    year: t = this.date.getFullYear(),
+    month: e = this.date.getMonth()
+  } = {}) {
+    return this._createDate({ year: t, month: e, day: 1 }).getDay();
+  }
+  /** @internal */
+  getCalendarStartDay(t) {
+    const e = t ?? this.date;
+    return this._createDate({
+      year: e.getFullYear(),
+      month: e.getMonth(),
+      day: 1
+    });
+  }
+  /** @internal */
+  getCalendarHead() {
+    return u` <div class="calendar-head">
+			<div
+				class="calendar-head__controls${this.range && this.classList.contains("end") ? " hide" : ""}"
+			>
+				<button
+					aria-label="Previous year"
+					title="Previous year"
+					@click="${() => {
+      this.emit("update-calendar-view", {
+        detail: l.PlainDate.from(c(this.date)).subtract({ years: 1 }).toString()
+      });
+    }}"
+				>
+					<div style="letter-spacing: -0.2em" aria-hidden="true" data-comp="icon">❮❮</div>
+				</button>
+				<button
+					aria-label="Previous month"
+					title="Previous month"
+					@click="${() => {
+      this.emit("update-calendar-view", {
+        detail: l.PlainDate.from(c(this.date)).subtract({ months: 1 }).toString()
+      });
+    }}"
+				>
+					❮
+				</button>
+			</div>
+			<h4>
+				${this.date.toLocaleString(this.locale, { month: "short" })} ${this.date.getFullYear()}
+			</h4>
+			<div
+				class="calendar-head__controls${this.range && this.classList.contains("start") ? " hide" : ""}"
+			>
+				<button
+					aria-label="Next month"
+					title="Next month"
+					@click="${() => {
+      this.emit("update-calendar-view", {
+        detail: l.PlainDate.from(c(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
+      });
+    }}"
+				>
+					❯
+				</button>
+				<button
+					aria-label="Next year"
+					title="Next year"
+					@click="${() => {
+      this.emit("update-calendar-view", {
+        detail: l.PlainDate.from(c(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
+      });
+    }}"
+				>
+					<div style="letter-spacing: -0.2em" aria-hidden="true" data-comp="icon">❯❯</div>
+				</button>
+			</div>
+		</div>`;
+  }
+};
+g.styles = [$, M];
+let r = g;
+n([
+  o({
+    converter: {
+      fromAttribute(h) {
+        return console.log("value", typeof h), new Date(h);
+      },
+      toAttribute(h) {
+        return h.toISOString();
+      }
+    }
+  })
+], r.prototype, "date", 2);
+n([
+  o()
+], r.prototype, "eventid", 2);
+n([
+  o({ type: Number })
+], r.prototype, "firstDayOfWeek", 2);
+n([
+  o({ reflect: !0, attribute: "invalid-dates" })
+], r.prototype, "invalidDates", 2);
+n([
+  o({ reflect: !0 })
+], r.prototype, "locale", 2);
+n([
+  o({ type: Boolean })
+], r.prototype, "range", 2);
+n([
+  o({ attribute: "selectable-from" })
+], r.prototype, "selectableFrom", 2);
+n([
+  o({ attribute: "selectable-to" })
+], r.prototype, "selectableTo", 2);
+n([
+  o({
+    attribute: "selected-date",
+    converter: { fromAttribute: (h) => new Date(h) },
+    reflect: !0
+  })
+], r.prototype, "selectedDate", 2);
+n([
+  o({ type: Object })
+], r.prototype, "selectedDateRange", 2);
+n([
+  b()
+], r.prototype, "_numberOfDays", 2);
+n([
+  b()
+], r.prototype, "_numberOfDaysLastMonth", 2);
+n([
+  S("date")
+], r.prototype, "handleDateChange", 1);
+export {
+  r as SkfDatePickerCalendar
+};

package/dist/components/date-picker/datepicker.calendar.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/date-picker/datepicker.calendar.styles.js

@@ -0,0 +1,192 @@
+import { css as e } from "lit";
+const r = e`
+	@layer components {
+		:host {
+			box-sizing: inherit;
+			contain: layout;
+			display: block;
+			width: 100%;
+		}
+
+		:host([hidden]) {
+			display: none !important;
+		}
+
+		.grid {
+			display: grid;
+			grid-template-columns: repeat(7, 1fr);
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		h4 {
+			color: var(--title-fg);
+			font-size: 1.2em;
+			margin: 0;
+			padding: 0;
+			white-space: nowrap;
+		}
+
+		.weekdays > li {
+			color: var(--weekday-fg);
+			display: grid;
+			font-size: 1.2em;
+			margin-block: 1em 0.5em;
+			place-items: center;
+			user-select: none;
+		}
+
+		.calendar > li {
+			background-color: transparent;
+			border-radius: 0.2em;
+			display: grid;
+			min-width: 2.5em;
+			outline: 1px solid var(--day-outline);
+			place-items: center;
+
+			& button {
+				aspect-ratio: 1.2 / 1;
+				background-color: transparent;
+				border: 0;
+				border-radius: 0;
+				cursor: pointer;
+				display: grid;
+				font-size: 1.2em;
+				margin-block: 0.4em;
+				place-items: center;
+				transition: background-color 0.3s;
+				width: 100%;
+
+				&:focus-visible {
+					border-radius: 0.2em;
+					outline: 2px solid #469;
+					outline-offset: 2px;
+				}
+
+				&.today {
+					background-color: var(--today);
+					color: var(--today-fg);
+				}
+
+				&.in-range {
+					background-color: var(--in-range-bg);
+				}
+
+				&.selected {
+					background-color: var(--selected-bg);
+					color: var(--selected-fg);
+				}
+
+				&.selected-start {
+					border-radius: 5px 0 0 5px;
+				}
+
+				&.selected-end {
+					border-radius: 0 5px 5px 0;
+				}
+
+				&.selected-start.selected-end {
+					border-radius: 5px;
+				}
+
+				&.prevmonth,
+				&.nextmonth {
+					color: var(--other-month-fg);
+				}
+
+				&:not(.selected):hover {
+					background-color: var(--hover-bg);
+					transition-duration: 0s;
+				}
+
+				&[disabled] {
+					cursor: not-allowed;
+					opacity: 0.5;
+					position: relative;
+
+					&::after {
+						background: linear-gradient(-45deg, transparent 45%, black 50%, transparent 50%);
+						content: '';
+						inset: 0;
+						position: absolute;
+					}
+				}
+			}
+		}
+
+		.calendar-head {
+			align-items: baseline;
+			display: flex;
+			font-size: 1.2em;
+			gap: 0;
+			grid-template-columns: min-content auto min-content;
+			justify-content: space-between;
+			margin: 0 0 1em;
+			padding: 0;
+			position: relative;
+
+			&::after {
+				background-color: var(--border-color);
+				bottom: -0.8em;
+				content: '';
+				display: block;
+				grid-column: 1 / -1;
+				height: 1px;
+				left: 0;
+				margin-inline: calc(var(--calendar-padding) * -1);
+				position: absolute;
+				right: 0;
+			}
+
+			& .calendar-head__controls {
+				display: contents;
+
+				&.hide {
+					display: none;
+				}
+			}
+
+			& h4 {
+				color: var(--title-fg);
+				font-size: 1.2em;
+				margin: 0;
+				padding: 0;
+				text-align: center;
+				white-space: nowrap;
+			}
+
+			& button {
+				background-color: transparent;
+				border: none;
+				color: var(--button-control-fg);
+				cursor: pointer;
+				min-width: 1.5em;
+				padding: 0.2em;
+				text-align: center;
+
+				&:focus-visible {
+					border-radius: 0.2em;
+					outline: 2px solid #469;
+					outline-offset: 2px;
+				}
+
+				& > div {
+					width: 1em;
+				}
+
+				&:hover {
+					color: var(--button-control-fg-hover);
+				}
+			}
+		}
+
+		.hide {
+			pointer-events: none;
+			visibility: hidden;
+		}
+	}
+`;
+export {
+  r as styles
+};

package/dist/components/date-picker/datepicker.component.d.ts

@@ -0,0 +1,74 @@
+import '../button/button';
+import { SkfElement } from '../../internal/components/skf-element.js';
+import { type CSSResultGroup } from 'lit';
+import './datepicker';
+export interface SkfDatePickerDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/**
+ * A date picker component that allows users to select a date or a range of dates.
+ *
+ * @element skf-datepicker
+ * @fires selected-date-changed - When a date is selected
+ * @fires selected-date-range-changed - When a range of dates is selected
+ *
+ * @prop {string} date - The date to display in the date picker
+ * @prop {boolean} range - If true, the date picker will allow the selection of a range of dates
+ * @prop {string} locale - The locale to use for formatting the date
+ *
+ * @slot - Default hint content placed inside the date picker
+ *
+ * @cssprop --max-width - The maximum width of the date picker
+ */
+export declare class SkfDatePicker extends SkfElement {
+    static styles: CSSResultGroup;
+    locale: string;
+    date: string;
+    id: string;
+    /**
+     * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
+     */
+    invalidDates?: string;
+    range: boolean;
+    selectedDate: Date | undefined;
+    /**
+     * Earliest selectable date. (yyyy-mm-dd format)
+     */
+    selectableFrom?: string;
+    /**
+     * Latest selectable date. (yyyy-mm-dd format)
+     */
+    selectableTo?: string;
+    selectedDateRange: SkfDatePickerDateRange;
+    /** @internal */
+    private _date?;
+    /** @internal */
+    _datePlusOneMonth: Date;
+    connectedCallback(): void;
+    protected firstUpdated(): void;
+    clearSelection(): void;
+    /** @internal */
+    private _handleCalendarView;
+    /** @internal */
+    private _handleSelectedDate;
+    /** @internal */
+    _onRangeCompleteEmitEvent(): void;
+    /** @internal */
+    _handleRangeChange(): void;
+    /** @internal */
+    _handleDateChange(): void;
+    /** @internal */
+    _handleSelectedDateRangeChange(): void;
+    /** @internal */
+    _handleSelectedDateChange(): void;
+    /** @internal */
+    _handleTodayClick: () => void;
+    render(): import("lit").TemplateResult<1>;
+    /** @internal */
+    private _renderTodayBtn;
+    /** @internal */
+    private _handleChangeCalendarView;
+    /** @internal */
+    private _animateView;
+}