scb-wc-test 0.1.105 → 0.1.106

package/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -1,47 +1,49 @@
-import { css as g, LitElement as v, html as a } from "lit";
-import { property as u, customElement as w } from "lit/decorators.js";
+import { css as y, LitElement as m, html as h } from "lit";
+import { property as d, customElement as L } from "lit/decorators.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-button/scb-button.js";
 import "@material/web/focus/md-focus-ring.js";
-var S = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, l, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? y(l, o) : l, i = t.length - 1, c; i >= 0; i--)
-    (c = t[i]) && (s = (r ? c(l, o, s) : c(s)) || s);
-  return r && s && S(l, o, s), s;
-};
-let n = class extends v {
+var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, w = (t) => {
+  throw TypeError(t);
+}, c = (t, o, l, r) => {
+  for (var s = r > 1 ? void 0 : r ? z(o, l) : o, a = t.length - 1, n; a >= 0; a--)
+    (n = t[a]) && (s = (r ? n(o, l, s) : n(s)) || s);
+  return r && s && x(o, l, s), s;
+}, k = (t, o, l) => o.has(t) || w("Cannot " + l), B = (t, o, l) => o.has(t) ? w("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, l), S = (t, o, l) => (k(t, o, "access private method"), l), f, v;
+let e = class extends m {
   constructor() {
-    super(...arguments), this.variant = "standard", this.width = "100%", this.showScrollbar = !0, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.contentFlex = !1, this.updateScrollButtons = () => {
-      var o;
+    super(...arguments), B(this, f), this.variant = "standard", this.width = "100%", this.showScrollbar = !0, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.contentFlex = !1, this.updateScrollButtons = () => {
+      var l;
       this.requestUpdate();
-      const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".scb-horizontal-scroller");
+      const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".scb-horizontal-scroller");
       if (!t) return;
       t.scrollLeft > 0 ? this.setAttribute("data-scroll-left", "") : this.removeAttribute("data-scroll-left");
-      const l = t;
-      l.scrollLeft + l.clientWidth < l.scrollWidth - 1 ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
+      const o = t;
+      o.scrollLeft + o.clientWidth < o.scrollWidth - 1 ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
     }, this.lastScrollLeft = 0, this.isScrolling = !1, this.scrollEndTimeout = null, this.handleScroll = () => {
-      var l;
-      const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".scb-horizontal-scroller");
+      var o;
+      const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".scb-horizontal-scroller");
       t && (this.updateScrollButtons(), this.dispatchCustomEvent("scb-scroll", { scrollLeft: t.scrollLeft }), this.isScrolling || (this.isScrolling = !0, this.dispatchCustomEvent("scb-scroll-start", { scrollLeft: t.scrollLeft })), clearTimeout(this.scrollEndTimeout), this.scrollEndTimeout = setTimeout(() => {
         this.isScrolling = !1, this.dispatchCustomEvent("scb-scroll-end", { scrollLeft: t.scrollLeft });
       }, 120), t.scrollLeft > this.lastScrollLeft ? this.dispatchCustomEvent("scb-scroll-right", { scrollLeft: t.scrollLeft }) : t.scrollLeft < this.lastScrollLeft && this.dispatchCustomEvent("scb-scroll-left", { scrollLeft: t.scrollLeft }), this.lastScrollLeft = t.scrollLeft);
     };
   }
   doScrollBy(t) {
-    var o;
-    const l = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".scb-horizontal-scroller");
-    l && l.scrollBy({ left: t, behavior: "smooth" });
+    var l;
+    const o = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".scb-horizontal-scroller");
+    o && o.scrollBy({ left: t, behavior: "smooth" });
   }
   get canScrollLeft() {
-    var l;
-    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".scb-horizontal-scroller");
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".scb-horizontal-scroller");
     return t ? t.scrollLeft > 0 : !1;
   }
   get canScrollRight() {
-    var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".scb-horizontal-scroller");
+    var l;
+    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".scb-horizontal-scroller");
     if (!t) return !1;
-    const l = t;
-    return l.scrollLeft + l.clientWidth < l.scrollWidth - 1;
+    const o = t;
+    return o.scrollLeft + o.clientWidth < o.scrollWidth - 1;
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("scroll", this.updateScrollButtons, !0);
@@ -49,114 +51,163 @@ let n = class extends v {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("scroll", this.updateScrollButtons, !0);
   }
