scb-wc-test 0.1.115 → 0.1.116

package/scb-datepicker/scb-datepicker.js

@@ -1,21 +1,19 @@
-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 { css as m, LitElement as w, html as a } from "lit";
+import { state as p, property as u, customElement as v } from "lit/decorators.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "../scb-button/scb-button.js";
 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, 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;
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (e, t, i, d) => {
+  for (var r = d > 1 ? void 0 : d ? b(t, i) : t, n = e.length - 1, o; n >= 0; n--)
+    (o = e[n]) && (r = (d ? o(t, i, r) : o(r)) || r);
+  return d && r && _(t, i, r), r;
 };
-let a = class extends g {
+let c = class extends w {
   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._outsideClickHandler = (e) => {
-      this.variant !== "static" && this.open && (e.composedPath().includes(this) || this._close());
-    }, this._monthNames = [
+    super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "date", this.lang = "sv", this.selectedValue = "", this.open = !0, this._selectedHour = 0, this._selectedMinute = 0, this._monthNames = [
       this.lang == "sv" ? "Januari" : "January",
       this.lang == "sv" ? "Februari" : "February",
       this.lang == "sv" ? "Mars" : "March",
@@ -28,50 +26,41 @@ let a = class extends g {
       this.lang == "sv" ? "Oktober" : "October",
       (this.lang == "sv", "November"),
       (this.lang == "sv", "December")
-    ], this._prevYear = () => {
+    ], this._outsideClickHandler = (e) => {
+      this.open && (e.composedPath().includes(this) || this._close());
+    }, this._prevMonth = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      t === 0 ? this._currentDate = new Date(e - 1, 11, 1) : this._currentDate = new Date(e, t - 1, 1);
+    }, this._prevYear = () => {
       const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
       this._currentDate = new Date(e - 1, t, 1);
+    }, this._nextMonth = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      t === 11 ? this._currentDate = new Date(e + 1, 0, 1) : this._currentDate = new Date(e, t + 1, 1);
     }, this._nextYear = () => {
       const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
       this._currentDate = new Date(e + 1, t, 1);
-    }, this._prevMonth = () => {
-      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
-      this._currentDate = new Date(e, t - 1, 1);
-    }, this._nextMonth = () => {
-      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
-      this._currentDate = new Date(e, t + 1, 1);
+    }, this._onTimeChange = (e) => {
+      const t = e.target.value, [i, d] = t.split(":"), r = parseInt(i, 10), n = parseInt(d, 10);
+      this._selectedHour = isNaN(r) ? 0 : Math.max(0, Math.min(23, r)), this._selectedMinute = isNaN(n) ? 0 : Math.max(0, Math.min(59, n)), this._fireDateTimeChange();
     }, this._close = () => {
       this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
         bubbles: !0,
         composed: !0
-      })), window.removeEventListener("mousedown", this._outsideClickHandler);
+      }));
     };
   }
   updated(e) {
-    if (super.updated(e), this.variant !== "static" && this.open ? window.addEventListener("mousedown", this._outsideClickHandler) : window.removeEventListener("mousedown", this._outsideClickHandler), e.has("selectedValue") && this.selectedValue) {
+    if (super.updated(e), 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));
+      isNaN(t.getTime()) || (this._selectedDate = t, this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1), this.variant === "datetime-local" && (this._selectedHour = t.getHours(), this._selectedMinute = t.getMinutes()));
     }
   }
