scb-wc-test 0.1.1

package/scb-progress-indicator/scb-progress-indicator.js

@@ -0,0 +1,122 @@
+import { css as d, LitElement as f, html as i } from "lit";
+import { property as s, customElement as h } from "lit/decorators.js";
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (p, o, c, a) => {
+  for (var e = a > 1 ? void 0 : a ? u(o, c) : o, l = p.length - 1, n; l >= 0; l--)
+    (n = p[l]) && (e = (a ? n(o, c, e) : n(e)) || e);
+  return a && e && g(o, c, e), e;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.label = "", this.type = "circular", this.color = "#1f44ff", this.progress = 25, this.isStatic = !0;
+  }
+  render() {
+    return console.log("scb-progress-indicator isStatic:", this.isStatic), i`
+      <div class="scb-progress-indicator">
+        ${this.type === "circular" ? i`
+          <div class="circular">
+            <svg class="circular-spin" viewBox="0 0 40 40">
+              <circle class="circular-bg" cx="20" cy="20" r="16" fill="none" stroke-width="4" />
+              <circle
+                class="circular-fg"
+                cx="20" cy="20" r="16" fill="none" stroke-width="4"
+                stroke="${this.color}"
+                stroke-dasharray="${2 * Math.PI * 16}"
+                stroke-dashoffset="${(1 - this.progress / 100) * 2 * Math.PI * 16}"
+              />
+            </svg>
+          </div>
+        ` : i`
+          <div class="linear">
+            ${this.isStatic ? i`<div class="linear-static" style="width: ${this.progress}%; background: ${this.color};"></div>` : i`<div class="linear-loader" style="background: ${this.color};"></div>`}
+          </div>
+        `}
+      </div>
+    `;
+  }
+};
+r.styles = [
+  d`
+      :host {
+        display: block;
+        font-family: var(--brand-font, sans-serif);
+        color: var(--md-sys-color-on-surface, #222);
+      }
+      .circular {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        position: relative;
+      }
+      .circular-spin {
+        animation: spin 1s linear infinite;
+        width: 46px;
+        height: 46px;
+        position: relative;
+        z-index: 1;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .circular-bg {
+        stroke: #eee;
+      }
+      .circular-fg {
+        transition: stroke-dashoffset 0.3s ease;
+      }
+      .circular-bg {
+        stroke: #eee;
+      }
+      .circular-fg {
+        transition: stroke-dashoffset 0.3s ease;
+      }
+      .linear {
+        width: 100%;
+        height: 6px;
+        background: #eee;
+        border-radius: 3px;
+        overflow: hidden;
+        position: relative;
+      }
+      .linear-loader {
+        height: 100%;
+        width: 40%;
+        background: var(--p-40, #1f44ff);
+        border-radius: 3px;
+        animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
+      }
+      .linear-static {
+        height: 100%;
+        border-radius: 3px;
+        transition: width 0.3s ease;
+      }
+      @keyframes linear-progress {
+        0% { margin-left: -40%; width: 40%; }
+        50% { margin-left: 30%; width: 60%; }
+        100% { margin-left: 100%; width: 40%; }
+      }
+    `
+];
+t([
+  s({ type: String })
+], r.prototype, "label", 2);
+t([
+  s({ type: String, reflect: !0 })
+], r.prototype, "type", 2);
+t([
+  s({ type: String, reflect: !0 })
+], r.prototype, "color", 2);
+t([
+  s({ type: Number, reflect: !0 })
+], r.prototype, "progress", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "isStatic", 2);
+r = t([
+  h("scb-progress-indicator")
+], r);
+export {
+  r as ScbProgressIndicator
+};

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

@@ -0,0 +1,19 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+
+export declare class ScbRadioButton extends LitElement {
+    disabled: boolean;
+    checked: boolean;
+    name: string;
+    value: string;
+    label: string;
+    supportingText: string;
+    private _radioId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onMdRadioChange;
+    private _onRadioChange;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}

package/scb-radio-button/scb-radio-button.js

