scb-wc-test 0.1.74 → 0.1.76

package/scb-stepper/scb-step.js

@@ -0,0 +1,151 @@
+import { css as m, LitElement as d, html as i } from "lit";
+import { property as o, customElement as h } 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;
+};
+let t = class extends d {
+  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 = "";
+  }
+  render() {
+    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>
+        `;
+      case "marker":
+        return i`
+            <div class="symbol">
+            </div>
+            <div class="content">
+                <div class="label">${this.label}</div>
+                <slot></slot>
+            </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>
+        `;
+    }
+  }
+};
+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;
+      
+    }
+    
+    .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;
+    }
+    md-icon {
+      font-size: 20px;
+    }
+    :host([active]) .symbol {
+      background-color: var(--md-sys-color-primary);
+    }
+    :host([completed]) .symbol {
+      background-color: var(--md-sys-color-primary);
+    }
+    .label {
+      margin-top: 8px;
+      text-align: center;
+      font-size: 16px;
+      color: var(--md-sys-color-on-surface, #222);
+      max-width: 90px;
+      word-break: break-word;
+      margin-bottom: 8px;
+    }
+    :host([active]) .label, :host([active]) slot {
+      font-weight: 600;
+    }
+    .content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    :host([variant="vertical"]) {
+      flex-direction: row;
+      align-items: flex-start;
+        gap: 16px;
+
+    }
+    :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;
+    }
+  `;
+e([
+  o({ type: String, reflect: !0 })
+], t.prototype, "label", 2);
+e([
+  o({ type: String, reflect: !0, attribute: "symbol-variant" })
+], t.prototype, "symbolVariant", 2);
+e([
+  o({ type: Number, reflect: !0 })
+], t.prototype, "number", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "active", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "completed", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "changeOnCompleted", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "islast", 2);
+e([
+  o({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  o({ type: String })
+], t.prototype, "icon", 2);
+t = e([
+  h("scb-step")
+], t);
+export {
+  t as ScbStep
+};

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * En stepper-komponent enligt SCB-standard.
+ * @slot - Innehåll för stegen
+ */
+export declare class ScbStepper extends LitElement {
+    label: string;
+    changeOnCompleted: boolean;
+    variant: 'horizontal' | 'vertical';
+    symbolVariant: 'number' | 'icon' | 'marker';
+    private activeIndex;
+    static styles: import('lit').CSSResult;
+    private _onStepClick;
+    private _updateSteps;
+    private _getSteps;
+    firstUpdated(): void;
+    updated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private _onStepContainerClick;
+}

package/scb-stepper/scb-stepper.js

@@ -0,0 +1,136 @@
+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 "./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;
+};
+let s = class extends d {
+  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);
+    };
+  }
+  _onStepClick(e) {
+    this.activeIndex = e, this._updateSteps();
+  }
+  _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.length > 0 && (e[e.length - 1].islast = !0);
+  }
+  _getSteps() {
+    return Array.from(this.querySelectorAll("scb-step"));
+  }
+  firstUpdated() {
+    this._updateSteps();
+  }
+  updated() {
+    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}>
+        <slot></slot>
+    </div>
+    `;
+  }
+};
+s.styles = c`
+    :host {
+        --scb-stepper-width: 100%;
+        --scb-stepper-height: 100%;
+      display: block;
+      padding: 16px;
+      width: 100%;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font);
+      max-width: var(--scb-stepper-width);
+      height: var(--scb-stepper-height);
+    }
+    .steps {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      width: 100%;
+      gap: 24px;
+        height: 100%;
+    }
+    :host([variant='vertical']) .steps {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 32px;
+    }
+    ::slotted(scb-step) {
+      position: relative;
+      flex: 1 1 0;
+      min-width: 80px;
+      z-index: 1;
+    }
+    /* Horisontell connector */
+    ::slotted(scb-step:not(:first-child))::before {
+      content: '';
+      position: absolute;
+      left: -50%;
+      top: 16px;
+      width: calc(100% - 24px);
+      height: 1px;
+      background: var(--n-70);
+      border-radius: 1px;
+      z-index: 0;
+    }
+    /* Vertikal connector */
+    ::slotted(scb-step[variant="vertical"]:not(:first-child))::before {
+        display: none;
+    }
+    ::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
+        content: '';
+        position: absolute;
+        left: 16px;
+        top: 40px;
+        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;
+        width: 1px;
+        height: calc(100% - 2px);
+        background: var(--n-70);
+        border-radius: 1px;
+        z-index: 0;
+        transform: translateX(-50%);
+    }
+  `;
+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);
+export {
+  s as ScbStepper
+};