@oslokommune/punkt-elements/dist/textinput-BZZnFDk3.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, o as r, r as i, s as a } from "./element-cZ85T_aa.js";
import { t as o } from "./class-map-C8HuhNzZ.js";
import { n as s } from "./element-with-slot-4J2o3SeU.js";
import "./icon-Co72KtgF.js";
import { t as c } from "./if-defined-Cjj8qN-Z.js";
import { n as l, t as u } from "./ref-RS8Uv6uC.js";
import { t as d } from "./input-element-B1ciW1N2.js";
import "./input-wrapper-DVU68NcJ.js";
//#region src/components/textinput/textinput.ts
var f = class extends d {
	constructor(...e) {
		super(...e), this.inputRef = u(), this.value = "", this.type = "text", this.size = null, this.autocomplete = null, this.iconNameRight = null, this.prefix = null, this.suffix = null, this.omitSearchIcon = !1, this.counterCurrent = 0;
	}
	attributeChangedCallback(e, t, n) {
		e === "value" && this.value !== t && (this.counterCurrent = n ? n.length : 0, this.valueChanged(n, t)), super.attributeChangedCallback(e, t, n);
	}
	updated(e) {
		super.updated(e), e.has("value") && (this.counterCurrent = this.value?.length || 0, this.valueChanged(this.value, e.get("value"))), e.has("id") && !this.name && this.id && (this.name = this.id);
	}
	render() {
		let e = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, r = o({
			"pkt-input": !0,
			"pkt-input--fullwidth": this.fullwidth,
			"pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
		}), i = this.ariaLabelledby || `${this.id}-input-label`;
		return t`
      <pkt-input-wrapper
        label="${this.label}"
        ?counter=${this.counter}
        ?disabled=${this.disabled}
        ?hasError=${this.hasError}
        ?hasFieldset=${this.hasFieldset}
        ?inline=${this.inline}
        ?optionalTag=${this.optionalTag}
        ?required=${this.required}
        ?requiredTag=${this.requiredTag}
        useWrapper=${this.useWrapper}
        .ariaDescribedBy=${this.ariaDescribedBy}
        .counterCurrent=${this.counterCurrent}
        .counterMaxLength=${this.counterMaxLength}
        .errorMessage=${this.errorMessage}
        .forId="${this.id + "-input"}"
        .helptext=${this.helptext}
        .helptextDropdown=${this.helptextDropdown}
        .helptextDropdownButton=${this.helptextDropdownButton}
        .optionalText=${this.optionalText}
        .requiredText=${this.requiredText}
        .tagText=${this.tagText}
        class="pkt-textinput"
      >
        <div class="pkt-contents" slot="helptext">${s(this, "helptext")}</div>
        <div class="pkt-input__container">
          ${this.prefix ? t`<div class="pkt-input-prefix">${this.prefix}</div>` : n}
          <input
            ${l(this.inputRef)}
            class=${r}
            type=${this.type}
            name=${(this.name || this.id) + "-input"}
            id=${this.id + "-input"}
            placeholder=${c(this.placeholder)}
            aria-labelledby=${i}
            autocomplete=${this.autocomplete || "off"}
            minlength=${c(this.minlength || void 0)}
            maxlength=${c(this.maxlength || void 0)}
            min=${c(this.min || void 0)}
            max=${c(this.max || void 0)}
            step=${c(this.step || void 0)}
            ?readonly=${this.readonly}
            size=${this.size || n}
            .value=${this.value}
            ?disabled=${this.disabled}
            aria-invalid=${this.hasError}
            aria-errormessage=${`${this.id}-error`}
            @input=${(e) => {
			this.value = e.target.value, this.onInput(), e.stopImmediatePropagation();
		}}
            @change=${(e) => {
			e.stopImmediatePropagation();
		}}
            @focus=${(e) => {
			this.onFocus(), e.stopImmediatePropagation();
		}}
            @blur=${(e) => {
			this.value = e.target.value, this.onBlur(), e.stopImmediatePropagation();
		}}
            @keydown=${(e) => {
			if (e.key === "Enter") {
				let e = this.internals.form;
				e ? e.requestSubmit() : this.inputRef.value?.blur();
			}
		}}
          />
          ${this.suffix ? t`<div class="pkt-input-suffix">
                ${this.suffix}
                ${this.iconNameRight ? t`<pkt-icon
                      class="pkt-input-suffix-icon"
                      name=${this.iconNameRight}
                    ></pkt-icon>` : n}
                ${e ? t`<pkt-icon
                      class="pkt-input-suffix-icon"
                      name="magnifying-glass-big"
                    ></pkt-icon>` : n}
              </div>` : n}
          ${!this.suffix && this.iconNameRight ? t`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : n}
          ${!this.suffix && e ? t`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : n}
        </div>
      </pkt-input-wrapper>
    `;
	}
};
i([a({
	type: String,
	reflect: !0
})], f.prototype, "value", void 0), i([a({ type: String })], f.prototype, "type", void 0), i([a({ type: Number })], f.prototype, "size", void 0), i([a({ type: String })], f.prototype, "autocomplete", void 0), i([a({ type: String })], f.prototype, "iconNameRight", void 0), i([a({ type: String })], f.prototype, "prefix", void 0), i([a({ type: String })], f.prototype, "suffix", void 0), i([a({ type: Boolean })], f.prototype, "omitSearchIcon", void 0), i([r()], f.prototype, "counterCurrent", void 0);
try {
	e("pkt-textinput")(f);
} catch {
	console.warn("Forsøker å definere <pkt-textinput>, men den er allerede definert");
}
//#endregion
//#region src/components/textinput/index.ts
var p = f;
//#endregion
export { f as n, p as t };