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

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

@@ -1,21 +1,29 @@
-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 { componentStyles as 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;
+var _ = (n) => {
+  throw TypeError(n);
 };
-const E = class E extends O {
+var w = (n, r, t) => r.has(n) || _("Cannot " + t);
+var f = (n, r, t) => (w(n, r, "read from private field"), t ? t.call(n) : r.get(n)), S = (n, r, t) => r.has(n) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, t), $ = (n, r, t, e) => (w(n, r, "write to private field"), e ? e.call(n, t) : r.set(n, t), t);
+import { SkfElement as L } from "../../internal/components/skf-element.js";
+import { watch as O } from "../../internal/helpers/watch.js";
+import { Temporal as c } from "@js-temporal/polyfill";
+import { componentStyles as x } from "../../styles/component.styles.js";
+import { LocalizeController as R } from "../../utilities/localize.js";
+import { html as g } from "lit";
+import { property as d, state as M } from "lit/decorators.js";
+import { repeat as y } from "lit/directives/repeat.js";
+import { styles as C } from "./datepicker-calendar.styles.js";
+import { compareDates as E } from "./datepicker-popup.helpers.js";
+import { dateFormatter as D } from "./datepicker.helpers.js";
+var F = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (n, r, t, e) => {
+  for (var a = e > 1 ? void 0 : e ? A(r, t) : r, s = n.length - 1, i; s >= 0; s--)
+    (i = n[s]) && (a = (e ? i(r, t, a) : i(a)) || a);
+  return e && a && F(r, t, a), a;
+}, u;
+const b = class b extends L {
   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 = {
+    super(...arguments);
+    S(this, u);
+    $(this, u, new R(this)), this._secondCalendarOffset = 0, this.date = /* @__PURE__ */ new Date(), this.firstDayOfWeek = 0, this.lang = "en", this.locale = "en-CA", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
       start: null,
       end: null
     }, this._numberOfDays = 0, this._numberOfDaysLastMonth = 0, this._listenToKeyboard = () => ({
@@ -26,33 +34,22 @@ const E = class E extends O {
         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 === "ArrowRight" || e === "ArrowLeft" || e === "ArrowDown" || e === "ArrowUp") && t.preventDefault(), e === "ArrowRight" && this.shadowRoot?.activeElement?.parentElement?.nextElementSibling?.firstElementChild?.focus(), e === "ArrowLeft" && this.shadowRoot?.activeElement?.parentElement?.previousElementSibling?.firstElementChild?.focus(), e === "ArrowDown") {
+        const h = this.shadowRoot?.activeElement?.parentElement, m = a(h);
+        h?.parentElement?.children[m + 7]?.firstElementChild?.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();
+        const h = this.shadowRoot?.activeElement?.parentElement;
+        if (!h) return;
+        const m = Array.from(h.parentElement?.children ?? []).indexOf(h);
+        h.parentElement?.children[m - 7]?.firstElementChild?.focus();
       }
-      function a(u) {
-        var n;
-        return u ? Array.from(((n = u.parentElement) == null ? void 0 : n.children) ?? []).indexOf(u) : 0;
+      function a(s) {
+        return s ? Array.from(s.parentElement?.children ?? []).indexOf(s) : 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;
+      const e = this.invalidDates?.split(",").includes(t), a = !this.selectableTo || E(t, this.selectableTo) < 0, s = !this.selectableFrom || E(t, this.selectableFrom) > 0;
       return { matchesInvalidDates: e, dateWithinRange: !(a && s) };
     };
   }
@@ -64,13 +61,12 @@ const E = class E extends O {
     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({
+    this._numberOfDays = this._plainDate(this.date)?.daysInMonth ?? 0, this._numberOfDaysLastMonth = this._plainDate(this.date)?.subtract({
       months: 1
-    }).daysInMonth) ?? 0;
+    }).daysInMonth ?? 0;
   }
   _createDate({ year: t, month: e, day: a = 1 }, s) {
-    switch (e ?? (e = this.date.getMonth()), t ?? (t = this.date.getFullYear()), !0) {
+    switch (e ??= this.date.getMonth(), t ??= this.date.getFullYear(), !0) {
       case e < 0:
         e = 11, t--;
         break;
@@ -80,7 +76,7 @@ const E = class E extends O {
     }
     if (s)
       try {
-        return m.PlainDate.from({
+        return c.PlainDate.from({
           year: t,
           month: e + 1,
           day: a
@@ -100,7 +96,7 @@ const E = class E extends O {
       day: t.getDate()
     };
     try {
-      return m.PlainDate.from(e);
+      return c.PlainDate.from(e);
     } catch (a) {
       return console.log(e), console.error("error", a), null;
     }
@@ -108,19 +104,19 @@ const E = class E extends O {
   /** @internal Check if a day is between two dates */
   _isDateBetween(t, e, a) {
     if (!e || !a) return !1;
-    const s = m.PlainDate.compare(t, e) > 0, i = m.PlainDate.compare(t, a) < 0;
+    const s = c.PlainDate.compare(t, e) > 0, i = c.PlainDate.compare(t, a) < 0;
     return s && i;
   }
   render() {
-    return p`
+    return g`
 			${this.getCalendarHead()}
 
 			<!-- weekdays -->
 			<ul class="weekdays grid">
-				${w(
+				${y(
       Array.from({ length: 7 }, (t, e) => e),
       (t) => t,
-      (t) => p`<li>
+      (t) => g`<li>
 							${new Intl.DateTimeFormat(this.locale, {
         weekday: "short"
       }).format(new Date(2018, 0, t)).slice(0, 2)}
@@ -133,16 +129,16 @@ const E = class E extends O {
 				<!-- previous month -->
 				${this.getCalendarPreMonthDays()}
 				<!-- current days -->
-				${w(
+				${y(
       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 p`<li>
+        return g`<li>
 							<button
 								class="day ${a}"
 								data-date=${e}
-								aria-label="Choose ${this._createDate({
+								aria-label="${f(this, u).term("choose")} ${this._createDate({
           day: t
         }).toLocaleDateString(this.locale, {
           weekday: "long",
@@ -169,19 +165,18 @@ const E = class E extends O {
   }
   /** @internal */
   returnDayClasses(t) {
-    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();
+    const e = [], a = this._createDate({ day: t }).getDate(), s = this.selectedDate?.getMonth() === this.date.getMonth(), i = this.selectedDate?.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.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(
+    ) && 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"), this.selectedDateRange.end?.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: m } = this.dateSelectable(
       this._createDate({ day: t }, !0).toString()
     );
-    (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(" ");
+    (h || m) && e.push("invalid");
+    const p = this.selectedDate?.getDate() === a;
+    return !this.range && p && 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({
@@ -198,7 +193,7 @@ const E = class E extends O {
   }
   /** @internal */
   getCalendarPreMonthDays() {
-    return w(
+    return y(
       Array.from(
         {
           length: this.getCalendarStartDay().getDay()
@@ -215,7 +210,7 @@ const E = class E extends O {
           },
           !0
         ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), p`<li class="day ">
+        return (s || i) && e.push("invalid"), g`<li class="day ">
 					<button
 						class=${e.join(" ")}
 						data-date=${a}
@@ -223,8 +218,8 @@ const E = class E extends O {
           this.handleSelectDay({
             month: this.date.getMonth() - 1,
             day: t
-          }), this.emit("update-calendar-view", {
-            detail: m.PlainDate.from(y(this.date)).subtract({ months: 1 }).toString()
+          }), this.emit("skf-update-calendar-view", {
+            detail: c.PlainDate.from(D(this.date)).subtract({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -237,7 +232,7 @@ const E = class E extends O {
   }
   /** @internal */
   getCalendarRemaningDays() {
-    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : w(
+    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : y(
       Array.from(
         {
           length: 7 - this._createDate({
@@ -258,7 +253,7 @@ const E = class E extends O {
           },
           !0
         ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), p`<li class="day">
+        return (s || i) && e.push("invalid"), g`<li class="day">
 					<button
 						data-date=${a}
 						class=${e.join(" ")}
@@ -266,8 +261,8 @@ const E = class E extends O {
           this.handleSelectDay({
             month: this.date.getMonth() + 1,
             day: t + 1
-          }), this.emit("update-calendar-view", {
-            detail: m.PlainDate.from(y(this.date)).add({ months: 1 }).toString()
+          }), this.emit("skf-update-calendar-view", {
+            detail: c.PlainDate.from(D(this.date)).add({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -296,27 +291,25 @@ const E = class E extends O {
   }
   /** @internal */
   getCalendarHead() {
-    return p` <div class="calendar-head">
+    return g` <div class="calendar-head">
 			<div
 				class="calendar-head-controls${this.range && this.classList.contains("end") ? " hide" : ""}"
 			>
 				<button
-					aria-label="Previous year"
-					title="Previous year"
+					title=${f(this, u).term("previousYear")}
 					@click="${() => {
-      this.emit("update-calendar-view", {
-        detail: m.PlainDate.from(y(this.date)).subtract({ years: 1 }).toString()
+      this.emit("skf-update-calendar-view", {
+        detail: c.PlainDate.from(D(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"
+					title=${f(this, u).term("previousMonth")}
 					@click="${() => {
-      this.emit("update-calendar-view", {
-        detail: m.PlainDate.from(y(this.date)).subtract({ months: 1 }).toString()
+      this.emit("skf-update-calendar-view", {
+        detail: c.PlainDate.from(D(this.date)).subtract({ months: 1 }).toString()
       });
     }}"
 				>
@@ -325,28 +318,26 @@ const E = class E extends O {
 			</div>
 			<h4>
 				${this.date.toLocaleString(this.locale, { month: "short" })}
-				${this.range && this.classList.contains("start") ? p` -&nbsp;` : this.date.getFullYear()}
+				${this.range && this.classList.contains("start") ? g` -&nbsp;` : this.date.getFullYear()}
 			</h4>
 			<div
 				class="calendar-head-controls${this.range && this.classList.contains("start") ? " hide" : ""}"
 			>
 				<button
-					aria-label="Next month"
-					title="Next month"
+					title=${f(this, u).term("nextMonth")}
 					@click="${() => {
-      this.emit("update-calendar-view", {
-        detail: m.PlainDate.from(y(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
+      this.emit("skf-update-calendar-view", {
+        detail: c.PlainDate.from(D(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
 					❯
 				</button>
 				<button
-					aria-label="Next year"
-					title="Next year"
+					title=${f(this, u).term("nextYear")}
 					@click="${() => {
-      this.emit("update-calendar-view", {
-        detail: m.PlainDate.from(y(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
+      this.emit("skf-update-calendar-view", {
+        detail: c.PlainDate.from(D(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
@@ -356,60 +347,63 @@ const E = class E extends O {
 		</div>`;
   }
 };
-E.styles = [C, F];
-let o = E;
-d([
-  g({
+u = new WeakMap(), b.styles = [x, C];
+let o = b;
+l([
+  d({
     converter: {
-      fromAttribute(D) {
-        return console.log("value", typeof D), new Date(D);
+      fromAttribute(n) {
+        return console.log("value", typeof n), new Date(n);
       },
-      toAttribute(D) {
-        return D.toISOString();
+      toAttribute(n) {
+        return n.toISOString();
       }
     }
   })
 ], o.prototype, "date", 2);
-d([
-  g()
+l([
+  d()
 ], o.prototype, "eventid", 2);
-d([
-  g({ type: Number })
+l([
+  d({ type: Number })
 ], o.prototype, "firstDayOfWeek", 2);
-d([
-  g({ reflect: !0, attribute: "invalid-dates" })
+l([
+  d({ reflect: !0, attribute: "invalid-dates" })
 ], o.prototype, "invalidDates", 2);
-d([
-  g({ reflect: !0 })
+l([
+  d({ type: String })
+], o.prototype, "lang", 2);
+l([
+  d({ reflect: !0 })
 ], o.prototype, "locale", 2);
-d([
-  g({ type: Boolean })
+l([
+  d({ type: Boolean })
 ], o.prototype, "range", 2);
-d([
-  g({ attribute: "selectable-from" })
+l([
+  d({ attribute: "selectable-from" })
 ], o.prototype, "selectableFrom", 2);
-d([
-  g({ attribute: "selectable-to" })
+l([
+  d({ attribute: "selectable-to" })
 ], o.prototype, "selectableTo", 2);
-d([
-  g({
+l([
+  d({
     attribute: "selected-date",
-    converter: { fromAttribute: (D) => new Date(D) },
+    converter: { fromAttribute: (n) => new Date(n) },
     reflect: !0
   })
 ], o.prototype, "selectedDate", 2);
-d([
-  g({ type: Object })
+l([
+  d({ type: Object })
 ], o.prototype, "selectedDateRange", 2);
-d([
+l([
   M()
 ], o.prototype, "_numberOfDays", 2);
-d([
+l([
   M()
 ], o.prototype, "_numberOfDaysLastMonth", 2);
-d([
-  R("date")
+l([
+  O("date")
 ], o.prototype, "handleDateChange", 1);
 export {
-  o as SkfDatePickerCalendar
+  o as SkfDatepickerCalendar
 };

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

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

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

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

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

@@ -1,27 +1,14 @@
-import '../button/button';
+import '../button/button.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
-import './datepicker';
-export interface SkfDatePickerDateRange {
+import './datepicker-calendar.js';
+export interface SkfDatepickerPopupDateRange {
     start: Date | null;
     end: Date | null;
 }
-/**
- * A date picker component that allows users to select a date or a range of dates.
- *
- * @element skf-datepicker
- * @fires selected-date-changed - When a date is selected
- * @fires selected-date-range-changed - When a range of dates is selected
- *
- * @prop {string} date - The date to display in the date picker
- * @prop {boolean} range - If true, the date picker will allow the selection of a range of dates
- * @prop {string} locale - The locale to use for formatting the date
- *
- * @slot - Default hint content placed inside the date picker
- *
- * @cssprop --max-width - The maximum width of the date picker
- */
-export declare class SkfDatePicker extends SkfElement {
+export declare class SkfDatepickerPopup extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     locale: string;
     date: string;
@@ -30,6 +17,8 @@ export declare class SkfDatePicker extends SkfElement {
      * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
      */
     invalidDates?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     range: boolean;
     selectedDate: Date | undefined;
     /**
@@ -40,7 +29,7 @@ export declare class SkfDatePicker extends SkfElement {
      * Latest selectable date. (yyyy-mm-dd format)
      */
     selectableTo?: string;
-    selectedDateRange: SkfDatePickerDateRange;
+    selectedDateRange: SkfDatepickerPopupDateRange;
     /** @internal */
     private _date?;
     /** @internal */