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

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

@@ -2,6 +2,7 @@ import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-checkbox>` component is used to create a checkbox input
@@ -18,6 +19,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-checkbox
  */
 export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     /**
      * @internal
@@ -27,18 +29,17 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     /** If defined, outputs helping hints in console */
     debug: boolean;
     /** If true, outputs helping hints in console */
-    get checked(): boolean;
-    set checked(value: boolean);
+    checked: boolean;
     /** If true, forces component to invalid state until removed */
     customInvalid: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
     indeterminate: boolean;
     /** 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 defined, adds name to the input-element */
     name?: string;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** If defined, styles checkbox using provided severity */
     severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
@@ -53,7 +54,7 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     /** @internal */
     private $input?;
     /** @internal */
-    handleCheckedChange(): void;
+    _handleCheckedChange(): void;
     /** @internal */
     handleInvalidChange(): void;
     /** @internal */

package/dist/components/checkbox/checkbox.component.js

@@ -1,34 +1,35 @@
-import "../icon/icon.js";
-import { FormBase as p } from "../../internal/components/formBase.js";
-import { watch as h } from "../../internal/helpers/watch.js";
-import { Asterisk as v } from "../../internal/templates/asterisk.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as c, nothing as f } from "lit";
-import { property as r, state as y, query as g } from "lit/decorators.js";
-import { ifDefined as _ } from "lit/directives/if-defined.js";
-import { styles as b } from "./checkbox.styles.js";
-var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (u, t, s, a) => {
-  for (var l = a > 1 ? void 0 : a ? $(t, s) : t, n = u.length - 1, o; n >= 0; n--)
-    (o = u[n]) && (l = (a ? o(t, s, l) : o(l)) || l);
-  return a && l && k(t, s, l), l;
+var c = (i) => {
+  throw TypeError(i);
 };
-const d = class d extends p {
+var v = (i, s, t) => s.has(i) || c("Cannot " + t);
+var m = (i, s, t) => (v(i, s, "read from private field"), t ? t.call(i) : s.get(i)), f = (i, s, t) => s.has(i) ? c("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, t), y = (i, s, t, l) => (v(i, s, "write to private field"), l ? l.call(i, t) : s.set(i, t), t);
+import "../icon/icon.js";
+import { FormBase as _ } from "../../internal/components/formBase.js";
+import { watch as n } from "../../internal/helpers/watch.js";
+import { Asterisk as b } from "../../internal/templates/asterisk.js";
+import { componentStyles as k } from "../../styles/component.styles.js";
+import { LocalizeController as $ } from "../../utilities/localize.js";
+import { html as g, nothing as I } from "lit";
+import { property as r, state as V, query as C } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as w } from "./checkbox.styles.js";
+var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (i, s, t, l) => {
+  for (var h = l > 1 ? void 0 : l ? D(s, t) : s, d = i.length - 1, u; d >= 0; d--)
+    (u = i[d]) && (h = (l ? u(s, t, h) : u(h)) || h);
+  return l && h && A(s, t, h), h;
+}, o;
+const p = class p extends _ {
   constructor() {
-    super(...arguments), this._initiallyChecked = !1, this.debug = !1, this.customInvalid = !1, this.indeterminate = !1, this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+    super(...arguments);
+    f(this, o);
+    this._initiallyChecked = !1, y(this, o, new $(this)), this.debug = !1, this.checked = !1, this.customInvalid = !1, this.indeterminate = !1, this.lang = "en", this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
       t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
-    }, this._renderIcon = (t) => c`
+    }, this._renderIcon = (t) => g`
 		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
 	`;
   }
