scb-wc-test 0.1.99 → 0.1.100

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

@@ -1,29 +1,43 @@
 import { LitElement, TemplateResult, PropertyValues } from 'lit';
+type IconVariant = 'filled' | 'outlined' | 'filled-tonal' | 'standard';
 export declare class ScbIconButton extends LitElement {
-    ariaLabel: string;
-    tooltip: string;
-    variant: 'filled' | 'outlined' | 'filled-tonal' | 'standard';
+    /** Visuell ikon. */
     icon: string;
+    /** Tooltiptext. Används som native title. */
+    tooltip: string;
+    /** Tillgänglighetslabel. Speglas till md-icon-button. */
+    ariaLabel: string;
+    /** Variant enligt Material. */
+    variant: IconVariant;
+    /** Toggle-läge. */
     toggle: boolean;
+    /** Om komponenten är vald i toggle-läge. */
     selected: boolean;
+    /** Ikon i otoggla(t) läge. */
     toggleofficon: string;
+    /** Ikon i togglat läge. */
     toggleonicon: string;
+    /** Inaktiverad. */
     disabled: boolean;
     private __loadedVariants;
     private __iconLoaded;
-    private __lastBtn?;
-    private __ariaObserver?;
+    private __lastMdHost;
     protected firstUpdated(): Promise<void>;
     protected updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     private __ensureDepsLoaded;
+    /** Hitta md-* host i shadow DOM. */
     private __getMdHost;
-    private __getInnerButton;
-    private __stripNativeTitles;
-    private __syncAria;
+    /** Synka selected från md-* upp till wrappern och emit change. */
     private __onInnerChange;
+    /** Koppla change-event från md-* samt spegla selected. */
     private __attachChangeListener;
+    /**
+     * Synkar native title och aria-* mellan host och md-*. */
+    private __syncTitleAndAria;
     static styles: import('lit').CSSResult;
+    private __renderToggleIcons;
+    private __renderSingleIcon;
     private __renderMd;
     render(): TemplateResult;
 }
@@ -32,3 +46,4 @@ declare global {
         'scb-icon-button': ScbIconButton;
     }
 }
+export {};

package/scb-icon-button/scb-icon-button.js

