@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.35

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

@@ -1,51 +1,72 @@
-import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { ICONS as c } from "@skf-design-system/ui-assets";
-import d from "../../styles/component.styles.js";
-import { html as h } from "lit";
-import { property as t } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as s } from "lit/directives/if-defined.js";
-import v from "./icon.styles.js";
-var y = Object.defineProperty, o = (m, p, a, $) => {
-  for (var r = void 0, i = m.length - 1, n; i >= 0; i--)
-    (n = m[i]) && (r = n(p, a, r) || r);
-  return r && y(p, a, r), r;
+var u = (e) => {
+  throw TypeError(e);
 };
-const l = class l extends f {
+var y = (e, r, t) => r.has(e) || u("Cannot " + t);
+var c = (e, r, t) => (y(e, r, "read from private field"), t ? t.call(e) : r.get(e)), d = (e, r, t) => r.has(e) ? u("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), g = (e, r, t, o) => (y(e, r, "write to private field"), o ? o.call(e, t) : r.set(e, t), t);
+import { SkfElement as _ } from "../../internal/components/skf-element.js";
+import { stateMap as b } from "../../internal/helpers/stateMap.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { ICONS as w } from "@skf-design-system/ui-assets";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { html as v } from "lit";
+import { property as p } from "lit/decorators.js";
+import { styles as O } from "./icon.styles.js";
+var z = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (e, r, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? E(r, t) : r, n = e.length - 1, m; n >= 0; n--)
+    (m = e[n]) && (s = (o ? m(r, t, s) : m(s)) || s);
+  return o && s && z(r, t, s), s;
+};
+const N = {
+  color: ["emphasised", "error", "info", "inverse", "primary", "secondary", "success", "warning"],
+  size: ["lg", "md", "sm", "xs"]
+};
+var l, h;
+const f = class f extends _ {
   constructor() {
-    super(...arguments), this.color = "primary", this.size = "md";
+    super(...arguments);
+    d(this, l);
+    d(this, h);
+    g(this, l, this.attachInternals()), g(this, h, c(this, l).states), this.color = "primary", this.size = "md", this._handleSlotchange = () => {
+      var s;
+      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
+      if (!t) throw new Error("Skf-icon is missing a slot");
+      if (!t.assignedElements({ flatten: !0 }).some((n) => n.tagName === "svg"))
+        throw new Error("Skf-icon must have a name attribute or a slotted svg");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.ariaHidden = this.label ? null : "true", this.ariaLabel = this.label ?? null, this.role = this.label ? "img" : null;
+  }
+  _handleStateChange(t, o, s) {
+    b(c(this, h), N[t]).set(s);
+  }
+  _handleNameChange() {
+    this.name || this._handleSlotchange();
   }
   render() {
-    return h`
-			<div
-				aria-hidden=${s(this.label ? void 0 : "true")}
-				aria-label=${s(this.label)}
-				class=${u({
-      icon: !0,
-      [`icon--color-${this.color}`]: !0,
-      [`icon--size-${this.size}`]: !0
-    })}
-				role=${s(this.label ? "img" : void 0)}
-			>
-				${c[this.name]}
-			</div>
-		`;
+    return this.name ? v`<div id="root">${w[this.name]}</div>` : v`<slot id="root" @slotchange=${this._handleSlotchange}></slot>`;
   }
 };
-l.styles = [d, v];
-let e = l;
-o([
-  t({ reflect: !0 })
-], e.prototype, "color");
-o([
-  t()
-], e.prototype, "label");
-o([
-  t()
-], e.prototype, "name");
-o([
-  t({ reflect: !0 })
-], e.prototype, "size");
+l = new WeakMap(), h = new WeakMap(), f.styles = [C, O];
+let a = f;
+i([
+  p({ type: String })
+], a.prototype, "color", 2);
+i([
+  p({ type: String })
+], a.prototype, "label", 2);
+i([
+  p({ type: String })
+], a.prototype, "name", 2);
+i([
+  p({ type: String })
+], a.prototype, "size", 2);
+i([
+  S(["color", "size"])
+], a.prototype, "_handleStateChange", 1);
+i([
+  S("name", { afterUpdate: !0 })
+], a.prototype, "_handleNameChange", 1);
 export {
-  e as SkfIcon
+  a as SkfIcon
 };

package/dist/components/icon/icon.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+export declare const styles: import("lit").CSSResult;

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

@@ -1,84 +1,85 @@
 import { css as o } from "lit";
-const i = o`
-	/* stylelint-disable selector-class-pattern */
+const r = o`
 	@layer components {
-		:host {
-			display: inline-flex;
-		}
+		@layer base {
+			:host {
+				display: inline-flex;
+			}
 
-		:host-context(.skf-icon-host) {
-			color: inherit;
-		}
+			#root {
+				--_skf-icon-color: var(--skf-icon-color-primary);
+				--_skf-icon-size: var(--skf-icon-size-md);
 
-		.icon {
-			block-size: var(--_skf-icon-size);
-			display: inline-flex;
-			flex-shrink: 0; /* Prevents shrink when flex-child */
-			inline-size: var(--_skf-icon-size);
-			pointer-events: none;
-			user-select: none;
+				block-size: var(--_skf-icon-size);
+				display: block;
+				flex-shrink: 0; /* Prevents shrink when flex-child */
+				inline-size: var(--_skf-icon-size);
+				pointer-events: none;
+				user-select: none;
 
-			:not(:host-context(.skf-icon-host)) & {
-				color: var(--_skf-icon-color, var(--skf-icon-color-primary));
+				:host(:not([data-color='custom'])) & {
+					color: var(--_skf-icon-color);
+				}
 			}
 		}
 
-		/**
-		 * Colors
-		 */
-		.icon--color-secondary {
-			--_skf-icon-color: var(--skf-icon-color-secondary);
-		}
+		@layer mods {
+			/**
+			 * Color
+			 */
+			:host([data-color='custom']) {
+				color: inherit;
+			}
 
-		.icon--color-inverse {
-			--_skf-icon-color: var(--skf-icon-color-inverse);
-		}
+			:host(:state(secondary)) #root {
+				--_skf-icon-color: var(--skf-icon-color-secondary);
+			}
 
-		.icon--color-emphasised {
-			--_skf-icon-color: var(--skf-icon-color-emphasised);
-		}
+			:host(:state(inverse)) #root {
+				--_skf-icon-color: var(--skf-icon-color-inverse);
+			}
 
-		/* Severity */
-		.icon--color-alert {
-			--_skf-icon-color: var(--skf-severity-fg-color-alert);
-		}
+			:host(:state(emphasised)) #root {
+				--_skf-icon-color: var(--skf-icon-color-emphasised);
+			}
 
-		.icon--color-error {
-			--_skf-icon-color: var(--skf-severity-fg-color-error);
-		}
+			:host(:state(alert)) #root {
+				--_skf-icon-color: var(--skf-severity-fg-color-alert);
+			}
 
-		.icon--color-info {
-			--_skf-icon-color: var(--skf-severity-fg-color-info);
-		}
+			:host(:state(error)) #root {
+				--_skf-icon-color: var(--skf-severity-fg-color-error);
+			}
 
-		.icon--color-success {
-			--_skf-icon-color: var(--skf-severity-fg-color-success);
-		}
+			:host(:state(info)) #root {
+				--_skf-icon-color: var(--skf-severity-fg-color-info);
+			}
 
