scb-wc-test 0.1.1

package/scb-textfield/scb-textfield.js

@@ -0,0 +1,258 @@
+import { LitElement as c, html as d, css as u } from "lit";
+import { property as o, customElement as h } from "lit/decorators.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (e, t, i, a) => {
+  for (var n = a > 1 ? void 0 : a ? f(t, i) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (n = (a ? p(t, i, n) : p(n)) || n);
+  return a && n && b(t, i, n), n;
+};
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "";
+  }
+  render() {
+    const e = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, t = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
+    this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
+    const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0;
+    return this.type === "textarea" ? d`
+        <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+        <span
+          class="scb-textfield-supporting-text"
+          id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
+        >${this.underLabel}</span>
+        <div class="scb-textfield-wrapper">
+          <textarea
+            class="scb-textfield"
+            ?disabled=${this.disabled}
+            name="${this.name}"
+            id="${this._inputId}"
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${i}
+          >${this.value}</textarea>
+        </div>
+      ` : d`
+      <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+      <span
+        class="scb-textfield-supporting-text"
+        id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
+      >${this.underLabel}</span>
+      <div class="scb-textfield-wrapper">
+        ${e}
+        <input
+          class="scb-textfield${this.error ? " has-error-icon" : ""}"
+          .value=${this.value}
+          type="${this.type}"
+          name="${this.name}"
+          id="${this._inputId}"
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${i}
+        />
+        ${t}
+      </div>
+    `;
+  }
+  /**
+   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(e) {
+    var i;
+    super.firstUpdated(e), this._initialValue = this.value, (this.leadingIcon || this.error) && this.__ensureMdIconLoaded();
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-textfield");
+    t && (t.addEventListener("input", (a) => {
+      const n = t;
+      if (this.value = n.value, this.pattern) {
+        const l = new RegExp(this.pattern);
+        this.error = !l.test(this.value);
+      }
+      this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("onValueChanged", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      }));
+    }), t.addEventListener("change", (a) => {
+      this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+    }), t.addEventListener("select", (a) => {
+      this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
+    }));
+  }
+  /* Reagera på ändringar som kan kräva att md-icon laddas in (leadingIcon / error) */
+  updated(e) {
+    super.updated(e), (e.has("leadingIcon") || e.has("error")) && (this.leadingIcon && this.leadingIcon.trim() || this.error) && this.__ensureMdIconLoaded(), this.toggleAttribute("aria-disabled", this.disabled);
+  }
+  // Om scb-textfield är inuti ett formulär
+  connectedCallback() {
+    super.connectedCallback(), this._inputId = this.id || `scb-textfield-${Math.random().toString(36).substr(2, 9)}`, this._formSubmitHandler = (e) => {
+      this.reportValidity() || (e.preventDefault(), e.stopPropagation());
+    }, this._form = this.closest("form"), this._form && (this._form.addEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler = () => {
+      var t;
+      this.value = this._initialValue;
+      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".scb-textfield");
+      e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && (e.value = this._initialValue), this.error = !1;
+    }, this._form.addEventListener("reset", this._formResetHandler, !0));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._form && this._formSubmitHandler && (this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0));
+  }
+  /**
+   * Kallar på reportValidity på den inbyggda input/textarea och sätter felstatus till error-text.
+   */
+  reportValidity() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".scb-textfield");
+    if (e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement)) {
+      this.required && !e.value ? e.setCustomValidity(this.errorText || "Ogiltig inmatning.") : e.setCustomValidity("");
+      const i = e.reportValidity();
+      return this.error = !i, i || (this.errorText = this.errorText || e.validationMessage || "Ogiltig inmatning."), i;
+    }
+    return !0;
+  }
+  /* 
+     Lazy-loader för md-icon
+  */
+  async __ensureMdIconLoaded() {
+    window.__scb_md_icon_loaded || (await import("@material/web/icon/icon.js"), window.__scb_md_icon_loaded = !0);
+  }
+};
+r.styles = [
+  u`
+      :host {
+        display: flex;
+        flex-direction: column;
+        max-width: 280px;
+        /* Följ aktuellt tema (light/dark) via tokens */
+        color: var(--md-sys-color-on-surface);
+      }
+      :host([error]) .scb-textfield-supporting-text {
+        color: var(--md-sys-color-error);
+      }
+      :host([error]) .scb-textfield {
+        border-color: var(--md-sys-color-error);
+      }
+      :host([error]) .scb-textfield:focus-visible {
+        border-color: var(--md-sys-color-error);
+        box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
+      }
+      :host([disabled]) {
+        opacity: 0.38;
+        cursor: default;
+      }
+      .scb-textfield-label {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 600;
+      }
+      .scb-textfield-supporting-text {
+        font-size: 16px;
+        line-height: 24px;
+        margin-bottom: 8px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .scb-textfield {
+        padding: 4px 16px;
+        min-height: 56px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 8px;
+        font-size: var(--md-sys-typescale-body-large-size, 16px);
+        font-family: var(--brand-font);
+        line-height: 24px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      md-icon + .scb-textfield {
+        padding-left: 48px; /* Extra padding for search icon */
+      }
+      .scb-textfield-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: 24px;
+      }
+      .scb-textfield:focus-visible {
+        /* Remove outline */
+        outline: none;
+        /* Add a thicker border inside */
+        border-color: var(--md-sys-color-primary);
+        box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
+        border: 1px solid var(--md-sys-color-primary);
+      }
+      .scb-textfield-wrapper {
+        position: relative;
+        width: 100%;
+      }
+      input::-webkit-search-cancel-button {
+        appearance: none;
+        height: 24px;
+        width: 24px;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="black" stroke-width="2"/><line x1="15" y1="9" x2="9" y2="15" stroke="black" stroke-width="2"/><line x1="9" y1="9" x2="15" y2="15" stroke="black" stroke-width="2"/></svg>') no-repeat center center;
+        background-size: 22px 22px;
+        cursor: pointer;
+      }
+      input::-webkit-search-cancel-button,
+      input::-webkit-search-decoration,
+      input::-webkit-search-results-button,
+      input::-webkit-search-results-decoration,
+      input::-webkit-clear-button {
+         filter: brightness(0) saturate(100%) invert(20%) sepia(18%) saturate(2674%) hue-rotate(196deg) brightness(91%) contrast(120%);
+         /* This filter closely matches #0f0865. */
+      }
+      .scb-textfield-error-icon {
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--md-sys-color-error);
+        font-size: 24px;
+        pointer-events: none;
+      }
+      .scb-textfield.has-error-icon {
+        padding-right: 44px; /* Adjust as needed for icon size and spacing */
+      }
+    `
+];
+s([
+  o({ type: String, reflect: !0 })
+], r.prototype, "type", 2);
+s([
+  o({ type: String })
+], r.prototype, "label", 2);
+s([
+  o({ type: String, attribute: "supporting-text" })
+], r.prototype, "supportingText", 2);
+s([
+  o({ type: String, attribute: "error-text" })
+], r.prototype, "errorText", 2);
+s([
+  o({ type: String, attribute: "leading-icon" })
+], r.prototype, "leadingIcon", 2);
+s([
+  o({ type: String })
+], r.prototype, "name", 2);
+s([
+  o({ type: String })
+], r.prototype, "pattern", 2);
+s([
+  o({ type: String, attribute: "value" })
+], r.prototype, "value", 2);
+s([
+  o({ type: String })
+], r.prototype, "underLabel", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+r = s([
+  h("scb-textfield")
+], r);
+export {
+  r as ScbTextField2
+};

package/scb-toc/scb-toc-item.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+
+export declare class ScbTocItem extends LitElement {
+    expanded: boolean;
+    label: string;
+    supportingText: string;
+    itemHref: string;
+    divider: boolean;
+    private _unique;
+    static styles: import('lit').CSSResult[];
+    private _slotHasContent;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _onSlotChange;
+    private _updateTabbable;
+    private toggleAccordion;
+    private toggleBottom;
+    private _onKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-toc/scb-toc-item.js

@@ -0,0 +1,196 @@
+import { css as p, LitElement as h, html as l } from "lit";
+import { property as d, customElement as b } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-divider/scb-divider.js";
+var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (t, o, s, e) => {
+  for (var i = e > 1 ? void 0 : e ? m(o, s) : o, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (i = (e ? a(o, s, i) : a(i)) || i);
+  return e && i && u(o, s, i), i;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.label = "", this.supportingText = "", this.itemHref = "#", this.divider = !0, this._unique = crypto.randomUUID(), this._slotHasContent = !1, this._onSlotChange = () => {
+      const t = this.renderRoot.querySelector("slot");
+      this._slotHasContent = !!t && t.assignedNodes().length > 0, this.requestUpdate(), this._updateTabbable();
+    }, this.toggleAccordion = () => {
+      const t = this.closest("scb-toc");
+      t != null && t.hasAttribute("detached") || t.querySelectorAll("scb-toc-item").forEach((e) => {
+        e !== this && e.expanded && (e.expanded = !1, this.toggleBottom(e), e.dispatchEvent(new CustomEvent("expanded-changed", {
+          detail: { expanded: !1 },
+          bubbles: !0,
+          composed: !0
+        })));
+      });
+      const o = this.expanded;
+      this.expanded = !this.expanded, this.toggleBottom(this), o !== this.expanded && this.dispatchEvent(new CustomEvent("expanded-changed", {
+        detail: { expanded: this.expanded },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("slotchange", this._onSlotChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("slotchange", this._onSlotChange);
+  }
+  updated(t) {
+    t.has("expanded") && this._updateTabbable();
+  }
+  _updateTabbable() {
+    if (typeof window > "u") return;
+    const t = this.renderRoot.querySelector("slot");
+    if (!t) return;
+    t.assignedElements({ flatten: !0 }).forEach((s) => {
+      var e;
+      s.matches("a,button,input,select,textarea,[tabindex]") && (this.expanded ? s.removeAttribute("tabindex") : s.setAttribute("tabindex", "-1")), (e = s.querySelectorAll) == null || e.call(s, "a,button,input,select,textarea,[tabindex]").forEach((i) => {
+        const n = i;
+        this.expanded ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", "-1");
+      });
+    });
+  }
+  // Animerar max-height vid öppning/stängning för snygg transition
+  toggleBottom(t) {
+    const o = t.renderRoot.querySelector(".scb-toc-item-bottom");
+    o && (t.expanded ? (o.style.maxHeight = `${o.scrollHeight}px`, setTimeout(() => o.style.maxHeight = "unset", 160)) : (o.style.maxHeight = `${o.scrollHeight}px`, requestAnimationFrame(() => o.style.maxHeight = "0")));
+  }
+  /*
+    Tangentbordsnavigering:
+    Enter/Space togglar,
+    ArrowUp/Down flyttar fokus,
+    Home/End hoppar till första/sista item.
+  */
+  _onKeyDown(t) {
+    const o = this.closest("scb-toc"), e = Array.from((o == null ? void 0 : o.querySelectorAll("scb-toc-item")) || []).map((a) => a.renderRoot.querySelector(".scb-toc-item")).filter((a) => !!a), i = t.currentTarget, n = e.indexOf(i);
+    switch (t.key) {
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.toggleAccordion();
+        break;
+      case "ArrowDown":
+        t.preventDefault(), n < e.length - 1 && e[n + 1].focus();
+        break;
+      case "ArrowUp":
+        t.preventDefault(), n > 0 && e[n - 1].focus();
+        break;
+      case "Home":
+        t.preventDefault(), e.length && e[0].focus();
+        break;
+      case "End":
+        t.preventDefault(), e.length && e[e.length - 1].focus();
+        break;
+    }
+  }
+  render() {
+    const t = `bottom-${this._unique}`;
+    return l`
+      <div
+        class="scb-toc-item"
+        role="listitem"
+        aria-expanded=${this.expanded}
+        aria-controls=${t}
+      >
+        <div class="scb-toc-item-top">
+          <div>
+            <a class="toc-item-label" href=${this.itemHref}>${this.label}</a>
+            <div class="supporting-text">${this.supportingText}</div>
+          </div>
+          ${this._slotHasContent ? l`
+            <scb-icon-button 
+              icon=${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+              ariaLabel=${this.expanded ? "Collapse section" : "Expand section"}
+              @click=${this.toggleAccordion}
+              @keydown=${this._onKeyDown} 
+            ></scb-icon-button>
+          ` : ""}
+        </div>
+        <div
+          id=${t}
+          class="scb-toc-item-bottom ${this.expanded ? "expanded" : ""}"
+        >
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+        ${this.divider ? l`<scb-divider></scb-divider>` : ""}
+      </div>
+    `;
+  }
+};
+r.styles = [
+  p`
+      .scb-toc-item-top{ 
+        padding: 24px 8px; 
+        display: flex;
+        gap: 16px;
+        flex-direction: row;
+      }
+      .toc-item-label {
+        display: block;
+        width: fit-content;
+        color: var(--md-sys-color-primary);
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 26px;
+        letter-spacing: -0.3px;
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: .1578em;
+        margin-bottom: 10px;
+        &:hover{
+            color: var(--md-sys-color-on-surface);
+            text-decoration-thickness: 2px;
+        }
+        &:focus{
+            color: var(--md-sys-color-on-surface);
+            outline-color: var(--md-sys-color-primary);
+        }
+      }
+      scb-icon-button{
+        margin-left: auto;
+      }
+      scb-divider{
+        margin: 0 8px;
+      }
+      .scb-toc-item-bottom { 
+        font-size: var(--md-sys-typescale-body-medium-size); 
+        line-height: 27px; 
+        letter-spacing: -0.3px; 
+      }
+      .scb-toc-item-bottom {
+        padding: 0 16px 0 40px;
+        max-height: 0;
+        overflow: hidden;
+        transition: .15s cubic-bezier(.69,.16,.2,.98);
+        opacity: 0;
+      }
+      .scb-toc-item-bottom.expanded {
+        opacity: 1;
+        padding: 6px 16px 16px 40px;
+        max-height: 100%;
+      }
+      .scb-toc-item{
+        color: var(--md-sys-color-on-surface);
+      }
+    `
+];
+c([
+  d({ type: Boolean })
+], r.prototype, "expanded", 2);
+c([
+  d({ type: String, reflect: !0 })
+], r.prototype, "label", 2);
+c([
+  d({ type: String, attribute: "supporting-text" })
+], r.prototype, "supportingText", 2);
+c([
+  d({ type: String, attribute: "item-href" })
+], r.prototype, "itemHref", 2);
+c([
+  d({ type: Boolean, attribute: "divider" })
+], r.prototype, "divider", 2);
+r = c([
+  b("scb-toc-item")
+], r);
+export {
+  r as ScbTocItem
+};

package/scb-toc/scb-toc.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+
+export declare class ScbToc extends LitElement {
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-toc/scb-toc.js

@@ -0,0 +1,27 @@
+import { css as n, LitElement as i, html as p } from "lit";
+import { customElement as v } from "lit/decorators.js";
+import "./scb-toc-item.js";
+var a = Object.getOwnPropertyDescriptor, f = (s, o, m, l) => {
+  for (var t = l > 1 ? void 0 : l ? a(o, m) : o, e = s.length - 1, c; e >= 0; e--)
+    (c = s[e]) && (t = c(t) || t);
+  return t;
+};
+let r = class extends i {
+  render() {
+    return p`
+      <div role="list">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [
+  n`
+    `
+];
+r = f([
+  v("scb-toc")
+], r);
+export {
+  r as ScbToc
+};

package/scb-tooltip/scb-tooltip.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbTooltip extends LitElement {
+    variant: 'plain' | 'rich';
+    arrow: boolean | null;
+    supportingtext: string;
+    label: string;
+    trigger: 'hover' | 'click' | 'hover-click';
+    position: 'top' | 'bottom' | 'left' | 'right';
+    open: boolean;
+    delay: number;
+    offset: number;
+    static styles: import('lit').CSSResult[];
+    render(): TemplateResult;
+    private _hoverActive;
+    private _clickActive;
+    private _hideTimeout;
+    protected firstUpdated(): void;
+    private setVariant;
+    private setAnchorName;
+    private setDelay;
+    private setPosition;
+    private setDefaultPosition;
+    private setOffset;
+    private handleEventlistnerClick;
+    private handleEventlistnerHover;
+    private handleEventElement;
+    private addHidden;
+    private openTooltip;
+    private closeTooltip;
+    private adjustTooltipPosition;
+}