scb-wc-test 0.1.116 → 0.1.117

package/mvc/components/scb-textfield/scb-textfield.js

@@ -1,4 +1,4 @@
-import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,l,n){try{customElements.get(i)||e(i,l,n)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var n=l>1?void 0:l?w(e,i):e,p=t.length-1,h;p>=0;p--)(h=t[p])&&(n=(l?h(e,i,n):h(n))||n);return l&&n&&_(e,i,n),n},$=(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 g{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))},this._onGlobalPointerDown=()=>{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=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}if(this.pattern){const e=new RegExp(this.pattern);this.error=!e.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}))},"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;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`
+import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,l,n){try{customElements.get(i)||e(i,l,n)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var n=l>1?void 0:l?w(e,i):e,p=t.length-1,h;p>=0;p--)(h=t[p])&&(n=(l?h(e,i,n):h(n))||n);return l&&n&&_(e,i,n),n},$=(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 g{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))},this._onGlobalPointerDown=()=>{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=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){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(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"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;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`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -6,30 +6,9 @@ import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";im
               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`
@@ -84,12 +63,13 @@ ${this.value}</textarea
             <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-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}
@@ -105,33 +85,34 @@ ${this.value}</textarea
         >
         <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}
-          />
-          
-          <md-ripple></md-ripple>
-          <md-focus-ring class="input-ring"></md-focus-ring>
+          <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}
+            />
+
+            <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-icon-button
+                  class="scb-textfield-datepicker-button"
+                  icon="calendar_today"
+                  @click=${this._toggleDatepicker}
+                  aria-label="Välj datum"
+                ></scb-icon-button>
+              `}
           <scb-datepicker
             variant="datetime-local"
             .selectedValue=${this.value}
@@ -193,7 +174,7 @@ ${this.value}</textarea
           <md-focus-ring class="input-ring"></md-focus-ring>
         </div>
       </div>
-    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const l=this.disabled?null:this.value;this._internals.setFormValue(l)}if(this.pattern){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)}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)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},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)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};o=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;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){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};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
+    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.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)}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)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},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)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};o=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;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){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};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -249,9 +230,9 @@ ${this.value}</textarea
       :host([type='time']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
-      input[type="time"]::-webkit-calendar-picker-indicator {
-          display: none;
-          background: none;
+      input[type='time']::-webkit-calendar-picker-indicator {
+        display: none;
+        background: none;
       }
 
       :host {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.116",
+    "version":  "0.1.117",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -345,5 +345,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "227F3119B18DEE6767015D3DC4AF88BD68195127792285728F8C3D4A93FEC42D"
+    "buildHash":  "03ECEAD50961B1BBA8E3789EBE4A84C4722E11CFD45A579261C40482660A244E"
 }

package/scb-textfield/scb-textfield.js

@@ -25,10 +25,13 @@ let s = class extends x {
         const e = this.disabled ? null : this.value;
         this._internals.setFormValue(e);
       }
-      if (this.pattern) {
-        const e = new RegExp(this.pattern);
-        this.error = !e.test(this.value);
-      }
+      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(
         new CustomEvent("onValueChanged", {
           detail: { value: this.value },
@@ -49,30 +52,9 @@ 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;
@@ -128,12 +110,13 @@ ${this.value}</textarea
             <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-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}
@@ -149,33 +132,34 @@ ${this.value}</textarea
         >
         <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}
-          />
-          
-          <md-ripple></md-ripple>
-          <md-focus-ring class="input-ring"></md-focus-ring>
+          <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}
+            />
+
+            <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-icon-button
+                  class="scb-textfield-datepicker-button"
+                  icon="calendar_today"
+                  @click=${this._toggleDatepicker}
+                  aria-label="Välj datum"
+                ></scb-icon-button>
+              `}
           <scb-datepicker
             variant="datetime-local"
             .selectedValue=${this.value}
@@ -266,10 +250,13 @@ ${this.value}</textarea
         const l = this.disabled ? null : this.value;
         this._internals.setFormValue(l);
       }
-      if (this.pattern) {
-        const l = new RegExp(this.pattern);
-        this.error = !l.test(this.value);
-      }
+      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 },
@@ -423,9 +410,9 @@ s.styles = [
       :host([type='time']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
-      input[type="time"]::-webkit-calendar-picker-indicator {
-          display: none;
-          background: none;
+      input[type='time']::-webkit-calendar-picker-indicator {
+        display: none;
+        background: none;
       }
 
       :host {

package/scb-wc-test.bundle.js

@@ -4241,7 +4241,7 @@ var ScbWcTest=function(a){"use strict";var kl;function d(o,e,t,i){var r=argument
       .close-datepicker:hover {
         background: var(--md-sys-color-primary-container, #e3f2fd);
       }
-    `],Ce([w()],a.ScbDatepicker.prototype,"_currentDate",2),Ce([w()],a.ScbDatepicker.prototype,"_selectedDate",2),Ce([w()],a.ScbDatepicker.prototype,"_showMonthDropdown",2),Ce([w()],a.ScbDatepicker.prototype,"_showYearDropdown",2),Ce([n({type:String})],a.ScbDatepicker.prototype,"variant",2),Ce([n({type:String})],a.ScbDatepicker.prototype,"lang",2),Ce([n({type:String})],a.ScbDatepicker.prototype,"selectedValue",2),Ce([n({type:Boolean})],a.ScbDatepicker.prototype,"open",2),Ce([w()],a.ScbDatepicker.prototype,"_selectedHour",2),Ce([w()],a.ScbDatepicker.prototype,"_selectedMinute",2),a.ScbDatepicker=Ce([g("scb-datepicker")],a.ScbDatepicker);var zp=Object.defineProperty,Ip=Object.getOwnPropertyDescriptor,Kn=o=>{throw TypeError(o)},Y=(o,e,t,i)=>{for(var r=i>1?void 0:i?Ip(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&zp(e,t,r),r},Pp=(o,e,t)=>e.has(o)||Kn("Cannot "+t),Op=(o,e,t)=>e.has(o)?Kn("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),Ke=(o,e,t)=>(Pp(o,e,"access private method"),t),Ee,Ha,Zr,Oi;a.ScbTextField=class extends y{constructor(){super(),Op(this,Ee),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&Ke(this,Ee,Oi).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&Ke(this,Ee,Oi).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=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}if(this.pattern){const t=new RegExp(this.pattern);this.error=!t.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}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const e=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=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,r=this.type==="search"&&this.value?c`
+    `],Ce([w()],a.ScbDatepicker.prototype,"_currentDate",2),Ce([w()],a.ScbDatepicker.prototype,"_selectedDate",2),Ce([w()],a.ScbDatepicker.prototype,"_showMonthDropdown",2),Ce([w()],a.ScbDatepicker.prototype,"_showYearDropdown",2),Ce([n({type:String})],a.ScbDatepicker.prototype,"variant",2),Ce([n({type:String})],a.ScbDatepicker.prototype,"lang",2),Ce([n({type:String})],a.ScbDatepicker.prototype,"selectedValue",2),Ce([n({type:Boolean})],a.ScbDatepicker.prototype,"open",2),Ce([w()],a.ScbDatepicker.prototype,"_selectedHour",2),Ce([w()],a.ScbDatepicker.prototype,"_selectedMinute",2),a.ScbDatepicker=Ce([g("scb-datepicker")],a.ScbDatepicker);var zp=Object.defineProperty,Ip=Object.getOwnPropertyDescriptor,Kn=o=>{throw TypeError(o)},Y=(o,e,t,i)=>{for(var r=i>1?void 0:i?Ip(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&zp(e,t,r),r},Pp=(o,e,t)=>e.has(o)||Kn("Cannot "+t),Op=(o,e,t)=>e.has(o)?Kn("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),Ke=(o,e,t)=>(Pp(o,e,"access private method"),t),Ee,Ha,Zr,Oi;a.ScbTextField=class extends y{constructor(){super(),Op(this,Ee),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&Ke(this,Ee,Oi).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&Ke(this,Ee,Oi).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=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}if(this.pattern)if(!this.value)this.error=!1;else{const t=new RegExp(this.pattern);this.error=!t.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}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const e=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=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,r=this.type==="search"&&this.value?c`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -4249,30 +4249,9 @@ var ScbWcTest=function(a){"use strict";var kl;function d(o,e,t,i){var r=argument
               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"?c`
@@ -4327,12 +4306,13 @@ ${this.value}</textarea
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
           ${this.error?t:c`
-            <scb-icon-button
-              class="scb-textfield-datepicker-button"
-              icon="calendar_today"
-              @click=${this._toggleDatepicker}
-              aria-label="Välj datum"
-            ></scb-icon-button>`}
+                <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}
@@ -4348,33 +4328,34 @@ ${this.value}</textarea
         >
         <div class="scb-textfield-wrapper" style="position:relative;">
           ${e}
-           <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}
-          />
-          
-          <md-ripple></md-ripple>
-          <md-focus-ring class="input-ring"></md-focus-ring>
+          <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}
+            />
+
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
 
           ${this.error?t:c`
-            <scb-icon-button
-              class="scb-textfield-datepicker-button"
-              icon="calendar_today"
-              @click=${this._toggleDatepicker}
-              aria-label="Välj datum"
-            ></scb-icon-button>`}
+                <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="datetime-local"
             .selectedValue=${this.value}
@@ -4436,7 +4417,7 @@ ${this.value}</textarea
           <md-focus-ring class="input-ring"></md-focus-ring>
         </div>
       </div>
-    `}firstUpdated(e){var i;super.firstUpdated(e),this._initialValue=this.value;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".scb-textfield");t&&(t.addEventListener("input",()=>{const r=t;if(this.value=r.value,this._internals){const s=this.disabled?null:this.value;this._internals.setFormValue(s)}if(this.pattern){const s=new RegExp(this.pattern);this.error=!s.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}))}),t.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),t.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),t.addEventListener("focus",()=>{this._inputFocused=!0,Ke(this,Ee,Oi).call(this)}),t.addEventListener("blur",()=>{this._inputFocused=!1,Ke(this,Ee,Oi).call(this)})),Ke(this,Ee,Ha).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&Ke(this,Ee,Ha).call(this)}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{var t;this.value=this._initialValue;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},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)}reportValidity(){var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const i=e.reportValidity();this.error=!i;const r=i?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return i||(this.errorText=r),this._internals&&(i?this._internals.setValidity({}):this._internals.setValidity({customError:!0},r,e)),i}return!0}_onClearClick(){var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}},Ee=new WeakSet,Ha=function(){const o=Ke(this,Ee,Zr).call(this,this.spacing),e=Ke(this,Ee,Zr).call(this,this.spacingTop)??o,t=Ke(this,Ee,Zr).call(this,this.spacingBottom)??o;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),t?this.style.setProperty("--scb-textfield-spacing-block-end",t):this.style.removeProperty("--scb-textfield-spacing-block-end")},Zr=function(o){if(!o)return;const e=String(o).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e},Oi=function(){var e;const o=(e=this.renderRoot)==null?void 0:e.querySelector(".ripple-wrapper");o&&(this._inputFocused&&this._kbShouldShowRing?o.setAttribute("data-kb-focus","true"):o.removeAttribute("data-kb-focus"))},a.ScbTextField.formAssociated=!0,a.ScbTextField.styles=[m`
+    `}firstUpdated(e){var i;super.firstUpdated(e),this._initialValue=this.value;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".scb-textfield");t&&(t.addEventListener("input",()=>{const r=t;if(this.value=r.value,this._internals){const s=this.disabled?null:this.value;this._internals.setFormValue(s)}if(this.pattern)if(!this.value)this.error=!1;else{const s=new RegExp(this.pattern);this.error=!s.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}))}),t.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),t.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),t.addEventListener("focus",()=>{this._inputFocused=!0,Ke(this,Ee,Oi).call(this)}),t.addEventListener("blur",()=>{this._inputFocused=!1,Ke(this,Ee,Oi).call(this)})),Ke(this,Ee,Ha).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&Ke(this,Ee,Ha).call(this)}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{var t;this.value=this._initialValue;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},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)}reportValidity(){var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const i=e.reportValidity();this.error=!i;const r=i?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return i||(this.errorText=r),this._internals&&(i?this._internals.setValidity({}):this._internals.setValidity({customError:!0},r,e)),i}return!0}_onClearClick(){var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}},Ee=new WeakSet,Ha=function(){const o=Ke(this,Ee,Zr).call(this,this.spacing),e=Ke(this,Ee,Zr).call(this,this.spacingTop)??o,t=Ke(this,Ee,Zr).call(this,this.spacingBottom)??o;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),t?this.style.setProperty("--scb-textfield-spacing-block-end",t):this.style.removeProperty("--scb-textfield-spacing-block-end")},Zr=function(o){if(!o)return;const e=String(o).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e},Oi=function(){var e;const o=(e=this.renderRoot)==null?void 0:e.querySelector(".ripple-wrapper");o&&(this._inputFocused&&this._kbShouldShowRing?o.setAttribute("data-kb-focus","true"):o.removeAttribute("data-kb-focus"))},a.ScbTextField.formAssociated=!0,a.ScbTextField.styles=[m`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -4492,9 +4473,9 @@ ${this.value}</textarea
       :host([type='time']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
-      input[type="time"]::-webkit-calendar-picker-indicator {
-          display: none;
-          background: none;
+      input[type='time']::-webkit-calendar-picker-indicator {
+        display: none;
+        background: none;
       }
 
       :host {