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

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

@@ -1,19 +1,19 @@
 import "../button/button.js";
-import { dateFormatter as c } from "../date-picker-input/datepicker-input.helpers.js";
-import { SkfElement as $ } from "../../internal/components/skf-element.js";
-import { watch as g } from "../../internal/helpers/watch.js";
-import C from "../../styles/component.styles.js";
-import { html as y } from "lit";
-import { property as l, state as p } from "lit/decorators.js";
+import { dateFormatter as l, is as v } from "../date-picker-input/datepicker-input.helpers.js";
+import { SkfElement as R } from "../../internal/components/skf-element.js";
+import { watch as p } from "../../internal/helpers/watch.js";
+import S from "../../styles/component.styles.js";
+import { html as D } from "lit";
+import { property as o, state as m } from "lit/decorators.js";
 import "./datepicker.js";
-import { getDateParts as h, earliestDate as S, latestDate as k, compareDates as M, doAnimate as f } from "./datepicker.helpers.js";
-import { styles as T } from "./datepicker.styles.js";
-var V = Object.defineProperty, F = Object.getOwnPropertyDescriptor, i = (u, e, s, t) => {
-  for (var a = t > 1 ? void 0 : t ? F(e, s) : e, d = u.length - 1, r; d >= 0; d--)
-    (r = u[d]) && (a = (t ? r(e, s, a) : r(a)) || a);
-  return t && a && V(e, s, a), a;
+import { getDateParts as g, assertISODate as $, earliestDate as T, latestDate as C, compareDates as c, doAnimate as b } from "./datepicker.helpers.js";
+import { styles as k } from "./datepicker.styles.js";
+var F = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (w, e, t, a) => {
+  for (var s = a > 1 ? void 0 : a ? E(e, t) : e, r = w.length - 1, d; r >= 0; r--)
+    (d = w[r]) && (s = (a ? d(e, t, s) : d(s)) || s);
+  return a && s && F(e, t, s), s;
 };
-const m = class m extends $ {
+const y = class y extends R {
   constructor() {
     super(...arguments), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
       start: null,
@@ -25,43 +25,43 @@ const m = class m extends $ {
     ), this._handleCalendarView = (e) => {
       this._handleChangeCalendarView(e.detail);
     }, this._handleSelectedDate = (e) => {
-      var s;
+      var t;
       if (this.selectedDate = e.detail.date, console.log("selectedDate", this.selectedDate), this.range) {
-        const t = (s = this.shadowRoot) == null ? void 0 : s.querySelectorAll("datepicker-calendar"), a = this.selectedDateRange, d = a.start && this.selectedDate < a.start;
-        if ((a.start && a.end) ?? d)
+        const a = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("skf-datepicker-calendar"), s = this.selectedDateRange, r = s.start && this.selectedDate < s.start;
+        if (!!(s.start && s.end) || r)
           this.selectedDateRange = {
             start: this.selectedDate,
             end: null
           };
         else {
-          const D = !!a.start ? { end: e.detail.date } : { start: e.detail.date };
+          const f = !!s.start ? { end: e.detail.date } : { start: e.detail.date };
           this.selectedDateRange = {
-            ...a,
-            ...D
+            ...s,
+            ...f
           };
         }
-        this._onRangeCompleteEmitEvent(), t != null && t.length && [...t].forEach((o) => {
-          o.selectedDateRange = this.selectedDateRange;
+        this._onRangeCompleteEmitEvent(), a != null && a.length && [...a].forEach((h) => {
+          h.selectedDateRange = this.selectedDateRange;
         });
       }
       this.emit("skf-datepicker-selected", {
         detail: { date: this.range ? this.selectedDateRange : this.selectedDate }
       }), this.requestUpdate();
     }, this._handleTodayClick = () => {
-      const { month: e, year: s } = h(), { month: t, year: a } = h(this.date);
-      if (t === e && a === s && (this.selectedDateRange.start || this.selectedDate)) {
-        this.date = c(this.selectedDateRange.start ?? this.selectedDate), this.emit("update-calendar-view", {
+      const { month: e, year: t } = g(), { month: a, year: s } = g(this.date);
+      if (a === e && s === t && (this.selectedDateRange.start || this.selectedDate)) {
+        this.date = l(this.selectedDateRange.start ?? this.selectedDate), this.emit("update-calendar-view", {
           detail: this.date
         });
         return;
       }
       if (this.range) {
         this.emit("update-calendar-view", {
-          detail: c(/* @__PURE__ */ new Date())
+          detail: l(/* @__PURE__ */ new Date())
         });
         return;
       }
-      this.date = c(/* @__PURE__ */ new Date());
+      this.date = l(/* @__PURE__ */ new Date());
     };
   }
   connectedCallback() {
@@ -69,6 +69,8 @@ const m = class m extends $ {
   }
   firstUpdated() {
     (this.selectedDateRange.start ?? this.selectedDate) && this._onRangeCompleteEmitEvent();
+    const t = this.selectedDate ?? this.selectedDateRange.start;
+    t instanceof Date && this.gotoDate(t);
   }
   clearSelection() {
     this.selectedDateRange = {
@@ -81,11 +83,11 @@ const m = class m extends $ {
     if (!this.selectedDateRange.start || !this.selectedDateRange.end) return;
     const e = Math.abs(
       this.selectedDateRange.end.getTime() - this.selectedDateRange.start.getTime()
-    ), s = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
+    ), t = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
     this.emit("selected-date-range-changed", {
       detail: {
         ...this.selectedDateRange,
-        days: s,
+        days: t,
         id: this.id
       }
     });
@@ -94,8 +96,8 @@ const m = class m extends $ {
     this.style.setProperty("--max-width", this.range ? "43em" : "21em");
   }
   _handleDateChange() {
-    console.log("%cdate changed", "color:red", this.date), this.date = this.date ? this.date : c(/* @__PURE__ */ new Date()), this.date = S(
-      k(this.date, this.selectableFrom ?? this.date),
+    console.log("%cdate changed", "color:red", this.date), this.date = this.date && $(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = T(
+      C(this.date, this.selectableFrom ?? this.date),
       this.selectableTo ?? this.date
     ), this._date = new Date(this.date), this._datePlusOneMonth = new Date(this._date.getFullYear(), this._date.getMonth() + 1, 1);
   }
@@ -104,8 +106,23 @@ const m = class m extends $ {
   _handleSelectedDateChange() {
     console.log("selected date changed", this.selectedDate);
   }
+  /**
+   * 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(e) {
+    if (e instanceof Date)
+      this.date = l(e);
+    else if (v(e).dateISO())
+      this.date = e;
+    else
+      throw new Error("Invalid date format");
+    this.emit("update-calendar-view", {
+      detail: e
+    });
+  }
   render() {
-    return y`
+    return D`
 			<div class="calendar-container">
 				<skf-datepicker-calendar
 					.date=${this._date ?? /* @__PURE__ */ new Date()}
@@ -142,45 +159,48 @@ const m = class m extends $ {
   }
   /** @internal */
   _renderTodayBtn() {
-    const { month: e, year: s } = h(), { month: t, year: a } = h(this.date), d = this.selectedDate ?? this.selectedDateRange.start, r = e === t && s === a;
-    let o = !1;
-    return (r && !d || d && e === d.getMonth() && s === d.getFullYear()) && (o = !0), y`
+    let e = !1;
+    if (this.selectableTo && c(this.selectableTo, l(/* @__PURE__ */ new Date())) === -1)
+      return D``;
+    if (this.selectableFrom && c(this.selectableFrom, l(/* @__PURE__ */ new Date())) === 1)
+      return D``;
+    const { month: t, year: a } = g(), { month: s, year: r } = g(this.date), d = this.selectedDate ?? this.selectedDateRange.start, h = t === s && a === r, f = d && c(l(/* @__PURE__ */ new Date()), l(d), "months") === 0;
+    return (h && !d || f && h) && (e = !0), D`
 			<div class="today">
 				<skf-button
 					@click=${this._handleTodayClick}
-					?disabled=${o}
+					?disabled=${e}
 					variant="tertiary"
 					size="sm"
 				>
-					${D(this.date) && (this.selectedDate || this.selectedDateRange.start) && !o ? "Selected date" : "Today"}
+					${_(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? "Selected date" : "Today"}
 				</skf-button>
 			</div>
 		`;
-    function D(_) {
-      const { month: w, year: R } = h(), { month: v, year: b } = h(_);
-      return w === v && R === b;
+    function _(u) {
+      return c(u, l(/* @__PURE__ */ new Date()), "months") === 0;
     }
   }
   /** @internal */
   _handleChangeCalendarView(e) {
-    const s = M(this.date, e);
-    this._animateView(s, () => {
+    const t = c(this.date, e);
+    this._animateView(t, () => {
       this.date = e;
     }).then(() => {
-    }).catch((t) => {
-      console.error(t);
+    }).catch((a) => {
+      console.error(a);
     });
   }
   /** @internal */
-  async _animateView(e, s) {
+  async _animateView(e, t) {
     if (!this.shadowRoot) return;
-    const t = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
-    return t.length ? (await f(
-      t,
+    const a = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
+    return a.length ? (await b(
+      a,
       [{ opacity: 0, transform: `translateX(calc(16px * ${e.toString()}))` }],
       { duration: 100, easing: "ease-in", fill: "backwards" }
-    ), s(), await f(
-      t,
+    ), t(), await b(
+      a,
       [
         { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
         { opacity: 1, transform: "translateX(0)" }
@@ -189,53 +209,53 @@ const m = class m extends $ {
     )) : Promise.resolve();
   }
 };
-m.styles = [C, T];
-let n = m;
-i([
-  l({ reflect: !0 })
-], n.prototype, "locale", 2);
-i([
-  l({ type: String, reflect: !0 })
-], n.prototype, "date", 2);
-i([
-  l({ type: String })
-], n.prototype, "id", 2);
-i([
-  l({ attribute: "invalid-dates" })
-], n.prototype, "invalidDates", 2);
-i([
-  l({ type: Boolean })
-], n.prototype, "range", 2);
-i([
-  p()
-], n.prototype, "selectedDate", 2);
-i([
-  l({ attribute: "selectable-from" })
-], n.prototype, "selectableFrom", 2);
-i([
-  l({ attribute: "selectable-to" })
-], n.prototype, "selectableTo", 2);
-i([
-  p()
-], n.prototype, "selectedDateRange", 2);
-i([
-  p()
-], n.prototype, "_date", 2);
-i([
-  p()
-], n.prototype, "_datePlusOneMonth", 2);
-i([
-  g("range")
-], n.prototype, "_handleRangeChange", 1);
-i([
-  g("date")
-], n.prototype, "_handleDateChange", 1);
-i([
-  g("selectedDateRange")
-], n.prototype, "_handleSelectedDateRangeChange", 1);
-i([
-  g("selectedDate")
-], n.prototype, "_handleSelectedDateChange", 1);
+y.styles = [S, k];
+let i = y;
+n([
+  o({ reflect: !0 })
+], i.prototype, "locale", 2);
+n([
+  o({ type: String, reflect: !0 })
+], i.prototype, "date", 2);
+n([
+  o({ type: String })
+], i.prototype, "id", 2);
+n([
+  o({ attribute: "invalid-dates" })
+], i.prototype, "invalidDates", 2);
+n([
+  o({ type: Boolean })
+], i.prototype, "range", 2);
+n([
+  m()
+], i.prototype, "selectedDate", 2);
+n([
+  o({ attribute: "selectable-from" })
+], i.prototype, "selectableFrom", 2);
+n([
+  o({ attribute: "selectable-to" })
+], i.prototype, "selectableTo", 2);
+n([
+  m()
+], i.prototype, "selectedDateRange", 2);
+n([
+  m()
+], i.prototype, "_date", 2);
+n([
+  m()
+], i.prototype, "_datePlusOneMonth", 2);
+n([
+  p("range")
+], i.prototype, "_handleRangeChange", 1);
+n([
+  p("date")
+], i.prototype, "_handleDateChange", 1);
+n([
+  p("selectedDateRange")
+], i.prototype, "_handleSelectedDateRangeChange", 1);
+n([
+  p("selectedDate")
+], i.prototype, "_handleSelectedDateChange", 1);
 export {
-  n as SkfDatePicker
+  i as SkfDatePicker
 };

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

@@ -17,9 +17,10 @@ export declare function getDateParts(date?: undefined | string | Date | Temporal
 /**
  * @param dateOne - first date to compare as string
  * @param dateTwo - second date to compare as string
+ * @param granularity - the unit to compare the dates by [days, months, years], defaults to days
  * @returns - 0 if the dates are the same, 1 if dateOne is after dateTwo, -1 if dateOne is before dateTwo
  */
-export declare function compareDates(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string): 0 | 1 | -1;
+export declare function compareDates(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string, granularity?: 'days' | 'months' | 'years'): 0 | 1 | -1;
 /**
  * @param dateOne - first date to compare as string
  * @param dateTwo - second date to compare as string
@@ -37,4 +38,4 @@ export declare function earliestDate(...dates: (string | Date)[]): string;
  * @returns the latest date of the list
  */
 export declare function latestDate(...dates: (string | Date)[]): string;
-export declare function assertISODate(date: string | Temporal.PlainDate | Date): string;
+export declare function assertISODate(date: string | Temporal.PlainDate | Date, throwErr?: boolean): string;

package/dist/components/date-picker/datepicker.helpers.js

@@ -1,69 +1,76 @@
-import { Temporal as s } from "@js-temporal/polyfill";
-function h(t, n, e) {
-  const o = (r) => Array.isArray(r) ? r : [r], a = o(t);
+import { is as c } from "../date-picker-input/datepicker-input.helpers.js";
+import { Temporal as e } from "@js-temporal/polyfill";
+function I(t, n, s) {
+  const o = (r) => Array.isArray(r) ? r : [r], f = o(t);
   n = o(n);
-  const f = [];
-  for (const r of a) {
-    const { promise: i, resolve: c, reject: D } = Promise.withResolvers(), l = r.animate(n, {
+  const a = [];
+  for (const r of f) {
+    const { promise: i, resolve: m, reject: p } = Promise.withResolvers(), l = r.animate(n, {
       fill: "forwards",
       duration: 300,
       iterations: 1,
-      ...e
+      ...s
     });
-    l.onfinish = () => c("finished"), l.oncancel = () => D("canceled"), f.push(i);
+    l.onfinish = () => m("finished"), l.oncancel = () => p("canceled"), a.push(i);
   }
-  return Promise.allSettled(f);
+  return Promise.allSettled(a);
 }
-function w(t = s.Now.plainDateISO()) {
-  return t ?? (t = s.Now.plainDateISO()), t instanceof Date && (t = s.PlainDate.from(t.toISOString())), typeof t == "string" && (t = s.PlainDate.from(u(t))), {
+function P(t = e.Now.plainDateISO()) {
+  return t ?? (t = e.Now.plainDateISO()), t instanceof Date && (t = e.PlainDate.from(t.toISOString())), typeof t == "string" && (t = e.PlainDate.from(S(t, !0))), {
     year: t.year,
     month: t.month - 1,
     // new Date is 0 based
     day: t.day
   };
 }
-function y(t, n) {
-  const e = m(t, n);
-  return o(e);
-  function o(a) {
+function v(t, n, s = "days") {
+  console.assert(c(t, n).plainISO(), "Invalid dates passed to compareDates()"), typeof t == "string" && (t = e.PlainDate.from(t)), typeof n == "string" && (n = e.PlainDate.from(n)), console.assert(
+    c(t, n).plain(),
+    `Invalid date was sent to helper function compareDates(). Got ${JSON.stringify(t)} and ${JSON.stringify(n)} passed in`
+  );
+  const o = D(t, n, s);
+  return f(o);
+  function f(a) {
     return Math.max(-1, Math.min(a, 1));
   }
 }
-function m(t, n, e = "days") {
-  return typeof t == "string" && (t = s.PlainDate.from(t)), typeof n == "string" && (n = s.PlainDate.from(n)), console.assert(
-    t instanceof s.PlainDate && n instanceof s.PlainDate,
+function D(t, n, s = "days") {
+  return typeof t == "string" && (t = e.PlainDate.from(t)), typeof n == "string" && (n = e.PlainDate.from(n)), console.assert(
+    t instanceof e.PlainDate && n instanceof e.PlainDate,
     `Invalid date was sent to helper function timeBetween(). Got ${JSON.stringify(t)} and ${JSON.stringify(n)} passed in`
-  ), t.since(n).total({ unit: e });
+  ), s === "months" ? n.until(t, { largestUnit: "months" }).months : s === "years" ? n.until(t, { largestUnit: "years" }).years : n.until(t, { largestUnit: "days" }).days;
 }
-function p(...t) {
+function u(...t) {
   if (t.length === 0)
     throw new Error("At least one date must be provided");
-  const n = (i) => i instanceof Date, e = t.map((i) => n(i) ? i : new Date(i));
-  if (e.length === 1)
-    return e[0].toISOString().split("T")[0];
-  const [o, ...a] = e, f = p(...a), r = new Date(f);
+  const n = (i) => i instanceof Date, s = t.map((i) => n(i) ? i : new Date(i));
+  if (s.length === 1)
+    return s[0].toISOString().split("T")[0];
+  const [o, ...f] = s, a = u(...f), r = new Date(a);
   return o < r ? o.toISOString().split("T")[0] : r.toISOString().split("T")[0];
 }
-function S(...t) {
+function g(...t) {
   if (t.length === 0)
     throw new Error("At least one date must be provided");
-  const n = (i) => i instanceof Date, e = t.map((i) => n(i) ? i : new Date(i));
-  if (e.length === 1)
-    return e[0].toISOString().split("T")[0];
-  const [o, ...a] = e, f = S(...a), r = new Date(f);
+  const n = (i) => i instanceof Date, s = t.map((i) => n(i) ? i : new Date(i));
+  if (s.length === 1)
+    return s[0].toISOString().split("T")[0];
+  const [o, ...f] = s, a = g(...f), r = new Date(a);
   return o > r ? o.toISOString().split("T")[0] : r.toISOString().split("T")[0];
 }
-function u(t) {
-  if (t instanceof Date && (t = s.PlainDate.from(t.toISOString())), typeof t != "string" && (t = t.toString()), !/^\d{4}-\d{2}-\d{2}$/.test(t))
+function S(t, n = !1) {
+  t instanceof Date && (t = e.PlainDate.from(t.toISOString())), typeof t != "string" && (t = t.toString());
+  const s = /^\d{4}-\d{2}-\d{2}$/;
+  if (!s.test(t) && n)
     throw new Error(`Invalid date format. Got ${t} passed in.`);
-  return t;
+  return s.test(t) ? t : "";
 }
 export {
-  u as assertISODate,
-  y as compareDates,
-  h as doAnimate,
-  p as earliestDate,
-  w as getDateParts,
-  S as latestDate,
-  m as timeBetween
+  S as assertISODate,
+  v as compareDates,
+  I as doAnimate,
+  u as earliestDate,
+  P as getDateParts,
+  g as latestDate,
+  D as timeBetween
 };

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

@@ -1,27 +1,12 @@
-import { css as o } from "lit";
-const e = o`
+import { css as r } from "lit";
+const a = r`
 	@layer components {
 		:host {
-			--black: #323232;
-			--call-to-action-color: #007bff;
-			--selected-bg: var(--call-to-action-color); /* hsl(218deg 87% 45%); */
-			--selected-fg: #fff;
-			--in-range-bg: #def;
-			--today: #eee;
-			--today-fg: var(--black);
-			--title-fg: var(--black);
-			--other-month-fg: #999;
-			--hover-bg: #def;
-			--border-color: #ddd;
-			--button-control-fg: #333;
-			--button-control-fg-hover: var(--call-to-action-color);
-			--weekday-fg: var(--black);
-			--calendar-padding: 16px;
 			--max-width: 21em;
 			--day-outline: transparent;
 
-			background-color: #fff;
-			border: solid 1px gray;
+			background-color: var(--skf-bg-color-neutral-1);
+			border: solid 1px var(--skf-border-color-primary);
 			border-radius: 3px;
 			box-shadow: 0 0 10px rgba(0 0 0 / 30%);
 			box-sizing: border-box;
@@ -52,16 +37,19 @@ const e = o`
 		.calendar-container {
 			display: flex;
 			flex-direction: row;
-			gap: var(--calendar-padding);
+			gap: var(--skf-text-color-primary);
 			justify-content: space-between;
 			overflow: hidden;
-			padding: var(--calendar-padding);
+			padding: var(--skf-spacing-50);
+		}
+
+		skf-datepicker-calendar {
+			margin: var(--skf-spacing-50) var(--skf-spacing-50) 0 var(--skf-spacing-50);
 		}
 
 		.today {
-			border-top: 1px solid var(--border-color);
+			border-top: 1px solid var(--skf-border-color-primary);
 			margin-bottom: 0.5rem;
-			margin-top: -1rem;
 			padding-top: 0.5rem;
 			text-align: center;
 
@@ -78,11 +66,11 @@ const e = o`
 				}
 
 				&:hover {
-					background-color: var(--call-to-action-color);
+					background-color: var(--skf-interactive-bg-color-primary);
 				}
 
 				&:active {
-					background-color: lch(from var(--call-to-action-color) calc(l - 5) c h);
+					background-color: lch(from var(--skf-interactive-bg-color-primary) calc(l - 5) c h);
 				}
 
 				&:focus-visible {
@@ -95,5 +83,5 @@ const e = o`
 	}
 `;
 export {
-  e as styles
+  a as styles
 };

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

@@ -1,3 +1,4 @@
+import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
@@ -8,7 +9,7 @@ export declare class SkfDatePickerInput extends FormBase {
     /** @internal */
     static styles: CSSResultGroup;
     /**	@inernal */
-    focusTomeoutId: ReturnType<typeof setTimeout> | undefined;
+    focusTimeoutId: ReturnType<typeof setTimeout> | undefined;
     /** @internal */
     private customError;
     /** @internal */
@@ -48,6 +49,8 @@ export declare class SkfDatePickerInput extends FormBase {
      * @type { "alert" | "success" | "info" | "warning" }
      */
     severity?: FormFieldBaseProps['severity'];
+    /** Size of the input */
+    size: 'sm' | 'md';
     /** Sets validation start */
     validateOn: 'input' | 'change' | 'submit';
     /** The current value of the input field  */
@@ -72,16 +75,21 @@ export declare class SkfDatePickerInput extends FormBase {
     $datepicker: SkfDatePicker;
     /** @internal */
     _defaultSlot: Node[];
+    abortController: AbortController;
+    abortSignal: AbortSignal;
     constructor();
     connectedCallback(): void;
-    _handleSelectedDate: (e: CustomEvent<{
-        date: Date;
-        id: number;
-    }>) => void;
+    disconnectedCallback(): void;
+    _handleSelectedDate: () => void;
     protected firstUpdated(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private _handleDateSelected;
+    /** @internal */
+    _handleKeyboardEvents: (e: KeyboardEvent) => void;
+    /** @internal */
     private _handleFocus;
+    showPopover: () => void;
+    hidePopover: () => void;
     /** @internal */
     _handleBlur: (event: FocusEvent) => void;
     /** @internal */