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

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

@@ -29,8 +29,7 @@ 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 */
@@ -55,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,11 +1,11 @@
-var p = (i) => {
+var c = (i) => {
   throw TypeError(i);
 };
-var v = (i, s, t) => s.has(i) || p("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) ? p("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, t), y = (i, s, t, a) => (v(i, s, "write to private field"), a ? a.call(i, t) : s.set(i, t), t);
+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, r) => (v(i, s, "write to private field"), r ? r.call(i, t) : s.set(i, t), t);
 import "../icon/icon.js";
 import { FormBase as _ } from "../../internal/components/formBase.js";
-import { watch as o } from "../../internal/helpers/watch.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";
@@ -13,30 +13,23 @@ import { html as g, nothing as I } from "lit";
 import { property as l, 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, r = (i, s, t, a) => {
-  for (var h = a > 1 ? void 0 : a ? D(s, t) : s, d = i.length - 1, u; d >= 0; d--)
-    (u = i[d]) && (h = (a ? u(s, t, h) : u(h)) || h);
-  return a && h && A(s, t, h), h;
-}, n;
-const c = class c extends _ {
+var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (i, s, t, r) => {
+  for (var h = r > 1 ? void 0 : r ? D(s, t) : s, d = i.length - 1, u; d >= 0; d--)
+    (u = i[d]) && (h = (r ? u(s, t, h) : u(h)) || h);
+  return r && h && A(s, t, h), h;
+}, o;
+const p = class p extends _ {
   constructor() {
     super(...arguments);
-    f(this, n);
-    this._initiallyChecked = !1, y(this, n, new $(this)), this.debug = !1, this.customInvalid = !1, this.indeterminate = !1, this.lang = "en", this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+    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) => 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"));
@@ -46,21 +39,21 @@ const c = class c extends _ {
   }
   handleCustomInvalidChange() {
     if (this.customInvalid) {
-      const a = (
+      const r = (
         // 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 }, a), this.checkValidity();
+      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, r), this.checkValidity();
     } else
       this.setValidity({}), this._validateInput();
   }
   firstUpdated() {
     var t;
-    (t = this.$input) == null || t.addEventListener("change", (a) => {
+    (t = this.$input) == null || t.addEventListener("change", (r) => {
       var h;
-      a.stopPropagation(), this.pristine = !1, this.checked = ((h = this.$input) == null ? void 0 : h.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
-    }), this.addEventListener("invalid", (a) => {
-      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && a.preventDefault();
+      r.stopPropagation(), this.pristine = !1, this.checked = ((h = this.$input) == null ? void 0 : h.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
+    }), this.addEventListener("invalid", (r) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && r.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
   }
   /** @internal */
@@ -70,11 +63,11 @@ const c = class c extends _ {
       this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
     else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+      const r = 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.setValidity({ valueMissing: !0 }, String(a));
+      this.setValidity({ valueMissing: !0 }, String(r));
     } else
       this.setValidity({});
   }
@@ -94,64 +87,64 @@ const c = class c extends _ {
 				${this._renderIcon("check")} ${this._renderIcon("removeMinus")}
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? b(m(this, n).term("required")) : I}
+					${this.required ? b(m(this, o).term("required")) : I}
 				</div>
 			</label>
 		`;
   }
 };
-n = new WeakMap(), c.styles = [k, w];
-let e = c;
-r([
+o = new WeakMap(), p.styles = [k, w];
+let e = p;
+a([
   l({ type: Boolean })
 ], e.prototype, "debug", 2);
-r([
+a([
   l({ type: Boolean, reflect: !0 })
-], e.prototype, "checked", 1);
-r([
+], e.prototype, "checked", 2);
+a([
   l({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
 ], e.prototype, "customInvalid", 2);
-r([
+a([
   l({ type: Boolean, reflect: !0 })
 ], e.prototype, "indeterminate", 2);
-r([
+a([
   l()
 ], e.prototype, "label", 2);
-r([
+a([
   l({ type: String })
 ], e.prototype, "lang", 2);
-r([
+a([
   l()
 ], e.prototype, "name", 2);
-r([
+a([
   l({ reflect: !0 })
 ], e.prototype, "severity", 2);
-r([
+a([
   l({ type: Boolean, attribute: "show-valid" })
 ], e.prototype, "showValid", 2);
-r([
+a([
   l({ reflect: !0 })
 ], e.prototype, "size", 2);
-r([
+a([
   l()
 ], e.prototype, "value", 2);
-r([
+a([
   V()
 ], e.prototype, "_invalid", 2);
-r([
+a([
   C("input")
 ], e.prototype, "$input", 2);
-r([
-  o("checked", { afterUpdate: !0 })
-], e.prototype, "handleCheckedChange", 1);
-r([
-  o("_invalid")
+a([
+  n("checked")
+], e.prototype, "_handleCheckedChange", 1);
+a([
+  n("_invalid")
 ], e.prototype, "handleInvalidChange", 1);
-r([
-  o("_invalid", { afterUpdate: !0 })
+a([
+  n("_invalid", { afterUpdate: !0 })
 ], e.prototype, "handleDebugInvalid", 1);
-r([
-  o("customInvalid")
+a([
+  n("customInvalid")
 ], e.prototype, "handleCustomInvalidChange", 1);
 export {
   e as SkfCheckbox

package/dist/components/icon/icon.component.js

@@ -11,48 +11,58 @@ import { componentStyles as C } from "../../styles/component.styles.js";
 import { html as z } from "lit";
 import { property as n } from "lit/decorators.js";
 import { styles as O } from "./icon.styles.js";
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (t, e, r, o) => {
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, r, o) => {
   for (var s = o > 1 ? void 0 : o ? P(e, r) : e, m = t.length - 1, h; m >= 0; m--)
     (h = t[m]) && (s = (o ? h(e, r, s) : h(s)) || s);
   return o && s && w(e, r, s), s;
 };
 const x = {
-  color: ["emphasized", "error", "info", "inverse", "primary", "secondary", "success", "warning"],
+  color: [
+    "emphasized",
+    "error",
+    "info",
+    "inverse",
+    "primary",
+    "purple",
+    "secondary",
+    "success",
+    "warning"
+  ],
   size: ["lg", "md", "sm", "xs"]
 };
-var a, l;
+var a, p;
 const f = class f extends v {
   constructor() {
     super(...arguments);
     y(this, a);
-    y(this, l);
-    d(this, a, this.attachInternals()), d(this, l, c(this, a).states), this.color = "primary", this.size = "md";
+    y(this, p);
+    d(this, a, this.attachInternals()), d(this, p, c(this, a).states), this.color = "primary", this.size = "md";
   }
   connectedCallback() {
     super.connectedCallback(), this.ariaHidden = this.label ? null : "true", this.ariaLabel = this.label ?? null, this.role = this.label ? "img" : null;
   }
   _handleStateChange(r, o, s) {
-    b(c(this, l), x[r]).set(s);
+    b(c(this, p), x[r]).set(s);
   }
   render() {
     return z`<div id="root">${S[this.name]}</div>`;
   }
 };
-a = new WeakMap(), l = new WeakMap(), f.styles = [C, O];
+a = new WeakMap(), p = new WeakMap(), f.styles = [C, O];
 let i = f;
-p([
+l([
   n({ type: String })
 ], i.prototype, "color", 2);
-p([
+l([
   n({ type: String })
 ], i.prototype, "label", 2);
-p([
+l([
   n({ type: String })
 ], i.prototype, "name", 2);
-p([
+l([
   n({ type: String })
 ], i.prototype, "size", 2);
-p([
+l([
   _(["color", "size"])
 ], i.prototype, "_handleStateChange", 1);
 export {

package/dist/components/icon/icon.styles.js

@@ -42,8 +42,8 @@ const r = o`
 				--_skf-icon-color: var(--skf-icon-color-emphasized);
 			}
 
-			:host(:state(alert)) #root {
-				--_skf-icon-color: var(--skf-severity-fg-color-alert);
+			:host(:state(purple)) #root {
+				--_skf-icon-color: var(--skf-icon-color-purple);
 			}
 
 			:host(:state(error)) #root {