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

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

@@ -1,21 +1,29 @@
-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";
-import { compareDates as $ } from "./datepicker-popup.helpers.js";
-import { dateFormatter as y } from "./datepicker.helpers.js";
-var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (D, t, e, a) => {
-  for (var s = a > 1 ? void 0 : a ? A(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 && P(t, e, s), s;
+var R = (s) => {
+  throw TypeError(s);
 };
-const E = class E extends O {
+var C = (s, r, t) => r.has(s) || R("Cannot " + t);
+var v = (s, r, t) => (C(s, r, "read from private field"), t ? t.call(s) : r.get(s)), F = (s, r, t) => r.has(s) ? R("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, t), A = (s, r, t, e) => (C(s, r, "write to private field"), e ? e.call(s, t) : r.set(s, t), t);
+import { SkfElement as L } from "../../internal/components/skf-element.js";
+import { watch as P } from "../../internal/helpers/watch.js";
+import { Temporal as f } from "@js-temporal/polyfill";
+import { componentStyles as T } from "../../styles/component.styles.js";
+import { LocalizeController as I } from "../../utilities/localize.js";
+import { html as b } from "lit";
+import { property as m, state as k } from "lit/decorators.js";
+import { repeat as E } from "lit/directives/repeat.js";
+import { styles as W } from "./datepicker-calendar.styles.js";
+import { compareDates as Y } from "./datepicker-popup.helpers.js";
+import { dateFormatter as _ } from "./datepicker.helpers.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (s, r, t, e) => {
+  for (var a = e > 1 ? void 0 : e ? x(r, t) : r, o = s.length - 1, l; o >= 0; o--)
+    (l = s[o]) && (a = (e ? l(r, t, a) : l(a)) || a);
+  return e && a && j(r, t, a), a;
+}, D;
+const O = class O 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);
+    F(this, D);
+    A(this, D, new I(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,34 +34,34 @@ const E = class E extends O {
         this.removeEventListener("keydown", this._handleKeyDown);
       }
     }), this._handleKeyDown = (t) => {
-      var s, i, h, v, _, S, b;
+      var o, l, p, S, $, M, w;
       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();
+        const n = (o = this.shadowRoot) == null ? void 0 : o.activeElement, i = n == null ? void 0 : n.parentElement, u = i == null ? void 0 : i.nextElementSibling, d = u == null ? void 0 : u.firstElementChild;
+        d == null || d.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();
+        const n = (l = this.shadowRoot) == null ? void 0 : l.activeElement, i = n == null ? void 0 : n.parentElement, u = i == null ? void 0 : i.previousElementSibling, d = u == null ? void 0 : u.firstElementChild;
+        d == null || d.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();
+        const n = (p = this.shadowRoot) == null ? void 0 : p.activeElement, i = n == null ? void 0 : n.parentElement, u = a(i), d = (S = i == null ? void 0 : i.parentElement) == null ? void 0 : S.children[u + 7], y = d == null ? void 0 : d.firstElementChild;
+        y == null || y.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 n = ($ = this.shadowRoot) == null ? void 0 : $.activeElement, i = n == null ? void 0 : n.parentElement;
+        if (!i) return;
+        const u = Array.from(((M = i.parentElement) == null ? void 0 : M.children) ?? []).indexOf(i), d = (w = i.parentElement) == null ? void 0 : w.children[u - 7], y = d == null ? void 0 : d.firstElementChild;
+        y == null || y.focus();
       }
-      function a(u) {
+      function a(g) {
         var n;
-        return u ? Array.from(((n = u.parentElement) == null ? void 0 : n.children) ?? []).indexOf(u) : 0;
+        return g ? Array.from(((n = g.parentElement) == null ? void 0 : n.children) ?? []).indexOf(g) : 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;
-      return { matchesInvalidDates: e, dateWithinRange: !(a && s) };
+      var p;
+      const e = (p = this.invalidDates) == null ? void 0 : p.split(",").includes(t), a = !this.selectableTo || Y(t, this.selectableTo) < 0, o = !this.selectableFrom || Y(t, this.selectableFrom) > 0;
+      return { matchesInvalidDates: e, dateWithinRange: !(a && o) };
     };
   }
   firstUpdated() {
@@ -69,7 +77,7 @@ const E = class E extends O {
       months: 1
     }).daysInMonth) ?? 0;
   }
-  _createDate({ year: t, month: e, day: a = 1 }, s) {
+  _createDate({ year: t, month: e, day: a = 1 }, o) {
     switch (e ?? (e = this.date.getMonth()), t ?? (t = this.date.getFullYear()), !0) {
       case e < 0:
         e = 11, t--;
@@ -78,15 +86,15 @@ const E = class E extends O {
         e = 0, t++;
         break;
     }
-    if (s)
+    if (o)
       try {
-        return m.PlainDate.from({
+        return f.PlainDate.from({
           year: t,
           month: e + 1,
           day: a
         });
-      } catch (i) {
-        console.error("error", i);
+      } catch (l) {
+        console.error("error", l);
       }
     return new Date(t, e, a);
   }
@@ -100,7 +108,7 @@ const E = class E extends O {
       day: t.getDate()
     };
     try {
-      return m.PlainDate.from(e);
+      return f.PlainDate.from(e);
     } catch (a) {
       return console.log(e), console.error("error", a), null;
     }
@@ -108,19 +116,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;
-    return s && i;
+    const o = f.PlainDate.compare(t, e) > 0, l = f.PlainDate.compare(t, a) < 0;
+    return o && l;
   }
   render() {
-    return p`
+    return b`
 			${this.getCalendarHead()}
 
 			<!-- weekdays -->
 			<ul class="weekdays grid">
-				${w(
+				${E(
       Array.from({ length: 7 }, (t, e) => e),
       (t) => t,
-      (t) => p`<li>
+      (t) => b`<li>
 							${new Intl.DateTimeFormat(this.locale, {
         weekday: "short"
       }).format(new Date(2018, 0, t)).slice(0, 2)}
@@ -133,16 +141,16 @@ const E = class E extends O {
 				<!-- previous month -->
 				${this.getCalendarPreMonthDays()}
 				<!-- current days -->
-				${w(
+				${E(
       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 b`<li>
 							<button
 								class="day ${a}"
 								data-date=${e}
-								aria-label="Choose ${this._createDate({
+								aria-label="${v(this, D).term("choose")} ${this._createDate({
           day: t
         }).toLocaleDateString(this.locale, {
           weekday: "long",
@@ -169,19 +177,19 @@ 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();
+    var w, g, n, i;
+    const e = [], a = this._createDate({ day: t }).getDate(), o = ((w = this.selectedDate) == null ? void 0 : w.getMonth()) === this.date.getMonth(), l = ((g = this.selectedDate) == null ? void 0 : g.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(
+    const { matchesInvalidDates: p, dateWithinRange: S } = 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(" ");
+    (p || S) && e.push("invalid");
+    const $ = ((i = this.selectedDate) == null ? void 0 : i.getDate()) === a;
+    return !this.range && $ && o && l && (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 +206,7 @@ const E = class E extends O {
   }
   /** @internal */
   getCalendarPreMonthDays() {
-    return w(
+    return E(
       Array.from(
         {
           length: this.getCalendarStartDay().getDay()
@@ -214,8 +222,8 @@ const E = class E extends O {
             day: t + 1
           },
           !0
-        ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), p`<li class="day ">
+        ).toString(), { matchesInvalidDates: o, dateWithinRange: l } = this.dateSelectable(a);
+        return (o || l) && e.push("invalid"), b`<li class="day ">
 					<button
 						class=${e.join(" ")}
 						data-date=${a}
@@ -223,8 +231,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: f.PlainDate.from(_(this.date)).subtract({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -237,7 +245,7 @@ const E = class E extends O {
   }
   /** @internal */
   getCalendarRemaningDays() {
-    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : w(
+    return (this._numberOfDays + this.calendarMonthStartsOn()) % 7 === 0 ? "" : E(
       Array.from(
         {
           length: 7 - this._createDate({
@@ -257,8 +265,8 @@ const E = class E extends O {
             day: t + 1
           },
           !0
-        ).toString(), { matchesInvalidDates: s, dateWithinRange: i } = this.dateSelectable(a);
-        return (s || i) && e.push("invalid"), p`<li class="day">
+        ).toString(), { matchesInvalidDates: o, dateWithinRange: l } = this.dateSelectable(a);
+        return (o || l) && e.push("invalid"), b`<li class="day">
 					<button
 						data-date=${a}
 						class=${e.join(" ")}
@@ -266,8 +274,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: f.PlainDate.from(_(this.date)).add({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -296,27 +304,25 @@ const E = class E extends O {
   }
   /** @internal */
   getCalendarHead() {
-    return p` <div class="calendar-head">
+    return b` <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=${v(this, D).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: f.PlainDate.from(_(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=${v(this, D).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: f.PlainDate.from(_(this.date)).subtract({ months: 1 }).toString()
       });
     }}"
 				>
@@ -325,28 +331,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") ? b` -&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=${v(this, D).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: f.PlainDate.from(_(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
 					❯
 				</button>
 				<button
-					aria-label="Next year"
-					title="Next year"
+					title=${v(this, D).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: f.PlainDate.from(_(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
@@ -356,60 +360,63 @@ const E = class E extends O {
 		</div>`;
   }
 };
-E.styles = [C, F];
-let o = E;
-d([
-  g({
+D = new WeakMap(), O.styles = [T, W];
+let h = O;
+c([
+  m({
     converter: {
-      fromAttribute(D) {
-        return console.log("value", typeof D), new Date(D);
+      fromAttribute(s) {
+        return console.log("value", typeof s), new Date(s);
       },
-      toAttribute(D) {
-        return D.toISOString();
+      toAttribute(s) {
+        return s.toISOString();
       }
     }
   })
-], o.prototype, "date", 2);
-d([
-  g()
-], o.prototype, "eventid", 2);
-d([
-  g({ type: Number })
-], o.prototype, "firstDayOfWeek", 2);
-d([
-  g({ reflect: !0, attribute: "invalid-dates" })
-], o.prototype, "invalidDates", 2);
-d([
-  g({ reflect: !0 })
-], o.prototype, "locale", 2);
-d([
-  g({ type: Boolean })
-], o.prototype, "range", 2);
-d([
-  g({ attribute: "selectable-from" })
-], o.prototype, "selectableFrom", 2);
-d([
-  g({ attribute: "selectable-to" })
-], o.prototype, "selectableTo", 2);
-d([
-  g({
+], h.prototype, "date", 2);
+c([
+  m()
+], h.prototype, "eventid", 2);
+c([
+  m({ type: Number })
+], h.prototype, "firstDayOfWeek", 2);
+c([
+  m({ reflect: !0, attribute: "invalid-dates" })
+], h.prototype, "invalidDates", 2);
+c([
+  m({ type: String })
+], h.prototype, "lang", 2);
+c([
+  m({ reflect: !0 })
+], h.prototype, "locale", 2);
+c([
+  m({ type: Boolean })
+], h.prototype, "range", 2);
+c([
+  m({ attribute: "selectable-from" })
+], h.prototype, "selectableFrom", 2);
+c([
+  m({ attribute: "selectable-to" })
+], h.prototype, "selectableTo", 2);
+c([
+  m({
     attribute: "selected-date",
-    converter: { fromAttribute: (D) => new Date(D) },
+    converter: { fromAttribute: (s) => new Date(s) },
     reflect: !0
   })
-], o.prototype, "selectedDate", 2);
-d([
-  g({ type: Object })
-], o.prototype, "selectedDateRange", 2);
-d([
-  M()
-], o.prototype, "_numberOfDays", 2);
-d([
-  M()
-], o.prototype, "_numberOfDaysLastMonth", 2);
-d([
-  R("date")
-], o.prototype, "handleDateChange", 1);
+], h.prototype, "selectedDate", 2);
+c([
+  m({ type: Object })
+], h.prototype, "selectedDateRange", 2);
+c([
+  k()
+], h.prototype, "_numberOfDays", 2);
+c([
+  k()
+], h.prototype, "_numberOfDaysLastMonth", 2);
+c([
+  P("date")
+], h.prototype, "handleDateChange", 1);
 export {
-  o as SkfDatepickerCalendar
+  h as SkfDatepickerCalendar
 };

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

@@ -1,5 +1,6 @@
 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-calendar.js';
 export interface SkfDatepickerPopupDateRange {
@@ -7,6 +8,7 @@ export interface SkfDatepickerPopupDateRange {
     end: Date | null;
 }
 export declare class SkfDatepickerPopup extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     locale: string;
     date: string;
@@ -15,6 +17,8 @@ export declare class SkfDatepickerPopup 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;
     /**