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

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

@@ -0,0 +1,261 @@
+import "../button/button.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 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 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,
+      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) => {
+      var t;
+      if (this.selectedDate = e.detail.date, console.log("selectedDate", this.selectedDate), this.range) {
+        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 f = !!s.start ? { end: e.detail.date } : { start: e.detail.date };
+          this.selectedDateRange = {
+            ...s,
+            ...f
+          };
+        }
+        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: 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: l(/* @__PURE__ */ new Date())
+        });
+        return;
+      }
+      this.date = l(/* @__PURE__ */ new Date());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("update-calendar-view", this._handleCalendarView), this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  firstUpdated() {
+    (this.selectedDateRange.start ?? this.selectedDate) && this._onRangeCompleteEmitEvent();
+    const t = this.selectedDate ?? this.selectedDateRange.start;
+    t instanceof Date && this.gotoDate(t);
+  }
+  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()
+    ), t = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
+    this.emit("selected-date-range-changed", {
+      detail: {
+        ...this.selectedDateRange,
+        days: t,
+        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 && $(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);
+  }
+  _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 = 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 D`
+			<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}
+					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 && 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=${e}
+					variant="tertiary"
+					size="sm"
+				>
+					${_(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? "Selected date" : "Today"}
+				</skf-button>
+			</div>
+		`;
+    function _(u) {
+      return c(u, l(/* @__PURE__ */ new Date()), "months") === 0;
+    }
+  }
+  /** @internal */
+  _handleChangeCalendarView(e) {
+    const t = c(this.date, e);
+    this._animateView(t, () => {
+      this.date = e;
+    }).then(() => {
+    }).catch((a) => {
+      console.error(a);
+    });
+  }
+  /** @internal */
+  async _animateView(e, t) {
+    if (!this.shadowRoot) return;
+    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" }
+    ), t(), await b(
+      a,
+      [
+        { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
+        { opacity: 1, transform: "translateX(0)" }
+      ],
+      { duration: 100, easing: "ease-out", fill: "backwards" }
+    )) : Promise.resolve();
+  }
+};
+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 {
+  i as SkfDatePicker
+};

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

@@ -0,0 +1,10 @@
+import { SkfDatePickerCalendar } from './datepicker.calendar.component.js';
+import { SkfDatePicker } from './datepicker.component.js';
+export * from './datepicker.component.js';
+export default SkfDatePicker;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-datepicker': SkfDatePicker;
+        'skf-datepicker-calendar': SkfDatePickerCalendar;
+    }
+}

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

@@ -0,0 +1,41 @@
+import { Temporal } from '@js-temporal/polyfill';
+/**
+ * A nifty little waapi wrapper helper that
+ * mainly turns the onfinished callback to a promise.
+ * But also allows animations on multiple targets.
+ */
+export declare function doAnimate(target: Element | Element[] | HTMLElement | HTMLElement[], keyframes: Keyframe | Keyframe[], options: KeyframeAnimationOptions): Promise<PromiseSettledResult<any>[]>;
+/**
+ * @param date - optional date to get parts from, uses todays date if not provided
+ * @returns destructable object with year, month and day. NB: month is 0 based.
+ */
+export declare function getDateParts(date?: undefined | string | Date | Temporal.PlainDate): {
+    year: number;
+    month: number;
+    day: number;
+};
+/**
+ * @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, granularity?: 'days' | 'months' | 'years'): 0 | 1 | -1;
+/**
+ * @param dateOne - first date to compare as string
+ * @param dateTwo - second date to compare as string
+ * @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;
+/**
+ * @param dates - a list of dates to compare
+ * @returns - the earliest date of the list
+ */
+export declare function earliestDate(...dates: (string | Date)[]): string;
+/**
+ * @param dates - a list of dates to compare
+ * @returns the latest date of the list
+ */
+export declare function latestDate(...dates: (string | Date)[]): string;
+export declare function assertISODate(date: string | Temporal.PlainDate | Date, throwErr?: boolean): string;

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

