@skf-design-system/ui-components 1.0.0-alpha.37 → 1.0.0-alpha.39

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

@@ -1,21 +1,29 @@
+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 v } from "../../internal/components/skf-element.js";
-import { watch as p } from "../../internal/helpers/watch.js";
-import { componentStyles as R } from "../../styles/component.styles.js";
-import { html as D } from "lit";
-import { property as o, state as m } from "lit/decorators.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 g, assertISODate as S, earliestDate as $, latestDate as T, compareDates as c, doAnimate as b } from "./datepicker-popup.helpers.js";
-import { styles as C } from "./datepicker-popup.styles.js";
-import { dateFormatter as l, is as k } from "./datepicker.helpers.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 v {
+import { getDateParts as f, assertISODate as O, earliestDate as V, latestDate as P, compareDates as D, 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;
+}, g;
+const _ = class _ extends E {
   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 = {
+    super(...arguments);
+    S(this, g);
+    $(this, g, 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(
@@ -25,52 +33,51 @@ const y = class y extends v {
     ), 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)
+        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 f = !!s.start ? { end: e.detail.date } : { start: e.detail.date };
+          const p = !!t.start ? { end: e.detail.date } : { start: e.detail.date };
           this.selectedDateRange = {
-            ...s,
-            ...f
+            ...t,
+            ...p
           };
         }
-        this._onRangeCompleteEmitEvent(), a != null && a.length && [...a].forEach((h) => {
-          h.selectedDateRange = this.selectedDateRange;
+        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: 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", {
+      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("update-calendar-view", {
-          detail: l(/* @__PURE__ */ new Date())
+        this.emit("skf-update-calendar-view", {
+          detail: d(/* @__PURE__ */ new Date())
         });
         return;
       }
-      this.date = l(/* @__PURE__ */ new Date());
+      this.date = d(/* @__PURE__ */ new Date());
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("update-calendar-view", this._handleCalendarView), this.addEventListener("selected-date-changed", this._handleSelectedDate);
+    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 t = this.selectedDate ?? this.selectedDateRange.start;
-    t instanceof Date && this.gotoDate(t);
+    const a = this.selectedDate ?? this.selectedDateRange.start;
+    a instanceof Date && this.gotoDate(a);
   }
   clearSelection() {
     this.selectedDateRange = {
@@ -83,11 +90,11 @@ const y = class y extends v {
     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;
+    ), a = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
     this.emit("selected-date-range-changed", {
       detail: {
         ...this.selectedDateRange,
-        days: t,
+        days: a,
         id: this.id
       }
     });
@@ -96,8 +103,8 @@ const y = class y extends v {
     this.style.setProperty("--max-width", this.range ? "43em" : "21em");
   }
   _handleDateChange() {
-    console.log("%cdate changed", "color:red", this.date), this.date = this.date && S(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = $(
-      T(this.date, this.selectableFrom ?? this.date),
+    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);
   }
@@ -112,17 +119,17 @@ const y = class y extends v {
    */
   gotoDate(e) {
     if (e instanceof Date)
-      this.date = l(e);
-    else if (k(e).dateISO())
+      this.date = d(e);
+    else if (Y(e).dateISO())
       this.date = e;
     else
       throw new Error("Invalid date format");
-    this.emit("update-calendar-view", {
+    this.emit("skf-update-calendar-view", {
       detail: e
     });
   }
   render() {
-    return D`
+    return m`
 			<div class="calendar-container">
 				<skf-datepicker-calendar
 					.date=${this._date ?? /* @__PURE__ */ new Date()}
@@ -135,6 +142,7 @@ const y = class y extends v {
 					.invalidDates=${this.invalidDates}
 					class="start"
 					id=${this.id}
+					lang="${this.lang}"
 					locale="${this.locale}"
 				></skf-datepicker-calendar>
 				<skf-datepicker-calendar
@@ -149,6 +157,7 @@ const y = class y extends v {
 					.invalidDates=${this.invalidDates}
 					class="end"
 					id=${`${this.id}-range-end`}
+					lang="${this.lang}"
 					locale="${this.locale}"
 				></skf-datepicker-calendar>
 			</div>
@@ -160,12 +169,12 @@ const y = class y extends v {
   /** @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`
+    if (this.selectableTo && D(this.selectableTo, d(/* @__PURE__ */ new Date())) === -1)
+      return m``;
+    if (this.selectableFrom && D(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 && D(d(/* @__PURE__ */ new Date()), d(c), "months") === 0;
+    return (p && !c || T && p) && (e = !0), m`
 			<div class="today">
 				<skf-button
 					@click=${this._handleTodayClick}
@@ -173,34 +182,34 @@ const y = class y extends v {
 					variant="tertiary"
 					size="sm"
 				>
-					${_(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? "Selected date" : "Today"}
+					${k(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? b(this, g).term("selectedDay") : b(this, g).term("today")}
 				</skf-button>
 			</div>
 		`;
-    function _(u) {
-      return c(u, l(/* @__PURE__ */ new Date()), "months") === 0;
+    function k(w) {
+      return D(w, d(/* @__PURE__ */ new Date()), "months") === 0;
     }
   }
   /** @internal */
   _handleChangeCalendarView(e) {
-    const t = c(this.date, e);
-    this._animateView(t, () => {
+    const a = D(this.date, e);
+    this._animateView(a, () => {
       this.date = e;
     }).then(() => {
-    }).catch((a) => {
-      console.error(a);
+    }).catch((t) => {
+      console.error(t);
     });
   }
   /** @internal */
-  async _animateView(e, t) {
+  async _animateView(e, a) {
     if (!this.shadowRoot) return;
-    const a = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
-    return a.length ? (await b(
-      a,
+    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" }
-    ), t(), await b(
-      a,
+    ), a(), await C(
+      t,
       [
         { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
         { opacity: 1, transform: "translateX(0)" }
@@ -209,53 +218,56 @@ const y = class y extends v {
     )) : Promise.resolve();
   }
 };
-y.styles = [R, C];
-let i = y;
-n([
+g = new WeakMap(), _.styles = [F, L];
+let n = _;
+l([
   o({ reflect: !0 })
-], i.prototype, "locale", 2);
-n([
+], n.prototype, "locale", 2);
+l([
   o({ type: String, reflect: !0 })
-], i.prototype, "date", 2);
-n([
+], n.prototype, "date", 2);
+l([
   o({ type: String })
-], i.prototype, "id", 2);
-n([
+], n.prototype, "id", 2);
+l([
   o({ attribute: "invalid-dates" })
-], i.prototype, "invalidDates", 2);
-n([
+], n.prototype, "invalidDates", 2);
+l([
+  o({ type: String })
+], n.prototype, "lang", 2);
+l([
   o({ type: Boolean })
-], i.prototype, "range", 2);
-n([
-  m()
-], i.prototype, "selectedDate", 2);
-n([
+], n.prototype, "range", 2);
+l([
+  u()
+], n.prototype, "selectedDate", 2);
+l([
   o({ attribute: "selectable-from" })
-], i.prototype, "selectableFrom", 2);
-n([
+], n.prototype, "selectableFrom", 2);
+l([
   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);
+], 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 {
-  i as SkfDatepickerPopup
+  n as SkfDatepickerPopup
 };

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

@@ -16,7 +16,7 @@ function I(t, n, i) {
   return Promise.allSettled(l);
 }
 function P(t = a.Now.plainDateISO()) {
-  return t ?? (t = a.Now.plainDateISO()), t instanceof Date && (t = a.PlainDate.from(t.toISOString())), typeof t == "string" && (t = a.PlainDate.from(g(t, !0))), {
+  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

package/dist/components/datepicker/datepicker.component.d.ts

@@ -3,6 +3,7 @@ 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 type { SkfDatepickerPopup, SkfDatepickerPopupDateRange } from './datepicker-popup.component.js';
 import './datepicker-popup.js';
@@ -10,6 +11,7 @@ import './datepicker-popup.js';
  * @tagname skf-datepicker
  */
 export declare class SkfDatepicker extends FormBase {
+    #private;
     /** @internal */
     static styles: CSSResultGroup;
     /**	@inernal */
@@ -24,6 +26,8 @@ export declare class SkfDatepicker 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 */
@@ -38,8 +42,6 @@ export declare class SkfDatepicker 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)
      */