scb-wc-test 0.1.105 → 0.1.106

package/scb-segmented-button/scb-segmented-button.js

@@ -1,64 +1,141 @@
-import { css as u, LitElement as c, html as m } from "lit";
-import { property as n, customElement as h } from "lit/decorators.js";
+import { css as p, LitElement as f, html as v } from "lit";
+import { property as o, customElement as b } from "lit/decorators.js";
 import "./scb-segmented-item.js";
-var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, d = (r, i, e, t) => {
-  for (var s = t > 1 ? void 0 : t ? f(i, e) : i, o = r.length - 1, a; o >= 0; o--)
-    (a = r[o]) && (s = (t ? a(i, e, s) : a(s)) || s);
-  return t && s && b(i, e, s), s;
-};
-let l = class extends c {
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
+  throw TypeError(t);
+}, l = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? _(e, s) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (r = (i ? d(e, s, r) : d(r)) || r);
+  return i && r && g(e, s, r), r;
+}, y = (t, e, s) => e.has(t) || m("Cannot " + s), S = (t, e, s) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), c = (t, e, s) => (y(t, e, "access private method"), s), u, h;
+let n = class extends f {
   constructor() {
-    super(...arguments), this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1;
+    super(), S(this, u), this._internals = null, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.name = "", this.spacing = "", this._form = null, this._formResetHandler = null, this._initialValue = "", this._initialValues = [], "attachInternals" in this && (this._internals = this.attachInternals());
   }
-  onSlotClick(r) {
-    let i = r.target;
-    if (!i || !i.closest) return;
-    const e = i.closest("scb-segmented-item");
-    if (!e || this.disabled || e.hasAttribute("disabled")) return;
-    const t = e.getAttribute("value") || "";
-    t && (this.variant === "multi-select" ? (this.values.indexOf(t) === -1 ? this.values = [...this.values, t] : this.values = this.values.filter((o) => o !== t), this.dispatchEvent(new CustomEvent("change", { detail: { values: this.values }, bubbles: !0, composed: !0 })), this.updateSegments()) : t !== this.value && (this.value = t, this.dispatchEvent(new CustomEvent("change", { detail: { value: t }, bubbles: !0, composed: !0 })), this.updateSegments()));
+  connectedCallback() {
+    super.connectedCallback(), this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+      this.value = this._initialValue, this.values = Array.isArray(this._initialValues) ? [...this._initialValues] : [], this.updateSegments(), this._syncFormValue();
+    }, this._form.addEventListener("reset", this._formResetHandler, !0));
   }
