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

package/dist/components/checkbox/checkbox.component.js

@@ -1,25 +1,35 @@
 import "../icon/icon.js";
-import { FormBase as c } from "../../internal/components/formBase.js";
+import { FormBase as p } from "../../internal/components/formBase.js";
 import { watch as h } from "../../internal/helpers/watch.js";
 import { Asterisk as v } from "../../internal/templates/asterisk.js";
 import m from "../../styles/component.styles.js";
-import { html as p, nothing as y } from "lit";
-import { property as r, state as f, query as _ } from "lit/decorators.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import g from "./checkbox.styles.js";
-var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (u, i, s, a) => {
-  for (var l = a > 1 ? void 0 : a ? I(i, s) : i, o = u.length - 1, n; o >= 0; o--)
-    (n = u[o]) && (l = (a ? n(i, s, l) : n(l)) || l);
-  return a && l && $(i, s, l), l;
+import { html as c, nothing as f } from "lit";
+import { property as r, state as y, query as g } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import b from "./checkbox.styles.js";
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (u, t, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? $(t, s) : t, n = u.length - 1, o; n >= 0; n--)
+    (o = u[n]) && (l = (a ? o(t, s, l) : o(l)) || l);
+  return a && l && k(t, s, l), l;
 };
-const d = class d extends c {
+const d = class d extends p {
   constructor() {
-    super(...arguments), this._initiallyChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (i) => {
-      i.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
-    }, this._renderIcon = (i) => p`
-		<skf-icon color="inverse" name=${i} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
+    super(...arguments), this._initiallyChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+      t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
+    }, this._renderIcon = (t) => c`
+		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
 	`;
   }
+  get checked() {
+    var t;
+    return ((t = this.$input) == null ? void 0 : t.checked) ?? !1;
+  }
+  set checked(t) {
+    this.setAttribute("checked", String(!!t)), this.$input && (this.$input.checked = !!t);
+  }
+  handleCheckedChange() {
+    this.setFormValue(this.checked ? this.value : null), this._validateInput();
+  }
   handleInvalidChange() {
     this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
   }
@@ -37,8 +47,8 @@ const d = class d extends c {
       this.setValidity({}), this._validateInput();
   }
   firstUpdated() {
-    var i;
-    (i = this.$input) == null || i.addEventListener("change", (s) => {
+    var t;
+    (t = this.$input) == null || t.addEventListener("change", (s) => {
       var a;
       s.stopPropagation(), this.pristine = !1, this.checked = (a = this.$input) == null ? void 0 : a.checked, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
     }), this.addEventListener("invalid", (s) => {
@@ -47,21 +57,21 @@ const d = class d extends c {
   }
   /** @internal */
   _validateInput() {
-    var i;
+    var t;
     if (this._invalid = !1, this.customInvalid)
       this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
     else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
       const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        ((i = this.$input) == null ? void 0 : i.validationMessage) || "Please check this box if you want to proceed"
+        ((t = this.$input) == null ? void 0 : t.validationMessage) || "Please check this box if you want to proceed"
       );
       this.setValidity({ valueMissing: !0 }, String(s));
     } else
       this.setValidity({});
   }
   render() {
-    return p`
+    return c`
 			<label id="root">
 				<input
 					?checked=${this.checked}
@@ -69,69 +79,72 @@ const d = class d extends c {
 					?required=${this.required}
 					.indeterminate=${this.indeterminate ?? !1}
 					aria-invalid=${!!this._invalid}
-					name=${b(this.name)}
+					name=${_(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
 				${this._renderIcon("check")} ${this._renderIcon("removeMinus")}
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? v(this.requiredLabel) : y}
+					${this.required ? v(this.requiredLabel) : f}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [m, g];
-let t = d;
-e([
+d.styles = [m, b];
+let e = d;
+i([
   r({ type: Boolean })
-], t.prototype, "debug", 2);
-e([
+], e.prototype, "debug", 2);
+i([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
-e([
+], e.prototype, "checked", 1);
+i([
   r({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
-], t.prototype, "customInvalid", 2);
-e([
+], e.prototype, "customInvalid", 2);
+i([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "indeterminate", 2);
-e([
+], e.prototype, "indeterminate", 2);
+i([
   r()
-], t.prototype, "label", 2);
-e([
+], e.prototype, "label", 2);
+i([
   r()
-], t.prototype, "name", 2);
-e([
+], e.prototype, "name", 2);
+i([
   r({ attribute: "required-label" })
-], t.prototype, "requiredLabel", 2);
-e([
+], e.prototype, "requiredLabel", 2);
+i([
   r({ reflect: !0 })
-], t.prototype, "severity", 2);
-e([
+], e.prototype, "severity", 2);
+i([
   r({ type: Boolean, attribute: "show-valid" })
-], t.prototype, "showValid", 2);
-e([
+], e.prototype, "showValid", 2);
+i([
   r({ reflect: !0 })
-], t.prototype, "size", 2);
-e([
+], e.prototype, "size", 2);
+i([
   r()
-], t.prototype, "value", 2);
-e([
-  f()
-], t.prototype, "_invalid", 2);
-e([
-  _("input")
-], t.prototype, "$input", 2);
-e([
+], e.prototype, "value", 2);
+i([
+  y()
+], e.prototype, "_invalid", 2);
+i([
+  g("input")
+], e.prototype, "$input", 2);
+i([
+  h("checked", { afterUpdate: !0 })
+], e.prototype, "handleCheckedChange", 1);
+i([
   h("_invalid")
-], t.prototype, "handleInvalidChange", 1);
-e([
+], e.prototype, "handleInvalidChange", 1);
+i([
   h("_invalid", { afterUpdate: !0 })
-], t.prototype, "handleDebugInvalid", 1);
-e([
+], e.prototype, "handleDebugInvalid", 1);
+i([
   h("customInvalid")
-], t.prototype, "handleCustomInvalidChange", 1);
+], e.prototype, "handleCustomInvalidChange", 1);
 export {
-  t as SkfCheckbox
+  e as SkfCheckbox
 };

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

@@ -0,0 +1,72 @@
+import { SkfElement } from '../../internal/components/skf-element.js';
+import { Temporal } from '@js-temporal/polyfill';
+import { type CSSResultGroup } from 'lit';
+interface DateParts {
+    year?: number;
+    month?: number;
+    day?: number;
+}
+export declare class SkfDatePickerCalendar extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    _secondCalendarOffset: number;
+    /** @internal calendar month to display */
+    date: Date;
+    eventid: string;
+    firstDayOfWeek: number;
+    /**
+     * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
+     */
+    invalidDates?: string;
+    locale: string;
+    range: boolean;
+    /**
+     * Earliest selectable date. (yyyy-mm-dd format)
+     */
+    selectableFrom?: string;
+    /**
+     * Latest selectable date. (yyyy-mm-dd format)
+     */
+    selectableTo?: string;
+    selectedDate?: Date;
+    selectedDateRange: {
+        start: Date | null;
+        end: Date | null;
+    };
+    /** @internal */
+    _numberOfDays: number;
+    /** @internal */
+    _numberOfDaysLastMonth: number;
+    firstUpdated(): void;
+    /** For single select, the selected date */
+    attributeChangedCallback(name: string, oldVal: unknown, newVal: unknown): void;
+    /** @internal */
+    handleDateChange(): void;
+    /** @internal */
+    _createDate({ year, month, day }: DateParts, useTemporalApi: true): Temporal.PlainDate;
+    _createDate({ year, month, day }: DateParts, useTemporalApi?: false): Date;
+    /** @internal Converts a new Date object to PlainDate type. If no argument sent, uses 'this.date' */
+    _plainDate(date?: Date | null): Temporal.PlainDate | null;
+    /** @internal Check if a day is between two dates */
+    _isDateBetween(dateToCheck: Temporal.PlainDate, startDate?: Temporal.PlainDate, endDate?: Temporal.PlainDate): boolean;
+    render(): import("lit").TemplateResult<1>;
+    /** @internal */
+    private returnDayClasses;
+    /** @internal */
+    private handleSelectDay;
+    /** @internal */
+    private getCalendarPreMonthDays;
+    /** @internal */
+    private getCalendarRemaningDays;
+    /** @internal */
+    private calendarMonthStartsOn;
+    /** @internal */
+    private getCalendarStartDay;
+    dateSelectable: (dateString: string) => {
+        matchesInvalidDates: boolean | undefined;
+        dateWithinRange: boolean;
+    };
+    /** @internal */
+    private getCalendarHead;
+}
+export {};

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;