-  dispatchCustomEvent(t, l = {}) {
-    this.dispatchEvent(new CustomEvent(t, {
-      detail: l,
-      bubbles: !0,
-      composed: !0
-    }));
+  dispatchCustomEvent(t, o = {}) {
+    this.dispatchEvent(
+      new CustomEvent(t, {
+        detail: o,
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   firstUpdated() {
-    var i, c, b, f;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-horizontal-scroller"), l = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".scroll-shadow-left"), o = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".scroll-shadow-right"), r = (f = this.shadowRoot) == null ? void 0 : f.querySelector("slot");
-    t && (t.addEventListener("scroll", this.handleScroll), t.addEventListener("wheel", function(e) {
-      e.deltaY !== 0 && (e.preventDefault(), t.scrollLeft += e.deltaY);
-    }, { passive: !1 }));
+    var a, n, u, b;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".scb-horizontal-scroller"), o = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".scroll-shadow-left"), l = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".scroll-shadow-right"), r = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot");
+    t && (t.addEventListener("scroll", this.handleScroll), t.addEventListener(
+      "wheel",
+      function(i) {
+        i.deltaY !== 0 && (i.preventDefault(), t.scrollLeft += i.deltaY);
+      },
+      { passive: !1 }
+    ));
     const s = () => {
-      if (r && l && o) {
-        const e = r.getBoundingClientRect();
-        l.style.height = `${e.height}px`, o.style.height = `${e.height}px`;
+      if (r && o && l) {
+        const i = r.getBoundingClientRect();
+        o.style.height = `${i.height}px`, l.style.height = `${i.height}px`;
       }
     };
     s(), r && new ResizeObserver(s).observe(r), this.updateComplete.then(() => {
       this.updateScrollButtons();
-    });
+    }), S(this, f, v).call(this);
   }
   updated(t) {
-    var c, b, f, e;
-    const l = (c = this.shadowRoot) == null ? void 0 : c.querySelector(".scroll-shadow-left"), o = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".scroll-shadow-right"), r = (f = this.shadowRoot) == null ? void 0 : f.querySelector("slot"), s = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".scb-horizontal-scroller");
+    var n, u, b, i;
+    const o = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".scroll-shadow-left"), l = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".scroll-shadow-right"), r = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot"), s = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-horizontal-scroller");
     if (s) {
-      s.addEventListener("scroll", this.handleScroll), s.addEventListener("wheel", function(p) {
-        p.deltaY !== 0 && (p.preventDefault(), s.scrollLeft += p.deltaY);
-      }, { passive: !1 }), s.scrollLeft > 0 ? this.setAttribute("data-scroll-left", "") : this.removeAttribute("data-scroll-left");
-      const h = s;
-      h.scrollLeft + h.clientWidth < h.scrollWidth - 1 ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
+      s.addEventListener("scroll", this.handleScroll), s.addEventListener(
+        "wheel",
+        function(g) {
+          g.deltaY !== 0 && (g.preventDefault(), s.scrollLeft += g.deltaY);
+        },
+        { passive: !1 }
+      ), s.scrollLeft > 0 ? this.setAttribute("data-scroll-left", "") : this.removeAttribute("data-scroll-left");
+      const p = s;
+      p.scrollLeft + p.clientWidth < p.scrollWidth - 1 ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
     }
     t.has("width") && this.style.setProperty("--scb-horizontal-scroller-width", this.width);
