scb-wc 0.1.2 → 0.1.4

package/scb-textfield/scb-textfield.js

@@ -0,0 +1,827 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-datepicker/scb-datepicker.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-textfield/scb-textfield.ts
+var s = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (e) => {
+			e.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && this.#o());
+		}, this._onGlobalPointerDown = () => {
+			this._kbShouldShowRing = !1, this._inputFocused && this.#o();
+		}, this._hasRenderedOnce = !1, this._boundField = null, this._onFieldInput = () => {
+			let e = this._boundField;
+			if (!e) return;
+			let t = e;
+			if (this.value = t.value, this._internals) {
+				let e = this.disabled ? null : this.value;
+				this._internals.setFormValue(e);
+			}
+			this.#n(), 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, this.#o();
+		}, this._onFieldBlur = () => {
+			this._inputFocused = !1, this.#o();
+		}, 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) {
+				let e = this.disabled ? null : this.value;
+				this._internals.setFormValue(e);
+			}
+			this.#n(), 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());
+	}
+	static {
+		this.styles = [n`
+      :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;
+      }
+    `];
+	}
+	_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() {
+		let e = this.leadingIcon ? r`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, t = this.error ? r`<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 || "";
+		let n = this.underLabel ? `${this._inputId}-supporting-text` : void 0, i = this.type === "search" && this.value ? r`
+            <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" ? r`
+        <label
+          class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel ? r`
+              <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" ? r`
+        <label
+          class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel ? r`
+              <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 ? t : r`
+                <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" ? r`
+        <label
+          class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel ? r`
+              <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 ? t : r`
+                <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" ? r`
+        <label
+          class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
+          for="${this._inputId}"
+        >
+          ${this.label}
+        </label>
+        ${this.underLabel ? r`
+              <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=${(e) => {
+			let t = e.target;
+			if (this.value = t.value, this._internals) {
+				let e = this.disabled ? null : this.value;
+				this._internals.setFormValue(e);
+			}
+			this.#n(), this.dispatchEvent(new Event("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("onValueChanged", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+            />
+            ${t}
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
+          </div>
+        </div>
+      ` : r`
+      <label
+        class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
+        for="${this._inputId}"
+      >
+        ${this.label}
+      </label>
+      ${this.underLabel ? r`
+            <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}
+          />
+          ${i}
+          ${t}
+          <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), this.#r(), this.#e();
+	}
+	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"))) {
+			let e = this.disabled ? null : this.value;
+			this._internals.setFormValue(e);
+		}
+		e.has("type") && (this.#r(), this._hasRenderedOnce && this.#a()), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), 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;
+			let 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)), this.#i(), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0);
+	}
+	reportValidity() {
+		return this.#n(!0);
+	}
+	_onClearClick() {
+		let e = this.shadowRoot?.querySelector(".scb-textfield");
+		if (e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement)) {
+			if (e.value = "", this.value = "", this._internals) {
+				let e = this.disabled ? null : this.value;
+				this._internals.setFormValue(e), 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();
+		}
+	}
+	#e() {
+		let e = this.#t(this.spacing), t = this.#t(this.spacingTop) ?? e, n = this.#t(this.spacingBottom) ?? e, r = this.#t(this.spacingLeft), i = this.#t(this.spacingRight);
+		t ? this.style.setProperty("--scb-textfield-spacing-block-start", t) : this.style.removeProperty("--scb-textfield-spacing-block-start"), n ? this.style.setProperty("--scb-textfield-spacing-block-end", n) : this.style.removeProperty("--scb-textfield-spacing-block-end"), r ? this.style.setProperty("--scb-textfield-spacing-inline-start", r) : this.style.removeProperty("--scb-textfield-spacing-inline-start"), i ? this.style.setProperty("--scb-textfield-spacing-inline-end", i) : this.style.removeProperty("--scb-textfield-spacing-inline-end");
+	}
+	#t(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#n(e = !1) {
+		let t = this.shadowRoot?.querySelector(".scb-textfield");
+		if (!(t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement)) return !0;
+		let n = this.errorText || "Ogiltig inmatning.", r = "";
+		if (t.setCustomValidity(""), this.required && !t.value) r = n, t.setCustomValidity(r);
+		else if (this.pattern && t.value) try {
+			new RegExp(this.pattern).test(t.value) || (r = n, t.setCustomValidity(r));
+		} catch {
+			t.setCustomValidity("");
+		}
+		let i = e ? t.reportValidity() : t.checkValidity();
+		if (this.error = !i, this._internals) if (i) this._internals.setValidity({});
+		else {
+			let e = r || t.validationMessage || n;
+			this._internals.setValidity({ customError: !0 }, e, t);
+		}
+		return i;
+	}
+	#r() {
+		let e = this.shadowRoot?.querySelector(".scb-textfield");
+		e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && this._boundField !== e && (this.#i(), this._boundField = e, this.type !== "time" && e.addEventListener("input", this._onFieldInput), e.addEventListener("change", this._onFieldChange), e.addEventListener("select", this._onFieldSelect), e.addEventListener("focus", this._onFieldFocus), e.addEventListener("blur", this._onFieldBlur));
+	}
+	#i() {
+		let e = this._boundField;
+		e && (e.removeEventListener("input", this._onFieldInput), e.removeEventListener("change", this._onFieldChange), e.removeEventListener("select", this._onFieldSelect), e.removeEventListener("focus", this._onFieldFocus), e.removeEventListener("blur", this._onFieldBlur), this._boundField = null);
+	}
+	#a() {
+		this._showDatepicker = !1;
+		let e = this.shadowRoot?.querySelector(".scb-textfield");
+		if (e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && (e.value = "", e.setCustomValidity("")), this.value = "", this.error = !1, this._internals) {
+			let e = this.disabled ? null : "";
+			this._internals.setFormValue(e), this._internals.setValidity({});
+		}
+	}
+	#o() {
+		let e = this.renderRoot?.querySelector(".ripple-wrapper");
+		e && (this._inputFocused && this._kbShouldShowRing ? e.setAttribute("data-kb-focus", "true") : e.removeAttribute("data-kb-focus"));
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "type", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([a({
+	type: String,
+	attribute: "error-text"
+})], s.prototype, "errorText", void 0), e([a({
+	type: String,
+	attribute: "leading-icon"
+})], s.prototype, "leadingIcon", void 0), e([a({ type: String })], s.prototype, "name", void 0), e([a({ type: String })], s.prototype, "pattern", void 0), e([a({
+	type: String,
+	attribute: "value"
+})], s.prototype, "value", void 0), e([a({ type: String })], s.prototype, "underLabel", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "error", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "required", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), e([o()], s.prototype, "_showDatepicker", void 0), s = e([i("scb-textfield")], s);
+//#endregion
+export { s as ScbTextField };