@@ -1,15 +1,14 @@
-import { css as p, LitElement as m, html as s } from "lit";
-import { property as d, customElement as f } from "lit/decorators.js";
+import { css as h, LitElement as u, html as o } from "lit";
+import { property as a, customElement as _ } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-import "../scb-tooltip/scb-tooltip.js";
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (t, e, i, r) => {
-  for (var n = r > 1 ? void 0 : r ? v(e, i) : e, u = t.length - 1, a; u >= 0; u--)
-    (a = t[u]) && (n = (r ? a(e, i, n) : a(n)) || n);
-  return r && n && g(e, i, n), n;
+var b = Object.defineProperty, p = Object.getOwnPropertyDescriptor, n = (t, e, l, r) => {
+  for (var s = r > 1 ? void 0 : r ? p(e, l) : e, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (s = (r ? c(e, l, s) : c(s)) || s);
+  return r && s && b(e, l, s), s;
 };
-let o = class extends m {
+let i = class extends u {
   constructor() {
-    super(...arguments), this.ariaLabel = "", this.tooltip = "", this.variant = "standard", this.icon = "home", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__onInnerChange = () => {
+    super(...arguments), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
       const t = this.__getMdHost(), e = !!(t != null && t.selected);
       this.toggle && (this.selected = e), this.dispatchEvent(
         new CustomEvent("change", {
@@ -21,18 +20,24 @@ let o = class extends m {
     };
   }
   async firstUpdated() {
-    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncAria();
+    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria();
   }
   updated(t) {
-    super.updated(t), t.has("variant") || t.has("toggle") || t.has("icon") || t.has("ariaLabel") || t.has("selected") || t.has("disabled") || t.has("tooltip") ? this.__ensureDepsLoaded().then(
-      () => queueMicrotask(() => {
-        this.__attachChangeListener(), this.__syncAria();
-      })
-    ) : queueMicrotask(() => this.__attachChangeListener());
+    if (super.updated(t), t.has("variant")) {
+      this.__ensureDepsLoaded().then(() => {
+        queueMicrotask(() => {
+          this.__attachChangeListener(), this.__syncTitleAndAria();
+        });
+      });
+      return;
+    }
+    (t.has("toggle") || t.has("icon") || t.has("toggleofficon") || t.has("toggleonicon") || t.has("selected") || t.has("disabled") || t.has("tooltip") || t.has("ariaLabel")) && queueMicrotask(() => {
+      this.__attachChangeListener(), this.__syncTitleAndAria();
+    });
   }
   disconnectedCallback() {
-    var t, e, i;
-    super.disconnectedCallback(), (e = (t = this.__lastBtn) == null ? void 0 : t.removeEventListener) == null || e.call(t, "change", this.__onInnerChange), this.__lastBtn = null, (i = this.__ariaObserver) == null || i.disconnect();
+    var t, e;
+    (e = (t = this.__lastMdHost) == null ? void 0 : t.removeEventListener) == null || e.call(t, "change", this.__onInnerChange), this.__lastMdHost = null, super.disconnectedCallback();
   }
   async __ensureDepsLoaded() {
     if (!this.__loadedVariants.has(this.variant)) {
@@ -54,172 +59,140 @@ let o = class extends m {
     }
     this.__iconLoaded || (await import("@material/web/icon/icon.js"), this.__iconLoaded = !0);
   }
-  // Hämta md-* host. Om den är inuti <scb-tooltip>, sök i dess light DOM.
+  /** Hitta md-* host i shadow DOM. */
   __getMdHost() {
-    const t = this.renderRoot.querySelector(
+    return this.renderRoot.querySelector(
       "md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button"
     );
-    if (t) return t;
-    const e = this.renderRoot.querySelector("scb-tooltip");
-    if (e) {
-      const i = e.querySelector(
-        "md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button"
-      );
-      if (i) return i;
-    }
-    return null;
-  }
-  __getInnerButton(t) {
-    const e = t == null ? void 0 : t.shadowRoot;
-    return e ? e.querySelector("button") || e.querySelector('[role="button"]') : null;
   }
-  // Ta bort alla native title-tooltips (förhindrar visning av t.ex. ikonnamn).
-  __stripNativeTitles(t) {
-    if (!t) return;
-    t.removeAttribute("title");
-    const e = this.__getInnerButton(t);
-    e == null || e.removeAttribute("title");
-    const i = t.shadowRoot;
-    i && i.querySelectorAll("[title]").forEach((r) => r.removeAttribute("title"));
-  }
-  __syncAria() {
-    var u;
+  /** Koppla change-event från md-* samt spegla selected. */
+  __attachChangeListener() {
+    var e, l;
     const t = this.__getMdHost();
-    if (!t) return;
-    const e = this.__getInnerButton(t), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim() || this.icon.trim(), r = this.getAttribute("aria-controls"), n = this.getAttribute("aria-expanded");
-    e && (i ? e.setAttribute("aria-label", i) : e.removeAttribute("aria-label"), r !== null ? e.setAttribute("aria-controls", r) : e.removeAttribute("aria-controls"), n !== null ? e.setAttribute("aria-expanded", n) : e.removeAttribute("aria-expanded"), e.removeAttribute("title")), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), t.removeAttribute("title"), this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.hasAttribute("aria-controls") && this.removeAttribute("aria-controls"), this.hasAttribute("aria-expanded") && this.removeAttribute("aria-expanded"), this.__stripNativeTitles(t), (u = this.__ariaObserver) == null || u.disconnect(), this.__ariaObserver = new MutationObserver(() => {
-      const a = this.__getMdHost(), c = this.__getInnerButton(a);
-      if (!a || !c) return;
-      const b = (this.ariaLabel || this.getAttribute("aria-label") || "").trim() || this.icon.trim(), h = this.getAttribute("aria-controls"), _ = this.getAttribute("aria-expanded");
-      b ? c.setAttribute("aria-label", b) : c.removeAttribute("aria-label"), h !== null ? c.setAttribute("aria-controls", h) : c.removeAttribute("aria-controls"), _ !== null ? c.setAttribute("aria-expanded", _) : c.removeAttribute("aria-expanded"), this.__stripNativeTitles(a), a.removeAttribute("aria-label"), a.removeAttribute("aria-controls"), a.removeAttribute("aria-expanded"), a.removeAttribute("title"), this.hasAttribute("aria-label") && this.removeAttribute("aria-label"), this.hasAttribute("aria-controls") && this.removeAttribute("aria-controls"), this.hasAttribute("aria-expanded") && this.removeAttribute("aria-expanded");
-    }), this.__ariaObserver.observe(this, {
-      attributes: !0,
-      attributeFilter: ["aria-label", "aria-controls", "aria-expanded"]
-    });
+    t && t !== this.__lastMdHost && ((l = (e = this.__lastMdHost) == null ? void 0 : e.removeEventListener) == null || l.call(e, "change", this.__onInnerChange), t.addEventListener("change", this.__onInnerChange), this.__lastMdHost = t), this.toggle && t && "selected" in t && (t.selected = this.selected);
   }
-  __attachChangeListener() {
-    var e, i;
+  /**
+   * Synkar native title och aria-* mellan host och md-*. */
+  __syncTitleAndAria() {
     const t = this.__getMdHost();
-    t && t !== this.__lastBtn && ((i = (e = this.__lastBtn) == null ? void 0 : e.removeEventListener) == null || i.call(e, "change", this.__onInnerChange), t.addEventListener("change", this.__onInnerChange), this.__lastBtn = t), this.toggle && t && "selected" in t && (t.selected = this.selected), this.__stripNativeTitles(t || null);
+    if (!t) return;
+    const e = (this.tooltip || this.getAttribute("title") || "").trim(), l = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), r = this.getAttribute("aria-controls"), s = this.getAttribute("aria-expanded");
+    this.tooltip && this.setAttribute("title", e);
+    const d = l || e || this.icon.trim() || void 0;
+    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), r !== null ? t.setAttribute("aria-controls", r) : t.removeAttribute("aria-controls"), s !== null ? t.setAttribute("aria-expanded", s) : t.removeAttribute("aria-expanded");
   }
-  __renderMd(t = !1) {
-    const e = !!t, i = s`
+  __renderToggleIcons() {
+    return o`
       <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
       <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
-    `, r = s`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+    `;
+  }
+  __renderSingleIcon() {
+    return o`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+  }
+  __renderMd() {
+    const t = this.toggle ? this.__renderToggleIcons() : this.__renderSingleIcon();
     if (this.toggle)
       switch (this.variant) {
         case "filled":
-          return s`
+          return o`
             <md-filled-icon-button
-              ?scb-tooltip-button=${e}
               toggle
               ?selected=${this.selected}
               ?disabled=${this.disabled}
-            >${i}</md-filled-icon-button>
+            >
+              ${t}
+            </md-filled-icon-button>
           `;
         case "outlined":
-          return s`
+          return o`
             <md-outlined-icon-button
-              ?scb-tooltip-button=${e}
               toggle
               ?selected=${this.selected}
               ?disabled=${this.disabled}
-            >${i}</md-outlined-icon-button>
+            >
+              ${t}
+            </md-outlined-icon-button>
           `;
         case "filled-tonal":
-          return s`
+          return o`
             <md-filled-tonal-icon-button
-              ?scb-tooltip-button=${e}
               toggle
               ?selected=${this.selected}
               ?disabled=${this.disabled}
-            >${i}</md-filled-tonal-icon-button>
+            >
+              ${t}
+            </md-filled-tonal-icon-button>
           `;
         default:
-          return s`
-            <md-icon-button
-              ?scb-tooltip-button=${e}
-              toggle
-              ?selected=${this.selected}
-              ?disabled=${this.disabled}
-            >${i}</md-icon-button>
+          return o`
+            <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled}>
+              ${t}
+            </md-icon-button>
           `;
       }
     switch (this.variant) {
       case "filled":
-        return s`
-          <md-filled-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
-            ${r}
+        return o`
+          <md-filled-icon-button ?disabled=${this.disabled}>
+            ${t}
           </md-filled-icon-button>
         `;
       case "outlined":
-        return s`
-          <md-outlined-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
-            ${r}
+        return o`
+          <md-outlined-icon-button ?disabled=${this.disabled}>
+            ${t}
           </md-outlined-icon-button>
         `;
       case "filled-tonal":
-        return s`
-          <md-filled-tonal-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
-            ${r}
+        return o`
+          <md-filled-tonal-icon-button ?disabled=${this.disabled}>
+            ${t}
           </md-filled-tonal-icon-button>
         `;
       default:
-        return s`
-          <md-icon-button ?scb-tooltip-button=${e} ?disabled=${this.disabled}>
-            ${r}
+        return o`
+          <md-icon-button ?disabled=${this.disabled}>
+            ${t}
           </md-icon-button>
         `;
     }
   }
   render() {
-    const t = (this.tooltip || this.ariaLabel || "").trim();
-    return t ? s`
-        <scb-tooltip
-          variant="plain"
-          position="top"
-          trigger="hover"
-          .delay=${0.12}
-          .arrow=${!0}
-          supporting-text=${t}
-        >
-          ${this.__renderMd(!0)}
-        </scb-tooltip>
-      ` : this.__renderMd(!1);
+    return this.__renderMd();
   }
 };
-o.styles = p``;
-l([
-  d({ type: String, attribute: "aria-label" })
-], o.prototype, "ariaLabel", 2);
-l([
-  d({ type: String })
-], o.prototype, "tooltip", 2);
-l([
-  d({ type: String })
-], o.prototype, "variant", 2);
-l([
-  d({ type: String })
-], o.prototype, "icon", 2);
-l([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "toggle", 2);
-l([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "selected", 2);
-l([
-  d({ type: String })
-], o.prototype, "toggleofficon", 2);
-l([
-  d({ type: String })
-], o.prototype, "toggleonicon", 2);
-l([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-o = l([
-  f("scb-icon-button")
-], o);
+i.styles = h``;
+n([
+  a({ type: String })
+], i.prototype, "icon", 2);
+n([
+  a({ type: String })
+], i.prototype, "tooltip", 2);
+n([
+  a({ type: String, attribute: "aria-label" })
+], i.prototype, "ariaLabel", 2);
+n([
+  a({ type: String })
+], i.prototype, "variant", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "toggle", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "selected", 2);
+n([
+  a({ type: String })
+], i.prototype, "toggleofficon", 2);
+n([
+  a({ type: String })
+], i.prototype, "toggleonicon", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+i = n([
+  _("scb-icon-button")
+], i);
 export {
-  o as ScbIconButton
+  i as ScbIconButton
 };