@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

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

@@ -1,21 +1,29 @@
+var R = (s) => {
+  throw TypeError(s);
+};
+var S = (s, i, e) => i.has(s) || R("Cannot " + e);
+var _ = (s, i, e) => (S(s, i, "read from private field"), e ? e.call(s) : i.get(s)), $ = (s, i, e) => i.has(s) ? R("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), C = (s, i, e, t) => (S(s, i, "write to private field"), t ? t.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 F } from "../../internal/components/skf-element.js";
+import { watch as y } from "../../internal/helpers/watch.js";
+import { componentStyles as E } 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 g, doAnimate as T } from "./datepicker-popup.helpers.js";
+import { styles as L } from "./datepicker-popup.styles.js";
+import { dateFormatter as r, is as Y } from "./datepicker.helpers.js";
+var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (s, i, e, t) => {
+  for (var a = t > 1 ? void 0 : t ? A(i, e) : i, d = s.length - 1, h; d >= 0; d--)
+    (h = s[d]) && (a = (t ? h(i, e, a) : h(a)) || a);
+  return t && a && x(i, e, a), a;
+}, c;
+const v = class v extends F {
   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);
+    $(this, c);
+    C(this, c, 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(
@@ -27,45 +35,45 @@ const y = class y extends v {
     }, 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 = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("skf-datepicker-calendar"), d = this.selectedDateRange, h = d.start && this.selectedDate < d.start;
+        if (!!(d.start && d.end) || h)
           this.selectedDateRange = {
             start: this.selectedDate,
             end: null
           };
         else {
-          const f = !!s.start ? { end: e.detail.date } : { start: e.detail.date };
+          const w = !!d.start ? { end: e.detail.date } : { start: e.detail.date };
           this.selectedDateRange = {
-            ...s,
-            ...f
+            ...d,
+            ...w
           };
         }
-        this._onRangeCompleteEmitEvent(), a != null && a.length && [...a].forEach((h) => {
-          h.selectedDateRange = this.selectedDateRange;
+        this._onRangeCompleteEmitEvent(), a != null && a.length && [...a].forEach((D) => {
+          D.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: t } = f(), { month: a, year: d } = f(this.date);
+      if (a === e && d === t && (this.selectedDateRange.start || this.selectedDate)) {
+        this.date = r(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: r(/* @__PURE__ */ new Date())
         });
         return;
       }
-      this.date = l(/* @__PURE__ */ new Date());
+      this.date = r(/* @__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();
@@ -96,8 +104,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 : r(/* @__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 +120,17 @@ const y = class y extends v {
    */
   gotoDate(e) {
     if (e instanceof Date)
-      this.date = l(e);
-    else if (k(e).dateISO())
+      this.date = r(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 +143,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
@@ -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 && g(this.selectableTo, r(/* @__PURE__ */ new Date())) === -1)
+      return m``;
+    if (this.selectableFrom && g(this.selectableFrom, r(/* @__PURE__ */ new Date())) === 1)
+      return m``;
+    const { month: t, year: a } = f(), { month: d, year: h } = f(this.date), p = this.selectedDate ?? this.selectedDateRange.start, D = t === d && a === h, w = p && g(r(/* @__PURE__ */ new Date()), r(p), "months") === 0;
+    return (D && !p || w && D) && (e = !0), m`
 			<div class="today">
 				<skf-button
 					@click=${this._handleTodayClick}
@@ -173,17 +182,17 @@ 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 ? _(this, c).term("selectedDay") : _(this, c).term("today")}
 				</skf-button>
 			</div>
 		`;
-    function _(u) {
-      return c(u, l(/* @__PURE__ */ new Date()), "months") === 0;
+    function k(b) {
+      return g(b, r(/* @__PURE__ */ new Date()), "months") === 0;
     }
   }
   /** @internal */
   _handleChangeCalendarView(e) {
-    const t = c(this.date, e);
+    const t = g(this.date, e);
     this._animateView(t, () => {
       this.date = e;
     }).then(() => {
@@ -195,11 +204,11 @@ const y = class y extends v {
   async _animateView(e, t) {
     if (!this.shadowRoot) return;
     const a = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
-    return a.length ? (await b(
+    return a.length ? (await T(
       a,
       [{ opacity: 0, transform: `translateX(calc(16px * ${e.toString()}))` }],
       { duration: 100, easing: "ease-in", fill: "backwards" }
-    ), t(), await b(
+    ), t(), await T(
       a,
       [
         { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
@@ -209,53 +218,56 @@ const y = class y extends v {
     )) : Promise.resolve();
   }
 };
-y.styles = [R, C];
-let i = y;
-n([
+c = new WeakMap(), v.styles = [E, L];
+let n = v;
+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.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)
      */