scb-wc-test 0.1.76 → 0.1.78

package/scb-stepper/scb-step.js

@@ -1,97 +1,161 @@
-import { css as m, LitElement as d, html as i } from "lit";
-import { property as o, customElement as h } from "lit/decorators.js";
+import { css as m, LitElement as p, html as r } from "lit";
+import { property as i, customElement as b } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (p, s, n, l) => {
-  for (var r = l > 1 ? void 0 : l ? b(s, n) : s, a = p.length - 1, c; a >= 0; a--)
-    (c = p[a]) && (r = (l ? c(s, n, r) : c(r)) || r);
-  return l && r && v(s, n, r), r;
+import "@material/web/ripple/ripple.js";
+import "@material/web/focus/md-focus-ring.js";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, a, n, o) => {
+  for (var l = o > 1 ? void 0 : o ? v(a, n) : a, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (l = (o ? d(a, n, l) : d(l)) || l);
+  return o && l && h(a, n, l), l;
 };
-let t = class extends d {
+let t = class extends p {
   constructor() {
-    super(...arguments), this.label = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.icon = "";
+    super(...arguments), this.label = "", this.subLabel = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.icon = "";
+  }
+  updated() {
+    !this.subLabel || this.subLabel.trim() === "" ? this.setAttribute("no-content", "") : this.removeAttribute("no-content");
+  }
+  handleKeyDown(e) {
+    e.key === "Enter" || e.key === " " ? (e.preventDefault(), this.dispatchEvent(new MouseEvent("click", { bubbles: !0, composed: !0 }))) : (e.key === "ArrowRight" || e.key === "ArrowLeft") && (this.dispatchEvent(new CustomEvent("scb-stepper-keynav", {
+      detail: { key: e.key },
+      bubbles: !0,
+      composed: !0
+    })), e.preventDefault());
   }
   render() {
+    const e = this.active ? "step" : void 0, a = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : void 0;
     switch (this.symbolVariant) {
       case "icon":
-        return i`
-            <div class="symbol">
-                ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<md-icon>${this.icon}</md-icon>`}
-            </div>
-            
-            <div class="content">
-                <div class="label">${this.label}</div>
-                <slot></slot>
-            </div>
-        `;
+        return r`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${a}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r`<md-icon>${this.icon}</md-icon>`}
+                        </div>
+                        <div class="content">
+                            <div class="label">${this.label}</div>
+                            <div class="sub-label">${this.subLabel}</div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;
       case "marker":
-        return i`
-            <div class="symbol">
-            </div>
-            <div class="content">
-                <div class="label">${this.label}</div>
-                <slot></slot>
-            </div>
-        `;
+        return r`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${a}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r``}
+                        </div>
+                        <div class="content">
+                            <div class="label">${this.label}</div>
+                            <div class="sub-label">${this.subLabel}</div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;
       default:
-        return i`
-            <div class="symbol">
-                ${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<span>${this.number}</span>`}
-            </div>
-            <div class="content">
-                <div class="label">${this.label}</div>
-                <slot></slot>
-            </div>
-        `;
+        return r`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${a}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r`<span>${this.number}</span>`}
+                        </div>
+                        <div class="content">
+                            <div class="label">${this.label}</div>
+                            <div class="sub-label">${this.subLabel}</div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;
     }
   }
 };
 t.styles = m`
     :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      min-width: 80px;
-      flex: 1 1 0;
-      cursor: pointer;
-      background: none;
-      box-sizing: border-box;
-      user-select: none;
-      
-    }
-    
+        font-family: var(--brand-font);
+    }
+    .scb-step-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        flex: 1 1 0;
+        cursor: pointer;
+        background: none;
+        box-sizing: border-box;
+        user-select: none;
+        padding: var(--spacing-4);
+    }
+    .scb-step-content:focus,
+    .scb-step-content:focus-visible {
+        outline: none ;
+        box-shadow: none ;
+    }
     .symbol {
-      background-color: var(--n-70);
-      color: var(--md-sys-color-on-primary);
-      border-radius: 50%;
-      min-width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 14px;
-      position: relative;
-      z-index: 1;
+        background-color: var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+        min-width: var(--icon-size-medium);
+        height: var(--icon-size-medium);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        font-size: var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        position: relative;
+        z-index: 1;
+    }
+    md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
     }
     md-icon {
       font-size: 20px;
     }
     :host([active]) .symbol {
       background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
     :host([completed]) .symbol {
       background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
     .label {
-      margin-top: 8px;
+      margin-top: var(--spacing-3);
       text-align: center;
-      font-size: 16px;
-      color: var(--md-sys-color-on-surface, #222);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      color: var(--md-sys-color-on-surface);
       max-width: 90px;
       word-break: break-word;
-      margin-bottom: 8px;
+      margin-bottom: var(--spacing-3);
     }
-    :host([active]) .label, :host([active]) slot {
+    :host([active]) .label, :host([active]) .sub-label {
       font-weight: 600;
     }
     .content{
@@ -100,51 +164,73 @@ t.styles = m`
         align-items: center;
     }
     :host([variant="vertical"]) {
-      flex-direction: row;
-      align-items: flex-start;
-        gap: 16px;
-
+        .scb-step-content {
+            flex-direction: row;
+            align-items: flex-start;
+            gap: var(--spacing-5);
+            padding: var(--spacing-4);
+        }
+    }
+    :host([no-content]) {
+      .scb-step-content {
+        align-items: center;
+        .label {
+            margin-bottom: 0px;
+        }
+    }
     }
     :host([variant="vertical"]) .label{
         margin-top: 0;
     }
     :host([variant="vertical"]) .content{
         align-items: flex-start;
+
     }
     :host([symbol-variant="marker"]) .symbol {
         min-width: 16px;
         height: 16px;
     }
+    :host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
+        background-color: transparent;
+        color: var(--md-sys-color-primary);
+        md-icon{
+            font-size: var(--icon-size-small);
+        }
+    }
+
   `;
-e([
-  o({ type: String, reflect: !0 })
+s([
+  i({ type: String, reflect: !0 })
 ], t.prototype, "label", 2);
-e([
-  o({ type: String, reflect: !0, attribute: "symbol-variant" })
+s([
+  i({ type: String, reflect: !0, attribute: "sub-label" })
+], t.prototype, "subLabel", 2);
+s([
+  i({ type: String, reflect: !0, attribute: "symbol-variant" })
 ], t.prototype, "symbolVariant", 2);
-e([
-  o({ type: Number, reflect: !0 })
+s([
+  i({ type: Number, reflect: !0 })
 ], t.prototype, "number", 2);
-e([
-  o({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "active", 2);
-e([
-  o({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "completed", 2);
-e([
-  o({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
 ], t.prototype, "changeOnCompleted", 2);
-e([
-  o({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "islast", 2);
-e([
-  o({ type: String, reflect: !0 })
+s([
+  i({ type: String, reflect: !0 })
 ], t.prototype, "variant", 2);
-e([
-  o({ type: String })
+s([
+  i({ type: String })
 ], t.prototype, "icon", 2);
-t = e([
-  h("scb-step")
+t = s([
+  b("scb-step")
 ], t);
 export {
   t as ScbStep

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

@@ -4,6 +4,7 @@ import { LitElement } from 'lit';
  * @slot - Innehåll för stegen
  */
 export declare class ScbStepper extends LitElement {
+    type: string;
     label: string;
     changeOnCompleted: boolean;
     variant: 'horizontal' | 'vertical';
@@ -11,10 +12,23 @@ export declare class ScbStepper extends LitElement {
     private activeIndex;
     static styles: import('lit').CSSResult;
     private _onStepClick;
+    /**
+     * Gå till nästa steg programatiskt
+     */
+    nextStep(): void;
+    /**
+     * Gå till föregående steg programatiskt
+     */
+    prevStep(): void;
+    /**
+     * Hämta nuvarande aktiva steg-index
+     */
+    getActiveIndex(): number;
     private _updateSteps;
     private _getSteps;
     firstUpdated(): void;
     updated(): void;
     render(): import('lit-html').TemplateResult<1>;
+    private _onKeyNav;
     private _onStepContainerClick;
 }

package/scb-stepper/scb-stepper.js

@@ -1,25 +1,76 @@
-import { css as c, LitElement as d, html as h } from "lit";
-import { property as n, state as f, customElement as v } from "lit/decorators.js";
+import { css as l, LitElement as h, html as d } from "lit";
+import { property as p, state as v, customElement as f } from "lit/decorators.js";
 import "./scb-step.js";
-var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
-  for (var r = a > 1 ? void 0 : a ? x(t, i) : t, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (r = (a ? p(t, i, r) : p(r)) || r);
-  return a && r && b(t, i, r), r;
+var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? u(t, s) : t, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (n = (i ? c(t, s, n) : c(n)) || n);
+  return i && n && b(t, s, n), n;
 };
-let s = class extends d {
+let o = class extends h {
   constructor() {
-    super(...arguments), this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.activeIndex = 0, this._onStepContainerClick = (e) => {
-      const t = this._getSteps(), i = e.composedPath(), a = t.findIndex((r) => i.includes(r));
-      a !== -1 && this._onStepClick(a);
+    super(...arguments), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.activeIndex = 0, this._onKeyNav = (e) => {
+      const t = this._getSteps(), s = this.activeIndex;
+      let i = s;
+      e.detail.key === "ArrowRight" ? s < t.length - 1 ? i = s + 1 : i = 0 : e.detail.key === "ArrowLeft" && (s > 0 ? i = s - 1 : i = t.length - 1), i !== s && (this._onStepClick(i), setTimeout(() => {
+        var a;
+        const n = (a = t[i].shadowRoot) == null ? void 0 : a.querySelector(".scb-step-content");
+        n && "focus" in n && typeof n.focus == "function" && n.focus();
+      }, 0));
+    }, this._onStepContainerClick = (e) => {
+      const t = this._getSteps(), s = e.composedPath(), i = t.findIndex((n) => s.includes(n));
+      i !== -1 && this._onStepClick(i);
     };
   }
   _onStepClick(e) {
-    this.activeIndex = e, this._updateSteps();
+    const t = this.activeIndex;
+    this.activeIndex = e, this._updateSteps(), this.dispatchEvent(new CustomEvent("scb-step-change", {
+      detail: {
+        index: this.activeIndex,
+        step: this._getSteps()[this.activeIndex]
+      },
+      bubbles: !0,
+      composed: !0
+    })), e > t ? this.dispatchEvent(new CustomEvent("scb-step-next", {
+      detail: {
+        from: t,
+        to: e,
+        step: this._getSteps()[e]
+      },
+      bubbles: !0,
+      composed: !0
+    })) : e < t && this.dispatchEvent(new CustomEvent("scb-step-prev", {
+      detail: {
+        from: t,
+        to: e,
+        step: this._getSteps()[e]
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  /**
+   * Gå till nästa steg programatiskt
+   */
+  nextStep() {
+    const e = this._getSteps();
+    this.activeIndex < e.length - 1 && this._onStepClick(this.activeIndex + 1);
+  }
+  /**
+   * Gå till föregående steg programatiskt
+   */
+  prevStep() {
+    this.activeIndex > 0 && this._onStepClick(this.activeIndex - 1);
+  }
+  /**
+   * Hämta nuvarande aktiva steg-index
+   */
+  getActiveIndex() {
+    return this.activeIndex;
   }
   _updateSteps() {
     const e = this._getSteps();
-    e.forEach((t, i) => {
-      t.active = i === this.activeIndex, t.completed = i < this.activeIndex, t.islast = !1, t.changeOnCompleted = this.changeOnCompleted, t.number = i + 1, t.variant = this.variant, t.symbolVariant = this.symbolVariant;
+    e.forEach((t, s) => {
+      t.active = s === this.activeIndex, t.completed = s < this.activeIndex, t.islast = !1, t.changeOnCompleted = this.changeOnCompleted, t.number = s + 1, t.variant = this.variant, t.symbolVariant = this.symbolVariant;
     }), e.length > 0 && (e[e.length - 1].islast = !0);
   }
   _getSteps() {
@@ -32,19 +83,25 @@ let s = class extends d {
     this._updateSteps();
   }
   render() {
-    return h`
-    <div class="steps" style="flex-direction: ${this.variant === "vertical" ? "column" : "row"}; align-items: ${this.variant === "vertical", "flex-start"};" @click=${this._onStepContainerClick}>
+    return d`
+      <div
+        class="steps"
+        role="list"
+        aria-label="Steg i processen"
+        @click=${this._onStepContainerClick}
+        @scb-stepper-keynav=${this._onKeyNav}
+      >
         <slot></slot>
-    </div>
+      </div>
     `;
   }
 };
-s.styles = c`
+o.styles = l`
     :host {
         --scb-stepper-width: 100%;
         --scb-stepper-height: 100%;
       display: block;
-      padding: 16px;
+      padding: var(--spacing-5) 0;
       width: 100%;
       color: var(--md-sys-color-on-surface);
       font-family: var(--brand-font);
@@ -54,34 +111,32 @@ s.styles = c`
     .steps {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: stretch;
       justify-content: center;
       position: relative;
       width: 100%;
-      gap: 24px;
-        height: 100%;
+      gap: var(--spacing-7);
+      height: 100%;
     }
     :host([variant='vertical']) .steps {
       flex-direction: column;
-      align-items: flex-start;
-      gap: 32px;
+      gap: var(--spacing-8);
     }
     ::slotted(scb-step) {
       position: relative;
       flex: 1 1 0;
-      min-width: 80px;
       z-index: 1;
+      width: 100%;
     }
     /* Horisontell connector */
     ::slotted(scb-step:not(:first-child))::before {
       content: '';
       position: absolute;
       left: -50%;
-      top: 16px;
+      top: 28px;
       width: calc(100% - 24px);
       height: 1px;
       background: var(--n-70);
-      border-radius: 1px;
       z-index: 0;
     }
     /* Vertikal connector */
@@ -91,46 +146,50 @@ s.styles = c`
     ::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
         content: '';
         position: absolute;
-        left: 16px;
-        top: 40px;
+        left: 28px;
+        top: 52px;
         width: 1px;
         height: calc(100% - 16px);
         background: var(--n-70);
-        border-radius: 1px;
         z-index: 0;
         transform: translateX(-50%);
     }
     ::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
         content: "";
         position: absolute;
-        left: 8px;
-        top: 25px;
+        left: 20px;
+        top: 38px;
         width: 1px;
         height: calc(100% - 2px);
         background: var(--n-70);
-        border-radius: 1px;
         z-index: 0;
         transform: translateX(-50%);
     }
+    ::slotted(scb-step[symbol-variant="marker"]:not(:first-child))::before  {
+        top: 20px;
+    }
   `;
-o([
-  n({ type: String, reflect: !0 })
-], s.prototype, "label", 2);
-o([
-  n({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
-], s.prototype, "changeOnCompleted", 2);
-o([
-  n({ type: String })
-], s.prototype, "variant", 2);
-o([
-  n({ type: String, reflect: !0, attribute: "symbol-variant" })
-], s.prototype, "symbolVariant", 2);
-o([
-  f()
-], s.prototype, "activeIndex", 2);
-s = o([
-  v("scb-stepper")
-], s);
+r([
+  p({ type: String, reflect: !0 })
+], o.prototype, "type", 2);
+r([
+  p({ type: String, reflect: !0 })
+], o.prototype, "label", 2);
+r([
+  p({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
+], o.prototype, "changeOnCompleted", 2);
+r([
+  p({ type: String })
+], o.prototype, "variant", 2);
+r([
+  p({ type: String, reflect: !0, attribute: "symbol-variant" })
+], o.prototype, "symbolVariant", 2);
+r([
+  v()
+], o.prototype, "activeIndex", 2);
+o = r([
+  f("scb-stepper")
+], o);
 export {
-  s as ScbStepper
+  o as ScbStepper
 };