-  updateSegments() {
+  disconnectedCallback() {
+    this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0), super.disconnectedCallback();
+  }
+  firstUpdated() {
     var e;
-    const r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
-    if (!r) return;
-    r.assignedElements().forEach((t) => {
-      if (t.tagName === "SCB-SEGMENTED-ITEM") {
-        const s = t.getAttribute("value") || "";
-        if (s) {
-          let o = !1;
-          this.variant === "multi-select" ? o = !!this.values && this.values.includes(s) : o = s === this.value, t.setAttribute("aria-pressed", o ? "true" : "false"), o ? t.setAttribute("selected", "true") : t.removeAttribute("selected");
+    this._initialValue = this.value, this._initialValues = Array.isArray(this.values) ? [...this.values] : [], this.updateSegments();
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    t && (t.addEventListener("click", (s) => this.onSlotClick(s)), t.addEventListener(
+      "focus",
+      () => {
+        this.dispatchEvent(
+          new CustomEvent("focus", { detail: {}, bubbles: !0, composed: !0 })
+        );
+      },
+      !0
+    ), t.addEventListener(
+      "blur",
+      () => {
+        this.dispatchEvent(
+          new CustomEvent("blur", { detail: {}, bubbles: !0, composed: !0 })
+        );
+      },
+      !0
+    ), t.addEventListener("keydown", (s) => {
+      if (s.code === "Space" || s.code === "Enter" || s.code === "NumpadEnter") {
+        const i = s.target;
+        if (i && i.closest) {
+          const r = i.closest("scb-segmented-item");
+          r && !r.hasAttribute("disabled") && !this.disabled && (this.onSlotClick(s), s.preventDefault());
+        }
+      }
+    })), this._syncFormValue(), c(this, u, h).call(this);
+  }
+  updated(t) {
+    super.updated(t), this.updateSegments(), (t.has("value") || t.has("values") || t.has("disabled") || t.has("variant") || t.has("name")) && this._syncFormValue(), t.has("spacing") && c(this, u, h).call(this);
+  }
+  onSlotClick(t) {
+    let e = t.target;
+    if (!e || !e.closest) return;
+    const s = e.closest("scb-segmented-item");
+    if (!s || this.disabled || s.hasAttribute("disabled")) return;
+    const i = s.getAttribute("value") || "";
+    i && (this.variant === "multi-select" ? (this.values.indexOf(i) === -1 ? this.values = [...this.values, i] : this.values = this.values.filter((a) => a !== i), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { values: this.values },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.updateSegments()) : i !== this.value && (this.value = i, this.dispatchEvent(
+      new CustomEvent("change", { detail: { value: i }, bubbles: !0, composed: !0 })
+    ), this.updateSegments()));
+  }
+  updateSegments() {
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
+    if (!t) return;
+    t.assignedElements().forEach((i) => {
+      if (i.tagName === "SCB-SEGMENTED-ITEM") {
+        const r = i.getAttribute("value") || "";
+        if (r) {
+          let a = !1;
+          this.variant === "multi-select" ? a = !!this.values && this.values.includes(r) : a = r === this.value, i.setAttribute("aria-pressed", a ? "true" : "false"), a ? i.setAttribute("selected", "true") : i.removeAttribute("selected");
         }
-        this.disabled && t.setAttribute("disabled", "true");
+        this.disabled && i.setAttribute("disabled", "true");
       }
     });
   }
-  firstUpdated() {
-    var i;
-    this.updateSegments();
-    const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot");
-    r && (r.addEventListener("click", (e) => this.onSlotClick(e)), r.addEventListener("focus", () => {
-      this.dispatchEvent(new CustomEvent("focus", { detail: {}, bubbles: !0, composed: !0 }));
-    }, !0), r.addEventListener("blur", () => {
-      this.dispatchEvent(new CustomEvent("blur", { detail: {}, bubbles: !0, composed: !0 }));
-    }, !0), r.addEventListener("keydown", (e) => {
-      if (e.code === "Space" || e.code === "Enter" || e.code === "NumpadEnter") {
-        const t = e.target;
-        if (t && t.closest) {
-          const s = t.closest("scb-segmented-item");
-          s && !s.hasAttribute("disabled") && !this.disabled && (this.onSlotClick(e), e.preventDefault());
+  /**
+   * Gör så att native formulär kan sätta disabled på kontrollen.
+   */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  /**
+   * Synkar value/values → FormData via ElementInternals.
+   * single-select: FormData.get(name) → string
+   * multi-select:  FormData.getAll(name) → string[]
+   */
+  _syncFormValue() {
+    if (this._internals) {
+      if (this.disabled || !this.name) {
+        this._internals.setFormValue(null);
+        return;
+      }
+      if (this.variant === "multi-select") {
+        if (!this.values || this.values.length === 0) {
+          this._internals.setFormValue(null);
+          return;
+        }
+        const t = new FormData();
+        for (const e of this.values)
+          t.append(this.name, e);
+        this._internals.setFormValue(t);
+      } else {
+        if (!this.value) {
+          this._internals.setFormValue(null);
+          return;
         }
+        this._internals.setFormValue(this.value);
       }
-    }));
+    }
   }
-  updated() {
-    this.updateSegments();
+  mapSpacingToken(t) {
+    if (!t) return;
+    const e = String(t).trim();
+    if (e)
+      return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   render() {
-    return m`<slot></slot>`;
+    return v`<slot></slot>`;
   }
 };
-l.styles = u`
+u = /* @__PURE__ */ new WeakSet();
+h = function() {
+  const t = this.mapSpacingToken(this.spacing);
+  t ? this.style.setProperty("--scb-segmented-button-spacing-block", t) : this.style.removeProperty("--scb-segmented-button-spacing-block");
+};
+n.formAssociated = !0;
+n.styles = p`
     :host {
         --scb-segmented-button-width: 100%;
         --scb-segmented-button-height: 48px;
@@ -68,6 +145,7 @@ l.styles = u`
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
         font-family: var(--brand, Inter);
+        margin-block: var(--scb-segmented-button-spacing-block, 0);
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),
@@ -86,21 +164,27 @@ l.styles = u`
       border-left: 1px solid var(--md-sys-color-outline);
     }
   `;
-d([
-  n({ type: String, reflect: !0 })
-], l.prototype, "variant", 2);
-d([
-  n({ type: String, reflect: !0 })
-], l.prototype, "value", 2);
-d([
-  n({ type: Array })
-], l.prototype, "values", 2);
-d([
-  n({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-l = d([
-  h("scb-segmented-button")
-], l);
+l([
+  o({ type: String, reflect: !0 })
+], n.prototype, "variant", 2);
+l([
+  o({ type: String, reflect: !0 })
+], n.prototype, "value", 2);
+l([
+  o({ type: Array })
+], n.prototype, "values", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+l([
+  o({ type: String, reflect: !0 })
+], n.prototype, "name", 2);
+l([
+  o({ type: String, reflect: !0 })
+], n.prototype, "spacing", 2);
+n = l([
+  b("scb-segmented-button")
+], n);
 export {
-  l as ScbSegmentedButton
+  n as ScbSegmentedButton
 };

package/scb-status-pill/scb-status-pill.d.ts

@@ -1,8 +1,19 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare class ScbStatusPill extends LitElement {
     status: string;
     label: string;
     showIcon: boolean;
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     static styles: import('lit').CSSResult;
+    private __resolveSpacingToken;
+    private __applySpacing;
+    protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-status-pill': ScbStatusPill;
+    }
+}

package/scb-status-pill/scb-status-pill.js

@@ -1,19 +1,30 @@
-import { css as m, LitElement as d, html as o } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
+import { css as m, LitElement as g, html as a } from "lit";
+import { property as i, customElement as h } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var h = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (p, r, a, t) => {
-  for (var s = t > 1 ? void 0 : t ? y(r, a) : r, i = p.length - 1, c; i >= 0; i--)
-    (c = p[i]) && (s = (t ? c(r, a, s) : c(s)) || s);
-  return t && s && h(r, a, s), s;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, s, c, n) => {
+  for (var r = n > 1 ? void 0 : n ? y(s, c) : s, p = t.length - 1, l; p >= 0; p--)
+    (l = t[p]) && (r = (n ? l(s, c, r) : l(r)) || r);
+  return n && r && u(s, c, r), r;
 };
-let e = class extends d {
+let e = class extends g {
   constructor() {
-    super(...arguments), this.status = "", this.label = "", this.showIcon = !1;
+    super(...arguments), this.status = "", this.label = "", this.showIcon = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
+  }
+  __resolveSpacingToken(t) {
+    const s = (t ?? "").trim();
+    return s ? /^(?:[0-9]|1[0-4])$/.test(s) ? `var(--spacing-${s})` : s : "";
+  }
+  __applySpacing() {
+    const t = this.__resolveSpacingToken(this.spacingTop || this.spacing), s = this.__resolveSpacingToken(this.spacingBottom || this.spacing);
+    t ? this.style.marginBlockStart = t : this.style.removeProperty("margin-block-start"), s ? this.style.marginBlockEnd = s : this.style.removeProperty("margin-block-end");
+  }
+  updated(t) {
+    super.updated(t), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && this.__applySpacing();
   }
   render() {
-    return o`
-    ${this.showIcon ? this.status === "success" ? o`<md-icon>check_circle</md-icon>` : this.status === "warning" ? o`<md-icon>warning</md-icon>` : this.status === "error" ? o`<md-icon>error</md-icon>` : "" : ""}
-    <span class="label">${this.label}</span>
+    return a`
+      ${this.showIcon ? this.status === "success" ? a`<md-icon>check_circle</md-icon>` : this.status === "warning" ? a`<md-icon>warning</md-icon>` : this.status === "error" ? a`<md-icon>error</md-icon>` : "" : ""}
+      <span class="label">${this.label}</span>
     `;
   }
 };
@@ -30,36 +41,49 @@ e.styles = m`
       gap: var(--spacing-3);
       width: fit-content;
     }
-    .label{
+
+    .label {
       font-size: var(--md-sys-typescale-label-medium-size);
       line-height: var(--md-sys-typescale-label-medium-line-height);
       font-weight: var(--md-sys-typescale-label-medium-weight);
       letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     }
-    :host([status="success"]) {
-        background: var(--md-sys-color-success-container);
-        color: var(--md-sys-color-on-success-container);   
+
+    :host([status='success']) {
+      background: var(--md-sys-color-success-container);
+      color: var(--md-sys-color-on-success-container);
     }
-    :host([status="warning"]) {
+
+    :host([status='warning']) {
       background: var(--md-sys-color-warning-container);
       color: var(--md-sys-color-on-warning-container);
     }
-    :host([status="error"]) {
-        background: var(--md-sys-color-error-container);
-        color: var(--md-sys-color-on-error-container);
+
+    :host([status='error']) {
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
     }
   `;
-n([
-  l({ type: String })
+o([
+  i({ type: String })
 ], e.prototype, "status", 2);
-n([
-  l({ type: String })
+o([
+  i({ type: String })
 ], e.prototype, "label", 2);
-n([
-  l({ type: Boolean, attribute: "show-icon" })
+o([
+  i({ type: Boolean, attribute: "show-icon" })
 ], e.prototype, "showIcon", 2);
-e = n([
-  u("scb-status-pill")
+o([
+  i({ type: String })
+], e.prototype, "spacing", 2);
+o([
+  i({ type: String, attribute: "spacing-top" })
+], e.prototype, "spacingTop", 2);
+o([
+  i({ type: String, attribute: "spacing-bottom" })
+], e.prototype, "spacingBottom", 2);
+e = o([
+  h("scb-status-pill")
 ], e);
 export {
   e as ScbStatusPill

package/scb-stepper/scb-stepper.d.ts

@@ -1,14 +1,22 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 /**
  * En stepper-komponent enligt SCB-standard.
  * @slot - Innehåll för stegen
  */
 export declare class ScbStepper extends LitElement {
+    #private;
     type: string;
     label: string;
     changeOnCompleted: boolean;
     variant: 'horizontal' | 'vertical';
     symbolVariant: 'number' | 'icon' | 'marker';
+    /**
+     * Vertikalt avstånd mot omgivande innehåll.
+     * spacing sätter både top och bottom om spacing-top / spacing-bottom inte är satta.
+     */
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     private activeIndex;
     static styles: import('lit').CSSResult;
     private _onStepClick;
@@ -26,8 +34,8 @@ export declare class ScbStepper extends LitElement {
     getActiveIndex(): number;
     private _updateSteps;
     private _getSteps;
-    firstUpdated(): void;
-    updated(): void;
+    protected firstUpdated(_changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     private _onKeyNav;
     private _onStepContainerClick;