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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { E as p, x as h, n as a, a as $ } from "./element-CgEWt74-.js";
import { o as u } from "./if-defined-CmuO4Vz9.js";
import { r as f } from "./state-Bo2bck5_.js";
import { e as d, n as m } from "./ref-BBYSqgeW.js";
import { e as g } from "./class-map-BpTj9gtz.js";
import { P as x } from "./input-element-NnrDmp4r.js";
import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
import "./input-wrapper-Dr__Sxql.js";
import "./icon-CC1js8eR.js";
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, e, r, t) => {
  for (var n = t > 1 ? void 0 : t ? b(e, r) : e, l = i.length - 1, c; l >= 0; l--)
    (c = i[l]) && (n = (t ? c(e, r, n) : c(n)) || n);
  return t && n && y(e, r, n), n;
};
let s = class extends x {
  constructor() {
    super(), this.inputRef = d(), this.helptextSlot = d(), 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, this.slotController = new v(this, this.helptextSlot);
  }
  attributeChangedCallback(i, e, r) {
    i === "value" && this.value !== e && (this.counterCurrent = r ? r.length : 0, this.valueChanged(r, e)), super.attributeChangedCallback(i, e, r);
  }
  updated(i) {
    var e;
    super.updated(i), i.has("value") && (this.counterCurrent = ((e = this.value) == null ? void 0 : e.length) || 0, this.valueChanged(this.value, i.get("value"))), i.has("id") && !this.name && this.id && (this.name = this.id);
  }
  render() {
    const i = this.type === "search" && !this.iconNameRight && !this.omitSearchIcon, e = g({
      "pkt-input": !0,
      "pkt-input--fullwidth": this.fullwidth,
      "pkt-input--counter-error": this.counter && this.counterMaxLength && this.value.length && this.value.length > this.counterMaxLength
    }), r = this.ariaLabelledby || `${this.id}-input-label`;
    return h`
      <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" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
        <div class="pkt-input__container">
          ${this.prefix ? h`<div class="pkt-input-prefix">${this.prefix}</div>` : p}
          <input
            ${m(this.inputRef)}
            class=${e}
            type=${this.type}
            name=${(this.name || this.id) + "-input"}
            id=${this.id + "-input"}
            placeholder=${u(this.placeholder)}
            aria-labelledby=${r}
            autocomplete=${this.autocomplete || "off"}
            minlength=${u(this.minlength || void 0)}
            maxlength=${u(this.maxlength || void 0)}
            min=${u(this.min || void 0)}
            max=${u(this.max || void 0)}
            step=${u(this.step || void 0)}
            ?readonly=${this.readonly}
            size=${this.size || p}
            .value=${this.value}
            ?disabled=${this.disabled}
            aria-invalid=${this.hasError}
            aria-errormessage=${`${this.id}-error`}
            @input=${(t) => {
      this.value = t.target.value, this.onInput(), t.stopImmediatePropagation();
    }}
            @change=${(t) => {
      t.stopImmediatePropagation();
    }}
            @focus=${(t) => {
      this.onFocus(), t.stopImmediatePropagation();
    }}
            @blur=${(t) => {
      this.value = t.target.value, this.onBlur(), t.stopImmediatePropagation();
    }}
            @keydown=${(t) => {
      var n;
      if (t.key === "Enter") {
        const l = this.internals.form;
        l ? l.requestSubmit() : (n = this.inputRef.value) == null || n.blur();
      }
    }}
          />
          ${this.suffix ? h`<div class="pkt-input-suffix">
                ${this.suffix}
                ${this.iconNameRight ? h`<pkt-icon
                      class="pkt-input-suffix-icon"
                      name=${this.iconNameRight}
                    ></pkt-icon>` : p}
                ${i ? h`<pkt-icon
                      class="pkt-input-suffix-icon"
                      name="magnifying-glass-big"
                    ></pkt-icon>` : p}
              </div>` : p}
          ${!this.suffix && this.iconNameRight ? h`<pkt-icon class="pkt-input-icon" name=${this.iconNameRight}></pkt-icon>` : p}
          ${!this.suffix && i ? h`<pkt-icon class="pkt-input-icon" name="magnifying-glass-big"></pkt-icon>` : p}
        </div>
      </pkt-input-wrapper>
    `;
  }
};
o([
  a({ type: String, reflect: !0 })
], s.prototype, "value", 2);
o([
  a({ type: String })
], s.prototype, "type", 2);
o([
  a({ type: Number })
], s.prototype, "size", 2);
o([
  a({ type: String })
], s.prototype, "autocomplete", 2);
o([
  a({ type: String })
], s.prototype, "iconNameRight", 2);
o([
  a({ type: String })
], s.prototype, "prefix", 2);
o([
  a({ type: String })
], s.prototype, "suffix", 2);
o([
  a({ type: Boolean })
], s.prototype, "omitSearchIcon", 2);
o([
  f()
], s.prototype, "counterCurrent", 2);
s = o([
  $("pkt-textinput")
], s);
export {
  s as P
};