-  _getMonthDays(e, t) {
-    const c = new Date(e, t, 1), l = new Date(e, t + 1, 0), i = [];
-    let o = [], s = (c.getDay() + 6) % 7;
-    for (let r = 0; r < s; r++) o.push(null);
-    for (let r = 1; r <= l.getDate(); r++) {
-      const u = new Date(e, t, r);
-      o.push(u), o.length === 7 && (i.push(o), o = []);
-    }
-    if (o.length) {
-      for (; o.length < 7; ) o.push(null);
-      i.push(o);
-    }
-    return i;
-  }
   render() {
-    if (!this.open) return n``;
-    const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), c = /* @__PURE__ */ new Date(), l = this._getMonthDays(e, t), i = Array.from({ length: 101 }, (o, s) => c.getFullYear() - 50 + s);
-    return n`
-      <div class="datepicker-popup ${this.variant === "popup" ? "popup" : "static"}">
+    if (!this.open) return a``;
+    const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), i = /* @__PURE__ */ new Date(), d = this._getMonthDays(e, t), r = Array.from({ length: 101 }, (o, s) => i.getFullYear() - 50 + s), n = this.variant === "datetime-local" && !this._showMonthDropdown && !this._showYearDropdown;
+    return a`
+      <div class="datepicker-popup popup">
         <div class="header">
             <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>
@@ -112,30 +101,30 @@ let a = class extends g {
                 <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 ? a`<scb-divider></scb-divider>` : ""}
         <div class="datepicker-content" style="position:relative;">