@@ -0,0 +1,76 @@
+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 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,
+      ...s
+    });
+    l.onfinish = () => m("finished"), l.oncancel = () => p("canceled"), a.push(i);
+  }
+  return Promise.allSettled(a);
+}
+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 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 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`
+  ), s === "months" ? n.until(t, { largestUnit: "months" }).months : s === "years" ? n.until(t, { largestUnit: "years" }).years : n.until(t, { largestUnit: "days" }).days;
+}
+function u(...t) {
+  if (t.length === 0)
+    throw new Error("At least one date must be provided");
+  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 g(...t) {
+  if (t.length === 0)
+    throw new Error("At least one date must be provided");
+  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 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 s.test(t) ? t : "";
+}
+export {
+  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.js

@@ -0,0 +1,8 @@
+import { SkfDatePickerCalendar as e } from "./datepicker.calendar.component.js";
+import { SkfDatePicker as r } from "./datepicker.component.js";
+r.define("skf-datepicker");
+e.define("skf-datepicker-calendar");
+export {
+  r as SkfDatePicker,
+  r as default
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,87 @@
+import { css as r } from "lit";
+const a = r`
+	@layer components {
+		:host {
+			--max-width: 21em;
+			--day-outline: transparent;
+
+			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;
+			display: block;
+			font-family: Helvetica, sans-serif;
+			font-size: 0.7rem;
+			max-width: var(--max-width);
+			position: relative;
+		}
+
+		.triangle {
+			border: 10px solid transparent;
+			border-bottom-color: #fff;
+			border-top: 0;
+			display: block;
+			height: 0;
+			left: 50%;
+			margin-left: -10px;
+			position: absolute;
+			top: -10px;
+			width: 0;
+		}
+
+		:host([hidden]) {
+			display: none !important;
+		}
+
+		.calendar-container {
+			display: flex;
+			flex-direction: row;
+			gap: var(--skf-text-color-primary);
+			justify-content: space-between;
+			overflow: hidden;
+			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(--skf-border-color-primary);
+			margin-bottom: 0.5rem;
+			padding-top: 0.5rem;
+			text-align: center;
+
+			button {
+				background-color: #333;
+				border-radius: 4px;
+				color: white;
+				padding-inline: 0.7em;
+				transition: background-color 0.2s;
+
+				&[disabled] {
+					opacity: 0.5;
+					pointer-events: none;
+				}
+
+				&:hover {
+					background-color: var(--skf-interactive-bg-color-primary);
+				}
+
+				&:active {
+					background-color: lch(from var(--skf-interactive-bg-color-primary) calc(l - 5) c h);
+				}
+
+				&:focus-visible {
+					border-radius: 0.2em;
+					outline: 2px solid #469;
+					outline-offset: 2px;
+				}
+			}
+		}
+	}
+`;
+export {
+  a as styles
+};

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

@@ -0,0 +1,115 @@
+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';
+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 {
+    /** @internal */
+    static styles: CSSResultGroup;
+    /**	@inernal */
+    focusTimeoutId: ReturnType<typeof setTimeout> | undefined;
+    /** @internal */
+    private customError;
+    /** @internal */
+    popoverController: PopoverController;
+    /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+    set customInvalid(value: string | undefined);
+    get customInvalid(): string | undefined;
+    id: string;
+    /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+    label?: string;
+    /** If true, hides the label visually */
+    hideLabel?: boolean;
+    /** If defined, displays informational text below the field */
+    hint?: string;
+    /**
+     * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
+     */
+    invalidDates?: string;
+    /** If defined, adds name to the input-element */
+    name?: string;
+    placeholder: string;
+    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)
+     */
+    selectableFrom?: string;
+    /**
+     * Latest selectable date. (yyyy-mm-dd format)
+     */
+    selectableTo?: string;
+    /**
+     * If defined, displays provided severity state
+     * @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  */
+    value?: string;
+    private _init_date?;
+    /** @internal */
+    /** true if the internal state is invalid  */
+    invalid: boolean;
+    /** @internal */
+    selectedRangeDates: SkfDatePickerDateRange;
+    /** @internal */
+    private showClearbutton;
+    /** @internal */
+    $popover: HTMLElement;
+    /** @internal */
+    $anchor: HTMLDivElement;
+    /** @internal */
+    $input: HTMLInputElement;
+    /** @internal */
+    $input_range_end: HTMLInputElement;
+    /** @internal */
+    $datepicker: SkfDatePicker;
+    /** @internal */
+    _defaultSlot: Node[];
+    abortController: AbortController;
+    abortSignal: AbortSignal;
+    constructor();
+    connectedCallback(): 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 */
+    private _handleClose;
+    /** @internal */
+    private clearInput;
+    _handleValueChange(): void;
+    /**
+     * Clears the input field
+     */
+    clear: () => void;
+    /** @internal although called on input its only triggered once value is valid date */
+    _handleInput: (event: Event) => void;
+    /** @internal */
+    _toggleClearButton: (show?: boolean) => void;
+    /** @internal */
+    private _animatePopover;
+    /** @internal consider sharing this functionality with input */
+    validateInput(): void;
+    /** @internal */
+    reposition: () => Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}