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

package/dist/components/datepicker/datepicker-popup.component.js

@@ -0,0 +1,272 @@
+var v = (s) => {
+  throw TypeError(s);
+};
+var R = (s, i, e) => i.has(s) || v("Cannot " + e);
+var b = (s, i, e) => (R(s, i, "read from private field"), e ? e.call(s) : i.get(s)), S = (s, i, e) => i.has(s) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), $ = (s, i, e, a) => (R(s, i, "write to private field"), a ? a.call(s, e) : i.set(s, e), e);
+import "../button/button.js";
+import { SkfElement as E } from "../../internal/components/skf-element.js";
+import { watch as y } from "../../internal/helpers/watch.js";
+import { componentStyles as F } from "../../styles/component.styles.js";
+import { LocalizeController as M } from "../../utilities/localize.js";
+import { html as m } from "lit";
+import { property as o, state as u } from "lit/decorators.js";
+import "./datepicker-calendar.js";
+import { getDateParts as f, assertISODate as O, earliestDate as V, latestDate as P, compareDates as g, doAnimate as C } from "./datepicker-popup.helpers.js";
+import { styles as L } from "./datepicker-popup.styles.js";
+import { dateFormatter as d, is as Y } from "./datepicker.helpers.js";
+var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (s, i, e, a) => {
+  for (var t = a > 1 ? void 0 : a ? A(i, e) : i, r = s.length - 1, h; r >= 0; r--)
+    (h = s[r]) && (t = (a ? h(i, e, t) : h(t)) || t);
+  return a && t && x(i, e, t), t;
+}, D;
+const _ = class _ extends E {
+  constructor() {
+    super(...arguments);
+    S(this, D);
+    $(this, D, new M(this)), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.lang = "en", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
+      start: null,
+      end: null
+    }, this._datePlusOneMonth = new Date(
+      new Date(this.date).getFullYear(),
+      new Date(this.date).getMonth() + 1,
+      1
+    ), this._handleCalendarView = (e) => {
+      this._handleChangeCalendarView(e.detail);
+    }, this._handleSelectedDate = (e) => {
+      if (this.selectedDate = e.detail.date, console.log("selectedDate", this.selectedDate), this.range) {
+        const a = this.shadowRoot?.querySelectorAll("skf-datepicker-calendar"), t = this.selectedDateRange, r = t.start && this.selectedDate < t.start;
+        if (!!(t.start && t.end) || r)
+          this.selectedDateRange = {
+            start: this.selectedDate,
+            end: null
+          };
+        else {
+          const p = !!t.start ? { end: e.detail.date } : { start: e.detail.date };
+          this.selectedDateRange = {
+            ...t,
+            ...p
+          };
+        }
+        this._onRangeCompleteEmitEvent(), a?.length && [...a].forEach((c) => {
+          c.selectedDateRange = this.selectedDateRange;
+        });
+      }
+      this.emit("skf-datepicker-selected", {
+        detail: { date: this.range ? this.selectedDateRange : this.selectedDate }
+      }), this.requestUpdate();
+    }, this._handleTodayClick = () => {
+      const { month: e, year: a } = f(), { month: t, year: r } = f(this.date);
+      if (t === e && r === a && (this.selectedDateRange.start || this.selectedDate)) {
+        this.date = d(this.selectedDateRange.start ?? this.selectedDate), this.emit("skf-update-calendar-view", {
+          detail: this.date
+        });
+        return;
+      }
+      if (this.range) {
+        this.emit("skf-update-calendar-view", {
+          detail: d(/* @__PURE__ */ new Date())
+        });
+        return;
+      }
+      this.date = d(/* @__PURE__ */ new Date());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("skf-update-calendar-view", this._handleCalendarView), this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  firstUpdated() {
+    (this.selectedDateRange.start ?? this.selectedDate) && this._onRangeCompleteEmitEvent();
+    const a = this.selectedDate ?? this.selectedDateRange.start;
+    a instanceof Date && this.gotoDate(a);
+  }
+  clearSelection() {
+    this.selectedDateRange = {
+      start: null,
+      end: null
+    }, this.selectedDate = void 0;
+  }
+  /** @internal */
+  _onRangeCompleteEmitEvent() {
+    if (!this.selectedDateRange.start || !this.selectedDateRange.end) return;
+    const e = Math.abs(
+      this.selectedDateRange.end.getTime() - this.selectedDateRange.start.getTime()
+    ), a = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
+    this.emit("selected-date-range-changed", {
+      detail: {
+        ...this.selectedDateRange,
+        days: a,
+        id: this.id
+      }
+    });
+  }
+  _handleRangeChange() {
+    this.style.setProperty("--max-width", this.range ? "43em" : "21em");
+  }
+  _handleDateChange() {
+    console.log("%cdate changed", "color:red", this.date), this.date = this.date && O(this.date) ? this.date : d(/* @__PURE__ */ new Date()), this.date = V(
+      P(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);
+  }
+  _handleSelectedDateRangeChange() {
+  }
+  _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 = d(e);
+    else if (Y(e).dateISO())
+      this.date = e;
+    else
+      throw new Error("Invalid date format");
+    this.emit("skf-update-calendar-view", {
+      detail: e
+    });
+  }
+  render() {
+    return m`
+			<div class="calendar-container">
+				<skf-datepicker-calendar
+					.date=${this._date ?? /* @__PURE__ */ new Date()}
+					.eventid="${this.id}"
+					.range=${this.range}
+					.selectedDate=${this.selectedDate}
+					.selectedDateRange=${this.selectedDateRange}
+					.selectableFrom=${this.selectableFrom}
+					.selectableTo=${this.selectableTo}
+					.invalidDates=${this.invalidDates}
+					class="start"
+					id=${this.id}
+					lang="${this.lang}"
+					locale="${this.locale}"
+				></skf-datepicker-calendar>
+				<skf-datepicker-calendar
+					?hidden=${!this.range}
+					.date=${this._datePlusOneMonth}
+					.eventid="${this.id}"
+					.range=${!0}
+					.selectedDate="${this.selectedDate}"
+					.selectedDateRange=${this.selectedDateRange}
+					.selectableFrom=${this.selectableFrom}
+					.selectableTo=${this.selectableTo}
+					.invalidDates=${this.invalidDates}
+					class="end"
+					id=${`${this.id}-range-end`}
+					locale="${this.locale}"
+				></skf-datepicker-calendar>
+			</div>
+			${this._renderTodayBtn()}
+			<slot></slot>
+			<div class="triangle"></div>
+		`;
+  }
+  /** @internal */
+  _renderTodayBtn() {
+    let e = !1;
+    if (this.selectableTo && g(this.selectableTo, d(/* @__PURE__ */ new Date())) === -1)
+      return m``;
+    if (this.selectableFrom && g(this.selectableFrom, d(/* @__PURE__ */ new Date())) === 1)
+      return m``;
+    const { month: a, year: t } = f(), { month: r, year: h } = f(this.date), c = this.selectedDate ?? this.selectedDateRange.start, p = a === r && t === h, T = c && g(d(/* @__PURE__ */ new Date()), d(c), "months") === 0;
+    return (p && !c || T && p) && (e = !0), m`
+			<div class="today">
+				<skf-button
+					@click=${this._handleTodayClick}
+					?disabled=${e}
+					variant="tertiary"
+					size="sm"
+				>
+					${k(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? b(this, D).term("selectedDay") : b(this, D).term("today")}
+				</skf-button>
+			</div>
+		`;
+    function k(w) {
+      return g(w, d(/* @__PURE__ */ new Date()), "months") === 0;
+    }
+  }
+  /** @internal */
+  _handleChangeCalendarView(e) {
+    const a = g(this.date, e);
+    this._animateView(a, () => {
+      this.date = e;
+    }).then(() => {
+    }).catch((t) => {
+      console.error(t);
+    });
+  }
+  /** @internal */
+  async _animateView(e, a) {
+    if (!this.shadowRoot) return;
+    const t = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
+    return t.length ? (await C(
+      t,
+      [{ opacity: 0, transform: `translateX(calc(16px * ${e.toString()}))` }],
+      { duration: 100, easing: "ease-in", fill: "backwards" }
+    ), a(), await C(
+      t,
+      [
+        { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
+        { opacity: 1, transform: "translateX(0)" }
+      ],
+      { duration: 100, easing: "ease-out", fill: "backwards" }
+    )) : Promise.resolve();
+  }
+};
+D = new WeakMap(), _.styles = [F, L];
+let n = _;
+l([
+  o({ reflect: !0 })
+], n.prototype, "locale", 2);
+l([
+  o({ type: String, reflect: !0 })
+], n.prototype, "date", 2);
+l([
+  o({ type: String })
+], n.prototype, "id", 2);
+l([
+  o({ attribute: "invalid-dates" })
+], n.prototype, "invalidDates", 2);
+l([
+  o({ type: String })
+], n.prototype, "lang", 2);
+l([
+  o({ type: Boolean })
+], n.prototype, "range", 2);
+l([
+  u()
+], n.prototype, "selectedDate", 2);
+l([
+  o({ attribute: "selectable-from" })
+], n.prototype, "selectableFrom", 2);
+l([
+  o({ attribute: "selectable-to" })
+], n.prototype, "selectableTo", 2);
+l([
+  u()
+], n.prototype, "selectedDateRange", 2);
+l([
+  u()
+], n.prototype, "_date", 2);
+l([
+  u()
+], n.prototype, "_datePlusOneMonth", 2);
+l([
+  y("range")
+], n.prototype, "_handleRangeChange", 1);
+l([
+  y("date")
+], n.prototype, "_handleDateChange", 1);
+l([
+  y("selectedDateRange")
+], n.prototype, "_handleSelectedDateRangeChange", 1);
+l([
+  y("selectedDate")
+], n.prototype, "_handleSelectedDateChange", 1);
+export {
+  n as SkfDatepickerPopup
+};

package/dist/components/datepicker/datepicker-popup.d.ts

@@ -0,0 +1,8 @@
+import { SkfDatepickerPopup } from './datepicker-popup.component.js';
+export * from './datepicker-popup.component.js';
+export default SkfDatepickerPopup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-datepicker-popup': SkfDatepickerPopup;
+    }
+}

