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

package/dist/components/segmented-button/segmented-button.component.js

@@ -0,0 +1,73 @@
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { html as c } from "lit";
+import { property as u, state as f, queryAssignedElements as p } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { styles as y } from "./segmented-button.styles.js";
+var v = Object.defineProperty, n = (a, s, e, i) => {
+  for (var t = void 0, o = a.length - 1, r; o >= 0; o--)
+    (r = a[o]) && (t = r(s, e, t) || t);
+  return t && v(s, e, t), t;
+};
+const h = class h extends d {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.value = "", this._handleSegmentedButtonItemSelected = (s) => {
+      const e = s.detail.item;
+      this.multiple && (e.selected = !e.selected), this.value = "";
+      let i = [];
+      this.items.forEach((t) => {
+        this.multiple ? t.selected && (i = [...i, t.value], this.value = i.join()) : t !== e ? t.selected = !1 : (t.selected = !0, this.value = t.value);
+      });
+    }, this._handleSlotChange = () => {
+      this.items.forEach((s) => {
+        if (s.isMultiple = this.multiple, !this.multiple) {
+          const e = this.items.filter((i) => i.selected);
+          e.length > 1 && e.slice(0, -1).forEach((i) => i.selected = !1);
+        }
+      });
+    }, this._handleKeyDown = (s) => {
+      if (["ArrowLeft", "ArrowRight"].includes(s.key)) {
+        const e = this._getKeyDownNextItem(s.key);
+        e == null || e.focus({ preventScroll: !0 });
+      }
+    };
+  }
+  firstUpdated() {
+    this.addEventListener(
+      "skf-segmented-button-item-select",
+      this._handleSegmentedButtonItemSelected
+    );
+  }
+  /** @internal */
+  _getKeyDownNextItem(s) {
+    const e = this.items.findIndex((r) => r === document.activeElement);
+    if (e === -1) return;
+    const t = (e + (s === "ArrowRight" ? 1 : -1)) % this.items.length;
+    return this.items[t < 0 ? this.items.length - 1 : t];
+  }
+  render() {
+    return c`
+			<slot
+				@keydown=${this._handleKeyDown}
+				@slotchange=${this._handleSlotChange}
+				aria-label=${g(this.ariaLabel ?? "Segmented button label")}
+				id="root"
+				role=${this.multiple ? "group" : "radiogroup"}
+			></slot>
+		`;
+  }
+};
+h.styles = [m, y];
+let l = h;
+n([
+  u({ type: Boolean })
+], l.prototype, "multiple");
+n([
+  f()
+], l.prototype, "value");
+n([
+  p()
+], l.prototype, "items");
+export {
+  l as SkfSegmentedButton
+};

package/dist/components/segmented-button/segmented-button.d.ts

@@ -0,0 +1,8 @@
+import { SkfSegmentedButton } from './segmented-button.component.js';
+export * from './segmented-button.component.js';
+export default SkfSegmentedButton;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-segmented-button': SkfSegmentedButton;
+    }
+}

package/dist/components/segmented-button/segmented-button.js

@@ -0,0 +1,6 @@
+import { SkfSegmentedButton as e } from "./segmented-button.component.js";
+e.define("skf-segmented-button");
+export {
+  e as SkfSegmentedButton,
+  e as default
+};

package/dist/components/segmented-button/segmented-button.styles.d.ts

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

package/dist/components/segmented-button/segmented-button.styles.js

@@ -0,0 +1,16 @@
+import { css as r } from "lit";
+const o = r`
+	@layer components {
+		#root {
+			block-size: var(--skf-size-44);
+			border: var(--skf-border-width-sm) solid var(--skf-border-color-primary);
+			border-radius: 6px; /* TODO: Missing token */
+			display: flex;
+			gap: var(--skf-spacing-75);
+			padding: var(--skf-spacing-25);
+		}
+	}
+`;
+export {
+  o as styles
+};

package/dist/components/{select-option-group → select}/select-option-group.component.d.ts

@@ -10,7 +10,11 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-select-option-group
  */
 export declare class SkfSelectOptionGroup extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     label: string;
+    small: boolean;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/select/select-option-group.component.js

