@skf-design-system/ui-components 0.0.1-beta.3 → 1.0.0-beta.3

package/dist/components/select/select.controllers.js

@@ -0,0 +1,169 @@
+import { raiseError as r } from "../../internal/helpers/raiseError.js";
+class d {
+  constructor(e) {
+    this.localExpanded = !1, this.host = e, e.addController(this);
+  }
+  hostDisconnected() {
+    this.disableScrollDetection();
+  }
+  hostUpdated() {
+    var e, t, s;
+    ((e = this.host) == null ? void 0 : e._expanded) !== this.localExpanded && (this.localExpanded = !!((t = this.host) != null && t._expanded), (s = this.host) != null && s._expanded ? this.enableScrollDetection() : this.disableScrollDetection());
+  }
+  enableScrollDetection() {
+    if (this._scrollHandler = () => {
+      if (!this.host) return;
+      this.host._expanded = !1;
+      const t = this.host.getBoundingClientRect();
+      t.top < 0 || t.bottom > window.innerHeight || t.left < 0 || t.right > window.innerWidth ? this._onScrollOutOfView() : this._onScrollIntoView();
+    }, window.addEventListener("scroll", this._scrollHandler, !0), !this.host) return;
+    let e = this.host.parentElement;
+    for (; e; )
+      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.addEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
+  }
+  disableScrollDetection() {
+    if (!this._scrollHandler || (window.removeEventListener("scroll", this._scrollHandler, !0), !this.host)) return;
+    let e = this.host.parentElement;
+    for (; e; )
+      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.removeEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
+  }
+  /** @internal */
+  _onScrollOutOfView() {
+    this.host && (this.host._expanded = !1);
+  }
+  /** @internal */
+  _onScrollIntoView() {
+  }
+}
+class b {
+  constructor(e) {
+    this._onResize = () => {
+      this.host._expanded = !1;
+    }, this.host = e, e.addController(this);
+  }
+  hostConnected() {
+    this.enableResizeObserver();
+  }
+  hostDisconnected() {
+    this.disableResizeObserver();
+  }
+  enableResizeObserver() {
+    this._resizeObserver = new ResizeObserver(() => {
+      this.host._expanded = !1, this.host._updateWidth();
+    }), this._resizeObserver.observe(document.body), this._resizeObserver.observe(this.host);
+  }
+  disableResizeObserver() {
+    var e;
+    (e = this._resizeObserver) == null || e.disconnect();
+  }
+}
+class p {
+  constructor(e) {
+    this._globalClickHandler = (t) => {
+      t.target.closest(this.host.localName) || (this.host._expanded = !1);
+    }, this.host = e, e.addController(this);
+  }
+  // hostConnected() {
+  // 	this.enableGlobalClickDetection();
+  // }
+  hostDisconnected() {
+    this.disableGlobalClickDetection();
+  }
+  hostUpdated() {
+    this.host._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
+  }
+  enableGlobalClickDetection() {
+    document.addEventListener("click", this._globalClickHandler);
+  }
+  disableGlobalClickDetection() {
+    document.removeEventListener("click", this._globalClickHandler);
+  }
+}
+class u {
+  constructor(e) {
+    this._handleKeyDown = (t) => {
+      switch (t.key) {
+        case "ArrowDown":
+          t.preventDefault(), this._focusSiblingOption("next");
+          break;
+        case "ArrowUp":
+          t.preventDefault(), this._focusSiblingOption("prev");
+          break;
+        case "Enter":
+          t.preventDefault(), this._selectFocusedOption(t.target);
+          break;
+        case "Escape":
+          t.preventDefault(), this.host._expanded = !1, setTimeout(() => {
+            this.host.focus();
+          });
+          break;
+      }
+    }, this.host = e, e.addController(this), this._listenerActivated = !1;
+  }
+  hostDisconnected() {
+    this.removeKeyboardListener();
+  }
+  hostUpdated() {
+    this.host._expanded && !this._listenerActivated && this.setupKeyboardListener(), !this.host._expanded && this._listenerActivated && this.removeKeyboardListener();
+  }
+  setupKeyboardListener() {
+    this._listenerActivated = !0, this.host.addEventListener("keydown", this._handleKeyDown);
+  }
+  removeKeyboardListener() {
+    this.host.removeEventListener("keydown", this._handleKeyDown), this._listenerActivated = !1;
+  }
+  _focusFirstOption() {
+    const e = this._selectableOptions[0];
+    setTimeout(() => {
+      e.focus();
+    });
+  }
+  _focusSiblingOption(e) {
+    const t = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => t(n));
+    if (!s) {
+      this._focusFirstOption();
+      return;
+    }
+    const h = this._selectableOptions.indexOf(s);
+    let o = h - 1, l = h + 1;
+    o < 0 && (o = this._selectableOptions.length - 1), l >= this._selectableOptions.length && (l = 0);
+    const a = this._selectableOptions[e === "next" ? l : o];
+    s.blur(), a.focus();
+  }
+  _selectFocusedOption(e) {
+    e.selected = !0;
+  }
+  get _selectableOptions() {
+    return this.host._optionsList.filter((e) => !e.disabled);
+  }
+}
+class _ {
+  constructor(e) {
+    this.host = e, e.addController(this);
+  }
+  hostConnected() {
+    this._badAttributeCombinationWarning();
+  }
+  _badAttributeCombinationWarning() {
+    r({
+      assert: (this.host.min ?? 0) < (this.host.max ?? 1 / 0),
+      reason: "attribute-mismatch",
+      replaceStrings: [this.host.localName, "min", "smaller than max"]
+    }), r({
+      assert: ((this.host.min ?? this.host.max) && this.host.multiple) ?? !(this.host.min && this.host.max),
+      reason: "attribute-mismatch",
+      replaceStrings: [this.host.localName, "min or max", "together with multiple"]
+    }), r({
+      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
+      reason: "attribute-mismatch",
+      replaceStrings: [this.host.localName, "hide-tags", "together with multiple"]
+    });
+  }
+}
+export {
+  _ as DeveloperFeedbackController,
+  p as GlobalClickController,
+  u as KeyboardNavigationController,
+  b as ResizeController,
+  d as ScrollController
+};

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

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

