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

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

@@ -1,61 +1,63 @@
+var S = (o) => {
+  throw TypeError(o);
+};
+var P = (o, l, e) => l.has(o) || S("Cannot " + e);
+var D = (o, l, e) => (P(o, l, "read from private field"), e ? e.call(o) : l.get(o)), E = (o, l, e) => l.has(o) ? S("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, e), C = (o, l, e, t) => (P(o, l, "write to private field"), t ? t.call(o, e) : l.set(o, e), e);
 import "../icon/icon.js";
-import { computePosition as P, flip as S, offset as E } from "@floating-ui/dom";
-import { FormBase as C } from "../../internal/components/formBase.js";
+import { computePosition as T, flip as B, offset as x } from "@floating-ui/dom";
+import { FormBase as R } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { PopoverController as I } from "../../internal/controllers/popover.controller.js";
-import { hintSeverity as O } from "../../internal/helpers/hintSeverity.js";
-import { watch as M } from "../../internal/helpers/watch.js";
-import { Asterisk as T } from "../../internal/templates/asterisk.js";
-import { Temporal as w } from "@js-temporal/polyfill";
-import { componentStyles as B } from "../../styles/component.styles.js";
-import { nothing as g, html as y } from "lit";
-import { property as h, state as $, query as b, queryAssignedNodes as x } from "lit/decorators.js";
+import { PopoverController as A } from "../../internal/controllers/popover.controller.js";
+import { hintSeverity as L } from "../../internal/helpers/hintSeverity.js";
+import { watch as j } from "../../internal/helpers/watch.js";
+import { Asterisk as V } from "../../internal/templates/asterisk.js";
+import { Temporal as I } from "@js-temporal/polyfill";
+import { componentStyles as q } from "../../styles/component.styles.js";
+import { LocalizeController as U } from "../../utilities/localize.js";
+import { nothing as f, html as b } from "lit";
+import { property as d, state as k, query as $, queryAssignedNodes as N } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { live as F } from "lit/directives/live.js";
+import { live as O } from "lit/directives/live.js";
 import "./datepicker-popup.js";
-import { dateFormatter as v, is as f, isPopoverOpen as L, debounce as R } from "./datepicker.helpers.js";
-import { styles as A } from "./datepicker.styles.js";
-var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (D, e, t, a) => {
-  for (var o = a > 1 ? void 0 : a ? q(e, t) : e, n = D.length - 1, d; n >= 0; n--)
-    (d = D[n]) && (o = (a ? d(e, t, o) : d(o)) || o);
-  return a && o && j(e, t, o), o;
-};
-const _ = class _ extends C {
+import { dateFormatter as v, is as m, isPopoverOpen as Y, debounce as z } from "./datepicker.helpers.js";
+import { styles as W } from "./datepicker.styles.js";
+var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (o, l, e, t) => {
+  for (var i = t > 1 ? void 0 : t ? K(l, e) : l, h = o.length - 1, p; h >= 0; h--)
+    (p = o[h]) && (i = (t ? p(l, e, i) : p(i)) || i);
+  return t && i && H(l, e, i), i;
+}, g;
+const w = class w extends R {
   constructor() {
-    super(), this.popoverController = new I(this), this.id = "skf-datepicker-input", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
+    super();
+    E(this, g);
+    C(this, g, new U(this)), this.popoverController = new A(this), this.id = "skf-datepicker-input", this.lang = "en", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
       this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
     }, this._handleDateSelected = (e) => {
       if (this.range && "start" in e.detail.date && "end" in e.detail.date) {
-        const t = e.detail.date.start, a = e.detail.date.end;
-        this.value = `${v(t)},${v(a)}`, this.selectedRangeDates = { start: t, end: a };
+        const t = e.detail.date.start, i = e.detail.date.end;
+        this.value = `${v(t)},${v(i)}`, this.selectedRangeDates = { start: t, end: i };
       } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
         this.$popover.hidePopover();
       }));
     }, this._handleKeyboardEvents = (e) => {
-      var a, o;
       const t = e.target.closest("input");
       if (t) {
         if ((t.selectionStart ?? 0) < t.value.length && /[[0-9-]/.test(e.key)) {
-          const n = t.selectionStart ?? 0, p = t.value.split("").slice(0, n);
+          const i = t.selectionStart ?? 0, p = t.value.split("").slice(0, i);
           t.value = p.join("");
         }
-        if (t.name.endsWith("-end") && (e.key === "Backspace" && t.value.length === 0 || t.selectionStart === 0 && e.key === "ArrowLeft") && (e.preventDefault(), this.$input.focus()), e.key === "Tab" && !e.shiftKey && t.name.endsWith("-end")) {
-          e.preventDefault();
-          const d = (a = this.$popover.childNodes[1].shadowRoot) == null ? void 0 : a.querySelector("skf-datepicker-calendar"), p = (o = d == null ? void 0 : d.shadowRoot) == null ? void 0 : o.querySelector("button");
-          p == null || p.focus();
-        }
-        if ((t.value.length === 4 || t.value.length === 7) && /[[0-9]/.test(e.key) && (t.value = `${t.value}-${e.key}`, e.preventDefault()), e.key === "Escape")
+        if (t.name.endsWith("-end") && (e.key === "Backspace" && t.value.length === 0 || t.selectionStart === 0 && e.key === "ArrowLeft") && (e.preventDefault(), this.$input.focus()), e.key === "Tab" && !e.shiftKey && t.name.endsWith("-end") && (e.preventDefault(), this.$popover.childNodes[1].shadowRoot?.querySelector("skf-datepicker-calendar")?.shadowRoot?.querySelector("button")?.focus()), (t.value.length === 4 || t.value.length === 7) && /[[0-9]/.test(e.key) && (t.value = `${t.value}-${e.key}`, e.preventDefault()), e.key === "Escape")
           if (t.blur(), this.$popover.hidePopover(), this.range) {
-            const n = this.$input.value, d = this.$input_range_end.value;
-            if (!f(n, d).date()) return;
+            const i = this.$input.value, h = this.$input_range_end.value;
+            if (!m(i, h).date()) return;
             this.$datepickerPopup.selectedDateRange = {
-              start: new Date(n),
-              end: new Date(d)
+              start: new Date(i),
+              end: new Date(h)
             }, this.$datepickerPopup.emit("selected-date-changed", {
-              detail: { date: new Date(n) }
+              detail: { date: new Date(i) }
             });
           } else {
-            if (!t.value || !f(t.value).date()) return;
+            if (!t.value || !m(t.value).date()) return;
             this.$datepickerPopup.emit("selected-date-changed", {
               detail: { date: new Date(t.value) }
             });
@@ -71,15 +73,15 @@ const _ = class _ extends C {
     }, this.clearInput = () => {
       this.value = "", this.$datepickerPopup.clearSelection();
     }, this._handleInput = (e) => {
-      const t = e.target, a = String(t.value).replace(/[^0-9-]/g, "");
-      if (t.value = a, t.setCustomValidity(this.customError ?? ""), !!f(t.value).ISO()) {
+      const t = e.target, i = String(t.value).replace(/[^0-9-]/g, "");
+      if (t.value = i, t.setCustomValidity(this.customError ?? ""), !!m(t.value).ISO()) {
         if (this.focusTimeoutId && clearTimeout(this.focusTimeoutId), this.$datepickerPopup.date = t.value, this.range) {
           this.$datepickerPopup.selectedDateRange = {
-            start: f(this.$input.value).ISO() ? new Date(this.$input.value) : null,
-            end: f(this.$input_range_end.value).ISO() ? new Date(this.$input_range_end.value) : null
+            start: m(this.$input.value).ISO() ? new Date(this.$input.value) : null,
+            end: m(this.$input_range_end.value).ISO() ? new Date(this.$input_range_end.value) : null
           };
-          const o = Object.values(this.$datepickerPopup.selectedDateRange).filter(Boolean).map((n) => new Date(n).toLocaleDateString("en-CA")).join();
-          this.value = o, f(this.$input.value).ISO() && (this.focusTimeoutId = setTimeout(() => {
+          const h = Object.values(this.$datepickerPopup.selectedDateRange).filter(Boolean).map((p) => new Date(p).toLocaleDateString("en-CA")).join();
+          this.value = h, m(this.$input.value).ISO() && (this.focusTimeoutId = setTimeout(() => {
             this.$input_range_end.focus();
           }, 200));
         } else
@@ -91,9 +93,9 @@ const _ = class _ extends C {
     }, this._toggleClearButton = (e = !1) => {
       this.showClearbutton = e;
     }, this.reposition = async () => {
-      const { x: e, y: t } = await P(this.$anchor, this.$popover, {
+      const { x: e, y: t } = await T(this.$anchor, this.$popover, {
         placement: "bottom-start",
-        middleware: [S(), E(0)],
+        middleware: [B(), x(0)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
@@ -111,37 +113,34 @@ const _ = class _ extends C {
     return this.customError;
   }
   connectedCallback() {
-    var e;
-    super.connectedCallback(), this._init_date = (e = this.value) == null ? void 0 : e.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+    super.connectedCallback(), this._init_date = this.value?.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.abortController.abort();
   }
   firstUpdated() {
-    var e;
-    this.$datepickerPopup.date = this._init_date ? w.PlainDate.from(this._init_date).toString() : w.Now.plainDateISO().toString(), this.range ? this.$datepickerPopup.selectedDateRange = {
+    this.$datepickerPopup.date = this._init_date ? I.PlainDate.from(this._init_date).toString() : I.Now.plainDateISO().toString(), this.range ? this.$datepickerPopup.selectedDateRange = {
       start: this._init_date ? new Date(this._init_date) : null,
-      end: (e = this.value) != null && e.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+      end: this.value?.split(",")[1] ? new Date(this.value.split(",")[1]) : null
     } : this.$datepickerPopup.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.hint && !this.hasAttribute("hint") && this.setAttribute("hint", this.hint), this.validateInput();
   }
-  attributeChangedCallback(e, t, a) {
-    if (super.attributeChangedCallback(e, t, a), e === "custom-invalid")
-      if (typeof a == "string") {
-        const n = this.withFallback(a);
-        this._pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
+  attributeChangedCallback(e, t, i) {
+    if (super.attributeChangedCallback(e, t, i), e === "custom-invalid")
+      if (typeof i == "string") {
+        const p = this.withFallback(i);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, p), this.invalid = !0, this.hint = p, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
   _handleValueChange() {
-    var e, t, a, o, n, d, p, i;
-    (e = this.value) != null && e.trim() || this.$datepickerPopup.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((t = this.value) == null ? void 0 : t.split(",")[0]), this.range ? (this.$datepickerPopup.selectedDateRange = {
-      start: (n = this.value) != null && n.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
-      end: (d = this.value) != null && d.split(",")[1] ? new Date(this.value.split(",")[1]) : null
-    }, this.$input_range_end.value = v((p = this.value) == null ? void 0 : p.split(",")[1]), this.$datepickerPopup.date = ((i = this.value) == null ? void 0 : i.split(",")[0]) ?? "") : (this.$datepickerPopup.selectedDate = (a = this.value) != null && a.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepickerPopup.date = ((o = this.value) == null ? void 0 : o.split(",")[0]) ?? ""), this.validateInput();
+    this.value?.trim() || this.$datepickerPopup.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v(this.value?.split(",")[0]), this.range ? (this.$datepickerPopup.selectedDateRange = {
+      start: this.value?.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
+      end: this.value?.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    }, this.$input_range_end.value = v(this.value?.split(",")[1]), this.$datepickerPopup.date = this.value?.split(",")[0] ?? "") : (this.$datepickerPopup.selectedDate = this.value?.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepickerPopup.date = this.value?.split(",")[0] ?? ""), this.validateInput();
   }
   showPopover() {
-    if (L(this.$popover)) return;
-    R(() => {
+    if (Y(this.$popover)) return;
+    z(() => {
       this.$popover.showPopover(), this._animatePopover({ show: !0 });
     }, 200)(), this.addEventListener("focusout", this.hidePopover.bind(this), {
       once: !0,
@@ -149,8 +148,7 @@ const _ = class _ extends C {
     });
   }
   hidePopover() {
-    var t;
-    this.removeEventListener("focusout", this.hidePopover.bind(this)), ((t = document.activeElement) == null ? void 0 : t.closest("skf-datepicker-input")) !== this && this.$popover.hidePopover();
+    this.removeEventListener("focusout", this.hidePopover.bind(this)), document.activeElement?.closest("skf-datepicker-input") !== this && this.$popover.hidePopover();
   }
   /**
    * Clears the input field
@@ -160,21 +158,21 @@ const _ = class _ extends C {
   }
   /** @internal */
   async _animatePopover({ el: e = this.$popover, show: t }) {
-    return t && (e.style.opacity = "0", e.style.transform = "scaleY(0.5)"), new Promise((a) => {
-      const o = [
+    return t && (e.style.opacity = "0", e.style.transform = "scaleY(0.5)"), new Promise((i) => {
+      const h = [
         { opacity: 0, transform: "scaleY(0.5)" },
         { opacity: 1, transform: "scaleY(1)" }
-      ], n = t ? o : o.reverse();
+      ], p = t ? h : h.reverse();
       setTimeout(
         () => {
           e.style.transformOrigin = "top";
-          const d = this.$popover.animate(n, {
+          const _ = this.$popover.animate(p, {
             duration: 100,
             easing: "linear",
             fill: "both"
           });
-          d.onfinish = () => {
-            a();
+          _.onfinish = () => {
+            i();
           };
         },
         t ? 0 : 50
@@ -184,33 +182,33 @@ const _ = class _ extends C {
   /** @internal consider sharing this functionality with input */
   validateInput() {
     if (this._internals.validity.customError) return;
-    let t = JSON.parse(JSON.stringify(this._internals.validity)), a = {};
+    let t = JSON.parse(JSON.stringify(this._internals.validity)), i = {};
     if (this.selectableFrom) {
-      const { validityFragment: i, errorMessageFragment: l } = o(this);
-      t = { ...t, ...i }, a = { ...a, ...l };
+      const { validityFragment: a, errorMessageFragment: n } = h(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
     }
     if (this.selectableTo) {
-      const { validityFragment: i, errorMessageFragment: l } = n(this);
-      t = { ...t, ...i }, a = { ...a, ...l };
+      const { validityFragment: a, errorMessageFragment: n } = p(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
     }
     if (this.range) {
-      const { validityFragment: i, errorMessageFragment: l } = d(this);
-      t = { ...t, ...i }, a = { ...a, ...l };
+      const { validityFragment: a, errorMessageFragment: n } = _(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
     }
     if (this.required) {
-      const { validityFragment: i, errorMessageFragment: l } = p(this);
-      t = { ...t, ...i }, a = { ...a, ...l };
+      const { validityFragment: a, errorMessageFragment: n } = M(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
     }
-    if (t.valid = !Object.values(t).some((i) => i), this.invalid = !1, t.valid)
+    if (t.valid = !Object.values(t).some((a) => a), this.invalid = !1, t.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError }), this.hint = this.getAttribute("hint") ?? "";
     else {
       this.invalid = !this._pristine && !t.valid;
-      let i;
-      for (i in t) {
-        const l = `data-${i.toString()}`;
-        if (t[i]) {
-          this.validationError = i.toString();
-          const c = this.hasAttribute(l) ? this.getAttribute(l) : a[i];
+      let a;
+      for (a in t) {
+        const n = `data-${a.toString()}`;
+        if (t[a]) {
+          this.validationError = a.toString();
+          const c = this.hasAttribute(n) ? this.getAttribute(n) : i[a];
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
             this.withFallback(c)
@@ -218,55 +216,54 @@ const _ = class _ extends C {
         }
       }
     }
-    function o(i) {
-      const l = { validityFragment: {}, errorMessageFragment: {} };
-      if (!i.selectableFrom) return l;
-      const c = new Date(i.selectableFrom);
-      if (new Date(i.$input.value) < c) {
-        const m = i.getAttribute("data-rangeunderflow") ?? `Date is out of range. Earliest selectable date is ${i.selectableFrom}.`;
+    function h(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} };
+      if (!a.selectableFrom) return n;
+      const c = new Date(a.selectableFrom);
+      if (new Date(a.$input.value) < c) {
+        const y = a.getAttribute("data-rangeunderflow") ?? `Date is out of range. Earliest selectable date is ${a.selectableFrom}.`;
         return {
           validityFragment: { rangeUnderflow: !0, valid: !1 },
-          errorMessageFragment: { rangeUnderflow: m }
+          errorMessageFragment: { rangeUnderflow: y }
         };
       }
-      return l;
+      return n;
     }
-    function n(i) {
-      const l = { validityFragment: {}, errorMessageFragment: {} };
-      if (!i.selectableTo) return l;
-      const c = new Date(i.selectableTo);
-      if (new Date(i.$input.value) > c) {
-        const m = i.getAttribute("data-rangeoverflow") ?? `Date is out of range. Latest selectable date is ${i.selectableTo}.`;
+    function p(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} };
+      if (!a.selectableTo) return n;
+      const c = new Date(a.selectableTo);
+      if (new Date(a.$input.value) > c) {
+        const y = a.getAttribute("data-rangeoverflow") ?? `Date is out of range. Latest selectable date is ${a.selectableTo}.`;
         return {
           validityFragment: { rangeOverflow: !0, valid: !1 },
-          errorMessageFragment: { rangeOverflow: m }
+          errorMessageFragment: { rangeOverflow: y }
         };
       }
-      return l;
+      return n;
     }
-    function d(i) {
-      const l = { validityFragment: {}, errorMessageFragment: {} }, c = new Date(i.$input.value);
-      if (new Date(i.$input_range_end.value) < c) {
-        const m = i.getAttribute("data-rangeunderflow") ?? "End date cannot be before start date";
+    function _(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} }, c = new Date(a.$input.value);
+      if (new Date(a.$input_range_end.value) < c) {
+        const y = a.getAttribute("data-rangeunderflow") ?? "End date cannot be before start date";
         return {
           validityFragment: { rangeUnderflow: !0, valid: !1 },
-          errorMessageFragment: { rangeUnderflow: m }
+          errorMessageFragment: { rangeUnderflow: y }
         };
       }
-      return l;
+      return n;
     }
-    function p(i) {
-      const l = { validityFragment: {}, errorMessageFragment: {} };
-      return !i.$input.value || i.range && !i.$input_range_end.value ? {
+    function M(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} };
+      return !a.$input.value || a.range && !a.$input_range_end.value ? {
         validityFragment: { valueMissing: !0, valid: !1 },
         errorMessageFragment: { valueMissing: "This field is required" }
-      } : l;
+      } : n;
     }
   }
   render() {
-    var t, a, o, n, d, p, i, l;
-    const e = (this._defaultSlot.length === 0 || !((a = (t = this._defaultSlot[0]) == null ? void 0 : t.textContent) != null && a.trim())) && !this.label;
-    return y`
+    const e = (this._defaultSlot.length === 0 || !this._defaultSlot[0]?.textContent?.trim()) && !this.label;
+    return b`
 			<div
 				id="root"
 				@mouseenter=${() => {
@@ -279,22 +276,22 @@ const _ = class _ extends C {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${e} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? T(this.requiredLabel) : null}
+						${this.required ? V(D(this, g).term("required")) : f}
 					</div>
 					<div id="input">
 						<input
 							?disabled=${this.disabled}
 							?readonly=${this.readonly}
-							.value=${F(
-      this.range ? v((o = this.value) == null ? void 0 : o.split(",")[0]) : v(this.value)
+							.value=${O(
+      this.range ? v(this.value?.split(",")[0]) : v(this.value)
     )}
 							@blur=${this._handleBlur}
 							@click=${this._handleFocus}
 							@focus=${this._handleFocus}
 							@input=${this._handleInput}
 							@keydown=${this._handleKeyboardEvents}
-							aria-describedby=${u((n = this.hint) != null && n.trim() ? "hint" : g)}
-							aria-errormessage=${u((d = this.hint) != null && d.trim() ? "hint" : g)}
+							aria-describedby=${u(this.hint?.trim() ? "hint" : f)}
+							aria-errormessage=${u(this.hint?.trim() ? "hint" : f)}
 							aria-invalid=${!!this.invalid}
 							autocomplete="off"
 							data-testid="field-input"
@@ -304,19 +301,19 @@ const _ = class _ extends C {
 							placeholder=${u(this.placeholder)}
 							type="text"
 						/>
-						${this.range ? y`
+						${this.range ? b`
 									<skf-icon name="arrowRight"></skf-icon>
 									<input
 										?disabled=${this.disabled}
 										?readonly=${this.readonly}
-										.value=${F(v((p = this.value) == null ? void 0 : p.split(",")[1]))}
+										.value=${O(v(this.value?.split(",")[1]))}
 										@blur=${this._handleBlur}
 										@click=${this._handleFocus}
 										@focus=${this._handleFocus}
 										@input=${this._handleInput}
 										@keydown=${this._handleKeyboardEvents}
-										aria-describedby=${u((i = this.hint) != null && i.trim() ? "hint" : g)}
-										aria-errormessage=${u((l = this.hint) != null && l.trim() ? "hint" : g)}
+										aria-describedby=${u(this.hint?.trim() ? "hint" : f)}
+										aria-errormessage=${u(this.hint?.trim() ? "hint" : f)}
 										aria-invalid=${!!this.invalid}
 										autocomplete="off"
 										data-testid="field-input-range-end"
@@ -326,28 +323,29 @@ const _ = class _ extends C {
 										placeholder=${u(this.placeholder)}
 										type="text"
 									/>
-								` : g}
-						${this.showClearbutton ? y`
+								` : f}
+						${this.showClearbutton ? b`
 									<button
+										aria-label=${D(this, g).term("close")}
 										class="password skf-icon-host"
 										type="button"
 										@click=${this.clear.bind(this)}
 									>
 										<skf-icon name="close" size="sm"></skf-icon>
 									</button>
-								` : y`
+								` : b`
 									<button class="password skf-icon-host" type="button">
 										<skf-icon name="calendarMonth" size="sm"></skf-icon>
 									</button>
 								`}
 					</div>
 				</label>
-				${this.hint && y`
+				${this.hint && b`
 					<skf-hint
 						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${u(O(this.invalid, this.severity))}
+						severity=${u(L(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
@@ -358,6 +356,7 @@ const _ = class _ extends C {
 					?range=${this.range}
 					id=${this.id}
 					invalid-dates=${u(this.invalidDates)}
+					lang=${this.lang}
 					selectable-from=${u(this.selectableFrom)}
 					selectable-to=${u(this.selectableTo)}
 				></skf-datepicker-popup>
@@ -365,91 +364,91 @@ const _ = class _ extends C {
 		`;
   }
 };
-_.styles = [B, A];
-let s = _;
+g = new WeakMap(), w.styles = [q, W];
+let s = w;
 r([
-  h({ attribute: "custom-invalid", reflect: !0 })
+  d({ attribute: "custom-invalid", reflect: !0 })
 ], s.prototype, "customInvalid", 1);
 r([
-  h({ type: String })
+  d({ type: String })
 ], s.prototype, "id", 2);
 r([
-  h()
+  d()
 ], s.prototype, "label", 2);
 r([
-  h({ type: Boolean, attribute: "hide-label" })
+  d({ type: String })
+], s.prototype, "lang", 2);
+r([
+  d({ type: Boolean, attribute: "hide-label" })
 ], s.prototype, "hideLabel", 2);
 r([
-  h()
+  d()
 ], s.prototype, "hint", 2);
 r([
-  h({ attribute: "invalid-dates" })
+  d({ attribute: "invalid-dates" })
 ], s.prototype, "invalidDates", 2);
 r([
-  h({ reflect: !0 })
+  d({ reflect: !0 })
 ], s.prototype, "name", 2);
 r([
-  h()
+  d()
 ], s.prototype, "placeholder", 2);
 r([
-  h({ type: Boolean })
+  d({ type: Boolean })
 ], s.prototype, "range", 2);
 r([
-  h({ type: Boolean })
+  d({ type: Boolean })
 ], s.prototype, "readonly", 2);
 r([
-  h({ attribute: "required-label" })
-], s.prototype, "requiredLabel", 2);
-r([
-  h({ attribute: "selectable-from" })
+  d({ attribute: "selectable-from" })
 ], s.prototype, "selectableFrom", 2);
 r([
-  h({ attribute: "selectable-to" })
+  d({ attribute: "selectable-to" })
 ], s.prototype, "selectableTo", 2);
 r([
-  h({ reflect: !0 })
+  d({ reflect: !0 })
 ], s.prototype, "severity", 2);
 r([
-  h({ reflect: !0 })
+  d({ reflect: !0 })
 ], s.prototype, "size", 2);
 r([
-  h({ type: String, attribute: "validate-on" })
+  d({ type: String, attribute: "validate-on" })
 ], s.prototype, "validateOn", 2);
 r([
-  h()
+  d()
 ], s.prototype, "value", 2);
 r([
-  $()
+  k()
 ], s.prototype, "_init_date", 2);
 r([
-  h({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], s.prototype, "invalid", 2);
 r([
-  $()
+  k()
 ], s.prototype, "selectedRangeDates", 2);
 r([
-  $()
+  k()
 ], s.prototype, "showClearbutton", 2);
 r([
-  b("#popover")
+  $("#popover")
 ], s.prototype, "$popover", 2);
 r([
-  b("#input")
+  $("#input")
 ], s.prototype, "$anchor", 2);
 r([
-  b('input[data-testid="field-input"]')
+  $('input[data-testid="field-input"]')
 ], s.prototype, "$input", 2);
 r([
-  b('input[data-testid="field-input-range-end"]')
+  $('input[data-testid="field-input-range-end"]')
 ], s.prototype, "$input_range_end", 2);
 r([
-  b("skf-datepicker-popup")
+  $("skf-datepicker-popup")
 ], s.prototype, "$datepickerPopup", 2);
 r([
-  x({ flatten: !0 })
+  N({ flatten: !0 })
 ], s.prototype, "_defaultSlot", 2);
 r([
-  M("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+  j("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
 ], s.prototype, "_handleValueChange", 1);
 export {
   s as SkfDatepicker

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

@@ -2,6 +2,7 @@ import '../button/button.js';
 import '../heading/heading.js';
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)
@@ -23,12 +24,12 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfDialog extends SkfElement {
     #private;
     static styles: CSSResultGroup;
-    /** If defined, sets the aria-label for the close button */
-    closeButtonAriaLabel?: string;
     /** Title for the modal/dialog */
     heading?: string;
     /** If true, makes the dialog stretch edge to edge on screen */
     fullscreen: boolean;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, removes the close button */
     noCloseButton?: boolean | undefined;
     /** If defined, removes the inner padding */