scb-wc-test 0.1.108 → 0.1.110

package/scb-datepicker/scb-datepicker.js

@@ -1,4 +1,4 @@
-import { css as g, LitElement as m, html as n } from "lit";
+import { css as m, LitElement as g, html as n } from "lit";
 import { state as h, property as p, customElement as w } from "lit/decorators.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-button/scb-button.js";
@@ -6,14 +6,16 @@ import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 import "@material/web/focus/md-focus-ring.js";
 import "../scb-divider/scb-divider.js";
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (e, t, c, l) => {
-  for (var i = l > 1 ? void 0 : l ? _(t, c) : t, o = e.length - 1, s; o >= 0; o--)
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (e, t, c, l) => {
+  for (var i = l > 1 ? void 0 : l ? b(t, c) : t, o = e.length - 1, s; o >= 0; o--)
     (s = e[o]) && (i = (l ? s(t, c, i) : s(i)) || i);
   return l && i && v(t, c, i), i;
 };
-let a = class extends m {
+let a = class extends g {
   constructor() {
-    super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "static", this.lang = "sv", this.selectedValue = "", this.open = !0, this._monthNames = [
+    super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "static", this.lang = "sv", this.selectedValue = "", this.open = !0, this._outsideClickHandler = (e) => {
+      this.variant !== "static" && this.open && (e.composedPath().includes(this) || this._close());
+    }, this._monthNames = [
       this.lang == "sv" ? "Januari" : "January",
       this.lang == "sv" ? "Februari" : "February",
       this.lang == "sv" ? "Mars" : "March",
@@ -42,11 +44,11 @@ let a = class extends m {
       this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
         bubbles: !0,
         composed: !0
-      }));
+      })), window.removeEventListener("mousedown", this._outsideClickHandler);
     };
   }
   updated(e) {
-    if (super.updated(e), e.has("selectedValue") && this.selectedValue) {
+    if (super.updated(e), this.variant !== "static" && this.open ? window.addEventListener("mousedown", this._outsideClickHandler) : window.removeEventListener("mousedown", this._outsideClickHandler), e.has("selectedValue") && this.selectedValue) {
       const t = new Date(this.selectedValue);
       isNaN(t.getTime()) || (this._selectedDate = t, this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1));
     }
@@ -74,37 +76,43 @@ let a = class extends m {
             <div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
                 <scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang == "sv" ? "Föregående månad" : "Previous month"}></scb-icon-button>
                 <div class="custom-dropdown month-dropdown">
-                    <div 
-                    @keydown=${(o) => {
+                      <div
+                        tabindex=${this._showYearDropdown ? -1 : 0}
+                        class="dropdown-selected"
+                        @click=${() => this._toggleMonthDropdown()}
+                        @keydown=${(o) => {
       (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleMonthDropdown());
     }}
-                    tabindex="0" class="dropdown-selected" @click=${() => this._toggleMonthDropdown()}>
+                      >
                         ${this._monthNames[t].slice(0, 3)}
                         <md-icon>arrow_drop_down</md-icon>
                         <md-focus-ring></md-focus-ring>
                         <md-ripple></md-ripple>
-                    </div>
+                      </div>
                 </div>
                 <scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang == "sv" ? "Nästa månad" : "Next month"}></scb-icon-button>
             </div>
             <div class="year-selector ${this._showMonthDropdown ? "disable" : ""} ${this._showYearDropdown ? "open" : ""}">
                 <scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang == "sv" ? "Föregående år" : "Previous year"}></scb-icon-button>
                     <div class="custom-dropdown year-dropdown">
-                        <div 
-                        @keydown=${(o) => {
+                        <div
+                          tabindex=${this._showMonthDropdown ? -1 : 0}
+                          class="dropdown-selected"
+                          @click=${() => this._toggleYearDropdown()}
+                          @keydown=${(o) => {
       (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleYearDropdown());
     }}
-                        tabindex="0" class="dropdown-selected" @click=${() => this._toggleYearDropdown()}>
-                            ${e}
-                            <md-icon>arrow_drop_down</md-icon>
-                            <md-focus-ring></md-focus-ring>
-                            <md-ripple></md-ripple>
+                        >
+                          ${e}
+                          <md-icon>arrow_drop_down</md-icon>
+                          <md-focus-ring></md-focus-ring>
+                          <md-ripple></md-ripple>
                         </div>
                     </div>
                 <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
             </div>
         </div>
-                ${this._showMonthDropdown || this._showYearDropdown ? n`<scb-divider></scb-divider>` : ""}
+        ${this._showMonthDropdown || this._showYearDropdown ? n`<scb-divider></scb-divider>` : ""}
         <div class="datepicker-content" style="position:relative;">
           ${this._showMonthDropdown ? n`
             <div class="dropdown-list">
@@ -176,7 +184,7 @@ let a = class extends m {
           ` : ""}
         </div>
         <div class="datepicker-footer">
-        ${!this._showMonthDropdown && !this._showYearDropdown ? n`
+        ${!this._showMonthDropdown && !this._showYearDropdown && this.variant == "popup" ? n`
             <scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
         ` : ""}
         </div>
@@ -220,12 +228,13 @@ let a = class extends m {
   }
 };
 a.styles = [
-  g`
+  m`
     :host {
         --scb-datepicker-width: 380px;
-        width: var(--scb-datepicker-width);
+        max-width: var(--scb-datepicker-width);
         font-family: var(--brand-font);
         color: var(--md-sys-color-on-surface);
+        display: block;
     }
     .month-selector, .year-selector {
       display: flex;
@@ -297,9 +306,24 @@ a.styles = [
         font-family: var(--brand-font);
       }
       .datepicker-content{
-         overflow-y: auto;
-         max-height: 260px;
+        overflow-y: auto;
+        max-height: 290px;
       }
+      		.datepicker-content::-webkit-scrollbar {
+				width: 12px;
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
+			.datepicker-content::-webkit-scrollbar-thumb {
+				background: var(--md-sys-color-outline);
+				border-radius: var(--md-sys-shape-corner-small);
+				border: 4px solid var(--md-sys-color-surface);
+				
+			}
+			.datepicker-content::-webkit-scrollbar-track {
+				background: var(--md-sys-color-surface);
+				border-radius: var(--md-sys-shape-corner-small);
+			}
       .popup {
         position:absolute;
         top:110%;
@@ -310,8 +334,8 @@ a.styles = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-bottom: 12px;
-        padding: 16px 24px 0 16px;
+        margin-bottom: 30px;
+        padding: 20px 16px 0px 16px;
         flex-wrap: wrap;
       }
       .datepicker-footer{
@@ -333,7 +357,7 @@ a.styles = [
         color: var(--md-sys-color-on-surface-variant, #757575);
         font-size: 16px;
         font-weight: 600;
-        padding: 4px;
+        padding-bottom: 20px;
       }
       td {
         text-align: center;

package/scb-search/scb-search.js

@@ -427,7 +427,7 @@ a.styles = y`
       line-height: var(--scb-search-line-height);
 
       color: var(--md-sys-color-on-surface);
-      background: var(--md-sys-color-surface);
+      background: transparent;
 
       position: relative;
       z-index: 1;
@@ -473,7 +473,7 @@ a.styles = y`
       left: 0;
       width: 100%;
       z-index: 10;
-      background: var(--md-sys-color-surface);
+      background: var(--md-sys-color-surface-container-lowest);
       border: var(--stroke-border, 1px) solid var(--md-sys-color-outline);
       border-top: 0;
       border-radius: 0 0 var(--scb-search-open-radius) var(--scb-search-open-radius);

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

@@ -3,6 +3,10 @@ export declare class ScbTextField extends LitElement {
     #private;
     static formAssociated: boolean;
     private _internals;
+    private _inputFocused;
+    private _kbShouldShowRing;
+    private _onGlobalKeydown;
+    private _onGlobalPointerDown;
     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,17 +1,23 @@
-import { css as m, LitElement as x, html as d } from "lit";
-import { property as a, customElement as v } from "lit/decorators.js";
+import { css as v, LitElement as x, html as c } from "lit";
+import { property as a, customElement as y } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "../scb-datepicker/scb-datepicker.js";
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, f = (t) => {
+import "@material/web/ripple/ripple.js";
+import "@material/web/focus/md-focus-ring.js";
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, m = (t) => {
   throw TypeError(t);
-}, r = (t, e, i, l) => {
-  for (var o = l > 1 ? void 0 : l ? g(e, i) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (o = (l ? u(e, i, o) : u(o)) || o);
-  return l && o && y(e, i, o), o;
-}, _ = (t, e, i) => e.has(t) || f("Cannot " + i), w = (t, e, i) => e.has(t) ? f("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), n, b, p;
+}, r = (t, e, i, o) => {
+  for (var l = o > 1 ? void 0 : o ? w(e, i) : e, u = t.length - 1, b; u >= 0; u--)
+    (b = t[u]) && (l = (o ? b(e, i, l) : b(l)) || l);
+  return o && l && g(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), d = (t, e, i) => (_(t, e, "access private method"), i), n, f, h, p;
 let s = class extends x {
   constructor() {
-    super(), w(this, n), this._internals = null, 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 = () => {
+    super(), k(this, n), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
+      t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && d(this, n, p).call(this));
+    }, this._onGlobalPointerDown = () => {
+      this._kbShouldShowRing = !1, this._inputFocused && d(this, n, p).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) => {
       this.value = t.detail.value, this._showDatepicker = !1, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
@@ -24,9 +30,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 ? c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? c`<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, l = this.type === "search" && this.value ? d`
+    const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, o = this.type === "search" && this.value ? c`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -61,14 +67,14 @@ let s = class extends x {
               </svg>
             </button>
           ` : null;
-    return this.type === "textarea" ? d`
+    return this.type === "textarea" ? c`
         <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">
+        <div class="scb-textfield-wrapper ripple-wrapper">
           <textarea
             class="scb-textfield"
             ?disabled=${this.disabled}
@@ -80,8 +86,10 @@ let s = class extends x {
           >
 ${this.value}</textarea
           >
+          <md-ripple></md-ripple>
+          <md-focus-ring class="input-ring"></md-focus-ring>
         </div>
-      ` : this.type === "date" ? d`
+      ` : this.type === "date" ? c`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -111,14 +119,14 @@ ${this.value}</textarea
           ></scb-datepicker>
           ${e}
         </div>
-      ` : d`
+      ` : c`
       <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">
+      <div class="scb-textfield-wrapper ripple-wrapper">
         ${t}
         <input
           class="scb-textfield${this.error ? " has-error-icon" : ""}"
@@ -131,8 +139,10 @@ ${this.value}</textarea
           aria-invalid=${this.error ? "true" : "false"}
           aria-describedby=${i}
         />
-        ${l}
+        ${o}
         ${e}
+        <md-ripple></md-ripple>
+        <md-focus-ring class="input-ring"></md-focus-ring>
       </div>
     `;
   }
@@ -145,14 +155,14 @@ ${this.value}</textarea
     super.firstUpdated(t), this._initialValue = this.value;
     const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-textfield");
     e && (e.addEventListener("input", () => {
-      const l = e;
-      if (this.value = l.value, this._internals) {
-        const o = this.disabled ? null : this.value;
-        this._internals.setFormValue(o);
+      const o = e;
+      if (this.value = o.value, this._internals) {
+        const l = this.disabled ? null : this.value;
+        this._internals.setFormValue(l);
       }
       if (this.pattern) {
-        const o = new RegExp(this.pattern);
-        this.error = !o.test(this.value);
+        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", {
@@ -165,14 +175,18 @@ ${this.value}</textarea
       this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
     }), e.addEventListener("select", () => {
       this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
-    })), c(this, n, b).call(this);
+    }), e.addEventListener("focus", () => {
+      this._inputFocused = !0, d(this, n, p).call(this);
+    }), e.addEventListener("blur", () => {
+      this._inputFocused = !1, d(this, n, p).call(this);
+    })), d(this, n, f).call(this);
   }
   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, n, b).call(this);
+    (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && d(this, n, f).call(this);
   }
   // Körs av webbläsaren när formuläret sätter disabled på kontrollen
   formDisabledCallback(t) {
@@ -187,10 +201,10 @@ ${this.value}</textarea
       this.value = this._initialValue;
       const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".scb-textfield");
       t && (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) && (t.value = this._initialValue), this.error = !1;
-    }, this._form.addEventListener("reset", this._formResetHandler, !0));
+    }, 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));
+    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);
   }
   /**
    * Kallar på reportValidity på den inbyggda input/textarea och sätter felstatus till error-text.
@@ -202,8 +216,8 @@ ${this.value}</textarea
       this.required && !t.value ? t.setCustomValidity(this.errorText || "Ogiltig inmatning.") : t.setCustomValidity("");
       const i = t.reportValidity();
       this.error = !i;
-      const l = i ? "" : this.errorText || t.validationMessage || "Ogiltig inmatning.";
-      return i || (this.errorText = l), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, l, t)), i;
+      const o = i ? "" : this.errorText || t.validationMessage || "Ogiltig inmatning.";
+      return i || (this.errorText = o), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, o, t)), i;
     }
     return !0;
   }
@@ -230,19 +244,24 @@ ${this.value}</textarea
   }
 };
 n = /* @__PURE__ */ new WeakSet();
