scb-wc-test 0.1.1

package/scb-checkbox/scb-checkbox.js

@@ -0,0 +1,157 @@
+import { css as d, LitElement as h, html as p } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
+import "@material/web/checkbox/checkbox.js";
+var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (e, r, s, c) => {
+  for (var o = c > 1 ? void 0 : c ? g(r, s) : r, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (o = (c ? n(r, s, o) : n(o)) || o);
+  return c && o && u(r, s, o), o;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.indeterminate = !1, this.checked = !1, this.label = "", this.supportingText = "", this._checkboxId = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._checkboxId = this.id || `scb-checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  firstUpdated() {
+    var r;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("md-checkbox");
+    e && e.addEventListener("change", () => {
+      const s = e.checked;
+      this.checked = s, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: s },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    });
+  }
+  updated(e) {
+    super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled);
+  }
+  render() {
+    const e = this.supportingText ? `${this._checkboxId}-supporting-text` : void 0;
+    return p`
+      <label class="wrap">
+        <div class="box-wrap">
+          <md-checkbox
+            id="${this._checkboxId}"
+            touch-target="wrapper"
+            ?disabled=${this.disabled}
+            ?indeterminate=${this.indeterminate}
+            ?checked=${this.checked}
+            aria-describedby=${e}
+          ></md-checkbox>
+        </div>
+        ${this.label ? p`<span class="lbl">${this.label}</span>` : ""}
+      </label>
+
+      ${this.supportingText ? p`<div id="${this._checkboxId}-supporting-text" class="supporting-text">
+            ${this.supportingText}
+          </div>` : ""}
+
+      <slot></slot>
+    `;
+  }
+};
+t.styles = d`
+    /* Grundläggande 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);
+    }
+
+    /* Mer luft till höger i horisontella layouter (sätts av checkbox-gruppen) */
+    :host([orientation="horizontal"]) {
+      margin-inline-end: var(--scb-checkbox-gap, 24px);
+    }
+
+    /* Wrapper för md-checkbox + label
+       48px kontrollblock + 12px textgap (matchar radio) */
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      overflow: visible; /* låt ripple synas */
+    }
+    :host([disabled]) .wrap {
+      cursor: default;
+    }
+
+    /* Hit-target runt själva md-checkboxen (48px) */
+    .box-wrap {
+      height: var(--scb-checkbox-target, 48px);
+      width: var(--scb-checkbox-target, 48px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+    }
+
+    /* Nollställ md-checkbox marginal */
+    md-checkbox {
+      margin: 0;
+    }
+
+    /* Visa focusring ENDAST vid tangentbordsfokus.
+       Vid musklick (focus men inte focus-visible) görs den transparent. */
+    md-checkbox:focus:not(:focus-visible) {
+      --md-focus-ring-color: transparent;
+      --md-focus-ring-width: 0;
+      outline: none;
+      box-shadow: none;
+    }
+
+    /* 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) + 48px (box-wrap) -> linjerar med label */
+      margin-left: calc(12px + var(--scb-checkbox-target, 48px));
+    }
+    :host([disabled]) .supporting-text {
+      color: var(--n-60);
+    }
+
+    /* 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); }
+    }
+  `;
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+i([
+  a({ type: String })
+], t.prototype, "label", 2);
+i([
+  a({ type: String, attribute: "supporting-text" })
+], t.prototype, "supportingText", 2);
+t = i([
+  b("scb-checkbox")
+], t);
+export {
+  t as ScbCheckbox
+};

package/scb-chips/scb-chip.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+
+export declare class ScbChip extends LitElement {
+    variant: 'assist' | 'filter';
+    label: string;
+    icon: string;
+    disabled: boolean;
+    elevated: boolean;
+    removable: boolean;
+    selected: boolean;
+    private __loadedVariants;
+    private __chipSetLoaded;
+    private __iconLoaded;
+    protected updated(changed: PropertyValues): void;
+    protected firstUpdated(): void;
+    private __ensureDepsLoaded;
+    static styles: import('lit').CSSResult;
+    private get _insideChipSet();
+    render(): TemplateResult;
+    private _renderChip;
+    private _toggleSelected;
+    private _onRemove;
+    private _forward;
+}

package/scb-chips/scb-chip.js

@@ -0,0 +1,150 @@
+import { css as n, LitElement as p, html as r } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (e, o, d, l) => {
+  for (var i = l > 1 ? void 0 : l ? _(o, d) : o, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (i = (l ? h(o, d, i) : h(i)) || i);
+  return l && i && u(o, d, i), i;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "assist", this.label = "", this.icon = "", this.disabled = !1, this.elevated = !1, this.removable = !1, this.selected = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__chipSetLoaded = !1, this.__iconLoaded = !1;
+  }
+  // aria-disabled på host
+  updated(e) {
+    super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), (e.has("variant") || e.has("icon")) && this.__ensureDepsLoaded();
+  }
+  // Kör dynamisk import första gången komponenten finns i DOM
+  firstUpdated() {
+    this.__ensureDepsLoaded();
+  }
+  /* Ladda in nödvändiga Material-web-komponenter vid behov (variant + ev. chip-set + ev. ikon) */
+  async __ensureDepsLoaded() {
+    if (!this.__loadedVariants.has(this.variant)) {
+      switch (this.variant) {
+        case "assist":
+          await import("@material/web/chips/assist-chip.js");
+          break;
+        case "filter":
+          await import("@material/web/chips/filter-chip.js");
+          break;
+      }
+      this.__loadedVariants.add(this.variant);
+    }
+    !this._insideChipSet && !this.__chipSetLoaded && (await import("@material/web/chips/chip-set.js"), this.__chipSetLoaded = !0), this.icon && !this.__iconLoaded && (await import("@material/web/icon/icon.js"), this.__iconLoaded = !0);
+  }
+  get _insideChipSet() {
+    return !!this.closest("md-chip-set");
+  }
+  render() {
+    const e = this._renderChip();
+    return this._insideChipSet ? e : r`<md-chip-set>${e}</md-chip-set>`;
+  }
+  _renderChip() {
+    const e = this.icon ? r`<md-icon slot="icon">${this.icon}</md-icon>` : null;
+    switch (this.variant) {
+      case "assist":
+        return r`
+          <md-assist-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?elevated=${this.elevated}
+            @update-focus=${this._forward}
+          >
+            ${e}
+          </md-assist-chip>
+        `;
+      case "filter":
+        return r`
+          <md-filter-chip
+            label=${this.label}
+            ?disabled=${this.disabled}
+            ?removable=${this.removable}
+            ?selected=${this.selected}
+            aria-pressed="${this.selected}"
+            @remove=${this._onRemove}
+            @update-focus=${this._forward}
+            @click=${() => this._toggleSelected()}
+          >
+            ${e}
+          </md-filter-chip>
+        `;
+      default:
+        return r``;
+    }
+  }
+  _toggleSelected() {
+    this.selected = !this.selected, this.dispatchEvent(new CustomEvent("selected-changed", {
+      detail: { selected: this.selected },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _onRemove(e) {
+    e.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("remove", {
+        detail: { label: this.label },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _forward(e) {
+    this.dispatchEvent(
+      new CustomEvent(e.type, {
+        detail: e.detail,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+t.styles = n`
+    :host {
+      display: inline-block;
+    }
+
+    /* Sätt samma färg på label för assist som är på filter */
+    :host md-assist-chip {
+      --_label-text-color: var(--md-sys-color-on-surface-variant);
+      --_hover-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_focus-label-text-color: var(--md-sys-color-on-surface-variant);
+      --_pressed-label-text-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    md-icon {
+      color: var(--p-20);
+      font-size: var(--scb-icon-size-large);
+    }
+    @media (prefers-color-scheme: dark) {
+      md-icon {
+        color: var(--md-sys-color-on-surface);
+      }
+    }
+  `;
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+s([
+  a({ type: String })
+], t.prototype, "label", 2);
+s([
+  a({ type: String })
+], t.prototype, "icon", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "elevated", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "removable", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "selected", 2);
+t = s([
+  m("scb-chip")
+], t);
+export {
+  t as ScbChip
+};

package/scb-dialog/scb-dialog.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+
+type Variant = 'basic' | 'alert' | 'confirm' | 'choose' | 'form' | 'floating';
+type FormMethod = '' | 'GET' | 'POST' | 'PUT' | 'DELETE';
+export declare class ScbDialog extends LitElement {
+    open: boolean;
+    inSb: boolean;
+    scrimClose: boolean;
+    variant: Variant;
+    label: string;
+    icon: string;
+    supportingText: string;
+    okButton: string;
+    cancelButton: string;
+    deleteButton: string;
+    confirmButton: string;
+    denyButton: string;
+    resetButton: string;
+    submitButton: string;
+    formId: string;
+    formAction: string;
+    formMethod: FormMethod;
+    private __lastTriggerEl;
+    private __slotDeps;
+    static styles: import('lit').CSSResult;
+    protected firstUpdated(): Promise<void>;
+    private __ensureSlottedDeps;
+    private __getActionFromEvent;
+    private __onDocumentClick;
+    private __onDocumentKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(ch: Map<string, unknown>): void;
+    private __updateTriggersExpanded;
+    private __toggleScrollLock;
+    private __setOpen;
+    private __fire;
+    private __onScrimClick;
+    private __onOk;
+    private __onCancel;
+    private __onConfirm;
+    private __onDeny;
+    private __onReset;
+    private __onSubmit;
+    private __onKeydownTrap;
+    private __slotIsEmpty;
+    private renderHeader;
+    private renderContentDefault;
+    private renderActions;
+    private renderBody;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-dialog': ScbDialog;
+    }
+}
+export {};