package/dist/components/{date-picker/datepicker.helpers.d.ts → datepicker/datepicker-popup.helpers.d.ts}

@@ -22,12 +22,12 @@ export declare function getDateParts(date?: undefined | string | Date | Temporal
  */
 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
+ * @param dateOne - first date to compare as string (accepts Date and Temporal.PlainDate too)
+ * @param dateTwo - second date to compare as string (accepts Date and Temporal.PlainDate too)
  * @param unit - the unit to compare the dates by [days, months, years]
  * @returns the difference between the two dates in the specified unit
  */
-export declare function timeBetween(dateOne: Temporal.PlainDate | string, dateTwo: Temporal.PlainDate | string, unit?: 'days' | 'months' | 'years'): number;
+export declare function timeBetween(dateOne: Temporal.PlainDate | Date | string, dateTwo: Temporal.PlainDate | Date | string, unit?: 'days' | 'months' | 'years'): number;
 /**
  * @param dates - a list of dates to compare
  * @returns - the earliest date of the list

package/dist/components/datepicker/datepicker-popup.helpers.js

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

package/dist/components/datepicker/datepicker-popup.js

@@ -0,0 +1,6 @@
+import { SkfDatepickerPopup as p } from "./datepicker-popup.component.js";
+p.define("skf-datepicker-popup");
+export {
+  p as SkfDatepickerPopup,
+  p as default
+};

package/dist/components/{date-picker/datepicker.styles.js → datepicker/datepicker-popup.styles.js}

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const a = r`
+const e = r`
 	@layer components {
 		:host {
 			--max-width: 21em;
@@ -8,7 +8,7 @@ const a = r`
 			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-shadow: 0 0 10px rgb(0 0 0 / 30%);
 			box-sizing: border-box;
 			display: block;
 			font-family: Helvetica, sans-serif;
@@ -83,5 +83,5 @@ const a = r`
 	}
 `;
 export {
-  a as styles
+  e as styles
 };

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

@@ -3,10 +3,15 @@ import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
-import '../date-picker/datepicker.js';
-import type { SkfDatePicker, SkfDatePickerDateRange } from '../date-picker/datepicker.js';
-export declare class SkfDatePickerInput extends FormBase {
+import type { SkfDatepickerPopup, SkfDatepickerPopupDateRange } from './datepicker-popup.component.js';
+import './datepicker-popup.js';
+/**
+ * @tagname skf-datepicker
+ */
+export declare class SkfDatepicker extends FormBase {
+    #private;
     /** @internal */
     static styles: CSSResultGroup;
     /**	@inernal */
@@ -21,6 +26,8 @@ export declare class SkfDatePickerInput extends FormBase {
     id: string;
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, hides the label visually */
     hideLabel?: boolean;
     /** If defined, displays informational text below the field */
@@ -35,8 +42,6 @@ export declare class SkfDatePickerInput extends FormBase {
     range: boolean;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
     readonly?: boolean;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /**
      * Earliest selectable date. (yyyy-mm-dd format)
      */
@@ -61,7 +66,7 @@ export declare class SkfDatePickerInput extends FormBase {
     /** true if the internal state is invalid  */
     invalid: boolean;
     /** @internal */
-    selectedRangeDates: SkfDatePickerDateRange;
+    selectedRangeDates: SkfDatepickerPopupDateRange;
     /** @internal */
     private showClearbutton;
     /** @internal */
@@ -73,35 +78,37 @@ export declare class SkfDatePickerInput extends FormBase {
     /** @internal */
     $input_range_end: HTMLInputElement;
     /** @internal */
-    $datepicker: SkfDatePicker;
+    $datepickerPopup: SkfDatepickerPopup;
     /** @internal */
     _defaultSlot: Node[];
-    abortController: AbortController;
-    abortSignal: AbortSignal;
+    /** @internal */
+    private abortController;
+    /** @internal */
+    private abortSignal;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    _handleSelectedDate: () => void;
+    private _handleSelectedDate;
     protected firstUpdated(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    _handleValueChange(): void;
     private _handleDateSelected;
     /** @internal */
     _handleKeyboardEvents: (e: KeyboardEvent) => void;
     /** @internal */
     private _handleFocus;
-    showPopover: () => void;
-    hidePopover: () => void;
+    showPopover(): void;
+    hidePopover(): void;
     /** @internal */
     _handleBlur: (event: FocusEvent) => void;
     /** @internal */
     private _handleClose;
     /** @internal */
     private clearInput;
-    _handleValueChange(): void;
     /**
      * Clears the input field
      */
-    clear: () => void;
+    clear(): void;
     /** @internal although called on input its only triggered once value is valid date */
     _handleInput: (event: Event) => void;
     /** @internal */