scb-wc 0.1.6 → 0.1.7

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

@@ -1,595 +1 @@
-import"../../vendor/vendor-material.js";import{_,b as w,g as $,h as d,m as k,y as o}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";import{n as z,t as a}from"../../vendor/assertClassBrand.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-datepicker/scb-datepicker.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,n,c){try{customElements.get(i)||e(i,n,c)}catch(b){var p=String(b||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw b}}}}catch{}})();var s,u,l=(s=new WeakSet,u=class extends _{constructor(){super(),z(this,s),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&a(s,this,g).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&a(s,this,g).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const e=this._boundField;if(!e)return;const i=e;if(this.value=i.value,this._internals){const n=this.disabled?null:this.value;this._internals.setFormValue(n)}a(s,this,f).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},this._onFieldChange=()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))},this._onFieldSelect=()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))},this._onFieldFocus=()=>{this._inputFocused=!0,a(s,this,g).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,a(s,this,g).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.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,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 i=this.disabled?null:this.value;this._internals.setFormValue(i)}a(s,this,f).call(this),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())}_syncDensityForSize(){this.size==="extra-small"?this.setAttribute("data-density","-5"):this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}render(){const e=this.leadingIcon?o`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,i=this.error?o`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const n=this.underLabel?`${this._inputId}-supporting-text`:void 0,c=this.type==="search"&&this.value?o`
-            <button
-              type="button"
-              class="scb-textfield-clear"
-              @click=${this._onClearClick}
-              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>
-              </svg>
-            </button>
-          `:null;return this.type==="textarea"?o`
-        <label
-          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
-          for="${this._inputId}"
-        >
-          ${this.label}
-        </label>
-        ${this.underLabel?o`
-              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
-                ${this.underLabel}
-              </span>
-            `:null}
-        <div class="scb-textfield-wrapper">
-          <div class="ripple-wrapper">
-            <textarea
-              class="scb-textfield"
-              .value=${this.value}
-              ?disabled=${this.disabled}
-              name="${this.name}"
-              id="${this._inputId}"
-              ?required=${this.required}
-              aria-invalid=${this.error?"true":"false"}
-              aria-describedby=${n}
-            ></textarea>
-            <md-ripple></md-ripple>
-            <md-focus-ring class="input-ring"></md-focus-ring>
-          </div>
-        </div>
-      `:this.type==="date"?o`
-        <label
-          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
-          for="${this._inputId}"
-        >
-          ${this.label}
-        </label>
-        ${this.underLabel?o`
-              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
-                ${this.underLabel}
-              </span>
-            `:null}
-        <div class="scb-textfield-wrapper">
-          ${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=${n}
-              readonly
-              @focus=${this._toggleDatepicker}
-              @click=${this._toggleDatepicker}
-            />
-            <md-ripple></md-ripple>
-            <md-focus-ring class="input-ring"></md-focus-ring>
-          </div>
-          ${this.error?i:o`
-                <scb-icon-button
-                  class="scb-textfield-datepicker-button"
-                  icon="calendar_today"
-                  size=${this.size}
-                  @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"?o`
-        <label
-          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
-          for="${this._inputId}"
-        >
-          ${this.label}
-        </label>
-        ${this.underLabel?o`
-              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
-                ${this.underLabel}
-              </span>
-            `:null}
-        <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=${n}
-              readonly
-              @focus=${this._toggleDatepicker}
-              @click=${this._toggleDatepicker}
-            />
-
-            <md-ripple></md-ripple>
-            <md-focus-ring class="input-ring"></md-focus-ring>
-          </div>
-
-          ${this.error?i:o`
-                <scb-icon-button
-                  class="scb-textfield-datepicker-button"
-                  icon="calendar_today"
-                  size=${this.size}
-                  @click=${this._toggleDatepicker}
-                  aria-label="Välj datum"
-                ></scb-icon-button>
-              `}
-          <scb-datepicker
-            variant="datetime-local"
-            .selectedValue=${this.value}
-            .open=${this._showDatepicker}
-            @date-selected=${this._onDateSelected}
-          ></scb-datepicker>
-        </div>
-      `:this.type==="time"?o`
-        <label
-          class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
-          for="${this._inputId}"
-        >
-          ${this.label}
-        </label>
-        ${this.underLabel?o`
-              <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
-                ${this.underLabel}
-              </span>
-            `:null}
-        <div class="scb-textfield-wrapper">
-          ${e}
-          <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=${n}
-              @input=${p=>{const b=p.target;if(this.value=b.value,this._internals){const y=this.disabled?null:this.value;this._internals.setFormValue(y)}a(s,this,f).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}}
-            />
-            ${i}
-            <md-ripple></md-ripple>
-            <md-focus-ring class="input-ring"></md-focus-ring>
-          </div>
-        </div>
-      `:o`
-      <label
-        class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
-        for="${this._inputId}"
-      >
-        ${this.label}
-      </label>
-      ${this.underLabel?o`
-            <span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
-              ${this.underLabel}
-            </span>
-          `:null}
-      <div class="scb-textfield-wrapper">
-        ${e}
-        <div class="ripple-wrapper">
-          <input
-            class="scb-textfield${this.error?" has-error-icon":""}"
-            .value=${this.value}
-            type="${this.type}"
-            name="${this.name}"
-            id="${this._inputId}"
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            aria-invalid=${this.error?"true":"false"}
-            aria-describedby=${n}
-          />
-          ${c}
-          ${i}
-          <md-ripple></md-ripple>
-          <md-focus-ring class="input-ring"></md-focus-ring>
-        </div>
-      </div>
-    `}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),a(s,this,m).call(this),a(s,this,x).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),e.has("size")&&this._syncDensityForSize(),this._internals&&(e.has("value")||e.has("disabled"))){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}e.has("type")&&(a(s,this,m).call(this),this._hasRenderedOnce&&a(s,this,S).call(this)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&a(s,this,x).call(this),this._hasRenderedOnce=!0}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._syncDensityForSize(),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=()=>{this.value=this._initialValue;const e=this.shadowRoot?.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)),a(s,this,v).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){return a(s,this,f).call(this,!0)}_onClearClick(){const e=this.shadowRoot?.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()}}},u.formAssociated=!0,u.styles=[w`
-      :host {
-        --scb-textfield-number-max-width: 280px;
-        --scb-textfield-text-max-width: 400px;
-        --scb-textfield-search-max-width: 600px;
-        --scb-textfield-email-max-width: 400px;
-        --scb-textfield-password-max-width: 400px;
-        --scb-textfield-tel-max-width: 400px;
-        --scb-textfield-url-max-width: 400px;
-        --scb-textfield-textarea-max-width: 600px;
-        font-family: var(--brand-font);
-        color: var(--md-sys-color-on-surface);
-
-        /* Avstånd till omgivande innehåll 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);
-
-        margin-inline-start: var(--scb-textfield-spacing-inline-start, 0);
-        margin-inline-end: var(--scb-textfield-spacing-inline-end, 0);
-        -webkit-tap-highlight-color: transparent;
-
-        --scb-textfield-padding-x: var(--spacing-5);
-        --scb-textfield-padding-y: var(--spacing-2);
-        --scb-textfield-min-height: 56px;
-
-        --scb-textfield-font-size: var(--md-sys-typescale-body-large-size);
-        --scb-textfield-line-height: var(--md-sys-typescale-body-large-line-height);
-
-        --scb-textfield-label-font-size: var(--md-sys-typescale-label-medium-size);
-        --scb-textfield-label-line-height: var(--md-sys-typescale-label-medium-line-height);
-        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-medium-tracking);
-
-        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-medium-size);
-        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
-        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-        --scb-textfield-label-gap: var(--spacing-3);
-
-        --scb-textfield-leading-inset: var(--spacing-4);
-        --scb-textfield-leading-icon-size: var(--icon-size-medium, 24px);
-        --scb-textfield-leading-gap: var(--spacing-4);
-        --scb-textfield-leading-padding: calc(
-          var(--scb-textfield-leading-inset) +
-            var(--scb-textfield-leading-icon-size) +
-            var(--scb-textfield-leading-gap)
-        );
-
-        --scb-textfield-trailing-inset: var(--spacing-4);
-        --scb-textfield-trailing-icon-size: var(--icon-size-medium, 24px);
-        --scb-textfield-trailing-gap: var(--spacing-3);
-        --scb-textfield-trailing-action-size: var(--scale-11, 48px);
-        --scb-textfield-trailing-reserved: calc(
-          var(--scb-textfield-trailing-inset) +
-            var(--scb-textfield-trailing-action-size) +
-            var(--spacing-2)
-        );
-      }
-
-      :host([size='medium']) {
-        --scb-textfield-padding-x: var(--spacing-4);
-        --scb-textfield-padding-y: var(--spacing-3);
-        --scb-textfield-min-height: 48px;
-
-        --scb-textfield-font-size: var(--md-sys-typescale-body-medium-size);
-        --scb-textfield-line-height: var(--md-sys-typescale-body-medium-line-height);
-
-        --scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
-        --scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
-        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
-
-        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
-        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
-        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
-
-        --scb-textfield-leading-inset: var(--spacing-3);
-        --scb-textfield-leading-icon-size: var(--icon-size-small, 20px);
-        --scb-textfield-leading-gap: var(--spacing-5);
-
-        --scb-textfield-trailing-inset: var(--spacing-3);
-        --scb-textfield-trailing-icon-size: var(--icon-size-small, 20px);
-        --scb-textfield-trailing-gap: var(--spacing-3);
-        --scb-textfield-trailing-action-size: var(--scale-10, 40px);
-      }
-
-      :host([size='small']) {
-        --scb-textfield-padding-x: var(--spacing-4);
-        --scb-textfield-padding-y: var(--spacing-3);
-        --scb-textfield-min-height: 40px;
-
-        --scb-textfield-font-size: var(--md-sys-typescale-body-small-size);
-        --scb-textfield-line-height: var(--md-sys-typescale-body-small-line-height);
-
-        --scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
-        --scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
-        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
-
-        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
-        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
-        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
-
-        --scb-textfield-leading-inset: var(--spacing-3);
-        --scb-textfield-leading-icon-size: var(--icon-size-small, 20px);
-        --scb-textfield-leading-gap: var(--spacing-5);
-
-        --scb-textfield-trailing-inset: var(--spacing-3);
-        --scb-textfield-trailing-icon-size: var(--icon-size-small, 20px);
-        --scb-textfield-trailing-gap: var(--spacing-3);
-        --scb-textfield-trailing-action-size: var(--scale-09, 36px);
-      }
-
-      :host([size='extra-small']) {
-        --scb-textfield-padding-x: var(--spacing-3);
-        --scb-textfield-padding-y: var(--spacing-2);
-        --scb-textfield-min-height: 32px;
-
-        --scb-textfield-font-size: var(--md-sys-typescale-body-small-size);
-        --scb-textfield-line-height: var(--md-sys-typescale-body-small-line-height);
-
-        --scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
-        --scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
-        --scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
-
-        --scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
-        --scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
-        --scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
-
-        --scb-textfield-leading-inset: var(--spacing-3);
-        --scb-textfield-leading-icon-size: var(--icon-size-extra-small, 16px);
-        --scb-textfield-leading-gap: var(--spacing-4);
-
-        --scb-textfield-trailing-inset: var(--spacing-3);
-        --scb-textfield-trailing-icon-size: var(--icon-size-extra-small, 16px);
-        --scb-textfield-trailing-gap: var(--spacing-2);
-        --scb-textfield-trailing-action-size: var(--scale-08, 32px);
-      }
-
-      :host([type='number']) {
-        --scb-textfield-max-width: var(--scb-textfield-number-max-width);
-      }
-      :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);
-      }
-      :host([type='email']) {
-        --scb-textfield-max-width: var(--scb-textfield-email-max-width);
-      }
-      :host([type='password']) {
-        --scb-textfield-max-width: var(--scb-textfield-password-max-width);
-      }
-      :host([type='tel']) {
-        --scb-textfield-max-width: var(--scb-textfield-tel-max-width);
-      }
-      :host([type='url']) {
-        --scb-textfield-max-width: var(--scb-textfield-url-max-width);
-      }
-      :host([type='textarea']) {
-        --scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
-      }
-      :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;
-        flex-direction: column;
-        max-width: var(--scb-textfield-max-width);
-      }
-
-      :host([error]) .scb-textfield-supporting-text {
-        color: var(--md-sys-color-error);
-      }
-      :host([error]) .scb-textfield {
-        border-color: var(--md-sys-color-error);
-      }
-      :host([error]) .scb-textfield:focus-visible {
-        border-color: var(--md-sys-color-error);
-        box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
-      }
-
-      :host([disabled]) {
-        opacity: 0.38;
-        cursor: default;
-      }
-
-      .scb-textfield-label {
-        display: block;
-        font-size: var(--scb-textfield-label-font-size);
-        font-weight: var(--weight-semibold);
-        line-height: var(--scb-textfield-label-line-height);
-        letter-spacing: var(--scb-textfield-label-letter-spacing);
-      }
-
-      .scb-textfield-label--without-supporting {
-        margin-bottom: var(--scb-textfield-label-gap);
-      }
-
-      .scb-textfield-supporting-text {
-        display: block;
-        font-size: var(--scb-textfield-supporting-font-size);
-        line-height: var(--scb-textfield-supporting-line-height);
-        letter-spacing: var(--scb-textfield-supporting-letter-spacing);
-        margin-bottom: var(--scb-textfield-label-gap);
-        color: var(--md-sys-color-on-surface-variant);
-      }
-
-      .scb-textfield {
-        padding: var(--scb-textfield-padding-y) var(--scb-textfield-padding-x);
-        min-height: var(--scb-textfield-min-height);
-        border: 1px solid var(--md-sys-color-outline);
-        border-radius: var(--md-sys-shape-corner-small);
-        font-size: var(--scb-textfield-font-size);
-        font-family: var(--brand-font);
-        line-height: var(--scb-textfield-line-height);
-        width: 100%;
-        box-sizing: border-box;
-        background-color: transparent;
-        color: var(--md-sys-color-on-surface);
-        position: relative;
-        z-index: 1;
-      }
-
-      :host([type='search']) .scb-textfield {
-        padding-right: var(--scb-textfield-trailing-reserved);
-      }
-
-      :host([type='date']) .scb-textfield {
-        padding-right: var(--scb-textfield-trailing-reserved);
-      }
-
-     md-icon + .ripple-wrapper > .scb-textfield {
-        padding-left: var(--scb-textfield-leading-padding);
-      }
-
-      .scb-textfield-icon {
-        position: absolute;
-        left: var(--scb-textfield-leading-inset);
-        top: 50%;
-        transform: translateY(-50%);
-        pointer-events: none;
-        font-size: var(--scb-textfield-leading-icon-size);
-        z-index: 2;
-      }
-
-      .scb-textfield:focus-visible {
-        outline: none;
-        border-color: var(--md-sys-color-primary);
-        box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
-        border: 1px solid var(--md-sys-color-primary);
-      }
-
-      .scb-textfield-wrapper {
-        position: relative;
-        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;
-      }
-
-      .scb-textfield-error-icon {
-        position: absolute;
-        right: var(--scb-textfield-trailing-inset);
-        top: 50%;
-        transform: translateY(-50%);
-        pointer-events: none;
-        font-size: var(--scb-textfield-trailing-icon-size);
-        color: var(--md-sys-color-error);
-        z-index: 2;
-      }
-
-      .scb-textfield.has-error-icon {
-        padding-right: calc(
-          var(--scb-textfield-trailing-inset) +
-            var(--scb-textfield-trailing-icon-size) +
-            var(--scb-textfield-trailing-gap)
-        );
-      }
-
-      /* Clear-knappen: samma box-storlek som error-ikon (var(--scale-06)).
-         Ligger längst till höger när det inte är fel.
-         När error=true flyttas den åt vänster så att error-ikon hamnar till höger. */
-      .scb-textfield-clear {
-        position: absolute;
-        right: var(--scb-textfield-trailing-inset);
-        top: 50%;
-        transform: translateY(-50%);
-        width: var(--scb-textfield-trailing-icon-size);
-        height: var(--scb-textfield-trailing-icon-size);
-        padding: 0;
-        margin: 0;
-        border: none;
-        background: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: var(--md-sys-color-on-surface);
-        z-index: 2;
-      }
-
-      :host([error]) .scb-textfield-clear {
-        right: calc(
-          var(--scb-textfield-trailing-inset) +
-            var(--scb-textfield-trailing-icon-size) +
-            var(--spacing-2)
-        );
-      }
-
-      .scb-textfield-clear:focus-visible {
-        outline: 2px solid var(--md-sys-color-primary);
-        outline-offset: 2px;
-      }
-
-      .scb-textfield-clear svg {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-
-      /* Datumknappen ovanför input/ripple */
-      .scb-textfield-datepicker-button {
-        position: absolute;
-        right: var(--scb-textfield-trailing-inset);
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 4;
-      }
-    `],u);function x(){const t=a(s,this,h).call(this,this.spacing),e=a(s,this,h).call(this,this.spacingTop)??t,i=a(s,this,h).call(this,this.spacingBottom)??t,n=a(s,this,h).call(this,this.spacingLeft),c=a(s,this,h).call(this,this.spacingRight);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"),n?this.style.setProperty("--scb-textfield-spacing-inline-start",n):this.style.removeProperty("--scb-textfield-spacing-inline-start"),c?this.style.setProperty("--scb-textfield-spacing-inline-end",c):this.style.removeProperty("--scb-textfield-spacing-inline-end")}function h(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}function f(t=!1){const e=this.shadowRoot?.querySelector(".scb-textfield");if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement))return!0;const i=this.errorText||"Ogiltig inmatning.";let n="";if(e.setCustomValidity(""),this.required&&!e.value)n=i,e.setCustomValidity(n);else if(this.pattern&&e.value)try{new RegExp(this.pattern).test(e.value)||(n=i,e.setCustomValidity(n))}catch{e.setCustomValidity("")}const c=t?e.reportValidity():e.checkValidity();if(this.error=!c,this._internals)if(c)this._internals.setValidity({});else{const p=n||e.validationMessage||i;this._internals.setValidity({customError:!0},p,e)}return c}function m(){const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&this._boundField!==t&&(a(s,this,v).call(this),this._boundField=t,this.type!=="time"&&t.addEventListener("input",this._onFieldInput),t.addEventListener("change",this._onFieldChange),t.addEventListener("select",this._onFieldSelect),t.addEventListener("focus",this._onFieldFocus),t.addEventListener("blur",this._onFieldBlur))}function v(){const t=this._boundField;t&&(t.removeEventListener("input",this._onFieldInput),t.removeEventListener("change",this._onFieldChange),t.removeEventListener("select",this._onFieldSelect),t.removeEventListener("focus",this._onFieldFocus),t.removeEventListener("blur",this._onFieldBlur),this._boundField=null)}function S(){this._showDatepicker=!1;const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value="",t.setCustomValidity("")),this.value="",this.error=!1,this._internals){const e=this.disabled?null:"";this._internals.setFormValue(e),this._internals.setValidity({})}}function g(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}r([d({type:String,reflect:!0})],l.prototype,"type",void 0);r([d({type:String})],l.prototype,"label",void 0);r([d({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",void 0);r([d({type:String,attribute:"error-text"})],l.prototype,"errorText",void 0);r([d({type:String,attribute:"leading-icon"})],l.prototype,"leadingIcon",void 0);r([d({type:String})],l.prototype,"name",void 0);r([d({type:String})],l.prototype,"pattern",void 0);r([d({type:String,attribute:"value"})],l.prototype,"value",void 0);r([d({type:String})],l.prototype,"underLabel",void 0);r([d({type:Boolean,reflect:!0})],l.prototype,"error",void 0);r([d({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0);r([d({type:Boolean,reflect:!0})],l.prototype,"required",void 0);r([d({type:String,reflect:!0})],l.prototype,"size",void 0);r([d({type:String,reflect:!0})],l.prototype,"spacing",void 0);r([d({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",void 0);r([d({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",void 0);r([d({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",void 0);r([d({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",void 0);r([k()],l.prototype,"_showDatepicker",void 0);l=r([$("scb-textfield")],l);
+import"../Users/peter/Documents/SCB.Material-latest-dev/src/scb-components/scb-textfield/scb-textfield.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,d,o){try{customElements.get(e)||r(e,d,o)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();