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

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

@@ -1,31 +1,63 @@
-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;
+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 g = class g extends _ {
+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.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;
+    }, 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._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) {
@@ -48,7 +80,7 @@ const g = class g extends _ {
     }
     if (s)
       try {
-        return l.PlainDate.from({
+        return m.PlainDate.from({
           year: t,
           month: e + 1,
           day: a
@@ -68,7 +100,7 @@ const g = class g extends _ {
       day: t.getDate()
     };
     try {
-      return l.PlainDate.from(e);
+      return m.PlainDate.from(e);
     } catch (a) {
       return console.log(e), console.error("error", a), null;
     }
@@ -76,19 +108,19 @@ const g = class g extends _ {
   /** @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;
+    const s = m.PlainDate.compare(t, e) > 0, i = m.PlainDate.compare(t, a) < 0;
     return s && i;
   }
   render() {
-    return u`
+    return p`
 			${this.getCalendarHead()}
 
 			<!-- weekdays -->
 			<ul class="weekdays grid">
-				${D(
+				${w(
       Array.from({ length: 7 }, (t, e) => e),
       (t) => t,
-      (t) => u`<li>
+      (t) => p`<li>
 							${new Intl.DateTimeFormat(this.locale, {
         weekday: "short"
       }).format(new Date(2018, 0, t)).slice(0, 2)}
@@ -101,12 +133,12 @@ const g = class g extends _ {
 				<!-- previous month -->
 				${this.getCalendarPreMonthDays()}
 				<!-- current days -->
-				${D(
+				${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 u`<li>
+        return p`<li>
 							<button
 								class="day ${a}"
 								data-date=${e}
@@ -137,19 +169,19 @@ const g = class g extends _ {
   }
   /** @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();
+    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.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(
+    ) && 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()
     );
-    (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(" ");
+    (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({
@@ -166,7 +198,7 @@ const g = class g extends _ {
   }
   /** @internal */
   getCalendarPreMonthDays() {
-    return D(
+    return w(
       Array.from(
         {
           length: this.getCalendarStartDay().getDay()
@@ -183,7 +215,7 @@ const g = class g extends _ {
           },
           !0
         ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), u`<li class="day ">
+        return (s || i) && e.push("invalid"), p`<li class="day ">
 					<button
 						class=${e.join(" ")}
 						data-date=${a}
@@ -192,7 +224,7 @@ const g = class g extends _ {
             month: this.date.getMonth() - 1,
             day: t
           }), this.emit("update-calendar-view", {
-            detail: l.PlainDate.from(c(this.date)).subtract({ months: 1 }).toString()
+            detail: m.PlainDate.from(y(this.date)).subtract({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -205,7 +237,7 @@ const g = class g extends _ {
   }
   /** @internal */
   getCalendarRemaningDays() {
-    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : D(
+    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : w(
       Array.from(
         {
           length: 7 - this._createDate({
@@ -226,7 +258,7 @@ const g = class g extends _ {
           },
           !0
         ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), u`<li class="day">
+        return (s || i) && e.push("invalid"), p`<li class="day">
 					<button
 						data-date=${a}
 						class=${e.join(" ")}
@@ -235,7 +267,7 @@ const g = class g extends _ {
             month: this.date.getMonth() + 1,
             day: t + 1
           }), this.emit("update-calendar-view", {
-            detail: l.PlainDate.from(c(this.date)).add({ months: 1 }).toString()
+            detail: m.PlainDate.from(y(this.date)).add({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -264,16 +296,16 @@ const g = class g extends _ {
   }
   /** @internal */
   getCalendarHead() {
-    return u` <div class="calendar-head">
+    return p` <div class="calendar-head">
 			<div
-				class="calendar-head__controls${this.range && this.classList.contains("end") ? " hide" : ""}"
+				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()
+        detail: m.PlainDate.from(y(this.date)).subtract({ years: 1 }).toString()
       });
     }}"
 				>
@@ -284,7 +316,7 @@ const g = class g extends _ {
 					title="Previous month"
 					@click="${() => {
       this.emit("update-calendar-view", {
-        detail: l.PlainDate.from(c(this.date)).subtract({ months: 1 }).toString()
+        detail: m.PlainDate.from(y(this.date)).subtract({ months: 1 }).toString()
       });
     }}"
 				>
@@ -292,17 +324,18 @@ const g = class g extends _ {
 				</button>
 			</div>
 			<h4>
-				${this.date.toLocaleString(this.locale, { month: "short" })} ${this.date.getFullYear()}
+				${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" : ""}"
+				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()
+        detail: m.PlainDate.from(y(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
@@ -313,7 +346,7 @@ const g = class g extends _ {
 					title="Next year"
 					@click="${() => {
       this.emit("update-calendar-view", {
-        detail: l.PlainDate.from(c(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
+        detail: m.PlainDate.from(y(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
@@ -323,60 +356,60 @@ const g = class g extends _ {
 		</div>`;
   }
 };
-g.styles = [$, M];
-let r = g;
-n([
-  o({
+E.styles = [C, F];
+let o = E;
+d([
+  g({
     converter: {
-      fromAttribute(h) {
-        return console.log("value", typeof h), new Date(h);
+      fromAttribute(D) {
+        return console.log("value", typeof D), new Date(D);
       },
-      toAttribute(h) {
-        return h.toISOString();
+      toAttribute(D) {
+        return D.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({
+], 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: (h) => new Date(h) },
+    converter: { fromAttribute: (D) => new Date(D) },
     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);
+], 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 {
-  r as SkfDatePickerCalendar
+  o as SkfDatePickerCalendar
 };

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

@@ -1,10 +1,11 @@
 import { css as e } from "lit";
-const r = e`
+const o = e`
 	@layer components {
 		:host {
 			box-sizing: inherit;
 			contain: layout;
 			display: block;
+			position: relative;
 			width: 100%;
 		}
 
@@ -21,7 +22,7 @@ const r = e`
 		}
 
 		h4 {
-			color: var(--title-fg);
+			color: var(--skf-bg-color-neutral-7);
 			font-size: 1.2em;
 			margin: 0;
 			padding: 0;
@@ -29,7 +30,7 @@ const r = e`
 		}
 
 		.weekdays > li {
-			color: var(--weekday-fg);
+			color: var(--skf-text-color-primary);
 			display: grid;
 			font-size: 1.2em;
 			margin-block: 1em 0.5em;
@@ -42,7 +43,7 @@ const r = e`
 			border-radius: 0.2em;
 			display: grid;
 			min-width: 2.5em;
-			outline: 1px solid var(--day-outline);
+			outline: 1px solid transparent;
 			place-items: center;
 
 			& button {
@@ -60,22 +61,22 @@ const r = e`
 
 				&:focus-visible {
 					border-radius: 0.2em;
-					outline: 2px solid #469;
+					outline: 2px solid #469; /* TODO: token? */
 					outline-offset: 2px;
 				}
 
 				&.today {
-					background-color: var(--today);
-					color: var(--today-fg);
+					background-color: var(--skf-bg-color-neutral-3);
+					color: var(--skf-bg-color-neutral-7);
 				}
 
 				&.in-range {
-					background-color: var(--in-range-bg);
+					background-color: var(--skf-interactive-bg-color-secondary-hover);
 				}
 
 				&.selected {
-					background-color: var(--selected-bg);
-					color: var(--selected-fg);
+					background-color: var(--skf-interactive-bg-color-primary);
+					color: var(--skf-bg-color-neutral-1);
 				}
 
 				&.selected-start {
@@ -92,11 +93,11 @@ const r = e`
 
 				&.prevmonth,
 				&.nextmonth {
-					color: var(--other-month-fg);
+					color: var(--skf-text-color-tertiary);
 				}
 
 				&:not(.selected):hover {
-					background-color: var(--hover-bg);
+					background-color: var(--skf-interactive-bg-color-secondary-hover);
 					transition-duration: 0s;
 				}
 
@@ -116,30 +117,36 @@ const r = e`
 		}
 
 		.calendar-head {
-			align-items: baseline;
+			align-items: center;
 			display: flex;
 			font-size: 1.2em;
 			gap: 0;
-			grid-template-columns: min-content auto min-content;
 			justify-content: space-between;
-			margin: 0 0 1em;
+			margin: 0;
 			padding: 0;
-			position: relative;
+
+			:host([class='end']) & {
+				transform: translateX(calc(var(--skf-spacing-50) * -1));
+			}
+
+			:host([class='start']) & {
+				transform: translateX(var(--skf-spacing-50));
+			}
 
 			&::after {
-				background-color: var(--border-color);
+				background-color: var(--skf-border-color-primary);
 				bottom: -0.8em;
 				content: '';
 				display: block;
 				grid-column: 1 / -1;
 				height: 1px;
-				left: 0;
-				margin-inline: calc(var(--calendar-padding) * -1);
+				left: calc(var(--skf-spacing-50) * -1);
+				margin-inline: calc(var(--skf-spacing-50) * -2);
 				position: absolute;
-				right: 0;
+				right: calc(var(--skf-spacing-50) * -1);
 			}
 
-			& .calendar-head__controls {
+			& .calendar-head-controls {
 				display: contents;
 
 				&.hide {
@@ -148,7 +155,7 @@ const r = e`
 			}
 
 			& h4 {
-				color: var(--title-fg);
+				color: var(--skf-bg-color-neutral-7);
 				font-size: 1.2em;
 				margin: 0;
 				padding: 0;
@@ -156,15 +163,17 @@ const r = e`
 				white-space: nowrap;
 			}
 
+			/* stylelint-disable-next-line no-descending-specificity */
 			& button {
 				background-color: transparent;
 				border: none;
-				color: var(--button-control-fg);
+				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;
@@ -175,8 +184,9 @@ const r = e`
 					width: 1em;
 				}
 
+				/* stylelint-disable-next-line no-descending-specificity */
 				&:hover {
-					color: var(--button-control-fg-hover);
+					color: var(--skf-interactive-bg-color-primary);
 				}
 			}
 		}
@@ -188,5 +198,5 @@ const r = e`
 	}
 `;
 export {
-  r as styles
+  o as styles
 };

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

@@ -64,6 +64,11 @@ export declare class SkfDatePicker extends SkfElement {
     _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;