-b = function() {
-  const t = c(this, n, p).call(this, this.spacing), e = c(this, n, p).call(this, this.spacingTop) ?? t, i = c(this, n, p).call(this, this.spacingBottom) ?? t;
+f = function() {
+  const t = d(this, n, h).call(this, this.spacing), e = d(this, n, h).call(this, this.spacingTop) ?? t, i = d(this, n, h).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");
 };
-p = function(t) {
+h = function(t) {
   if (!t) return;
   const e = String(t).trim();
   if (e)
     return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
 };
+p = function() {
+  var e;
+  const t = (e = this.renderRoot) == null ? void 0 : e.querySelector(".ripple-wrapper");
+  t && (this._inputFocused && this._kbShouldShowRing ? t.setAttribute("data-kb-focus", "true") : t.removeAttribute("data-kb-focus"));
+};
 s.formAssociated = !0;
 s.styles = [
-  m`
+  v`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -258,6 +277,8 @@ s.styles = [
         /* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
         margin-block-start: var(--scb-textfield-spacing-block-start, 0);
         margin-block-end: var(--scb-textfield-spacing-block-end, 0);
+
+        -webkit-tap-highlight-color: transparent;
       }
 
       :host([type='number']) {
@@ -337,6 +358,8 @@ s.styles = [
         box-sizing: border-box;
         background-color: transparent;
         color: var(--md-sys-color-on-surface);
+        position: relative;
+        z-index: 1;
       }
 
       :host([type='search']) .scb-textfield {
@@ -354,6 +377,7 @@ s.styles = [
         transform: translateY(-50%);
         pointer-events: none;
         font-size: var(--scale-06);
+        z-index: 2;
       }
 
       .scb-textfield:focus-visible {
@@ -368,6 +392,35 @@ s.styles = [
         width: 100%;
       }
 
+      /* Wrapper som bär ripple och md-focus-ring */
+      .ripple-wrapper {
+        position: relative;
+        width: 100%;
+      }
+
+      md-focus-ring.input-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(--md-sys-shape-corner-small);
+        z-index: 3;
+      }
+
+      .ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
+        display: block;
+      }
+
+      md-ripple {
+        border-radius: var(--md-sys-shape-corner-small);
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        pointer-events: none;
+        --md-ripple-hover-color: transparent;
+        --md-ripple-hover-opacity: 0;
+      }
+
       input[type='search']::-webkit-search-cancel-button {
         appearance: none;
         display: none;
@@ -381,6 +434,7 @@ s.styles = [
         pointer-events: none;
         font-size: var(--scale-06);
         color: var(--md-sys-color-error);
+        z-index: 2;
       }
 
       .scb-textfield.has-error-icon {
@@ -406,6 +460,7 @@ s.styles = [
         justify-content: center;
         cursor: pointer;
         color: var(--md-sys-color-on-surface);
+        z-index: 2;
       }
 
       :host([error]) .scb-textfield-clear {
@@ -473,7 +528,7 @@ r([
   a({ type: Boolean })
 ], s.prototype, "_showDatepicker", 2);
 s = r([
-  v("scb-textfield")
+  y("scb-textfield")
 ], s);
 export {
   s as ScbTextField