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

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

@@ -0,0 +1,415 @@
+import { dateFormatter as y } from "../date-picker-input/datepicker-input.helpers.js";
+import { compareDates as $ } from "./datepicker.helpers.js";
+import { SkfElement as O } from "../../internal/components/skf-element.js";
+import { watch as R } from "../../internal/helpers/watch.js";
+import { Temporal as m } from "@js-temporal/polyfill";
+import C from "../../styles/component.styles.js";
+import { html as p } from "lit";
+import { property as g, state as M } from "lit/decorators.js";
+import { repeat as w } from "lit/directives/repeat.js";
+import { styles as F } from "./datepicker.calendar.styles.js";
+var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (D, t, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? P(t, e) : t, i = D.length - 1, h; i >= 0; i--)
+    (h = D[i]) && (s = (a ? h(t, e, s) : h(s)) || s);
+  return a && s && A(t, e, s), s;
+};
+const E = class E extends O {
+  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._listenToKeyboard = () => ({
+      start: () => {
+        this.addEventListener("keydown", this._handleKeyDown);
+      },
+      stop: () => {
+        this.removeEventListener("keydown", this._handleKeyDown);
+      }
+    }), this._handleKeyDown = (t) => {
+      var s, i, h, v, _, S, b;
+      const { key: e } = t;
+      if ((e === "ArrowRight" || e === "ArrowLeft" || e === "ArrowDown" || e === "ArrowUp") && t.preventDefault(), e === "ArrowRight") {
+        const n = (s = this.shadowRoot) == null ? void 0 : s.activeElement, r = n == null ? void 0 : n.parentElement, c = r == null ? void 0 : r.nextElementSibling, l = c == null ? void 0 : c.firstElementChild;
+        l == null || l.focus();
+      }
+      if (e === "ArrowLeft") {
+        const n = (i = this.shadowRoot) == null ? void 0 : i.activeElement, r = n == null ? void 0 : n.parentElement, c = r == null ? void 0 : r.previousElementSibling, l = c == null ? void 0 : c.firstElementChild;
+        l == null || l.focus();
+      }
+      if (e === "ArrowDown") {
+        const n = (h = this.shadowRoot) == null ? void 0 : h.activeElement, r = n == null ? void 0 : n.parentElement, c = a(r), l = (v = r == null ? void 0 : r.parentElement) == null ? void 0 : v.children[c + 7], f = l == null ? void 0 : l.firstElementChild;
+        f == null || f.focus();
+      }
+      if (e === "ArrowUp") {
+        const n = (_ = this.shadowRoot) == null ? void 0 : _.activeElement, r = n == null ? void 0 : n.parentElement;
+        if (!r) return;
+        const c = Array.from(((S = r.parentElement) == null ? void 0 : S.children) ?? []).indexOf(r), l = (b = r.parentElement) == null ? void 0 : b.children[c - 7], f = l == null ? void 0 : l.firstElementChild;
+        f == null || f.focus();
+      }
+      function a(u) {
+        var n;
+        return u ? Array.from(((n = u.parentElement) == null ? void 0 : n.children) ?? []).indexOf(u) : 0;
+      }
+    }, this.dateSelectable = (t) => {
+      var h;
+      const e = (h = this.invalidDates) == null ? void 0 : h.split(",").includes(t), a = !this.selectableTo || $(t, this.selectableTo) < 0, s = !this.selectableFrom || $(t, this.selectableFrom) > 0;
+      return { matchesInvalidDates: e, dateWithinRange: !(a && s) };
+    };
+  }
+  firstUpdated() {
+    this._secondCalendarOffset = this.id.endsWith("-range-end") ? -1 : 0, this.addEventListener("focusin", this._listenToKeyboard().start), this.addEventListener("focusout", this._listenToKeyboard().stop);
+  }
+  /** 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 m.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 m.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 = m.PlainDate.compare(t, e) > 0, i = m.PlainDate.compare(t, a) < 0;
+    return s && i;
+  }
+  render() {
+    return p`
+			${this.getCalendarHead()}
+
+			<!-- weekdays -->
+			<ul class="weekdays grid">
+				${w(
+      Array.from({ length: 7 }, (t, e) => e),
+      (t) => t,
+      (t) => p`<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 -->
+				${w(
+      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 p`<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 b, u, n, r;
+    const e = [], a = this._createDate({ day: t }).getDate(), s = ((b = this.selectedDate) == null ? void 0 : b.getMonth()) === this.date.getMonth(), i = ((u = this.selectedDate) == null ? void 0 : u.getFullYear()) === this.date.getFullYear();
+    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.getFullYear() === this.date.getFullYear() && this.selectedDateRange.start.getMonth() === this.date.getMonth() && this.selectedDateRange.start.getDate() === a && e.push("selected selected-start"), ((n = this.selectedDateRange.end) == null ? void 0 : n.getFullYear()) === this.date.getFullYear() && this.selectedDateRange.end.getMonth() === this.date.getMonth() && this.selectedDateRange.end.getDate() === a && e.push("selected selected-end"));
+    const { matchesInvalidDates: h, dateWithinRange: v } = this.dateSelectable(
+      this._createDate({ day: t }, !0).toString()
+    );
+    (h || v) && e.push("invalid");
+    const _ = ((r = this.selectedDate) == null ? void 0 : r.getDate()) === a;
+    return !this.range && _ && s && i && (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 w(
+      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"), p`<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: m.PlainDate.from(y(this.date)).subtract({ months: 1 }).toString()
+          });
+        }}"
+						?disabled=${e.includes("invalid")}
+					>
+						${t}
+					</button>
+				</li>`;
+      }
+    );
+  }
+  /** @internal */
+  getCalendarRemaningDays() {
+    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : w(
+      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"), p`<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: m.PlainDate.from(y(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 p` <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: m.PlainDate.from(y(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: m.PlainDate.from(y(this.date)).subtract({ months: 1 }).toString()
+      });
+    }}"
+				>
+					❮
+				</button>
+			</div>
+			<h4>
+				${this.date.toLocaleString(this.locale, { month: "short" })}
+				${this.range && this.classList.contains("start") ? p` -&nbsp;` : 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: m.PlainDate.from(y(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
+      });
+    }}"
+				>
+					❯
+				</button>
+				<button
+					aria-label="Next year"
+					title="Next year"
+					@click="${() => {
+      this.emit("update-calendar-view", {
+        detail: m.PlainDate.from(y(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
+      });
+    }}"
+				>
+					<div style="letter-spacing: -0.2em" aria-hidden="true" data-comp="icon">❯❯</div>
+				</button>
+			</div>
+		</div>`;
+  }
+};
+E.styles = [C, F];
+let o = E;
+d([
+  g({
+    converter: {
+      fromAttribute(D) {
+        return console.log("value", typeof D), new Date(D);
+      },
+      toAttribute(D) {
+        return D.toISOString();
+      }
+    }
+  })
+], o.prototype, "date", 2);
+d([
+  g()
+], o.prototype, "eventid", 2);
+d([
+  g({ type: Number })
+], o.prototype, "firstDayOfWeek", 2);
+d([
+  g({ reflect: !0, attribute: "invalid-dates" })
+], o.prototype, "invalidDates", 2);
+d([
+  g({ reflect: !0 })
+], o.prototype, "locale", 2);
+d([
+  g({ type: Boolean })
+], o.prototype, "range", 2);
+d([
+  g({ attribute: "selectable-from" })
+], o.prototype, "selectableFrom", 2);
+d([
+  g({ attribute: "selectable-to" })
+], o.prototype, "selectableTo", 2);
+d([
+  g({
+    attribute: "selected-date",
+    converter: { fromAttribute: (D) => new Date(D) },
+    reflect: !0
+  })
+], o.prototype, "selectedDate", 2);
+d([
+  g({ type: Object })
+], o.prototype, "selectedDateRange", 2);
+d([
+  M()
+], o.prototype, "_numberOfDays", 2);
+d([
+  M()
+], o.prototype, "_numberOfDaysLastMonth", 2);
+d([
+  R("date")
+], o.prototype, "handleDateChange", 1);
+export {
+  o 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,202 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		:host {
+			box-sizing: inherit;
+			contain: layout;
+			display: block;
+			position: relative;
+			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(--skf-bg-color-neutral-7);
+			font-size: 1.2em;
+			margin: 0;
+			padding: 0;
+			white-space: nowrap;
+		}
+
+		.weekdays > li {
+			color: var(--skf-text-color-primary);
+			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 transparent;
+			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; /* TODO: token? */
+					outline-offset: 2px;
+				}
+
+				&.today {
+					background-color: var(--skf-bg-color-neutral-3);
+					color: var(--skf-bg-color-neutral-7);
+				}
+
+				&.in-range {
+					background-color: var(--skf-interactive-bg-color-secondary-hover);
+				}
+
+				&.selected {
+					background-color: var(--skf-interactive-bg-color-primary);
+					color: var(--skf-bg-color-neutral-1);
+				}
+
+				&.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(--skf-text-color-tertiary);
+				}
+
+				&:not(.selected):hover {
+					background-color: var(--skf-interactive-bg-color-secondary-hover);
+					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: center;
+			display: flex;
+			font-size: 1.2em;
+			gap: 0;
+			justify-content: space-between;
+			margin: 0;
+			padding: 0;
+
+			:host([class='end']) & {
+				transform: translateX(calc(var(--skf-spacing-50) * -1));
+			}
+
+			:host([class='start']) & {
+				transform: translateX(var(--skf-spacing-50));
+			}
+
+			&::after {
+				background-color: var(--skf-border-color-primary);
+				bottom: -0.8em;
+				content: '';
+				display: block;
+				grid-column: 1 / -1;
+				height: 1px;
+				left: calc(var(--skf-spacing-50) * -1);
+				margin-inline: calc(var(--skf-spacing-50) * -2);
+				position: absolute;
+				right: calc(var(--skf-spacing-50) * -1);
+			}
+
+			& .calendar-head-controls {
+				display: contents;
+
+				&.hide {
+					display: none;
+				}
+			}
+
+			& h4 {
+				color: var(--skf-bg-color-neutral-7);
+				font-size: 1.2em;
+				margin: 0;
+				padding: 0;
+				text-align: center;
+				white-space: nowrap;
+			}
+
+			/* stylelint-disable-next-line no-descending-specificity */
+			& button {
+				background-color: transparent;
+				border: none;
+				color: var(--skf-text-color-primary);
+				cursor: pointer;
+				min-width: 1.5em;
+				padding: 0.2em;
+				text-align: center;
+
+				/* stylelint-disable-next-line no-descending-specificity */
+				&:focus-visible {
+					border-radius: 0.2em;
+					outline: 2px solid #469;
+					outline-offset: 2px;
+				}
+
+				& > div {
+					width: 1em;
+				}
+
+				/* stylelint-disable-next-line no-descending-specificity */
+				&:hover {
+					color: var(--skf-interactive-bg-color-primary);
+				}
+			}
+		}
+
+		.hide {
+			pointer-events: none;
+			visibility: hidden;
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -0,0 +1,79 @@
+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;
+    /**
+     * Navigates to the given date.
+     * @param date - The date to navigate to, either a Date object or a string in the format 'yyyy-mm-dd'
+     */
+    gotoDate(date: Date | string): void;
+    render(): import("lit").TemplateResult<1>;
+    /** @internal */
+    private _renderTodayBtn;
+    /** @internal */
+    private _handleChangeCalendarView;
+    /** @internal */
+    private _animateView;
+}