scb-wc-test 0.1.1

package/scb-switch/scb-switch.js

@@ -0,0 +1,111 @@
+import { LitElement as b, nothing as h, html as p, css as y } from "lit";
+import { property as l, customElement as v } from "lit/decorators.js";
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (e) => {
+  throw TypeError(e);
+}, i = (e, t, s, n) => {
+  for (var r = n > 1 ? void 0 : n ? w(t, s) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (r = (n ? d(t, s, r) : d(r)) || r);
+  return n && r && g(t, s, r), r;
+}, u = (e, t, s) => t.has(e) || f("Cannot " + s), m = (e, t, s) => (u(e, t, "read from private field"), t.get(e)), _ = (e, t, s) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), x = (e, t, s, n) => (u(e, t, "write to private field"), t.set(e, s), s), o;
+let a = class extends b {
+  constructor() {
+    super(...arguments), this.label = "", this.ariaLabel = "", this.icons = !1, this.selected = !1, this.disabled = !1, this.fullWidth = !1, _(this, o, !1);
+  }
+  updated() {
+    this.toggleAttribute("aria-disabled", this.disabled);
+  }
+  async firstUpdated() {
+    var t;
+    m(this, o) || (await import("@material/web/switch/switch.js"), x(this, o, !0));
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("md-switch");
+    e == null || e.addEventListener("change", (s) => {
+      this.selected = s.target.selected, this.dispatchEvent(new CustomEvent("change", {
+        detail: { selected: this.selected },
+        bubbles: !0,
+        composed: !0
+      }));
+    });
+  }
+  render() {
+    const e = this.label.trim().length > 0, t = e ? h : this.ariaLabel || h, s = p`
+      <md-switch
+        ?icons=${this.icons}
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        aria-label=${t}
+      ></md-switch>
+    `;
+    return e ? p`
+        <label class="switch-container" ?disabled=${this.disabled}>
+          <span class="switch-label">${this.label}</span>
+          ${s}
+        </label>
+      ` : s;
+  }
+};
+o = /* @__PURE__ */ new WeakMap();
+a.styles = y`
+    :host {
+      display: block;
+    }
+
+    .switch-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: auto;
+
+      /* Gap hämtas från spacing-tokens och följer density-lägen */
+      gap: var(--scb-switch-gap, var(--spacing-3, 8px));
+
+      cursor: pointer;
+
+      /* Basfärg för innehållet. Labeln ärver om inget annat anges. */
+      color: var(--md-sys-color-on-surface);
+    }
+
+    /* När full-width är true, kör space-between + 100% bredd */
+    :host([full-width]) .switch-container {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .switch-label {
+      /* liten vertikal justering kopplad till spacing-tokens */
+      transform: translateY(var(--scb-switch-label-offset-y, var(--spacing-1, 2px)));
+
+      /* Typografiska tokens*/
+      font-family: var(--brand-font, 'Inter', sans-serif);
+      font-size: var(--md-sys-typescale-title-medium-size, 18px);
+      line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
+      font-weight: var(--md-sys-typescale-title-large-weight, 600);
+      letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+
+      /* Ärver färg från container */
+      color: var(--scb-switch-label-color, inherit);
+    }
+  `;
+i([
+  l({ type: String })
+], a.prototype, "label", 2);
+i([
+  l({ type: String, reflect: !0, attribute: "aria-label" })
+], a.prototype, "ariaLabel", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "icons", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "selected", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+i([
+  l({ type: Boolean, reflect: !0, attribute: "full-width" })
+], a.prototype, "fullWidth", 2);
+a = i([
+  v("scb-switch")
+], a);
+export {
+  a as ScbSwitch
+};

package/scb-tabs/scb-primary-tab.d.ts

@@ -0,0 +1,17 @@
+import { MdPrimaryTab } from '@material/web/tabs/primary-tab.js';
+import { PropertyValues } from 'lit';
+
+export declare class ScbPrimaryTab extends MdPrimaryTab {
+    connectedCallback(): void;
+    private _icon?;
+    get icon(): string | undefined;
+    set icon(value: string | undefined);
+    iconOnly: boolean;
+    inlineIcon: boolean;
+    protected firstUpdated(changed: PropertyValues): void;
+    private _onActivate;
+    protected updated(): void;
+    static styles: import('lit').CSSResultOrNative[];
+    private ensureMdIconLoaded;
+    private updateIconSlot;
+}

package/scb-tabs/scb-primary-tab.js

@@ -0,0 +1,93 @@
+import { MdPrimaryTab as d } from "@material/web/tabs/primary-tab.js";
+import { property as l, customElement as p } from "lit/decorators.js";
+import { css as u } from "lit";
+var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? b(e, r) : e, c = t.length - 1, a; c >= 0; c--)
+    (a = t[c]) && (o = (n ? a(e, r, o) : a(o)) || o);
+  return n && o && h(e, r, o), o;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.iconOnly = !1, this.inlineIcon = !1, this._onActivate = () => {
+      var e;
+      const t = ((e = this.textContent) == null ? void 0 : e.trim()) ?? "";
+      this.dispatchEvent(new CustomEvent("activate", {
+        detail: { label: t },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  /* Semantisk role för en enskild flik */
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tab");
+  }
+  get icon() {
+    return this._icon;
+  }
+  set icon(t) {
+    const e = this._icon;
+    e !== t && (this._icon = t, this.requestUpdate("icon", e), this.updateIconSlot());
+  }
+  /*
+    Efter första render, fånga click och dispatcha eget 'activate'-event
+    med detail.label för enklare hantering hos konsumenter.
+   */
+  firstUpdated(t) {
+    super.firstUpdated(t), this.addEventListener("click", this._onActivate), this._icon && this.updateIconSlot();
+  }
+  /*
+    Körs efter varje uppdatering.
+    - Sätter aria-selected baserat på active.
+    - Om iconOnly utan egen aria-label: fallback till slot-texten.
+  */
+  updated() {
+    var t;
+    if (super.updated(), this.setAttribute("aria-selected", this.active ? "true" : "false"), this.iconOnly && !this.hasAttribute("aria-label")) {
+      const e = ((t = this.textContent) == null ? void 0 : t.trim()) ?? "";
+      e && this.setAttribute("aria-label", e);
+    }
+  }
+  // Lazy import av md-icon – laddas EN gång globalt när det behövs
+  async ensureMdIconLoaded() {
+    const t = globalThis;
+    t.__mdIconLoaded || (await import("@material/web/icon/icon.js"), t.__mdIconLoaded = !0);
+  }
+  async updateIconSlot() {
+    const t = this.querySelector('md-icon[slot="icon"]');
+    if (!this._icon) {
+      t == null || t.remove();
+      return;
+    }
+    if (await this.ensureMdIconLoaded(), t)
+      t.textContent = this._icon;
+    else {
+      const e = document.createElement("md-icon");
+      e.setAttribute("slot", "icon"), e.textContent = this._icon, this.appendChild(e);
+    }
+  }
+};
+i.styles = [
+  ...d.styles,
+  u`
+      /* Icon-only: dölj textslot */
+      :host([icon-only]) slot:not([name='icon']) {
+        display: none;
+      }
+    `
+];
+s([
+  l({ type: String })
+], i.prototype, "icon", 1);
+s([
+  l({ type: Boolean, reflect: !0, attribute: "icon-only" })
+], i.prototype, "iconOnly", 2);
+s([
+  l({ type: Boolean, reflect: !0, attribute: "inline-icon" })
+], i.prototype, "inlineIcon", 2);
+i = s([
+  p("scb-primary-tab")
+], i);
+export {
+  i as ScbPrimaryTab
+};

package/scb-tabs/scb-secondary-tab.d.ts

@@ -0,0 +1,17 @@
+import { MdSecondaryTab } from '@material/web/tabs/secondary-tab.js';
+import { PropertyValues } from 'lit';
+
+export declare class ScbSecondaryTab extends MdSecondaryTab {
+    /** Semantisk role för en enskild flik */
+    connectedCallback(): void;
+    private _icon?;
+    get icon(): string | undefined;
+    set icon(value: string | undefined);
+    iconOnly: boolean;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(): void;
+    private _onActivate;
+    static styles: import('lit').CSSResultOrNative[];
+    private ensureMdIconLoaded;
+    private updateIconSlot;
+}

package/scb-tabs/scb-secondary-tab.js

@@ -0,0 +1,97 @@
+import { MdSecondaryTab as l } from "@material/web/tabs/secondary-tab.js";
+import { property as d, customElement as h } from "lit/decorators.js";
+import { css as p } from "lit";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, e, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? b(e, i) : e, c = t.length - 1, r; c >= 0; c--)
+    (r = t[c]) && (o = (s ? r(e, i, o) : r(o)) || o);
+  return s && o && u(e, i, o), o;
+};
+let n = class extends l {
+  constructor() {
+    super(...arguments), this.iconOnly = !1, this._onActivate = () => {
+      var e;
+      const t = ((e = this.textContent) == null ? void 0 : e.trim()) ?? "";
+      this.dispatchEvent(
+        new CustomEvent("activate", {
+          detail: { label: t },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  /** Semantisk role för en enskild flik */
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tab");
+  }
+  get icon() {
+    return this._icon;
+  }
+  set icon(t) {
+    const e = this._icon;
+    e !== t && (this._icon = t, this.requestUpdate("icon", e), this.updateIconSlot());
+  }
+  /*
+    Efter första render:
+    - Sätt fallback aria-label om iconOnly används utan egen label.
+    - Fånga click och dispatcha ett 'activate'-event med detail.label.
+  */
+  firstUpdated(t) {
+    var e;
+    if (super.firstUpdated(t), this.iconOnly && !this.hasAttribute("aria-label")) {
+      const i = ((e = this.textContent) == null ? void 0 : e.trim()) ?? "";
+      i && this.setAttribute("aria-label", i);
+    }
+    this.addEventListener("click", this._onActivate), this._icon && this.updateIconSlot();
+  }
+  /*
+    Körs efter varje uppdatering.
+    - Hanterar fallback aria-label för icon-only.
+  */
+  updated() {
+    var t;
+    if (super.updated(), this.iconOnly && !this.hasAttribute("aria-label")) {
+      const e = ((t = this.textContent) == null ? void 0 : t.trim()) ?? "";
+      e && this.setAttribute("aria-label", e);
+    }
+  }
+  //  Lazy import av md-icon – laddas EN gång globalt 
+  async ensureMdIconLoaded() {
+    const t = globalThis;
+    t.__mdIconLoaded || (await import("@material/web/icon/icon.js"), t.__mdIconLoaded = !0);
+  }
+  async updateIconSlot() {
+    const t = this.querySelector('md-icon[slot="icon"]');
+    if (!this._icon) {
+      t == null || t.remove();
+      return;
+    }
+    if (await this.ensureMdIconLoaded(), t)
+      t.textContent = this._icon;
+    else {
+      const e = document.createElement("md-icon");
+      e.setAttribute("slot", "icon"), e.textContent = this._icon, this.appendChild(e);
+    }
+  }
+};
+n.styles = [
+  ...l.styles,
+  p`
+      /* Icon-only: göm all text utom slot="icon" */
+      :host([icon-only]) slot:not([name='icon']) {
+        display: none;
+      }
+    `
+];
+a([
+  d({ type: String })
+], n.prototype, "icon", 1);
+a([
+  d({ type: Boolean, reflect: !0, attribute: "icon-only" })
+], n.prototype, "iconOnly", 2);
+n = a([
+  h("scb-secondary-tab")
+], n);
+export {
+  n as ScbSecondaryTab
+};

package/scb-tabs/scb-tabs.d.ts

@@ -0,0 +1,10 @@
+import { MdTabs } from '@material/web/tabs/tabs.js';
+
+export declare class ScbTabs extends MdTabs {
+    ariaLabel: string;
+    private _isDispatching;
+    static styles: import('lit').CSSResultOrNative[];
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: Map<string, unknown>): void;
+    private _onChange;
+}

package/scb-tabs/scb-tabs.js

@@ -0,0 +1,66 @@
+import { MdTabs as l } from "@material/web/tabs/tabs.js";
+import { property as d, customElement as m } from "lit/decorators.js";
+import { css as p } from "lit";
+import "./scb-primary-tab.js";
+import "./scb-secondary-tab.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (r, t, s, e) => {
+  for (var a = e > 1 ? void 0 : e ? v(t, s) : t, i = r.length - 1, c; i >= 0; i--)
+    (c = r[i]) && (a = (e ? c(t, s, a) : c(a)) || a);
+  return e && a && b(t, s, a), a;
+};
+let o = class extends l {
+  constructor() {
+    super(...arguments), this.ariaLabel = "", this._isDispatching = !1, this._onChange = (r) => {
+      if (!r.composed && !this._isDispatching) {
+        r.stopPropagation(), this._isDispatching = !0;
+        const t = r.target.activeTabIndex;
+        this.dispatchEvent(new CustomEvent("change", {
+          detail: { activeTabIndex: t },
+          bubbles: !0,
+          composed: !0
+        })), this._isDispatching = !1;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tablist");
+  }
+  firstUpdated(r) {
+    super.firstUpdated(r), this.addEventListener("change", this._onChange);
+  }
+};
+o.styles = [
+  ...l.styles,
+  p`
+    :host {
+      /*Containerfärg */
+      --md-primary-tab-container-color: var(--md-sys-color-surface);
+      --md-secondary-tab-container-color: var(--md-sys-color-surface);
+
+      /* Text- och ikonfärger */
+      --md-primary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+      --md-secondary-tab-label-text-color: var(--md-sys-color-on-surface-variant);
+      --md-primary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+      --md-secondary-tab-active-label-text-color: var(--md-sys-color-on-surface);
+
+      /* Indikator och divider */
+      --md-primary-tab-active-indicator-color: var(--md-sys-color-primary);
+      --md-primary-tab-divider-color: var(--md-sys-color-outline-variant);
+      --md-secondary-tab-divider-color: var(--md-sys-color-outline-variant);
+
+      /* State layers (hover/press) */
+      --md-primary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+      --md-secondary-tab-hover-state-layer-color: var(--md-sys-color-on-surface);
+    }
+
+  `
+];
+n([
+  d({ type: String, reflect: !0, attribute: "aria-label" })
+], o.prototype, "ariaLabel", 2);
+o = n([
+  m("scb-tabs")
+], o);
+export {
+  o as ScbTabs
+};

package/scb-textfield/scb-textfield.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+
+declare global {
+    interface Window {
+        __scb_md_icon_loaded?: boolean;
+    }
+}
+export declare class ScbTextField2 extends LitElement {
+    type: 'number' | 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'textarea' | 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
+    label: string;
+    supportingText: string;
+    errorText: string;
+    leadingIcon: string;
+    name: string;
+    pattern: string;
+    value: string;
+    underLabel: string;
+    error: boolean;
+    disabled: boolean;
+    required: boolean;
+    private _form;
+    private _formSubmitHandler;
+    private _formResetHandler;
+    private _initialValue;
+    private _inputId;
+    static styles: import('lit').CSSResult[];
+    render(): TemplateResult;
+    /**
+     Vi re-dispatchar inbyggda "input", "change" och "select" events med { bubbles: true, composed: true },
+     så att konsumenter kan lyssna på events direkt från <scb-text-field>. Vi kör också ett customevent onValueChanged.
+    */
+    firstUpdated(changedProperties: Map<string, unknown>): void;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Kallar på reportValidity på den inbyggda input/textarea och sätter felstatus till error-text.
+     */
+    reportValidity(): boolean;
+    private __ensureMdIconLoaded;
+}