@skf-design-system/ui-components 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/components/radio/radio.component.js

@@ -1,134 +1,150 @@
 import "../icon/icon.js";
-import { FormBase as u } from "../../internal/components/formBase.js";
-import { Asterisk as c } from "../../internal/templates/asterisk.js";
-import p from "../../styles/component.styles.js";
+import { FormBase as c } from "../../internal/components/formBase.js";
+import { watch as n } from "../../internal/helpers/watch.js";
+import { Asterisk as p } from "../../internal/templates/asterisk.js";
+import v from "../../styles/component.styles.js";
 import { html as m } from "lit";
-import { property as a, state as v, query as f } from "lit/decorators.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
-import { live as b } from "lit/directives/live.js";
-import _ from "./radio.styles.js";
-var k = Object.defineProperty, i = (n, t, r, l) => {
-  for (var s = void 0, o = n.length - 1, h; o >= 0; o--)
-    (h = n[o]) && (s = h(t, r, s) || s);
-  return s && k(t, r, s), s;
+import { property as r, state as f, query as y } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { live as _ } from "lit/directives/live.js";
+import g from "./radio.styles.js";
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? C(e, s) : e, l = u.length - 1, h; l >= 0; l--)
+    (h = u[l]) && (a = (o ? h(e, s, a) : h(a)) || a);
+  return o && a && k(e, s, a), a;
 };
