dap-design-system/dist/components/textarea/textarea.component.js

Official design system for the DÁP (dap.gov.hu)

var v = Object.getPrototypeOf;
var x = Reflect.get;
var y = (h, t, e) => x(v(h), e, t);
var g = (h, t, e) => new Promise((n, r) => {
  var c = (d) => {
    try {
      b(e.next(d));
    } catch (m) {
      r(m);
    }
  }, p = (d) => {
    try {
      b(e.throw(d));
    } catch (m) {
      r(m);
    }
  }, b = (d) => d.done ? n(d.value) : Promise.resolve(d.value).then(c, p);
  b((e = e.apply(h, t)).next());
});
import { clsx as $ } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as u } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as I } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as f } from "../../node_modules/lit-html/static.js";
import { GenericFormElement as C } from "../../internal/mixin/genericFormElement.js";
import S from "../feedback/feedback.component.js";
import w from "../typography/typography.component.js";
import _ from "./textarea.scss.js";
import { unsafeCSS as F } from "../../node_modules/@lit/reactive-element/css-tag.js";
var z = Object.defineProperty, o = (h, t, e, n) => {
  for (var r = void 0, c = h.length - 1, p; c >= 0; c--)
    (p = h[c]) && (r = p(t, e, r) || r);
  return r && z(t, e, r), r;
}, a;
const i = (a = class extends C {
  constructor() {
    super(), this.hideCounter = !1, this.rows = 6, this.placeholder = "", this.count = 0, a.nextId++;
    const t = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
    this.inputId = `input-${a.nextId}-${t}`, this.labelId = `label-${a.nextId}-${t}`, this.descriptionId = `description-${a.nextId}-${t}`, this.counterId = `counter-${a.nextId}-${t}`, this.feedbackId = `feedback-${a.nextId}-${t}`;
  }
  get focusElement() {
    return this.input;
  }
  _handleSlotChange(t) {
    (t == null ? void 0 : t.target).setAttribute("slot", "icon");
  }
  connectedCallback() {
    return g(this, null, function* () {
      var t;
      y(a.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.input.value = (t = this.value) != null ? t : "", this.count = this.input.value.length;
    });
  }
  attributeChangedCallback(t, e, n) {
    super.attributeChangedCallback(t, e, n), t === "value" && this.input && (this.input.value = n);
  }
  onInput() {
    this.count = this.input.value.length, this.value = this.input.value, super.onInput(), this.emit("dds-count-change", { value: this.count }), this.setValidity();
  }
  onChange() {
    this.count = this.input.value.length, this.value = this.input.value, super.onChange(), this.emit("dds-count-change", { value: this.count }), this.setValidity();
  }
  onSelect(t) {
    const e = t.target, n = e.value.substring(
      e.selectionStart,
      e.selectionEnd
    );
    this.emit("dds-select", { value: n });
  }
  formResetCallback() {
    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue || ""), this.value = this.defaultValue || "", this.input.value = this.defaultValue || "";
  }
  handleInvalid(t) {
    t.preventDefault();
  }
  _renderFooter() {
    const t = this.hideCounter ? u : f`
    <dap-ds-typography
          part="counter"
          exportparts="base: counter-base"
          class=${$("textarea__counter", {
      "textarea__counter--error": this.status === "error"
    })}
          variant="caption"
          size="${this.size}"
          id=${this.counterId}
          aria-hidden="true">
          ${this.count}
        </dap-ds-typography>
      </div>
    `;
    return f`
      <div class="textarea__footer" part="footer">
        ${this.feedback && this._renderFeedback()}
        <span part="counter-container">${t}</span>
      </div>
    `;
  }
  render() {
    return this.renderLabel(
      this.labelId,
      f`
        <div
          part="base"
          class=${$(
        "textarea",
        `textarea--${this.effectiveSize}`,
        { "textarea--success": this.status === "success" },
        { "textarea--error": this.status === "error" },
        { "textarea--disabled": this.disabled },
        { "textarea--readonly": this.readonly },
        { "textarea--optional": this.optional }
      )}>
          <textarea
            id=${this.inputId}
            part="input"
            class="textarea__control"
            aria-disabled=${this.disabled}
            aria-describedby="${s(
        this.description ? this.descriptionId : u
      )} ${this.feedback ? this.feedbackId : u}"
            ?disabled=${this.disabled}
            ?readonly=${this.readonly}
            ?required=${this.required}
            minlength=${s(this.minlength)}
            maxlength=${s(this.maxlength)}
            wrap=${s(this.wrap)}
            cols=${s(this.cols)}
            rows=${s(this.rows)}
            placeholder=${s(this.placeholder)}
            ?autofocus=${this.autofocus}
            ?value=${this.value}
            aria-labelledby=${s(this.label ? this.labelId : u)}
            @input=${this.onInput}
            @keydown=${this.onKeydown}
            @change=${this.onChange}
            @blur=${this.onBlur}
            @focus=${this.onFocus}
            @select=${this.onSelect}
            @invalid=${this.handleInvalid}></textarea>

          ${this._renderFooter()}
        </div>
      `
    );
  }
  _renderFeedback() {
    return f`
      <dap-ds-feedback
        part="feedback"
        feedbackType=${s(this.feedbackType)}
        feedbackSize=${s(this.effectiveSize)}
        class=${$("textarea__feedback", {
      "textarea__feedback--sm": this.effectiveSize === "sm"
    })}
        id=${s(this.feedbackId)}
        exportparts="base:feedback-base, text:feedback-text, icon:feedback-icon"
        .subtle=${this.subtle}>
        <slot
          name="feedback-icon"
          @slotchange="${this._handleSlotChange}"></slot>
        ${this.feedback}
      </dap-ds-feedback>
    `;
  }
}, a.tagName = "dap-ds-textarea", a.dependencies = {
  "dap-ds-typography": w,
  "dap-ds-feedback": S
}, a.nextId = 0, a.styles = F(_), a);
o([
  I(".textarea__control")
], i.prototype, "input");
o([
  l({ type: Boolean, reflect: !0 })
], i.prototype, "hideCounter");
o([
  l({ type: Number })
], i.prototype, "minlength");
o([
  l({ type: Number })
], i.prototype, "maxlength");
o([
  l({ type: Number })
], i.prototype, "rows");
o([
  l({ type: Number })
], i.prototype, "cols");
o([
  l()
], i.prototype, "placeholder");
o([
  l()
], i.prototype, "wrap");
o([
  k()
], i.prototype, "count");
let T = i;
export {
  T as default
};
//# sourceMappingURL=textarea.component.js.map