scb-wc-test 0.1.118 → 0.1.120

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

@@ -7,6 +7,13 @@ export declare class ScbTextField extends LitElement {
     private _kbShouldShowRing;
     private _onGlobalKeydown;
     private _onGlobalPointerDown;
+    private _hasRenderedOnce;
+    private _boundField;
+    private _onFieldInput;
+    private _onFieldChange;
+    private _onFieldSelect;
+    private _onFieldFocus;
+    private _onFieldBlur;
     constructor();
     type: 'number' | 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'textarea' | 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
     label: string;

package/scb-textfield/scb-textfield.js

@@ -1,23 +1,46 @@
-import { css as v, LitElement as x, html as d } from "lit";
-import { property as a, state as g, customElement as y } from "lit/decorators.js";
+import { css as _, LitElement as w, html as o } from "lit";
+import { property as n, state as $, customElement as k } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 import "@material/web/focus/md-focus-ring.js";
 import "../scb-datepicker/scb-datepicker.js";
 import "../scb-icon-button/scb-icon-button.js";
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, g = (t) => {
   throw TypeError(t);
-}, r = (t, e, i, n) => {
-  for (var l = n > 1 ? void 0 : n ? _(e, i) : e, p = t.length - 1, h; p >= 0; p--)
-    (h = t[p]) && (l = (n ? h(e, i, l) : h(l)) || l);
-  return n && l && w(e, i, l), l;
-}, $ = (t, e, i) => e.has(t) || m("Cannot " + i), k = (t, e, i) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), c = (t, e, i) => ($(t, e, "access private method"), i), o, f, b, u;
-let s = class extends x {
+}, a = (t, e, i, d) => {
+  for (var c = d > 1 ? void 0 : d ? S(e, i) : e, p = t.length - 1, h; p >= 0; p--)
+    (h = t[p]) && (c = (d ? h(e, i, c) : h(c)) || c);
+  return d && c && E(e, i, c), c;
+}, L = (t, e, i) => e.has(t) || g("Cannot " + i), F = (t, e, i) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), l = (t, e, i) => (L(t, e, "access private method"), i), r, f, b, m, v, x, y, u;
+let s = class extends w {
   constructor() {
-    super(), k(this, o), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
-      t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && c(this, o, u).call(this));
+    super(), F(this, r), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
+      t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && l(this, r, u).call(this));
     }, this._onGlobalPointerDown = () => {
-      this._kbShouldShowRing = !1, this._inputFocused && c(this, o, u).call(this);
+      this._kbShouldShowRing = !1, this._inputFocused && l(this, r, u).call(this);
+    }, this._hasRenderedOnce = !1, this._boundField = null, this._onFieldInput = () => {
+      const t = this._boundField;
+      if (!t) return;
+      const e = t;
+      if (this.value = e.value, this._internals) {
+        const i = this.disabled ? null : this.value;
+        this._internals.setFormValue(i);
+      }
+      l(this, r, m).call(this), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+        new CustomEvent("onValueChanged", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._onFieldChange = () => {
+      this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+    }, this._onFieldSelect = () => {
+      this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
+    }, this._onFieldFocus = () => {
+      this._inputFocused = !0, l(this, r, u).call(this);
+    }, this._onFieldBlur = () => {
+      this._inputFocused = !1, l(this, r, u).call(this);
     }, 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.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", this._showDatepicker = !1, this._toggleDatepicker = () => {
       this._showDatepicker = !this._showDatepicker;
     }, this._onDateSelected = (t) => {
@@ -25,14 +48,7 @@ let s = class extends x {
         const e = this.disabled ? null : this.value;
         this._internals.setFormValue(e);
       }
-      if (this.pattern)
-        if (!this.value)
-          this.error = !1;
-        else {
-          const e = new RegExp(this.pattern);
-          this.error = !e.test(this.value);
-        }
-      this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+      l(this, r, m).call(this), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
         new CustomEvent("onValueChanged", {
           detail: { value: this.value },
           bubbles: !0,
@@ -42,9 +58,9 @@ let s = class extends x {
     }, "attachInternals" in this && (this._internals = this.attachInternals());
   }
   render() {
-    const t = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
+    const t = this.leadingIcon ? o`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? o`<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, n = this.type === "search" && this.value ? d`
+    const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, d = this.type === "search" && this.value ? o`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -52,13 +68,34 @@ let s = class extends x {
               aria-label="Rensa fält"
             >
               <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-                <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>
-                <line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2"></line>
-                <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2"></line>
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                ></circle>
+                <line
+                  x1="8"
+                  y1="8"
+                  x2="16"
+                  y2="16"
+                  stroke="currentColor"
+                  stroke-width="2"
+                ></line>
+                <line
+                  x1="16"
+                  y1="8"
+                  x2="8"
+                  y2="16"
+                  stroke="currentColor"
+                  stroke-width="2"
+                ></line>
               </svg>
             </button>
           ` : null;
-    return this.type === "textarea" ? d`
+    return this.type === "textarea" ? o`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -82,7 +119,7 @@ ${this.value}</textarea
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
         </div>
-      ` : this.type === "date" ? d`
+      ` : this.type === "date" ? o`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -109,7 +146,7 @@ ${this.value}</textarea
             <md-ripple></md-ripple>
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
-          ${this.error ? e : d`
+          ${this.error ? e : o`
                 <scb-icon-button
                   class="scb-textfield-datepicker-button"
                   icon="calendar_today"
@@ -123,7 +160,7 @@ ${this.value}</textarea
             @date-selected=${this._onDateSelected}
           ></scb-datepicker>
         </div>
-      ` : this.type === "datetime-local" ? d`
+      ` : this.type === "datetime-local" ? o`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -152,7 +189,7 @@ ${this.value}</textarea
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
 
-          ${this.error ? e : d`
+          ${this.error ? e : o`
                 <scb-icon-button
                   class="scb-textfield-datepicker-button"
                   icon="calendar_today"
@@ -167,7 +204,7 @@ ${this.value}</textarea
             @date-selected=${this._onDateSelected}
           ></scb-datepicker>
         </div>
-      ` : this.type === "time" ? d`
+      ` : this.type === "time" ? o`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -187,8 +224,8 @@ ${this.value}</textarea
               ?required=${this.required}
               aria-invalid=${this.error ? "true" : "false"}
               aria-describedby=${i}
-              @input=${(l) => {
-      const p = l.target;
+              @input=${(c) => {
+      const p = c.target;
       if (this.value = p.value, this._internals) {
         const h = this.disabled ? null : this.value;
         this._internals.setFormValue(h);
@@ -207,7 +244,7 @@ ${this.value}</textarea
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
         </div>
-      ` : d`
+      ` : o`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
         class="scb-textfield-supporting-text"
@@ -228,7 +265,7 @@ ${this.value}</textarea
             aria-invalid=${this.error ? "true" : "false"}
             aria-describedby=${i}
           />
-          ${n}
+          ${d}
           ${e}
           <md-ripple></md-ripple>
           <md-focus-ring class="input-ring"></md-focus-ring>
@@ -241,45 +278,14 @@ ${this.value}</textarea
    * Vi kör också ett customevent onValueChanged.
    */
   firstUpdated(t) {
-    var i;
-    super.firstUpdated(t), this._initialValue = this.value;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-textfield");
-    e && (e.addEventListener("input", () => {
-      const n = e;
-      if (this.value = n.value, this._internals) {
-        const l = this.disabled ? null : this.value;
-        this._internals.setFormValue(l);
-      }
-      if (this.pattern)
-        if (!this.value)
-          this.error = !1;
-        else {
-          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
-        })
-      );
-    }), e.addEventListener("change", () => {
-      this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
-    }), e.addEventListener("select", () => {
-      this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
-    }), e.addEventListener("focus", () => {
-      this._inputFocused = !0, c(this, o, u).call(this);
-    }), e.addEventListener("blur", () => {
-      this._inputFocused = !1, c(this, o, u).call(this);
-    })), c(this, o, f).call(this);
+    super.firstUpdated(t), this._initialValue = this.value, l(this, r, v).call(this), l(this, r, f).call(this), this._hasRenderedOnce = !0;
   }
   updated(t) {
     if (super.updated(t), this.toggleAttribute("aria-disabled", this.disabled), this._internals && (t.has("value") || t.has("disabled"))) {
       const e = this.disabled ? null : this.value;
       this._internals.setFormValue(e);
     }
-    (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && c(this, o, f).call(this);
+    t.has("type") && (l(this, r, v).call(this), this._hasRenderedOnce && l(this, r, y).call(this)), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && l(this, r, f).call(this);
   }
   // Körs av webbläsaren när formuläret sätter disabled på kontrollen
   formDisabledCallback(t) {
@@ -297,7 +303,7 @@ ${this.value}</textarea
     }, this._form.addEventListener("reset", this._formResetHandler, !0)), window.addEventListener("keydown", this._onGlobalKeydown, !0), window.addEventListener("pointerdown", this._onGlobalPointerDown, !0);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._form && this._formSubmitHandler && (this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0)), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0);
+    super.disconnectedCallback(), this._form && this._formSubmitHandler && (this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0)), l(this, r, x).call(this), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0);
   }
   /**
    * Kallar på reportValidity på den inbyggda input/textarea och sätter felstatus till error-text.
@@ -309,8 +315,8 @@ ${this.value}</textarea
       this.required && !t.value ? t.setCustomValidity(this.errorText || "Ogiltig inmatning.") : t.setCustomValidity("");
       const i = t.reportValidity();
       this.error = !i;
-      const n = i ? "" : this.errorText || t.validationMessage || "Ogiltig inmatning.";
-      return i || (this.errorText = n), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, n, t)), i;
+      const d = i ? "" : this.errorText || t.validationMessage || "Ogiltig inmatning.";
+      return i || (this.errorText = d), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, d, t)), i;
     }
     return !0;
   }
@@ -336,9 +342,9 @@ ${this.value}</textarea
     }
   }
 };
-o = /* @__PURE__ */ new WeakSet();
+r = /* @__PURE__ */ new WeakSet();
 f = function() {
-  const t = c(this, o, b).call(this, this.spacing), e = c(this, o, b).call(this, this.spacingTop) ?? t, i = c(this, o, b).call(this, this.spacingBottom) ?? t;
+  const t = l(this, r, b).call(this, this.spacing), e = l(this, r, b).call(this, this.spacingTop) ?? t, i = l(this, r, b).call(this, this.spacingBottom) ?? t;
   e ? this.style.setProperty("--scb-textfield-spacing-block-start", e) : this.style.removeProperty("--scb-textfield-spacing-block-start"), i ? this.style.setProperty("--scb-textfield-spacing-block-end", i) : this.style.removeProperty("--scb-textfield-spacing-block-end");
 };
 b = function(t) {
@@ -347,6 +353,33 @@ b = function(t) {
   if (e)
     return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
 };
+m = function() {
+  if (!this.pattern) return;
+  if (!this.value) {
+    this.error = !1;
+    return;
+  }
+  const t = new RegExp(this.pattern);
+  this.error = !t.test(this.value);
+};
+v = function() {
+  var e;
+  const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".scb-textfield");
+  t && (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) && this._boundField !== t && (l(this, r, x).call(this), this._boundField = t, this.type !== "time" && t.addEventListener("input", this._onFieldInput), t.addEventListener("change", this._onFieldChange), t.addEventListener("select", this._onFieldSelect), t.addEventListener("focus", this._onFieldFocus), t.addEventListener("blur", this._onFieldBlur));
+};
+x = function() {
+  const t = this._boundField;
+  t && (t.removeEventListener("input", this._onFieldInput), t.removeEventListener("change", this._onFieldChange), t.removeEventListener("select", this._onFieldSelect), t.removeEventListener("focus", this._onFieldFocus), t.removeEventListener("blur", this._onFieldBlur), this._boundField = null);
+};
+y = function() {
+  var e;
+  this._showDatepicker = !1;
+  const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".scb-textfield");
+  if (t && (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) && (t.value = "", t.setCustomValidity("")), this.value = "", this.error = !1, this._internals) {
+    const i = this.disabled ? null : "";
+    this._internals.setFormValue(i), this._internals.setValidity({});
+  }
+};
 u = function() {
   var e;
   const t = (e = this.renderRoot) == null ? void 0 : e.querySelector(".ripple-wrapper");
@@ -354,7 +387,7 @@ u = function() {
 };
 s.formAssociated = !0;
 s.styles = [
-  v`
+  _`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -598,56 +631,56 @@ s.styles = [
       }
     `
 ];
-r([
-  a({ type: String, reflect: !0 })
+a([
+  n({ type: String, reflect: !0 })
 ], s.prototype, "type", 2);
-r([
-  a({ type: String })
+a([
+  n({ type: String })
 ], s.prototype, "label", 2);
-r([
-  a({ type: String, attribute: "supporting-text" })
+a([
+  n({ type: String, attribute: "supporting-text" })
 ], s.prototype, "supportingText", 2);
-r([
-  a({ type: String, attribute: "error-text" })
+a([
+  n({ type: String, attribute: "error-text" })
 ], s.prototype, "errorText", 2);
-r([
-  a({ type: String, attribute: "leading-icon" })
+a([
+  n({ type: String, attribute: "leading-icon" })
 ], s.prototype, "leadingIcon", 2);
-r([
-  a({ type: String })
+a([
+  n({ type: String })
 ], s.prototype, "name", 2);
-r([
-  a({ type: String })
+a([
+  n({ type: String })
 ], s.prototype, "pattern", 2);
-r([
-  a({ type: String, attribute: "value" })
+a([
+  n({ type: String, attribute: "value" })
 ], s.prototype, "value", 2);
-r([
-  a({ type: String })
+a([
+  n({ type: String })
 ], s.prototype, "underLabel", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
+a([
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "error", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
+a([
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
+a([
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "required", 2);
-r([
-  a({ type: String, reflect: !0 })
+a([
+  n({ type: String, reflect: !0 })
 ], s.prototype, "spacing", 2);
-r([
-  a({ type: String, attribute: "spacing-top", reflect: !0 })
+a([
+  n({ type: String, attribute: "spacing-top", reflect: !0 })
 ], s.prototype, "spacingTop", 2);
-r([
-  a({ type: String, attribute: "spacing-bottom", reflect: !0 })
+a([
+  n({ type: String, attribute: "spacing-bottom", reflect: !0 })
 ], s.prototype, "spacingBottom", 2);
-r([
-  g()
+a([
+  $()
 ], s.prototype, "_showDatepicker", 2);
-s = r([
-  y("scb-textfield")
+s = a([
+  k("scb-textfield")
 ], s);
 export {
   s as ScbTextField

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

@@ -167,7 +167,7 @@ let a = class extends h {
                     @keydown=${this._onKeyDown}
                   >
                     <md-ripple></md-ripple>
-                    <md-icon class="toc-chevron-icon" aria-hidden="true">expand_more</md-icon>
+                    <md-icon class="toc-chevron-icon" aria-hidden="true">keyboard_arrow_down</md-icon>
                   </button>
                   <md-focus-ring for=${i} inward></md-focus-ring>
                 </div>