-const d = class d extends u {
+const d = class d extends c {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.debug = !1, this.hideLabel = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
-      t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
+    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (e) => {
+      e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this._validateInput();
   }
-  willUpdate(t) {
-    t.has("_invalid") && (this._invalid ? (this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true")));
-  }
   firstUpdated() {
-    var t;
-    (t = this.$input) == null || t.addEventListener("change", (r) => {
-      var l;
-      r.stopPropagation(), this.pristine = !1, this.checked = (l = this.$input) == null ? void 0 : l.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
-    }), this.addEventListener("invalid", (r) => {
-      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && r.preventDefault();
+    var e;
+    (e = this.$input) == null || e.addEventListener("change", (s) => {
+      var o;
+      s.stopPropagation(), this.pristine = !1, this.checked = (o = this.$input) == null ? void 0 : o.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+    }), this.addEventListener("invalid", (s) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
     }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
   }
-  updated(t) {
-    super.updated(t), t.has("_invalid") && this._invalid && this.debug && this.debugOutput(), t.has("checked") && this.form && this.setFormValue(this.checked ? this.value : null);
+  handleInvalidChange() {
+    this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
+  }
+  handleDebugInvalid() {
+    this._invalid && this.debug && !this.validity.valid && console.log(`Radio invalidity reason: ${this._internals.validationMessage}`);
   }
-  attributeChangedCallback(t, r, l) {
-    if (super.attributeChangedCallback(t, r, l), t === "checked" && l !== null && this._uncheckSiblingRadios(), t === "custom-invalid")
-      if (typeof l == "string") {
-        const o = String(l).trim() || "Custom error";
-        this.pristine = !1, this._invalid = !0, this._internals.setValidity({ customError: !0 }, o), this.checkValidity();
-      } else
-        this.setValidity({}), this._validateInput();
+  handleCheckedChanged() {
+    this.setFormValue(this.checked ? this.value : null), this.checked && this._uncheckSiblingRadios();
   }
-  debugOutput() {
-    this.debug && !this._internals.validity.valid && console.log(`Radio invalidity reason: ${this._internals.validationMessage}`);
+  handleCustomInvalidChange() {
+    if (this.customInvalid) {
+      const s = (
+        // 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();
+    } else
+      this.setValidity({}), this._validateInput();
   }
   /** @internal */
   _uncheckSiblingRadios() {
-    const t = this.name;
-    if (!t) return;
-    (this.form ?? document).querySelectorAll(`skf-radio[name="${t}"]`).forEach((s) => {
-      const o = this.form === s.form, h = !this.form && !s.form;
-      s !== this && (o || h) && (s.checked = !1);
+    const e = this.name;
+    if (!e) return;
+    (this.form ?? document).querySelectorAll(`skf-radio[name="${e}"]`).forEach((a) => {
+      const l = this.form === a.form, h = !this.form && !a.form;
+      a !== this && (l || h) && (a.checked = !1);
     });
   }
   /** @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) {
+    var e;
+    if (this._invalid = !1, this.customInvalid) {
+      const s = this.getAttribute("data-customerror");
+      this.setValidity({ customError: !0 }, this.withFallback(s)), this._invalid = !0;
+    } else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const r = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : ((t = this.$input) == null ? void 0 : t.validationMessage) ?? "Please check this box if you want to proceed";
-      this.setValidity({ valueMissing: !0 }, String(r));
+      const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        ((e = this.$input) == null ? void 0 : e.validationMessage) || "Please check this radio if you want to proceed"
+      );
+      this.setValidity({ valueMissing: !0 }, this.withFallback(s));
     } else
       this.setValidity({});
   }
   render() {
     return m`
-			<label id="radio">
+			<label id="root">
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.checked=${b(!!this.checked)}
+					.checked=${_(!!this.checked)}
 					aria-invalid=${!!this._invalid}
-					name=${y(this.name)}
+					name=${b(this.name)}
 					type="radio"
 					value=${this.value}
 				/>
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? c(this.requiredLabel) : null}
+					${this.required ? p(this.requiredLabel) : null}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [p, _];
-let e = d;
+d.styles = [v, g];
+let t = d;
+i([
+  r({ type: Boolean })
+], t.prototype, "debug", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+i([
+  r({ type: Boolean, attribute: "custom-invalid" })
+], t.prototype, "customInvalid", 2);
 i([
-  a({ type: Boolean })
-], e.prototype, "debug");
+  r()
+], t.prototype, "label", 2);
 i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "checked");
+  r()
+], t.prototype, "name", 2);
 i([
-  a({ type: Boolean, attribute: "custom-invalid" })
-], e.prototype, "customInvalid");
+  r({ attribute: "required-label" })
+], t.prototype, "requiredLabel", 2);
 i([
-  a({ type: Boolean, attribute: "hide-label", reflect: !0 })
-], e.prototype, "hideLabel");
+  r({ reflect: !0 })
+], t.prototype, "size", 2);
 i([
-  a()
-], e.prototype, "label");
+  r()
+], t.prototype, "severity", 2);
 i([
-  a()
-], e.prototype, "name");
+  r({ type: Boolean, attribute: "show-valid" })
+], t.prototype, "showValid", 2);
 i([
-  a({ attribute: "required-label" })
-], e.prototype, "requiredLabel");
+  r()
+], t.prototype, "value", 2);
 i([
-  a({ reflect: !0 })
-], e.prototype, "size");
+  f()
+], t.prototype, "_invalid", 2);
 i([
-  a({ reflect: !0 })
-], e.prototype, "severity");
+  y("input")
+], t.prototype, "$input", 2);
 i([
-  a({ type: Boolean, attribute: "show-valid" })
-], e.prototype, "showValid");
+  n("_invalid")
+], t.prototype, "handleInvalidChange", 1);
 i([
-  a()
-], e.prototype, "value");
+  n("_invalid", { afterUpdate: !0 })
+], t.prototype, "handleDebugInvalid", 1);
 i([
-  v()
-], e.prototype, "_invalid");
+  n("checked")
+], t.prototype, "handleCheckedChanged", 1);
 i([
-  f("input")
-], e.prototype, "$input");
+  n("customInvalid")
+], t.prototype, "handleCustomInvalidChange", 1);
 export {
-  e as SkfRadio
+  t as SkfRadio
 };

package/dist/components/radio/radio.styles.js

@@ -8,11 +8,16 @@ const e = [
 				contain: initial;
 			}
 
-			#radio {
+			#root {
 				align-items: center;
+				color: var(--_skf-radio-color, var(--skf-text-color-primary));
 				display: flex;
 				grid-gap: var(--skf-spacing-50);
 
+				:host([disabled]) & {
+					--_skf-radio-color: var(--skf-interactive-text-color-disabled);
+				}
+
 				:host([size='sm']) & {
 					--_skf-radio-size: var(--skf-size-20);
 

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

@@ -1,5 +1,5 @@
-import { FormBase } from '@internal/components/formBase.js';
-import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 import '../../internal/components/hint/hint';
 import type { SelectOptionEvent, SkfSelectOption } from '../select-option/select-option.component.js';
@@ -15,10 +15,9 @@ import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationC
  *
  * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
  *
- * @attribute {Boolean} [disabled] - If true, the select is disabled	`default: false`
+ * @attribute {boolean} [disabled] - If true, the select is disabled	`default: false`
  *
  * @slot - The select's placeholder content
- * @slot icon - The select's slot for custom meta information
  *
  * @event change - Fired when the selected option(s) changes
  * @event invalid - Fired when the select is invalid
@@ -45,31 +44,34 @@ export declare class SkfSelect extends FormBase {
     /** If defined, sets the hint text under the select component in the form */
     hint?: string;
     /** A readonly property that returns the selected value(s) in a array */
-    get getSelectedValues(): string[];
+    set selectedValues(values: string[]);
+    get selectedValues(): string[];
     /** A readonly property that returns the selected slot(s) text content in a array */
-    get getSelectedOptionsText(): (string | null)[];
-    /** Sets the visible label of the select in the form */
-    label: string;
+    set selectedOptionsText(values: string[]);
+    get selectedOptionsText(): string[];
+    /** If defined, displays provided label */
+    label?: string;
     /** If defined, limits the number of selectable options */
     max?: number;
     /** If defined, sets the minimum number of required options */
     min?: number;
-    /** If provided, allows for multiple options to be selected */
+    /** If true, allows for multiple options to be selected */
     multiple?: boolean;
-    /** If provided, set name of the component */
+    /** If defined, set name of the component */
     name?: string;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
     /** If defined, displays provided severity state */
     severity?: FormFieldBaseProps['severity'];
-    /** If provided, displays valid state after interaction */
+    /** If true, displays valid state after interaction */
     showValid?: boolean;
     /** Size of the Select */
     size: 'sm' | 'md';
     /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+    set value(newValue: string);
     get value(): string;
-    /** @internal */
     /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
+    /** @internal */
     private _selectedOptions;
     /** @internal */
     /** The selected options in an array. Treat it as a read only property. See selectedValues, slectedSlots for computed value arrays. */