@@ -0,0 +1,50 @@
+var b = (t) => {
+  throw TypeError(t);
+};
+var d = (t, e, s) => e.has(t) || b("Cannot " + s);
+var h = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), n = (t, e, s) => e.has(t) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), f = (t, e, s, r) => (d(t, e, "write to private field"), r ? r.call(t, s) : e.set(t, s), s);
+import { SkfElement as u } from "../../internal/components/skf-element.js";
+import { stateMap as y } from "../../internal/helpers/stateMap.js";
+import { watch as _ } from "../../internal/helpers/watch.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { html as P } from "lit";
+import { property as w, state as C } from "lit/decorators.js";
+import { styles as D } from "./select-option-group.style.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, v = (t, e, s, r) => {
+  for (var l = r > 1 ? void 0 : r ? x(e, s) : e, i = t.length - 1, p; i >= 0; i--)
+    (p = t[i]) && (l = (r ? p(e, s, l) : p(l)) || l);
+  return r && l && j(e, s, l), l;
+}, o, m;
+const c = class c extends u {
+  constructor() {
+    super(...arguments);
+    n(this, o);
+    n(this, m);
+    f(this, o, this.attachInternals()), f(this, m, h(this, o).states), this.label = "Default label", this.small = !1;
+  }
+  _handleStateChange() {
+    y(h(this, m), "small").set(this.small);
+  }
+  render() {
+    return P`
+			<div role="group">
+				<div id="label">${this.label}</div>
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+o = new WeakMap(), m = new WeakMap(), c.styles = [g, D];
+let a = c;
+v([
+  w({ reflect: !0 })
+], a.prototype, "label", 2);
+v([
+  C()
+], a.prototype, "small", 2);
+v([
+  _("small")
+], a.prototype, "_handleStateChange", 1);
+export {
+  a as SkfSelectOptionGroup
+};

package/dist/components/{select-option-group → select}/select-option-group.d.ts

@@ -1,5 +1,5 @@
-import { SkfSelectOptionGroup } from './select-option-group.component';
-export * from './select-option-group.component';
+import { SkfSelectOptionGroup } from './select-option-group.component.js';
+export * from './select-option-group.component.js';
 export default SkfSelectOptionGroup;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/select/select-option-group.style.d.ts

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

package/dist/components/select/select-option-group.style.js

@@ -0,0 +1,24 @@
+import { css as e } from "lit";
+const t = e`
+	@layer components {
+		@layer base {
+			#label {
+				--_skf-select-option-group-height: var(--skf-size-44);
+
+				align-items: center;
+				block-size: var(--_skf-select-option-group-height);
+				display: flex;
+				font-weight: var(--skf-font-weight-bold);
+			}
+		}
+
+		@layer mods {
+			:host(:state(small)) #label {
+				--_skf-select-option-group-height: var(--skf-size-32);
+			}
+		}
+	}
+`;
+export {
+  t as styles
+};

package/dist/components/{select-option → select}/select-option.component.d.ts

@@ -1,9 +1,8 @@
+import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, IconColor } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-import '../icon/icon';
-import { SkfIcon } from '../icon/icon';
-import type { SkfSelect } from '../select/select.component.js';
+import type { SkfSelect } from './select.component.js';
 export interface SelectOptionEvent {
     value: string | null;
     option: SkfSelectOption;
@@ -16,11 +15,12 @@ export interface SelectOptionEvent {
  * @slot - The option's text content
  * @slot icon - The option's slot for icon or custom meta information (svg).
  *
- * @event skf-select-option:select - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
+ * @event skf-select-option-select - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
  *
  * @tagname skf-select-option
  */
 export declare class SkfSelectOption extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -37,15 +37,15 @@ export declare class SkfSelectOption extends SkfElement {
      * Do not use directly, instead use `setSelectedDiscrete`.
      * If true, instantly sets/unsets the selected property, without engaging ui feedback. Primarily for unselecting previous option in single select.
      */
-    _shortcutUpdate?: boolean;
+    _shortcutUpdate: boolean;
     /** If true, prevents interaction with the option */
-    disabled?: boolean;
+    disabled: boolean;
     /** If defined, set an icon */
-    icon?: SkfIcon['name'];
+    icon?: Icon;
     /** If defined, sets provided color on the icon */
-    iconColor?: SeverityFgColor;
+    iconColor?: IconColor;
     /** If true, sets the option as selected */
-    selected?: boolean;
+    selected: boolean;
     /** If defined, sets a short label */
     shortLabel?: string;
     /** The option's label text (equivalent to the tags textContent) */
@@ -54,16 +54,19 @@ export declare class SkfSelectOption extends SkfElement {
     /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
     set value(optionValue: string);
     get value(): string;
+    small: boolean;
     /** @internal */
     private _assignedNodes?;
     constructor();
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @internal */
+    _handleStateChange(): void;
     /**
      * @internal
      * This internal setter is to change selected state without emitting events triggering other side effects,
      * e.g deselecting previous selected in a single select. Is used by skf-select in single select mode.
      */
-    set setSelectedDiscrete(value: boolean);
+    set setSelectedDiscrete(isSelected: boolean);
     /**
      * @internal
      * Returns the slotted content as a string. If no slotted content, returns an empty string.

package/dist/components/select/select-option.component.js

@@ -0,0 +1,140 @@
+var y = (e) => {
+  throw TypeError(e);
+};
+var v = (e, s, t) => s.has(e) || y("Cannot " + t);
+var u = (e, s, t) => (v(e, s, "read from private field"), t ? t.call(e) : s.get(e)), m = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), f = (e, s, t, i) => (v(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import "../icon/icon.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { stateMap as x } from "../../internal/helpers/stateMap.js";
+import { watch as g } from "../../internal/helpers/watch.js";
+import { componentStyles as N } from "../../styles/component.styles.js";
+import { LitElement as T, html as _ } from "lit";
+import { property as a, state as $, queryAssignedNodes as O } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { styles as E } from "./select-option.styles.js";
+var w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, s, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? D(s, t) : s, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (r = (i ? p(s, t, r) : p(r)) || r);
+  return i && r && w(s, t, r), r;
+}, n, h;
+const c = class c extends C {
+  constructor() {
+    super();
+    m(this, n);
+    m(this, h);
+    f(this, n, this.attachInternals()), f(this, h, u(this, n).states), this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this.small = !1, this._handleClick = (t) => {
+      t.stopPropagation(), this.selected = !this.selected;
+    }, this.role = "option", this._parent = this.closest("skf-select"), this._shortcutUpdate = !1;
+  }
+  set text(t) {
+    this.textContent = t.trim();
+  }
+  get text() {
+    var t;
+    return ((t = this.textContent) == null ? void 0 : t.trim()) ?? "";
+  }
+  set value(t) {
+    this._value = t.trim();
+  }
+  get value() {
+    var t;
+    return !this._value && this._slotContainsOnlyText ? this._getSlottedContent().trim() : ((t = this._value) == null ? void 0 : t.trim()) ?? this.text;
+  }
+  updated(t) {
+    super.updated(t), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option-select", {
+      detail: {
+        value: this.selected ? this.value : null,
+        option: this
+      }
+    });
+  }
+  _handleStateChange() {
+    x(u(this, h), "small").set(this.small);
+  }
+  /**
+   * @internal
+   * This internal setter is to change selected state without emitting events triggering other side effects,
+   * e.g deselecting previous selected in a single select. Is used by skf-select in single select mode.
+   */
+  set setSelectedDiscrete(t) {
+    (async () => {
+      this._shortcutUpdate = !0, this.selected = t, await this.updateComplete, this._shortcutUpdate = !1;
+    })();
+  }
+  /**
+   * @internal
+   * Returns the slotted content as a string. If no slotted content, returns an empty string.
+   */
+  _getSlottedContent() {
+    return this._assignedNodes ? [...this._assignedNodes].map((t) => t.nodeType === Node.ELEMENT_NODE ? t.outerHTML : t.textContent).join() : "";
+  }
+  /** @internal */
+  get _slotContainsOnlyText() {
+    return this._assignedNodes ? [...this._assignedNodes].every(
+      (i) => {
+        var r;
+        return i.nodeType === Node.TEXT_NODE && ((r = i.textContent) == null ? void 0 : r.trim()) !== "";
+      }
+    ) : "";
+  }
+  render() {
+    return _`
+			<button
+				?disabled=${this.disabled}
+				@click=${this._handleClick}
+				aria-selected=${this.selected ? "true" : "false"}
+				role="option"
+			>
+				<skf-icon id="icon-check" name="check" size="sm"></skf-icon>
+				<slot>${this.text}</slot>
+				<div id="adornments">
+					<slot name="icon">
+						${this.icon && _`
+							<skf-icon
+								color=${b(this.iconColor)}
+								data-color=${b((this.disabled || !this.iconColor) && "custom")}
+								name=${this.icon}
+							></skf-icon>
+						`}
+					</slot>
+					${this.shortLabel && _`<div id="short-label">${this.shortLabel}</div>`}
+				</div>
+			</button>
+		`;
+  }
+};
+n = new WeakMap(), h = new WeakMap(), c.styles = [N, E], c.shadowRootOptions = { ...T.shadowRootOptions, delegatesFocus: !0 };
+let o = c;
+l([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+l([
+  a({ reflect: !0 })
+], o.prototype, "icon", 2);
+l([
+  a({ reflect: !0, attribute: "icon-color" })
+], o.prototype, "iconColor", 2);
+l([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "selected", 2);
+l([
+  a({ reflect: !0, attribute: "short-label" })
+], o.prototype, "shortLabel", 2);
+l([
+  a({ attribute: !1 })
+], o.prototype, "text", 1);
+l([
+  a({ reflect: !0 })
+], o.prototype, "value", 1);
+l([
+  $()
+], o.prototype, "small", 2);
+l([
+  O({ flatten: !0 })
+], o.prototype, "_assignedNodes", 2);
+l([
+  g("small")
+], o.prototype, "_handleStateChange", 1);
+export {
+  o as SkfSelectOption
+};

package/dist/components/select/select-option.controllers.d.ts

@@ -0,0 +1,15 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfSelectOption;
+ */
+interface ControllerHostProps {
+    localName: keyof HTMLElementTagNameMap;
+    _parent: HTMLElement | null;
+}
+export declare class DeveloperFeedbackController implements ReactiveController {
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    constructor(host: ReactiveControllerHost);
+    hostUpdated(): void;
+}
+export {};

package/dist/components/select/select-option.styles.d.ts

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

package/dist/components/select/select-option.styles.js

@@ -0,0 +1,65 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		@layer base {
+			button {
+				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary);
+				--_skf-select-option-color: inherit;
+				--_skf-select-option-height: var(--skf-size-44);
+
+				align-items: center;
+				background-color: var(--_skf-select-option-bg);
+				block-size: var(--_skf-select-option-height);
+				color: var(--_skf-select-option-color);
+				display: flex;
+				gap: var(--skf-spacing-50);
+				padding-inline: var(--skf-spacing-50);
+				width: 100%;
+			}
+
+			#icon-check {
+				opacity: 0;
+
+				:host([selected]) & {
+					opacity: 1;
+				}
+			}
+
+			#adornments {
+				align-items: inherit;
+				display: inherit;
+				gap: inherit;
+				margin-inline-start: auto;
+			}
+
+			#short-label {
+				color: var(--skf-text-color-tertiary);
+			}
+		}
+
+		@layer states {
+			button {
+				&:disabled {
+					--_skf-select-option-color: var(--skf-interactive-text-color-disabled);
+				}
+
+				&:is(:hover, :focus):not(:disabled) {
+					--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-hover);
+				}
+
+				&:active:not(:disabled) {
+					--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-active);
+				}
+			}
+		}
+
+		@layer mods {
+			:host(:state(small)) button {
+				--_skf-select-option-height: var(--skf-size-32);
+			}
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -1,10 +1,11 @@
+import { SkfSelectOptionGroup } from '../select/select-option-group.component.js';
+import '../tag/tag.js';
 import { FormBase } from '../../internal/components/formBase.js';
+import '../../internal/components/hint/hint.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
-import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-import '../../internal/components/hint/hint';
-import type { SelectOptionEvent, SkfSelectOption } from '../select-option/select-option.component.js';
-import '../tag/tag';
+import { SkfSelectOption, type SelectOptionEvent } from './select-option.component.js';
 import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController } from './select.controllers.js';
 /**
  * TODO: abstract the popover logic to a separate component/helper/partial, and use it in both select and in input[datalist], combobox etc
@@ -14,17 +15,18 @@ import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationC
 /**
  * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles
  *
- * @attribute {boolean} [disabled] - If true, the select is disabled	`default: false`
+ * @attribute {boolean} [disabled=false] - If true, the select is disabled
+ * @attribute {boolean} [required=false] - If true, the select is required
  *
  * @slot - The select's placeholder content
  *
- * @event change - Fired when the selected option(s) changes
- * @event invalid - Fired when the select is invalid
- * @event reset - Fired when the form is reset
- * @event skf-select:dropdown - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
- * @event skf-select-option:select - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+ * @event {Event} change - Fired when the selected option(s) changes
+ * @event {Event} invalid - Fired when the select is invalid
+ * @event {Event} reset - Fired when the form is reset
+ * @event {CustomEvent} skf-select-dropdown - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
+ * @event {CustomEvent} skf-select-option-select - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
  *
  * @tagname skf-select
  */
@@ -39,9 +41,9 @@ export declare class SkfSelect extends FormBase {
     /** If defined, forces component to invalid state until removed */
     customInvalid?: string;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If true and mulltiple is true, no tags are displayed under the select */
-    hideTags?: boolean;
+    hideTags: boolean;
     /** 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 */
@@ -57,22 +59,22 @@ export declare class SkfSelect extends FormBase {
     /** If defined, sets the minimum number of required options */
     min?: number;
     /** If true, allows for multiple options to be selected */
-    multiple?: boolean;
+    multiple: boolean;
     /** 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'];
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    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;
-    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     /** @internal */
+    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     private _selectedOptions;
     /** @internal */
     /** The selected options in an array. Treat it as a read only property. See selectedValues, slectedSlots for computed value arrays. */
@@ -91,6 +93,8 @@ export declare class SkfSelect extends FormBase {
     /** @internal */
     $popover: HTMLDivElement;
     /** @internal */
+    _slottedItems: SkfSelectOption[] | SkfSelectOptionGroup[];
+    /** @internal */
     protected globalClickController: GlobalClickController;
     /** @internal */
     protected keyboardNavController: KeyboardNavigationController;
@@ -101,6 +105,7 @@ export declare class SkfSelect extends FormBase {
     constructor();
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     firstUpdated(): void;
+    _handleSizeUpdate(): void;
     handleExpandedChange(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;