-    const i = () => {
-      if (r && l && o) {
-        const h = r.getBoundingClientRect();
-        l.style.height = `${h.height}px`, o.style.height = `${h.height}px`;
+    const a = () => {
+      if (r && o && l) {
+        const p = r.getBoundingClientRect();
+        o.style.height = `${p.height}px`, l.style.height = `${p.height}px`;
       }
     };
-    i(), r && new ResizeObserver(i).observe(r);
+    a(), r && new ResizeObserver(a).observe(r), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && S(this, f, v).call(this);
+  }
+  mapSpacingToken(t) {
+    if (!t) return;
+    const o = String(t).trim();
+    if (o)
+      return /^\d+$/.test(o) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(o, 10)))})` : o;
   }
   render() {
-    const t = this.variant;
-    var l = !!(this.canScrollLeft || this.canScrollRight);
+    const t = this.variant, o = !!(this.canScrollLeft || this.canScrollRight);
     switch (t) {
       case "inline":
-        return a`
-        <div class="scb-horizontal-scroller ${l ? "canScroll" : ""}" tabindex="0">
-          ${this.variant != "inline" ? a`<div class="scroll-shadow-left"></div>` : ""}
-              <slot></slot>
-              <md-focus-ring inward></md-focus-ring>
-          ${this.variant != "inline" ? a`<div class="scroll-shadow-right"></div>` : ""}
-        </div>
-        ${l ? a`
-          <div class="scroll-buttons">
-            ${this.canScrollLeft ? a`
-              <scb-button class="scroll-button-left" variant="text" label="${this.leftScrollButtonLabel}" aria-label="Scrolla vänster" icon="chevron_left" @click="${() => this.doScrollBy(-100)}"></scb-button>
-            ` : ""}
-
-            ${this.canScrollRight ? a`
-              <scb-button class="scroll-button-right" variant="text" label="${this.rightScrollButtonLabel}" aria-label="Scrolla höger" icon="chevron_right" trailing-icon @click="${() => this.doScrollBy(100)}"></scb-button>
-            ` : ""}
+        return h`
+          <div class="scb-horizontal-scroller ${o ? "canScroll" : ""}" tabindex="0">
+            ${this.variant != "inline" ? h`<div class="scroll-shadow-left"></div>` : ""}
+            <slot></slot>
+            <md-focus-ring inward></md-focus-ring>
+            ${this.variant != "inline" ? h`<div class="scroll-shadow-right"></div>` : ""}
           </div>
-        ` : ""}
-    `;
+          ${o ? h`
+                <div class="scroll-buttons">
+                  ${this.canScrollLeft ? h`
+                        <scb-button
+                          class="scroll-button-left"
+                          variant="text"
+                          label="${this.leftScrollButtonLabel}"
+                          aria-label="Scrolla vänster"
+                          icon="chevron_left"
+                          @click="${() => this.doScrollBy(-100)}"
+                        ></scb-button>
+                      ` : ""}
+
+                  ${this.canScrollRight ? h`
+                        <scb-button
+                          class="scroll-button-right"
+                          variant="text"
+                          label="${this.rightScrollButtonLabel}"
+                          aria-label="Scrolla höger"
+                          icon="chevron_right"
+                          trailing-icon
+                          @click="${() => this.doScrollBy(100)}"
+                        ></scb-button>
+                      ` : ""}
+                </div>
+              ` : ""}
+        `;
       default:
-        return a`
-        ${this.canScrollLeft ? a`
-          <scb-icon-button class="scroll-button-left" icon="chevron_left" aria-label="Scrolla vänster" variant="filled-tonal" @click="${() => this.doScrollBy(-100)}"></scb-icon-button>
-        ` : ""}
-        <div class="scroll-shadow-left"></div>
-        <div class="scb-horizontal-scroller">
-          <slot></slot>
-          <md-focus-ring inward></md-focus-ring>
-        </div>
-        <div class="scroll-shadow-right"></div>
-        ${this.canScrollRight ? a`
-          <scb-icon-button class="scroll-button-right" icon="chevron_right" aria-label="Scrolla höger" variant="filled-tonal" @click="${() => this.doScrollBy(100)}"></scb-icon-button>
-        ` : ""}
-    `;
+        return h`
+          ${this.canScrollLeft ? h`
+                <scb-icon-button
+                  class="scroll-button-left"
+                  icon="chevron_left"
+                  aria-label="Scrolla vänster"
+                  variant="filled-tonal"
+                  @click="${() => this.doScrollBy(-100)}"
+                ></scb-icon-button>
+              ` : ""}
+          <div class="scroll-shadow-left"></div>
+          <div class="scb-horizontal-scroller">
+            <slot></slot>
+            <md-focus-ring inward></md-focus-ring>
+          </div>
+          <div class="scroll-shadow-right"></div>
+          ${this.canScrollRight ? h`
+                <scb-icon-button
+                  class="scroll-button-right"
+                  icon="chevron_right"
+                  aria-label="Scrolla höger"
+                  variant="filled-tonal"
+                  @click="${() => this.doScrollBy(100)}"
+                ></scb-icon-button>
+              ` : ""}
+        `;
     }
   }
 };
-n.styles = g`
+f = /* @__PURE__ */ new WeakSet();
+v = function() {
+  const t = this.mapSpacingToken(this.spacing), o = this.mapSpacingToken(this.spacingTop), l = this.mapSpacingToken(this.spacingBottom), r = o ?? t, s = l ?? t;
+  r ? this.style.setProperty("--scb-horizontal-scroller-spacing-block-start", r) : this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"), s ? this.style.setProperty("--scb-horizontal-scroller-spacing-block-end", s) : this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end");
+};
+e.styles = y`
     :host {
       display: flex;
       position: relative;
       align-items: center;
       gap: var(--spacing-3);
       padding: 0px var(--spacing-8);
+      margin-block-start: var(--scb-horizontal-scroller-spacing-block-start, 0);
+      margin-block-end: var(--scb-horizontal-scroller-spacing-block-end, 0);
     }
     .scb-horizontal-scroller {
       overflow-x: auto;
-      -ms-overflow-style: none;  /* IE and Edge */
+      -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none;
       width: 100%;
     }
-    :host([show-scrollbar]) .scb-horizontal-scroller{
-     scrollbar-width: auto;
+    :host([show-scrollbar]) .scb-horizontal-scroller {
+      scrollbar-width: auto;
     }
 
-    :host([content-flex]) .scb-horizontal-scroller{
+    :host([content-flex]) .scb-horizontal-scroller {
       display: flex;
       flex-direction: row;
       flex: 1 1 auto;
     }
-    
+
     .scb-horizontal-scroller::-webkit-scrollbar {
       border-radius: var(--md-sys-shape-corner-large);
       height: 4px;
@@ -172,13 +223,13 @@ n.styles = g`
       border-radius: var(--md-sys-shape-corner-large);
     }
     .scb-horizontal-scroller:focus {
-       outline: none;
+      outline: none;
     }
     md-focus-ring {
       border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
     }
 