-          ${this._showMonthDropdown ? n`
+          ${this._showMonthDropdown ? a`
             <div class="dropdown-list">
-              ${this._monthNames.map((o, s) => n`
+              ${this._monthNames.map((o, s) => a`
                 <div
-                    @keydown=${(r) => {
-      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._onMonthChangeCustom(s));
+                    @keydown=${(l) => {
+      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), this._onMonthChangeCustom(s));
     }}
                   tabindex="0"
                   class="dropdown-item${s === t ? " selected" : ""}"
                   @click=${() => this._onMonthChangeCustom(s)}
                   id=${s === t ? "selected-month" : ""}
                 >
-                ${s === t ? n`<md-icon>check</md-icon>` : ""}
+                ${s === t ? a`<md-icon>check</md-icon>` : ""}
                   ${o}
                   <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
                 </div>
               `)}
             </div>
           ` : ""}
-          ${this._showYearDropdown ? n`
+          ${this._showYearDropdown ? a`
             <div class="dropdown-list">
-              ${i.map((o) => n`
+              ${r.map((o) => a`
                 <div
                 @keydown=${(s) => {
       (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._onYearChangeCustom(o));
@@ -145,14 +134,14 @@ let a = class extends g {
                   @click=${() => this._onYearChangeCustom(o)}
                   id=${o === e ? "selected-year" : ""}
                 >
-                ${o === e ? n`<md-icon>check</md-icon>` : ""}
+                ${o === e ? a`<md-icon>check</md-icon>` : ""}
                   ${o}
                   <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
                 </div>
               `)}
             </div>
           ` : ""}
-          ${!this._showMonthDropdown && !this._showYearDropdown ? n`
+          ${!this._showMonthDropdown && !this._showYearDropdown ? a`
             <div class="datepicker-calendar">
             <table>
               <thead>
@@ -161,21 +150,21 @@ let a = class extends g {
                 </tr>
               </thead>
               <tbody>
-                ${l.map((o) => n`
+                ${d.map((o) => a`
                   <tr>
-                    ${o.map((s) => s ? n`
+                    ${o.map((s) => s ? a`
                       <td>
                         <div
-                        @keydown=${(r) => {
-      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._selectDate(s));
+                        @keydown=${(l) => {
+      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), this._selectDate(s));
     }}
                             role="button"
                             tabindex="0"
-                          class="day${this._isToday(s, c) ? " today" : ""}${this._isSelected(s) ? " selected" : ""}"
+                          class="day${this._isToday(s, i) ? " today" : ""}${this._isSelected(s) ? " selected" : ""}"
                           @click=${() => this._selectDate(s)}
                         >${s.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
                       </td>
-                    ` : n`<td></td>`)}
+                    ` : a`<td></td>`)}
                   </tr>
                 `)}
               </tbody>
@@ -183,14 +172,36 @@ let a = class extends g {
             </div>
           ` : ""}
         </div>
+        ${n ? a`
+            <div style="padding: 0 24px;">
+            <label style="display:flex;align-items:center;gap:8px;">
+                <span>${this.lang == "sv" ? "Tid:" : "Time:"}</span>
+                <scb-textfield type="time" .value=${`${String(this._selectedHour).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`} @blur=${this._onTimeChange} aria-label="${this.lang == "sv" ? "Tid" : "Time"}"></scb-textfield>
+            </label>
+            </div>
+        ` : ""}
         <div class="datepicker-footer">
-        ${!this._showMonthDropdown && !this._showYearDropdown && this.variant == "popup" ? n`
+        ${!this._showMonthDropdown && !this._showYearDropdown ? a`
             <scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
         ` : ""}
         </div>
          </div>
     `;
   }
+  _getMonthDays(e, t) {
+    const i = new Date(Date.UTC(e, t, 1)), d = new Date(Date.UTC(e, t + 1, 0)), r = [];
+    let n = [], o = i.getUTCDay(), s = o === 0 ? 6 : o - 1;
+    for (let l = 0; l < s; l++) n.push(null);
+    for (let l = 1; l <= d.getUTCDate(); l++) {
+      const g = new Date(Date.UTC(e, t, l));
+      n.push(g), n.length === 7 && (r.push(n), n = []);
+    }
+    if (n.length) {
+      for (; n.length < 7; ) n.push(null);
+      r.push(n);
+    }
+    return r;
+  }
   _toggleMonthDropdown() {
     this._showMonthDropdown = !this._showMonthDropdown, this._showMonthDropdown && (this._showYearDropdown = !1, setTimeout(() => {
       const e = this.renderRoot.querySelector("#selected-month");
@@ -218,16 +229,38 @@ let a = class extends g {
     return this._selectedDate && e.getDate() === this._selectedDate.getDate() && e.getMonth() === this._selectedDate.getMonth() && e.getFullYear() === this._selectedDate.getFullYear();
   }
   _selectDate(e) {
-    this._selectedDate = e;
-    const t = e.toISOString().slice(0, 10);
-    this.dispatchEvent(new CustomEvent("date-selected", {
-      detail: { value: t },
-      bubbles: !0,
-      composed: !0
-    }));
+    if (this._selectedDate = e, this.variant === "datetime-local") {
+      const t = new Date(e);
+      t.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0), this._selectedHour = t.getHours(), this._selectedMinute = t.getMinutes();
+      const i = (r) => r.toString().padStart(2, "0"), d = `${t.getFullYear()}-${i(t.getMonth() + 1)}-${i(t.getDate())} ${i(t.getHours())}:${i(t.getMinutes())}`;
+      this.dispatchEvent(new CustomEvent("date-selected", {
+        detail: { value: d },
+        bubbles: !0,
+        composed: !0
+      }));
+    } else {
+      const t = e.toISOString().slice(0, 10);
+      this.dispatchEvent(new CustomEvent("date-selected", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+  }
+  _fireDateTimeChange() {
+    if (this.variant === "datetime-local" && this._selectedDate) {
+      const e = new Date(this._selectedDate);
+      e.setHours(this._selectedHour ?? 0, this._selectedMinute ?? 0, 0, 0);
+      const t = (d) => d.toString().padStart(2, "0"), i = `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;
+      this.dispatchEvent(new CustomEvent("date-selected", {
+        detail: { value: i },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
   }
 };
-a.styles = [
+c.styles = [
   m`
     :host {
         --scb-datepicker-width: 380px;
@@ -396,33 +429,39 @@ a.styles = [
       }
     `
 ];
-d([
-  h()
-], a.prototype, "_currentDate", 2);
-d([
-  h()
-], a.prototype, "_selectedDate", 2);
-d([
-  h()
-], a.prototype, "_showMonthDropdown", 2);
-d([
-  h()
-], a.prototype, "_showYearDropdown", 2);
-d([
-  p({ type: String })
-], a.prototype, "variant", 2);
-d([
-  p({ type: String })
-], a.prototype, "lang", 2);
-d([
-  p({ type: String })
-], a.prototype, "selectedValue", 2);
-d([
-  p({ type: Boolean })
-], a.prototype, "open", 2);
-a = d([
-  w("scb-datepicker")
-], a);
+h([
+  p()
+], c.prototype, "_currentDate", 2);
+h([
+  p()
+], c.prototype, "_selectedDate", 2);
+h([
+  p()
+], c.prototype, "_showMonthDropdown", 2);
+h([
+  p()
+], c.prototype, "_showYearDropdown", 2);
+h([
+  u({ type: String })
+], c.prototype, "variant", 2);
+h([
+  u({ type: String })
+], c.prototype, "lang", 2);
+h([
+  u({ type: String })
+], c.prototype, "selectedValue", 2);
+h([
+  u({ type: Boolean })
+], c.prototype, "open", 2);
+h([
+  p()
+], c.prototype, "_selectedHour", 2);
+h([
+  p()
+], c.prototype, "_selectedMinute", 2);
+c = h([
+  v("scb-datepicker")
+], c);
 export {
-  a as ScbDatepicker
+  c as ScbDatepicker
 };

package/scb-textfield/scb-textfield.js

@@ -1,4 +1,4 @@
-import { css as v, LitElement as x, html as c } from "lit";
+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 "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
@@ -7,17 +7,17 @@ import "../scb-datepicker/scb-datepicker.js";
 import "../scb-icon-button/scb-icon-button.js";
 var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
   throw TypeError(t);
-}, r = (t, e, i, l) => {
-  for (var n = l > 1 ? void 0 : l ? _(e, i) : e, u = t.length - 1, b; u >= 0; u--)
-    (b = t[u]) && (n = (l ? b(e, i, n) : b(n)) || n);
-  return l && n && w(e, i, n), n;
-}, k = (t, e, i) => e.has(t) || m("Cannot " + i), $ = (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) => (k(t, e, "access private method"), i), o, f, h, p;
+}, 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 {
   constructor() {
-    super(), $(this, o), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
-      t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && d(this, o, p).call(this));
+    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));
     }, this._onGlobalPointerDown = () => {
-      this._kbShouldShowRing = !1, this._inputFocused && d(this, o, p).call(this);
+      this._kbShouldShowRing = !1, this._inputFocused && c(this, o, 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) => {
@@ -39,9 +39,9 @@ let s = class extends x {
     }, "attachInternals" in this && (this._internals = this.attachInternals());
   }
   render() {
-    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;
+    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;
     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 ? c`
+    const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, n = this.type === "search" && this.value ? d`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -76,7 +76,7 @@ let s = class extends x {
               </svg>
             </button>
           ` : null;
-    return this.type === "textarea" ? c`
+    return this.type === "textarea" ? d`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -100,7 +100,7 @@ ${this.value}</textarea
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
         </div>
-      ` : this.type === "date" ? c`
+      ` : this.type === "date" ? d`
         <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
         <span
           class="scb-textfield-supporting-text"
@@ -121,25 +121,109 @@ ${this.value}</textarea
               aria-invalid=${this.error ? "true" : "false"}
               aria-describedby=${i}
               readonly
+              @focus=${this._toggleDatepicker}
+              @click=${this._toggleDatepicker}
             />
-            ${e}
             <md-ripple></md-ripple>
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
-          <scb-icon-button
-            class="scb-textfield-datepicker-button"
-            icon="calendar_today"
+          ${this.error ? e : d`
+            <scb-icon-button
+              class="scb-textfield-datepicker-button"
+              icon="calendar_today"
+              @click=${this._toggleDatepicker}
+              aria-label="Välj datum"
+            ></scb-icon-button>`}
+          <scb-datepicker
+            .selectedValue=${this.value}
+            .open=${this._showDatepicker}
+            @date-selected=${this._onDateSelected}
+          ></scb-datepicker>
+        </div>
+      ` : this.type === "datetime-local" ? 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" style="position:relative;">
+          ${t}
+           <div class="ripple-wrapper">
+          <input
+            class="scb-textfield${this.error ? " has-error-icon" : ""}"
+            .value=${this.value}
+            type="text"
+            name="${this.name}"
+            id="${this._inputId}"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${i}
+            readonly
+            @focus=${this._toggleDatepicker}
             @click=${this._toggleDatepicker}
-            aria-label="Välj datum"
-          ></scb-icon-button>
+          />
+          
+          <md-ripple></md-ripple>
+          <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+
+          ${this.error ? e : d`
+            <scb-icon-button
+              class="scb-textfield-datepicker-button"
+              icon="calendar_today"
+              @click=${this._toggleDatepicker}
+              aria-label="Välj datum"
+            ></scb-icon-button>`}
           <scb-datepicker
-            variant="popup"
+            variant="datetime-local"
             .selectedValue=${this.value}
             .open=${this._showDatepicker}
             @date-selected=${this._onDateSelected}
           ></scb-datepicker>
         </div>
-      ` : c`
+      ` : this.type === "time" ? 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">
+          ${t}
+          <div class="ripple-wrapper">
+            <input
+              class="scb-textfield${this.error ? " has-error-icon" : ""}"
+              .value=${this.value}
+              type="time"
+              name="${this.name}"
+              id="${this._inputId}"
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              aria-invalid=${this.error ? "true" : "false"}
+              aria-describedby=${i}
+              @input=${(l) => {
+      const p = l.target;
+      if (this.value = p.value, this._internals) {
+        const h = this.disabled ? null : this.value;
+        this._internals.setFormValue(h);
+      }
+      this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+        new CustomEvent("onValueChanged", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+            />
+            ${e}
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+        </div>
+      ` : d`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
         class="scb-textfield-supporting-text"
@@ -160,7 +244,7 @@ ${this.value}</textarea
             aria-invalid=${this.error ? "true" : "false"}
             aria-describedby=${i}
           />
-          ${l}
+          ${n}
           ${e}
           <md-ripple></md-ripple>
           <md-focus-ring class="input-ring"></md-focus-ring>
@@ -177,14 +261,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 n = this.disabled ? null : this.value;
-        this._internals.setFormValue(n);
+      const n = e;
+      if (this.value = n.value, this._internals) {
+        const l = this.disabled ? null : this.value;
+        this._internals.setFormValue(l);
       }
       if (this.pattern) {
-        const n = new RegExp(this.pattern);
-        this.error = !n.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", {
@@ -198,17 +282,17 @@ ${this.value}</textarea
     }), e.addEventListener("select", () => {
       this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
     }), e.addEventListener("focus", () => {
-      this._inputFocused = !0, d(this, o, p).call(this);
+      this._inputFocused = !0, c(this, o, u).call(this);
     }), e.addEventListener("blur", () => {
-      this._inputFocused = !1, d(this, o, p).call(this);
-    })), d(this, o, f).call(this);
+      this._inputFocused = !1, c(this, o, u).call(this);
+    })), c(this, o, 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")) && d(this, o, f).call(this);
+    (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && c(this, o, f).call(this);
   }
   // Körs av webbläsaren när formuläret sätter disabled på kontrollen
   formDisabledCallback(t) {
@@ -238,8 +322,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 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;
     }
     return !0;
   }
@@ -267,16 +351,16 @@ ${this.value}</textarea
 };
 o = /* @__PURE__ */ new WeakSet();
 f = function() {
-  const t = d(this, o, h).call(this, this.spacing), e = d(this, o, h).call(this, this.spacingTop) ?? t, i = d(this, o, h).call(this, this.spacingBottom) ?? t;
+  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;
   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");
 };
-h = function(t) {
+b = 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() {
+u = 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"));
@@ -309,6 +393,12 @@ s.styles = [
       :host([type='text']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      :host([type='datetime-local']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
       :host([type='search']) {
         --scb-textfield-max-width: var(--scb-textfield-search-max-width);
       }
@@ -330,6 +420,13 @@ s.styles = [
       :host([type='date']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
+      :host([type='time']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
+      input[type="time"]::-webkit-calendar-picker-indicator {
+          display: none;
+          background: none;
+      }
 
       :host {
         display: flex;