package/dist/components/select/select.js

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

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

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

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

@@ -0,0 +1,116 @@
+import { visuallyHidden as r } from "../../styles/util.styles.js";
+import { css as o } from "lit";
+const t = [
+  r,
+  o`
+		@layer components {
+			:host {
+				contain: initial;
+			}
+
+			#root {
+				color: var(--_skf-select-color, var(--skf-text-color-primary));
+				display: flex;
+				flex-direction: column;
+				gap: var(--skf-spacing-25);
+
+				:host([size='sm']) & {
+					font-size: var(--skf-font-size-75);
+					font-weight: var(--skf-font-weight-medium);
+				}
+			}
+
+			label {
+				display: inherit;
+				flex-direction: inherit;
+				gap: var(--_skf-select-label-gap, var(--skf-spacing-50));
+
+				:host([size='sm']) & {
+					--_skf-select-label-gap: var(--skf-spacing-25);
+				}
+			}
+
+			#asterisk {
+				color: var(--skf-severity-fg-color-error);
+			}
+
+			button {
+				align-items: center;
+				background-color: var(
+					--_skf-select-button-bg-color,
+					var(--skf-interactive-bg-color-secondary)
+				);
+				block-size: var(--_skf-select-button-height, var(--skf-size-44));
+				border: var(--skf-border-width-sm) solid
+					var(--_skf-select-button-border-color, var(--skf-border-color-primary));
+				border-radius: var(--skf-border-radius-sm);
+				display: flex;
+				gap: 0 var(--skf-spacing-75);
+				justify-content: space-between;
+				padding-inline: var(--skf-spacing-75);
+
+				&:hover {
+					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-secondary-hover);
+				}
+
+				&:active {
+					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-secondary-active);
+				}
+
+				&:disabled {
+					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-disabled);
+					--_skf-select-button-border-color: var(--skf-interactive-border-color-disabled);
+				}
+
+				:host([invalid]) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-error);
+				}
+
+				:host([valid]) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host :has(:focus-visible) & {
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: -1px;
+				}
+
+				:host([size='sm']) & {
+					--_skf-select-button-height: var(--skf-size-32);
+				}
+
+				:host([severity='alert']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-alert);
+				}
+
+				:host([severity='info']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-info);
+				}
+
+				:host([severity='success']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host([severity='warning']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-warning);
+				}
+			}
+
+			#select-dropdown {
+				background-color: var(--skf-bg-color-neutral-1);
+				border: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+				box-shadow: var(--skf-shadow-sm); /* TODO: Discuss with design */
+				inline-size: var(--select-width, auto);
+				padding: var(--skf-spacing-25);
+			}
+
+			#tags {
+				display: flex;
+				gap: 0.5rem;
+			}
+		}
+	`
+];
+export {
+  t as styles
+};

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