-    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll{
+    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll {
       padding-bottom: var(--spacing-5);
     }
     slot {
@@ -217,12 +268,12 @@ n.styles = g`
       right: 0;
     }
     :host([data-scroll-left]) .scroll-shadow-left {
-      box-shadow: 16px 0 16px -8px rgba(0,0,0,0.12);
+      box-shadow: 16px 0 16px -8px rgba(0, 0, 0, 0.12);
     }
     :host([data-scroll-right]) .scroll-shadow-right {
-      box-shadow: -16px 0 16px -8px rgba(0,0,0,0.12);
+      box-shadow: -16px 0 16px -8px rgba(0, 0, 0, 0.12);
     }
-    :host([variant="inline"]) {
+    :host([variant='inline']) {
       flex-direction: column;
       align-items: unset;
       padding: 0;
@@ -242,32 +293,40 @@ n.styles = g`
         z-index: auto;
       }
     }
-    :host([variant="inline"][show-scrollbar]) {
+    :host([variant='inline'][show-scrollbar]) {
       gap: var(--spacing-5);
     }
-
   `;
-d([
-  u({ type: String, reflect: !0 })
-], n.prototype, "variant", 2);
-d([
-  u({ type: String, reflect: !0 })
-], n.prototype, "width", 2);
-d([
-  u({ type: Boolean, reflect: !0, attribute: "show-scrollbar" })
-], n.prototype, "showScrollbar", 2);
-d([
-  u({ type: String, reflect: !0, attribute: "right-scroll-button-label" })
-], n.prototype, "rightScrollButtonLabel", 2);
-d([
-  u({ type: String, reflect: !0, attribute: "left-scroll-button-label" })
-], n.prototype, "leftScrollButtonLabel", 2);
-d([
-  u({ type: Boolean, reflect: !0, attribute: "content-flex" })
-], n.prototype, "contentFlex", 2);
-n = d([
-  w("scb-horizontal-scroller")
-], n);
+c([
+  d({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+c([
+  d({ type: String, reflect: !0 })
+], e.prototype, "width", 2);
+c([
+  d({ type: Boolean, reflect: !0, attribute: "show-scrollbar" })
+], e.prototype, "showScrollbar", 2);
+c([
+  d({ type: String, reflect: !0, attribute: "right-scroll-button-label" })
+], e.prototype, "rightScrollButtonLabel", 2);
+c([
+  d({ type: String, reflect: !0, attribute: "left-scroll-button-label" })
+], e.prototype, "leftScrollButtonLabel", 2);
+c([
+  d({ type: String, reflect: !0 })
+], e.prototype, "spacing", 2);
+c([
+  d({ type: String, reflect: !0, attribute: "spacing-top" })
+], e.prototype, "spacingTop", 2);
+c([
+  d({ type: String, reflect: !0, attribute: "spacing-bottom" })
+], e.prototype, "spacingBottom", 2);
+c([
+  d({ type: Boolean, reflect: !0, attribute: "content-flex" })
+], e.prototype, "contentFlex", 2);
+e = c([
+  L("scb-horizontal-scroller")
+], e);
 export {
-  n as ScbHorizontalScroller
+  e as ScbHorizontalScroller
 };

package/scb-icon-button/scb-icon-button.d.ts

@@ -1,6 +1,7 @@
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
 type IconVariant = 'filled' | 'outlined' | 'filled-tonal' | 'standard';
 export declare class ScbIconButton extends LitElement {
+    #private;
     /** Visuell ikon. */
     icon: string;
     /** Tooltiptext. Används som native title. */
@@ -19,6 +20,8 @@ export declare class ScbIconButton extends LitElement {
     toggleonicon: string;
     /** Inaktiverad. */
     disabled: boolean;
+    /** Vertikalt avstånd till omgivande innehåll. "N" mappar till var(--spacing-N). */
+    spacing: string;
     private __loadedVariants;
     private __iconLoaded;
     private __lastMdHost;
@@ -33,8 +36,10 @@ export declare class ScbIconButton extends LitElement {
     /** Koppla change-event från md-* samt spegla selected. */
     private __attachChangeListener;
     /**
-     * Synkar native title och aria-* mellan host och md-*. */
+     * Synkar native title och aria-* mellan host och md-*.
+     */
     private __syncTitleAndAria;
+    private mapSpacingToken;
     static styles: import('lit').CSSResult;
     private __renderToggleIcons;
     private __renderSingleIcon;