@@ -0,0 +1,176 @@
+import { LitElement as c, html as p, css as h } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
+import "@material/web/radio/radio.js";
+var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, t, n, o) => {
+  for (var i = o > 1 ? void 0 : o ? g(t, n) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (i = (o ? l(t, n, i) : l(i)) || i);
+  return o && i && b(t, n, i), i;
+};
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.checked = !1, this.name = "", this.value = "", this.label = "", this.supportingText = "", this._radioId = "", this._onMdRadioChange = (e) => {
+      if (this.disabled) return;
+      const t = e.target;
+      t && t.checked && (this.checked = !0, this.dispatchEvent(
+        new CustomEvent("scb-radio-change", {
+          detail: { name: this.name, source: this },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: this.checked, value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    }, this._onRadioChange = (e) => {
+      e.detail.name === this.name && e.detail.source !== this && (this.checked = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._radioId = this.id || `scb-radio-${Math.random().toString(36).substr(2, 9)}`, document.addEventListener(
+      "scb-radio-change",
+      this._onRadioChange
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener(
+      "scb-radio-change",
+      this._onRadioChange
+    );
+  }
+  firstUpdated() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("md-radio");
+    e && e.addEventListener("input", () => {
+      this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
+    });
+  }
+  updated(e) {
+    super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled);
+  }
+  render() {
+    const e = this.supportingText ? `${this._radioId}-supporting-text` : void 0;
+    return p`
+      <label class="wrap">
+        <div class="radio-wrap">
+          <md-radio
+            id="${this._radioId}"
+            ?disabled=${this.disabled}
+            ?checked=${this.checked}
+            name="${this.name}"
+            value="${this.value}"
+            aria-describedby=${e}
+            @change=${this._onMdRadioChange}
+          ></md-radio>
+        </div>
+        ${this.label ? p`<span class="lbl">${this.label}</span>` : ""}
+      </label>
+      ${this.supportingText ? p`<div
+            id="${this._radioId}-supporting-text"
+            class="supporting-text"
+          >
+            ${this.supportingText}
+          </div>` : ""}
+      <slot></slot>
+    `;
+  }
+};
+r.styles = h`
+    /* layout med inline-grid */
+    :host {
+      display: inline-grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto auto;
+      row-gap: 4px;
+      font-family: var(--brand-font, 'Inter', sans-serif);
+    }
+
+    /* Wrapper för md-radio + label */
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      /* låt ripple/state-layer synas */
+      overflow: visible;
+    }
+    :host([disabled]) .wrap {
+      cursor: default;
+    }
+
+    /* Hit-yta runt md-radio (styr via variabel) */
+    .radio-wrap {
+      height: var(--scb-radio-target, 48px);
+      width: var(--scb-radio-target, 48px);
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      overflow: visible;
+    }
+
+    /* Nollställ md-radio marginal */
+    md-radio {
+      margin: 0;
+    }
+
+    /* Label-styling */
+    .lbl {
+      color: var(--md-sys-color-on-surface);
+      line-height: 1.2;
+      margin-top: 2px;
+    }
+    :host([disabled]) .lbl {
+      color: var(--n-60);
+    }
+
+    /* Supporting text styling */
+    .supporting-text {
+      color: var(--md-sys-color-on-surface-variant);
+      line-height: 1.2;
+      /* 12px gap + wrapperbredd (inte ikonstorlek) så texten linjerar med labeln */
+      margin-left: calc(12px + var(--scb-radio-target, 48px));
+    }
+    :host([disabled]) .supporting-text {
+      color: var(--n-60);
+    }
+
+      :host([orientation="horizontal"]) {
+    margin-inline-end: var(--scb-radio-gap, 24px); /* tweakable */
+  }
+
+    /* Anpassning för mörkt läge */
+    @media (prefers-color-scheme: dark) {
+      .lbl {
+        color: var(--md-sys-color-on-surface);
+      }
+      .supporting-text {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    }
+  `;
+a([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "checked", 2);
+a([
+  s({ type: String, reflect: !0 })
+], r.prototype, "name", 2);
+a([
+  s({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+a([
+  s({ type: String })
+], r.prototype, "label", 2);
+a([
+  s({ type: String, attribute: "supporting-text" })
+], r.prototype, "supportingText", 2);
+r = a([
+  u("scb-radio-button")
+], r);
+export {
+  r as ScbRadioButton
+};

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+
+export declare class ScbRadioGroup extends LitElement {
+    #private;
+    name: string;
+    orientation: 'vertical' | 'horizontal';
+    disabled: boolean;
+    ariaLabel: string | null;
+    /** "item" (default) = radios äger spacing; "group" = gruppen äger spacing */
+    spacing: 'item' | 'group';
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-radio-group': ScbRadioGroup;
+    }
+}

package/scb-radio-button/scb-radio-group.js

@@ -0,0 +1,81 @@
+import { css as g, LitElement as u, html as f } from "lit";
+import { property as l, customElement as b } from "lit/decorators.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (t) => {
+  throw TypeError(t);
+}, o = (t, e, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? y(e, a) : e, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (s = (r ? d(e, a, s) : d(s)) || s);
+  return r && s && v(e, a, s), s;
+}, m = (t, e, a) => e.has(t) || h("Cannot " + a), c = (t, e, a) => (m(t, e, "read from private field"), a ? a.call(t) : e.get(t)), _ = (t, e, a) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), n;
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.name = "", this.orientation = "vertical", this.disabled = !1, this.ariaLabel = null, this.spacing = "item", _(this, n, () => {
+      var a;
+      const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot");
+      if (!t) return;
+      const e = t.assignedElements({ flatten: !0 }).filter((r) => r.tagName.toLowerCase() === "scb-radio-button");
+      for (const r of e)
+        this.name && r.setAttribute("name", this.name), this.disabled ? r.setAttribute("disabled", "") : r.removeAttribute("disabled"), this.orientation === "horizontal" ? r.setAttribute("orientation", "horizontal") : r.removeAttribute("orientation"), this.spacing === "group" ? r.style.setProperty("--scb-radio-gap", "0") : r.style.removeProperty("--scb-radio-gap");
+    });
+  }
+  render() {
+    const t = this.orientation === "horizontal" ? "row" : "column";
+    return f`
+      <div
+        class="g"
+        role="radiogroup"
+        aria-disabled=${String(this.disabled)}
+        aria-label=${this.ariaLabel ?? ""}
+        style=${`--_dir:${t}`}
+      >
+        <slot @slotchange=${c(this, n)}></slot>
+      </div>
+    `;
+  }
+  firstUpdated() {
+    c(this, n).call(this);
+  }
+  updated(t) {
+    (t.has("name") || t.has("disabled") || t.has("orientation")) && c(this, n).call(this);
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+i.styles = g`
+    :host { display: block; }
+
+    .g {
+      display: flex;
+      flex-direction: var(--_dir, column);
+      gap: 0; /* default: inget extra gap */
+      align-items: flex-start;
+    }
+
+    /* Om gruppen ska äga spacing: använder gap och nollar radios egen syskonmarginal */
+    :host([spacing="group"]) .g {
+      gap: var(--scb-radio-gap, 12px);
+    }
+    :host([spacing="group"]) ::slotted(scb-radio-button) {
+      --scb-radio-gap: 0;
+    }
+  `;
+o([
+  l({ type: String })
+], i.prototype, "name", 2);
+o([
+  l({ type: String, reflect: !0 })
+], i.prototype, "orientation", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  l({ type: String, attribute: "aria-label" })
+], i.prototype, "ariaLabel", 2);
+o([
+  l({ type: String, reflect: !0 })
+], i.prototype, "spacing", 2);
+i = o([
+  b("scb-radio-group")
+], i);
+export {
+  i as ScbRadioGroup
+};

package/scb-search/scb-search.d.ts

@@ -0,0 +1,45 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbSearch extends LitElement {
+    trailingIcon?: string;
+    supportingText: string;
+    value: string;
+    size: 'default' | 'compact';
+    fullScreen: boolean;
+    private _inputFocused;
+    private _visibleSuggestions;
+    private _activeIndex;
+    private _listboxId;
+    private _boundNativeKeydown?;
+    private _kbMode;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(): void;
+    render(): TemplateResult;
+    submit(): void;
+    private get _hasSuggestions();
+    private _onSlotChange;
+    private _onInput;
+    private _onFocus;
+    private _onBlur;
+    private _handleKey;
+    private _clearInput;
+    private _filterSuggestions;
+    private _inputEl;
+    private _listEl;
+    private _getVisibleItems;
+    private _getActiveItem;
+    private _moveActive;
+    private _scrollActiveIntoView;
+    private _itemPayload;
+    private _ensureListboxA11y;
+    private _ensureOptionA11y;
+    private _updateComboboxA11y;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-search': ScbSearch;
+    }
+}