@@ -0,0 +1,77 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { IconColor } from '@skf-design-system/ui-assets';
+import { type CSSResultGroup } from 'lit';
+import '../icon/icon';
+import { SkfIcon } from '../icon/icon';
+import type { SkfSelect } from '../select/select.component.js';
+export interface SelectOptionEvent {
+    value: string | null;
+    option: SkfSelectOption;
+}
+/**
+ * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @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.
+ *
+ * @tagname skf-select-option
+ */
+export declare class SkfSelectOption extends SkfElement {
+    static styles: CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /** @internal */
+    _parent: SkfSelect | null;
+    /** @internal */
+    protected _value?: string;
+    /**
+     * @internal
+     * 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;
+    /** If true, prevents interaction with the option */
+    disabled?: boolean;
+    /** If defined, set an icon */
+    icon?: SkfIcon['name'];
+    /** If defined, sets provided color on the icon */
+    iconColor?: IconColor;
+    /** If true, sets the option as selected */
+    selected?: boolean;
+    /** If defined, sets a short label */
+    shortLabel?: string;
+    /** The option's label text (equivalent to the tags textContent) */
+    set text(slottedTextContent: string);
+    get text(): string;
+    /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+    set value(optionValue: string);
+    get value(): string;
+    /** @internal */
+    private _assignedNodes?;
+    constructor();
+    updated(changedProperties: Map<string | number | symbol, unknown>): 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);
+    /**
+     * @internal
+     * Returns the slotted content as a string. If no slotted content, returns an empty string.
+     */
+    private _getSlottedContent;
+    /** @internal */
+    private get _slotContainsOnlyText();
+    /** @internal */
+    _handleClick: (e: Event) => void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,117 @@
+import { SkfElement as p } from "../../internal/components/skf-element.js";
+import u from "../../styles/component.styles.js";
+import { LitElement as f, html as h } from "lit";
+import { property as n, queryAssignedNodes as m } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import "../icon/icon.js";
+import { styles as y } from "./select-option.styles.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = d.length - 1, c; a >= 0; a--)
+    (c = d[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
+  return i && r && v(t, s, r), r;
+};
+const l = class l extends p {
+  constructor() {
+    super(), this._handleClick = (s) => {
+      s.stopPropagation(), this.selected = !this.selected;
+    };
+    const t = this.attachInternals();
+    t.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
+      }
+    });
+  }
+  /**
+   * @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(
+      (s) => {
+        var i;
+        return s.nodeType === Node.TEXT_NODE && ((i = s.textContent) == null ? void 0 : i.trim()) !== "";
+      }
+    ) : "";
+  }
+  render() {
+    return h`
+			<button
+				@click=${this._handleClick}
+				aria-selected=${this.selected ? "true" : "false"}
+				?disabled=${this.disabled}
+				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 && h`<skf-icon name=${this.icon} color=${_(this.iconColor)}></skf-icon>`}
+					</slot>
+					${this.shortLabel && h`<div id="short-label">${this.shortLabel}</div>`}
+				</div>
+			</button>
+		`;
+  }
+};
+l.styles = [u, y], l.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
+let e = l;
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  n({ reflect: !0 })
+], e.prototype, "icon", 2);
+o([
+  n({ reflect: !0, attribute: "icon-color" })
+], e.prototype, "iconColor", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "selected", 2);
+o([
+  n({ reflect: !0, attribute: "short-label" })
+], e.prototype, "shortLabel", 2);
+o([
+  n({ attribute: !1 })
+], e.prototype, "text", 1);
+o([
+  n({ reflect: !0 })
+], e.prototype, "value", 1);
+o([
+  m({ flatten: !0 })
+], e.prototype, "_assignedNodes", 2);
+export {
+  e as SkfSelectOption
+};

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

@@ -0,0 +1,9 @@
+import type { SkfSelectOption } from '@components/select-option/select-option.component.js';
+import type { ReactiveController } from 'lit';
+type ControllerHost = SkfSelectOption;
+export declare class DeveloperFeedbackController implements ReactiveController {
+    host: ControllerHost;
+    constructor(host: ControllerHost);
+    hostUpdated(): void;
+}
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		button {
+			align-items: center;
+			background-color: var(--_skf-select-option-bg, var(--skf-interactive-bg-color-secondary));
+			block-size: var(--_skf-select-option-height, var(--skf-size-44));
+			color: var(--_skf-select-option-color, inherit);
+			display: flex;
+			gap: var(--skf-spacing-50);
+			padding-inline: var(--skf-spacing-50);
+			width: 100%;
+
+			&: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);
+			}
+
+			:host-context(skf-select[size='sm']) & {
+				--_skf-select-option-height: var(--skf-size-32);
+			}
+		}
+
+		#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);
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -0,0 +1,16 @@
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-select-option-group>` is a component that groups select-options
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The component's placeholder content
+ *
+ * @tagname skf-select-option-group
+ */
+export declare class SkfSelectOptionGroup extends SkfElement {
+    static styles: CSSResultGroup;
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,31 @@
+import { SkfElement as a } from "../../internal/components/skf-element.js";
+import f from "../../styles/component.styles.js";
+import { html as p } from "lit";
+import { property as d } from "lit/decorators.js";
+import { styles as n } from "./select-option-group.style.js";
+var v = Object.defineProperty, u = (o, s, i, b) => {
+  for (var r = void 0, e = o.length - 1, m; e >= 0; e--)
+    (m = o[e]) && (r = m(s, i, r) || r);
+  return r && v(s, i, r), r;
+};
+const l = class l extends a {
+  constructor() {
+    super(...arguments), this.label = "Default label";
+  }
+  render() {
+    return p`
+			<div role="group">
+				<div id="label">${this.label}</div>
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+l.styles = [f, n];
+let t = l;
+u([
+  d({ reflect: !0 })
+], t.prototype, "label");
+export {
+  t as SkfSelectOptionGroup
+};

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

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

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

@@ -0,0 +1,6 @@
+import { SkfSelectOptionGroup as e } from "./select-option-group.component.js";
+e.define("skf-select-option-group");
+export {
+  e as SkfSelectOptionGroup,
+  e as default
+};

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

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

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

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