@oslokommune/punkt-elements/dist/textarea-BZL8Mkm0.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { T as l, E as $, x as f, n as d, a as g } from "./element-CgEWt74-.js";
import { o as u } from "./if-defined-CmuO4Vz9.js";
import { r as x } from "./state-Bo2bck5_.js";
import { e as m, n as c } from "./ref-BBYSqgeW.js";
import { e as v } from "./class-map-BpTj9gtz.js";
import { e as T, i as b, t as a } from "./directive-oAbCiebi.js";
import { f as y, m as w } from "./directive-helpers-r-kOS_Mf.js";
import { P as C } from "./input-element-NnrDmp4r.js";
import { P as E } from "./pkt-slot-controller-BPGj-LC5.js";
import "./input-wrapper-Dr__Sxql.js";
import "./icon-CC1js8eR.js";
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const P = T(class extends b {
  constructor(t) {
    if (super(t), t.type !== a.PROPERTY && t.type !== a.ATTRIBUTE && t.type !== a.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
    if (!y(t)) throw Error("`live` bindings can only contain a single expression");
  }
  render(t) {
    return t;
  }
  update(t, [r]) {
    if (r === l || r === $) return r;
    const e = t.element, i = t.name;
    if (t.type === a.PROPERTY) {
      if (r === e[i]) return l;
    } else if (t.type === a.BOOLEAN_ATTRIBUTE) {
      if (!!r === e.hasAttribute(i)) return l;
    } else if (t.type === a.ATTRIBUTE && e.getAttribute(i) === r + "") return l;
    return w(t), r;
  }
});
var B = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, r, e, i) => {
  for (var s = i > 1 ? void 0 : i ? I(r, e) : r, h = t.length - 1, p; h >= 0; h--)
    (p = t[h]) && (s = (i ? p(r, e, s) : p(s)) || s);
  return i && s && B(r, e, s), s;
};
let o = class extends C {
  constructor() {
    super(), this.inputRef = m(), this.helptextSlot = m(), this.value = "", this.autocomplete = "off", this.rows = null, this.counterCurrent = 0, this.slotController = new E(this, this.helptextSlot);
  }
  attributeChangedCallback(t, r, e) {
    t === "value" && this.value !== r && (this.counterCurrent = e ? e.length : 0, this.valueChanged(e, r)), super.attributeChangedCallback(t, r, e);
  }
  updated(t) {
    var r;
    super.updated(t), t.has("value") && (this.counterCurrent = ((r = this.value) == null ? void 0 : r.length) || 0, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
  }
  render() {
    const t = v({
      "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 f`<pkt-input-wrapper
      label=${this.label}
      ?counter=${this.counter}
      ?disabled=${this.disabled}
      ?hasError=${this.hasError}
      ?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-textarea"
    >
      <div class="pkt-contents" ${c(this.helptextSlot)} name="helptext" slot="helptext"></div>
      <textarea
        ${c(this.inputRef)}
        class=${t}
        id=${this.id + "-input"}
        name=${(this.name || this.id) + "-input"}
        placeholder=${u(this.placeholder)}
        .value=${P(this.value)}
        minlength=${u(this.minlength)}
        maxlength=${u(this.maxlength)}
        ?readonly=${this.readonly}
        autocomplete=${this.autocomplete}
        aria-labelledby=${r}
        aria-invalid=${this.hasError}
        aria-errormessage=${`${this.id}-error`}
        rows=${this.rows}
        ?disabled=${this.disabled}
        @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();
    }}
      ></textarea>
    </pkt-input-wrapper>`;
  }
};
n([
  d({ type: String, reflect: !0 })
], o.prototype, "value", 2);
n([
  d({ type: String })
], o.prototype, "autocomplete", 2);
n([
  d({ type: Number })
], o.prototype, "rows", 2);
n([
  x()
], o.prototype, "counterCurrent", 2);
o = n([
  g("pkt-textarea")
], o);
export {
  o as P
};