scb-wc-test 0.1.105 → 0.1.107

package/scb-pagination/scb-pagination.js

@@ -1,18 +1,18 @@
-import { css as g, LitElement as h, html as a } from "lit";
-import { property as p, customElement as b } from "lit/decorators.js";
+import { css as d, LitElement as h, html as a } from "lit";
+import { property as c, customElement as b } from "lit/decorators.js";
 import "../scb-link/scb-link.js";
 import "../scb-button/scb-button.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "@material/web/icon/icon.js";
 import "@material/web/focus/md-focus-ring.js";
-var u = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (d, e, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? v(e, s) : e, c = d.length - 1, n; c >= 0; c--)
-    (n = d[c]) && (r = (i ? n(e, s, r) : n(r)) || r);
-  return i && r && u(e, s, r), r;
+var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (n, e, r, i) => {
+  for (var l = i > 1 ? void 0 : i ? m(e, r) : e, g = n.length - 1, s; g >= 0; g--)
+    (s = n[g]) && (l = (i ? s(e, r, l) : s(l)) || l);
+  return i && l && u(e, r, l), l;
 };
 let o = class extends h {
   constructor() {
-    super(...arguments), this.variant = "icon-text", this.page = 1, this.totalPages = 0, this.pagingHref = "/products?page=", this.paginationAriaLabel = "Paginering", this.currentAriaLabel = "Nuvarande sida, ", this.pagingNumberAriaLabel = "Gå till sida ", this.isNarrow = window.innerWidth <= 768, this._onResize = () => {
+    super(...arguments), this.variant = "icon-text", this.page = 1, this.totalPages = 0, this.pagingHref = "/products?page=", this.paginationAriaLabel = "Paginering", this.currentAriaLabel = "Nuvarande sida, ", this.pagingNumberAriaLabel = "Gå till sida ", this.isNarrow = window.innerWidth <= 768, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._onResize = () => {
       this.isNarrow = window.innerWidth <= 768;
     };
   }
@@ -28,83 +28,163 @@ let o = class extends h {
   disconnectedCallback() {
     super.disconnectedCallback(), window.removeEventListener("resize", this._onResize);
   }
+  __resolveSpacingToken(n) {
+    const e = (n ?? "").trim();
+    return e ? /^(?:[0-9]|1[0-4])$/.test(e) ? `var(--spacing-${e})` : e : "";
+  }
+  __applySpacing() {
+    const n = this.__resolveSpacingToken(this.spacingTop || this.spacing), e = this.__resolveSpacingToken(this.spacingBottom || this.spacing);
+    n ? this.style.marginBlockStart = n : this.style.removeProperty("margin-block-start"), e ? this.style.marginBlockEnd = e : this.style.removeProperty("margin-block-end");
+  }
+  updated(n) {
+    super.updated(n), (n.has("spacing") || n.has("spacingTop") || n.has("spacingBottom")) && this.__applySpacing();
+  }
   render() {
     if (this.totalPages === 0) return null;
-    const d = this.variant ? `${this.variant.toLowerCase()}` : "", e = [], { page: s, totalPages: i } = this, r = window.innerWidth <= 768, c = r ? 1 : 2, n = (t) => t === s ? a`
-        <li>
-            <span
-            class="page-number active"
-            aria-current="page"
-            aria-label="${this.currentAriaLabel} ${t}"
-            >${t}</span>
-        </li>
-        ` : a`
-        <li>
-            <scb-link
-                class="page-number${t === s ? " active" : ""}"
+    const n = this.variant ? `${this.variant.toLowerCase()}` : "", e = [], { page: r, totalPages: i } = this, l = window.innerWidth <= 768, g = l ? 1 : 2, s = (t) => t === r ? a`
+            <li>
+              <span
+                class="page-number active"
+                aria-current="page"
+                aria-label="${this.currentAriaLabel} ${t}"
+                >${t}</span
+              >
+            </li>
+          ` : a`
+            <li>
+              <scb-link
+                class="page-number${t === r ? " active" : ""}"
                 @click=${() => {
       this.page = t, this.dispatchEvent(new CustomEvent("page-change", { detail: { page: t } }));
     }}
-                aria-current=${t === s ? "page" : void 0}
+                aria-current=${t === r ? "page" : void 0}
                 aria-label="${this.pagingNumberAriaLabel} ${t}"
                 href=${this.pagingHref}${t}
-                ?disabled=${t === s}>${t}
-            </scb-link>
-        </li>
-    `;
+                ?disabled=${t === r}
+                >${t}</scb-link
+              >
+            </li>
+          `;
     if (i <= 8)
       for (let t = 1; t <= i; t++)
-        e.push(n(t));
-    else if (e.push(n(1)), s <= 4 && !r) {
-      for (let t = 2; t <= 5; t++) e.push(n(t));
-      i > 6 ? (e.push(a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`), e.push(n(i))) : i === 6 && e.push(n(i));
-    } else if (s <= 3 && r) {
-      for (let t = 2; t <= 3; t++) e.push(n(t));
-      i > 4 ? (e.push(a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`), e.push(n(i))) : i === 4 && e.push(n(i));
-    } else if (s >= i - (c + 1)) {
-      e.push(a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);
-      for (let t = i - c * 2; t <= i; t++)
-        t > 1 && e.push(n(t));
+        e.push(s(t));
+    else if (e.push(s(1)), r <= 4 && !l) {
+      for (let t = 2; t <= 5; t++) e.push(s(t));
+      i > 6 ? (e.push(
+        a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`
+      ), e.push(s(i))) : i === 6 && e.push(s(i));
+    } else if (r <= 3 && l) {
+      for (let t = 2; t <= 3; t++) e.push(s(t));
+      i > 4 ? (e.push(
+        a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`
+      ), e.push(s(i))) : i === 4 && e.push(s(i));
+    } else if (r >= i - (g + 1)) {
+      e.push(
+        a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`
+      );
+      for (let t = i - g * 2; t <= i; t++)
+        t > 1 && e.push(s(t));
     } else {
-      e.push(a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);
-      for (let t = s - c; t <= s + c; t++)
-        t > 1 && t < i && e.push(n(t));
-      e.push(a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`), e.push(n(i));
+      e.push(
+        a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`
+      );
+      for (let t = r - g; t <= r + g; t++)
+        t > 1 && t < i && e.push(s(t));
+      e.push(
+        a`<li><span class="ellipsis" aria-hidden="true">…</span></li>`
+      ), e.push(s(i));
     }
-    return r ? a`      
-         <nav aria-label="${this.paginationAriaLabel}" class="pagination ${d}">
-            <div class="pagination-row">
-                <div class="prev">
-                    ${this.variant === "icon" ? a`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page === 1} aria-label="Föregående sida"></scb-icon-button>` : a`<scb-button variant="text" label="Föregående" icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page === 1} aria-label="Föregående sida"></scb-button>`}       
-                </div>
-                <ol>
-                    ${e}
-                </ol>
-            </div>
-            <div class="next">
-            ${this.variant === "icon" ? a`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page === this.totalPages} aria-label="Nästa sida"></scb-icon-button>` : a`<scb-button variant="text" label="Nästa" icon="chevron_right" iconPosition="right" @click=${this._nextPage} ?disabled=${this.page === this.totalPages} aria-label="Nästa sida" trailing-icon></scb-button>`}
+    return l ? a`
+        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${n}">
+          <div class="pagination-row">
+            <div class="prev">
+              ${this.variant === "icon" ? a`<scb-icon-button
+                    icon="chevron_left"
+                    @click=${this._prevPage}
+                    ?disabled=${this.page === 1}
+                    aria-label="Föregående sida"
+                  ></scb-icon-button>` : a`<scb-button
+                    variant="text"
+                    label="Föregående"
+                    icon="chevron_left"
+                    @click=${this._prevPage}
+                    ?disabled=${this.page === 1}
+                    aria-label="Föregående sida"
+                  ></scb-button>`}
             </div>
+            <ol>
+              ${e}
+            </ol>
+          </div>
+          <div class="next">
+            ${this.variant === "icon" ? a`<scb-icon-button
+                  icon="chevron_right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page === this.totalPages}
+                  aria-label="Nästa sida"
+                ></scb-icon-button>` : a`<scb-button
+                  variant="text"
+                  label="Nästa"
+                  icon="chevron_right"
+                  iconPosition="right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page === this.totalPages}
+                  aria-label="Nästa sida"
+                  trailing-icon
+                ></scb-button>`}
+          </div>
         </nav>
       ` : a`
-        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${d}">
-            <div class="pagination-row">
-                <div class="prev">
-                 ${this.variant === "icon" ? a`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page === 1} aria-label="Föregående sida"></scb-icon-button>` : a`<scb-button variant="text" label="Föregående" icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page === 1} aria-label="Föregående sida"></scb-button>`}
-                </div>
-                <ol>
-                    ${e}
-                </ol>
-                <div class="next">
-                    ${this.variant === "icon" ? a`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page === this.totalPages} aria-label="Nästa sida"></scb-icon-button>` : a`<scb-button variant="text" label="Nästa" icon="chevron_right" iconPosition="right" @click=${this._nextPage} ?disabled=${this.page === this.totalPages} aria-label="Nästa sida" trailing-icon></scb-button>`}
-                </div>
-            </div>
-        </nav>
-      `;
+      <nav aria-label="${this.paginationAriaLabel}" class="pagination ${n}">
+        <div class="pagination-row">
+          <div class="prev">
+            ${this.variant === "icon" ? a`<scb-icon-button
+                  icon="chevron_left"
+                  @click=${this._prevPage}
+                  ?disabled=${this.page === 1}
+                  aria-label="Föregående sida"
+                ></scb-icon-button>` : a`<scb-button
+                  variant="text"
+                  label="Föregående"
+                  icon="chevron_left"
+                  @click=${this._prevPage}
+                  ?disabled=${this.page === 1}
+                  aria-label="Föregående sida"
+                ></scb-button>`}
+          </div>
+          <ol>
+            ${e}
+          </ol>
+          <div class="next">
+            ${this.variant === "icon" ? a`<scb-icon-button
+                  icon="chevron_right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page === this.totalPages}
+                  aria-label="Nästa sida"
+                ></scb-icon-button>` : a`<scb-button
+                  variant="text"
+                  label="Nästa"
+                  icon="chevron_right"
+                  iconPosition="right"
+                  @click=${this._nextPage}
+                  ?disabled=${this.page === this.totalPages}
+                  aria-label="Nästa sida"
+                  trailing-icon
+                ></scb-button>`}
+          </div>
+        </div>
+      </nav>
+    `;
   }
 };
 o.styles = [
-  g`
-    :host .pagination {
+  d`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host .pagination {
         --md-text-button-label-text-color: var(--md-sys-color-on-surface, #0F0865);
         --md-text-button-pressed-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
         --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface, #0F0865);
@@ -113,68 +193,68 @@ o.styles = [
         --md-text-button-label-text-weight: var(--weight-regular, 400);
         --md-text-button-label-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
         --md-text-button-label-text-size: var(--md-sys-typescale-body-medium-size, 16px);
-        --md-text-button-icon-color : var(--md-sys-color-on-surface, #0F0865);
-        --md-text-button-focus-icon-color : var(--md-sys-color-on-surface, #0F0865);
-        --md-text-button-hover-icon-color : var(--md-sys-color-on-surface, #0F0865);
-        --md-text-button-pressed-icon-color : var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-icon-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-icon-color: var(--md-sys-color-on-surface, #0F0865);
         --scb-link-decoration: none;
         --scb-link-color: var(--md-sys-color-on-surface, #0F0865);
 
         scb-link.page-number a {
-            cursor: pointer;
-            text-decoration: none;
-            display: inline-flex;
+          cursor: pointer;
+          text-decoration: none;
+          display: inline-flex;
         }
-    }
+      }
 
-    .pagination {
+      .pagination {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 0;
-    }
-    .pagination-row {
+      }
+      .pagination-row {
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 4px;
-    }
-    .pagination-row .prev {
+      }
+      .pagination-row .prev {
         display: flex;
         justify-content: flex-start;
         width: auto;
-    }
-    .pagination-row ol {
+      }
+      .pagination-row ol {
         width: auto;
         display: flex;
         flex-direction: row;
-        justify-content: flex-start; 
+        justify-content: flex-start;
         gap: 4px;
         margin: 0;
         padding: 0;
         list-style: none;
-    }
-    .pagination-row ol li {
+      }
+      .pagination-row ol li {
         min-width: 40px;
         min-height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
-    }
-    .pagination-row .next {
+      }
+      .pagination-row .next {
         display: flex;
         justify-content: flex-start;
-        align-items: center; 
+        align-items: center;
         width: auto;
-        margin-top: 0;      
-    }
-    scb-link.page-number a {
+        margin-top: 0;
+      }
+      scb-link.page-number a {
         cursor: pointer;
         text-decoration: none;
         display: inline-flex;
-    }
-    .page-number.active {
+      }
+      .page-number.active {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -184,79 +264,87 @@ o.styles = [
         text-align: center;
         width: 40px;
         height: 40px;
-    }
-    .page-number.active {
+      }
+      .page-number.active {
         font-family: var(--brand-font, 'Inter', sans-serif);
-    }
-    .ellipsis {
+      }
+      .ellipsis {
         margin: 0 4px;
         color: #888;
         user-select: none;
         pointer-events: none;
-    }
-    scb-button[disabled] {
+      }
+      scb-button[disabled] {
         opacity: 0.5;
         pointer-events: none;
       }
 
-@media (max-width: 768px) {
-
-    .pagination .prev {
-        display: flex;
-        justify-content: flex-start;
-    }
-    .pagination .next {
-        width: 100%;
-        margin-top: 8px;
-    }
- }
+      @media (max-width: 768px) {
+        .pagination .prev {
+          display: flex;
+          justify-content: flex-start;
+        }
+        .pagination .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
 
-@media (max-width: 390px) {
-    .pagination-row {
-        flex-direction: column;
-        gap: 0;
-    }
-    .pagination-row .prev {
-        width: 100%;
-        margin-bottom: 8px;
-        align-items: center;
-    }
-    .pagination-row ol {
-        width: 100%;
-        align-items: center;
-    }
-    .pagination-row .next {
-        width: 100%;
-        margin-top: 8px;
-    }
-  }
-`
+      @media (max-width: 390px) {
+        .pagination-row {
+          flex-direction: column;
+          gap: 0;
+        }
+        .pagination-row .prev {
+          width: 100%;
+          margin-bottom: 8px;
+          align-items: center;
+        }
+        .pagination-row ol {
+          width: 100%;
+          align-items: center;
+        }
+        .pagination-row .next {
+          width: 100%;
+          margin-top: 8px;
+        }
+      }
+    `
 ];
-l([
-  p({ type: String })
+p([
+  c({ type: String })
 ], o.prototype, "variant", 2);
-l([
-  p({ type: Number })
+p([
+  c({ type: Number })
 ], o.prototype, "page", 2);
-l([
-  p({ type: Number, attribute: "total-pages" })
+p([
+  c({ type: Number, attribute: "total-pages" })
 ], o.prototype, "totalPages", 2);
-l([
-  p({ type: String, attribute: "paging-href" })
+p([
+  c({ type: String, attribute: "paging-href" })
 ], o.prototype, "pagingHref", 2);
-l([
-  p({ type: String, attribute: "pagination-aria-label" })
+p([
+  c({ type: String, attribute: "pagination-aria-label" })
 ], o.prototype, "paginationAriaLabel", 2);
-l([
-  p({ type: String, attribute: "current-aria-label" })
+p([
+  c({ type: String, attribute: "current-aria-label" })
 ], o.prototype, "currentAriaLabel", 2);
-l([
-  p({ type: String, attribute: "paging-number-aria-label" })
+p([
+  c({ type: String, attribute: "paging-number-aria-label" })
 ], o.prototype, "pagingNumberAriaLabel", 2);
-l([
-  p({ type: Boolean })
+p([
+  c({ type: Boolean })
 ], o.prototype, "isNarrow", 2);
-o = l([
+p([
+  c({ type: String })
+], o.prototype, "spacing", 2);
+p([
+  c({ type: String, attribute: "spacing-top" })
+], o.prototype, "spacingTop", 2);
+p([
+  c({ type: String, attribute: "spacing-bottom" })
+], o.prototype, "spacingBottom", 2);
+o = p([
   b("scb-pagination")
 ], o);
 export {

package/scb-radio-button/scb-radio-group.d.ts

@@ -1,19 +1,30 @@
 import { LitElement } from 'lit';
 export declare class ScbRadioGroup extends LitElement {
     #private;
+    static formAssociated: boolean;
     name: string;
     orientation: 'vertical' | 'horizontal';
     disabled: boolean;
     ariaLabel: string | null;
-    /** "item" (default) = radios äger spacing; "group" = gruppen äger spacing */
-    spacing: 'item' | 'group';
-    /** Håller gruppens aktuella värde, speglar value på den radio-knapp som är vald */
+    /** Avstånd mellan radioknappar i gruppen ägs av CSS-variabeln --scb-radio-gap. */
+    /** Styr vertikalt avstånd till omgivande innehåll (samma modell som scb-checkbox-group). */
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
+    /** Håller gruppens aktuella värde, speglar value på den radio-knapp som är vald. */
     value: string;
+    private _internals;
+    private _form;
+    private _formResetHandler;
+    private _initialValue;
+    constructor();
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
     firstUpdated(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    formDisabledCallback(disabled: boolean): void;
+    private __syncFormValue;
 }
 declare global {
     interface HTMLElementTagNameMap {