-		.icon--color-warning {
-			--_skf-icon-color: var(--skf-severity-fg-color-warning);
-		}
+			:host(:state(success)) #root {
+				--_skf-icon-color: var(--skf-severity-fg-color-success);
+			}
 
-		/**
-		 * Sizes
-		 */
-		.icon--size-xs {
-			--_skf-icon-size: var(--skf-icon-size-xs);
-		}
+			:host(:state(warning)) #root {
+				--_skf-icon-color: var(--skf-severity-fg-color-warning);
+			}
 
-		.icon--size-sm {
-			--_skf-icon-size: var(--skf-icon-size-sm);
-		}
+			/**
+			 * Size
+			 */
+			:host(:state(xs)) #root {
+				--_skf-icon-size: var(--skf-icon-size-xs);
+			}
 
-		.icon--size-md {
-			--_skf-icon-size: var(--skf-icon-size-md);
-		}
+			:host(:state(sm)) #root {
+				--_skf-icon-size: var(--skf-icon-size-sm);
+			}
 
-		.icon--size-lg {
-			--_skf-icon-size: var(--skf-icon-size-lg);
+			:host(:state(lg)) #root {
+				--_skf-icon-size: var(--skf-icon-size-lg);
+			}
 		}
 	}
 `;
 export {
-  i as default
+  r as styles
 };

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

@@ -1,19 +1,19 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
-type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-amount' | 'transaction-currency' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'url' | 'photo' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'email' | 'impp' | 'password' | 'webauthn' | 'work' | (string & {});
 /**
- * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+ * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change - Fires when the value of the input changes
- * @event invalid - Fires when the input is invalid
+ * @event {CustomEvent} change - Fires when the value of the input changes
+ * @event {CustomEvent} invalid - Fires when the input is invalid
  *
  * @slot - The Inputs label. Alternatively, you can use the `label` attribute.
  *
@@ -25,12 +25,13 @@ type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-na
 export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
     private customError;
+    /** @internal intermediary value for reset to function, e.g value attribute act as default value */
+    private _value;
     /**
-     * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-     * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
-     * @type {  -m  }
+     * Indicates whether the value of the control can be automatically completed by the browser. See
+     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
      */
-    autocomplete?: AutocompleteValues;
+    autocomplete?: HTMLInputElement['autocomplete'];
     /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
     buttonAriaLabelClear: string;
     /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
@@ -41,13 +42,16 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If defined, displays informational text below the field */
     hint?: string;
-    /** Tells what keyboard to use if applicable */
-    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.
+     */
+    inputmode: HTMLInputElement['inputMode'];
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, displays a prefix/adornment before the input-element */
@@ -67,44 +71,41 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** If defined, displays placeholder text */
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
-    readonly?: boolean;
+    readonly: boolean;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /**
-     * If defined, displays provided severity state
-     * @type { "alert" | "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the input */
     size: 'sm' | 'md';
     /** If defined, displays a suffix/adornment after the input-element */
     trailing?: string;
-    /**
-     * Type of input control
-     * @type { 'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' }
-     */
-    type?: Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'>;
+    /** Type of input */
+    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
     /** Sets validation start */
     validateOn: 'input' | 'change' | 'submit';
     /** The current value of the input field  */
-    value: string;
+    set value(newValue: string);
+    get value(): string;
     /** @internal */
     /** true if the internal state is invalid  */
     invalid: boolean;
     /** @internal */
     private _buttonDown;
     /** @internal */
-    $input: HTMLInputElement;
+    $input?: HTMLInputElement;
     /** @internal */
     _defaultSlot: Node[];
     /** @internal */
     private _numberController;
     /** @internal */
     private _passwordController;
-    protected firstUpdated(): void;
+    firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @internal */
+    valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
     _handleInput: () => void;
@@ -135,4 +136,3 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _onBlur;
     render(): import("lit").TemplateResult<1>;
 }
-export {};