-  get checked() {
-    var t;
-    return ((t = this.$input) == null ? void 0 : t.checked) ?? !1;
-  }
-  set checked(t) {
-    this.setAttribute("checked", String(!!t)), this.$input && (this.$input.checked = !!t);
-  }
-  handleCheckedChange() {
-    this.setFormValue(this.checked ? this.value : null), this._validateInput();
+  _handleCheckedChange() {
+    this.setFormValue(this.checked ? this.value : null), this._validateInput(), this.$input && (this.$input.checked = !!this.checked);
   }
   handleInvalidChange() {
     this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
@@ -38,40 +39,37 @@ const d = class d extends p {
   }
   handleCustomInvalidChange() {
     if (this.customInvalid) {
-      const s = (
+      const l = (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         this.getAttribute("data-customerror") || "Set a custom error message using the data-customerror attribute"
       );
-      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, s), this.checkValidity();
+      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, l), this.checkValidity();
     } else
       this.setValidity({}), this._validateInput();
   }
   firstUpdated() {
-    var t;
-    (t = this.$input) == null || t.addEventListener("change", (s) => {
-      var a;
-      s.stopPropagation(), this.pristine = !1, this.checked = ((a = this.$input) == null ? void 0 : a.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
-    }), this.addEventListener("invalid", (s) => {
-      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
+    this.$input?.addEventListener("change", (t) => {
+      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
+    }), this.addEventListener("invalid", (t) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
   }
   /** @internal */
   _validateInput() {
-    var t;
     if (this._invalid = !1, this.customInvalid)
       this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
     else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+      const t = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        ((t = this.$input) == null ? void 0 : t.validationMessage) || "Please check this box if you want to proceed"
+        this.$input?.validationMessage || "Please check this box if you want to proceed"
       );
-      this.setValidity({ valueMissing: !0 }, String(s));
+      this.setValidity({ valueMissing: !0 }, String(t));
     } else
       this.setValidity({});
   }
   render() {
-    return c`
+    return g`
 			<label id="root">
 				<input
 					?checked=${this.checked}
@@ -79,71 +77,71 @@ const d = class d extends p {
 					?required=${this.required}
 					.indeterminate=${this.indeterminate}
 					aria-invalid=${!!this._invalid}
-					name=${_(this.name)}
+					name=${E(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
 				${this._renderIcon("check")} ${this._renderIcon("removeMinus")}
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? v(this.requiredLabel) : f}
+					${this.required ? b(m(this, o).term("required")) : I}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [m, b];
-let e = d;
-i([
+o = new WeakMap(), p.styles = [k, w];
+let e = p;
+a([
   r({ type: Boolean })
 ], e.prototype, "debug", 2);
-i([
+a([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "checked", 1);
-i([
+], e.prototype, "checked", 2);
+a([
   r({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
 ], e.prototype, "customInvalid", 2);
-i([
+a([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "indeterminate", 2);
-i([
+a([
   r()
 ], e.prototype, "label", 2);
-i([
+a([
+  r({ type: String })
+], e.prototype, "lang", 2);
+a([
   r()
 ], e.prototype, "name", 2);
-i([
-  r({ attribute: "required-label" })
-], e.prototype, "requiredLabel", 2);
-i([
+a([
   r({ reflect: !0 })
 ], e.prototype, "severity", 2);
-i([
+a([
   r({ type: Boolean, attribute: "show-valid" })
 ], e.prototype, "showValid", 2);
-i([
+a([
   r({ reflect: !0 })
 ], e.prototype, "size", 2);
-i([
+a([
   r()
 ], e.prototype, "value", 2);
-i([
-  y()
+a([
+  V()
 ], e.prototype, "_invalid", 2);
-i([
-  g("input")
+a([
+  C("input")
 ], e.prototype, "$input", 2);
-i([
-  h("checked", { afterUpdate: !0 })
-], e.prototype, "handleCheckedChange", 1);
-i([
-  h("_invalid")
+a([
+  n("checked")
+], e.prototype, "_handleCheckedChange", 1);
+a([
+  n("_invalid")
 ], e.prototype, "handleInvalidChange", 1);
-i([
-  h("_invalid", { afterUpdate: !0 })
+a([
+  n("_invalid", { afterUpdate: !0 })
 ], e.prototype, "handleDebugInvalid", 1);
-i([
-  h("customInvalid")
+a([
+  n("customInvalid")
 ], e.prototype, "handleCustomInvalidChange", 1);
 export {
   e as SkfCheckbox

package/dist/components/checkbox/checkbox.styles.js

@@ -43,7 +43,7 @@ const i = [
 				}
 
 				&:is(:checked:not(:disabled), :indeterminate:not(:disabled)) {
-					--_skf-checkbox-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-checkbox-bg-color: var(--skf-bg-color-emphasized);
 					--_skf-checkbox-border-color: transparent;
 				}
 

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

@@ -1,12 +1,17 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { Temporal } from '@js-temporal/polyfill';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 interface DateParts {
     year?: number;
     month?: number;
     day?: number;
 }
-export declare class SkfDatePickerCalendar extends SkfElement {
+/**
+ * @tagname skf-datepicker-calendar
+ */
+export declare class SkfDatepickerCalendar extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     _secondCalendarOffset: number;
@@ -18,6 +23,8 @@ export declare class SkfDatePickerCalendar 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;
     locale: string;
     range: boolean;
     /**