dap-design-system/dist/components/input/input-base-element.js

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

import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as b, html as d } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as p } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as m } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { queryAssignedElements as h } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
import { GenericFormElement as y } from "../../internal/mixin/genericFormElement.js";
import $ from "./_styles/input.scss.js";
import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
var x = Object.defineProperty, i = (c, t, n, o) => {
  for (var l = void 0, u = c.length - 1, _; u >= 0; u--)
    (_ = c[u]) && (l = _(t, n, l) || l);
  return l && x(t, n, l), l;
};
const f = class f extends y {
  constructor() {
    super(...arguments), this.type = "text", this.step = 1, this.loading = !1, this.manualValueSet = !1, this.disableEnter = !1, this._hasAddonBefore = !1, this._hasAddonAfter = !1, this._hasPrefix = !1, this._hasPostfix = !1, this.onInput = () => {
      !this.input.validity.badInput && !this.manualValueSet && (this.value = this.input.value), this.emit("dds-input", { value: this.input.value }), this.setValidity();
    };
  }
  get nativeControl() {
    var t;
    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(".input__control");
  }
  _handleSlotChange(t) {
    (t == null ? void 0 : t.target).setAttribute("slot", "icon");
  }
  firstUpdated(t) {
    super.firstUpdated(t), this._hasAddonBefore = !!this._addonBeforeNode.length, this._hasAddonAfter = !!this._addonAfterNode.length, this._hasPrefix = !!this._prefixNode.length, this._hasPostfix = !!this._postfixNode.length;
  }
  attributeChangedCallback(t, n, o) {
    super.attributeChangedCallback(t, n, o), t === "value" && this.input && (this.input.value = o);
  }
  formResetCallback() {
    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.input.value = this.defaultValue || "";
  }
  onBlur() {
    this.emit("dds-blur");
  }
  onFocus() {
    this.emit("dds-focus");
  }
  onChange() {
    this.value = this.input.value, this.manualValueSet || this.emit("dds-change", { value: this.input.value }), this.setValidity();
  }
  onKeydown(t) {
    this.emit("dds-keydown", { value: this.input.value, originalEvent: t });
    const n = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
    !this.disableEnter && t.key === "Enter" && !n && setTimeout(() => {
      if (!t.defaultPrevented && !t.isComposing) {
        const o = document.createElement("button");
        o.type = "submit", this.insertAdjacentElement("afterend", o), o.click(), o.remove();
      }
    });
  }
  get focusElement() {
    return this.input;
  }
  /**
   * Gets the aria-describedby attribute value by combining description and feedback IDs.
   * @returns {string | undefined} Space-separated IDs or undefined if none exist
   * @private
   */
  getAriaDescribedBy() {
    const t = [];
    return this.description && t.push("description"), this.feedback && t.push("feedback"), t.length > 0 ? t.join(" ") : void 0;
  }
  handleInvalid(t) {
    t.preventDefault();
  }
  renderDefaultContent() {
    return d` <span
        part="prefix"
        class=${r({ "input__addon-prefix": !!this._hasPrefix })}>
        <slot name="prefix"></slot>
      </span>
      <span
        part="postfix"
        class=${r({
      "input__addon-postfix": this._hasPostfix || this.loading
    })}>
        ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : b}
        <slot name="postfix"></slot>
      </span>`;
  }
  renderInput(t) {
    return d`
      <div class="label-container">
        ${this.label && d`<dap-ds-form-label
          part="label"
          id="label"
          for="input"
          .size=${this.effectiveSize}
          .required=${this.required}
          .requiredLabel=${this.requiredLabel}
          .optional=${this.optional}
          .optionalLabel=${this.optionalLabel}
          .disabled=${this.disabled}
          class=${r("label")}
          .noMargin=${!!this.description}
          .hideLabel=${this.hideLabel}
          label=${s(this.label)}>
        </dap-ds-form-label>`}
        ${this.tooltip && d` <dap-ds-tooltip
          part="tooltip"
          content=${this.tooltip}
          mode="toggle"
          floatingStrategy="fixed"
          placement=${this.tooltipPlacement}>
          <dap-ds-icon-button
            clean
            class="info-button"
            slot="trigger"
            aria-label=${this.tooltipAriaLabel}
            size=${this.effectiveSize}
            iconSize=${this.effectiveSize === "xs" ? "16" : "22"}>
            <dap-ds-icon
              name="information-line"
              class="info-button"></dap-ds-icon>
          </dap-ds-icon-button>
        </dap-ds-tooltip>`}
      </div>
      ${this.description && d`
        <dap-ds-typography
          part="description"
          variant="description"
          class=${r("input-description")}
          size=${s(this.effectiveSize)}
          id="description">
          ${this.description}
        </dap-ds-typography>
      `}
      <span
        part="base"
        class=${r(
      "input",
      `input--${this.effectiveSize}`,
      { "input--success": this.status === "success" },
      { "input--error": this.status === "error" },
      { "input--disabled": this.disabled },
      { "input--readonly": this.readonly },
      { "input--has-addon-before": !!this._hasAddonBefore },
      { "input--has-addon-after": !!this._hasAddonAfter },
      { "input--has-prefix": !!this._hasPrefix },
      { "input--has-postfix": !!this._hasPostfix || this.loading }
    )}>
        <span
          part="addon-before"
          class=${r({
      "input__addon-before": !!this._hasAddonBefore,
      [`input__addon-before--${this.effectiveSize}`]: !!this._hasAddonBefore,
      "input__addon-before--disabled": !!this._hasAddonBefore && this.disabled,
      "input__addon-before--readonly": !!this._hasAddonBefore && this.readonly,
      "input__addon-before--success": !!this._hasAddonBefore && this.status === "success",
      "input__addon-before--error": !!this._hasAddonBefore && this.status === "error"
    })}>
          <slot name="addon-before"></slot>
        </span>
        <div class="input__container">
          <input
            id="input"
            class=${r(
      "input__control",
      `input__control--${this.effectiveSize}`,
      { "input__control--success": this.status === "success" },
      { "input__control--error": this.status === "error" },
      { "input__control--disabled": this.disabled },
      { "input__control--readonly": this.readonly },
      { "input__control--has-addon-before": !!this._hasAddonBefore },
      { "input__control--has-addon-after": !!this._hasAddonAfter },
      { "input__control--has-prefix": !!this._hasPrefix },
      {
        "input__control--has-postfix": !!this._hasPostfix || this.loading
      }
    )}
            part="input"
            name=${s(this.name ? this.name : void 0)}
            type=${this.type}
            ?disabled=${this.disabled}
            ?readonly=${this.readonly}
            ?required=${this.required}
            placeholder=${s(this.placeholder)}
            value=${s(this.value)}
            minlength=${s(this.minlength)}
            maxlength=${s(this.maxlength)}
            aria-labelledby=${s(this.label ? "label" : b)}
            aria-describedby=${s(this.getAriaDescribedBy())}
            min=${s(this.min)}
            max=${s(this.max)}
            pattern=${s(this.pattern)}
            step=${s(this.step)}
            inputmode=${s(this.inputmode)}
            ?autofocus=${this.autofocus}
            autocomplete=${this.autocomplete}
            autocapitalize=${s(this.autocapitalize ? "on" : "off")}
            @change=${this.onChange}
            @input=${this.onInput}
            @keydown=${this.onKeydown}
            @invalid=${this.handleInvalid}
            @blur=${this.onBlur}
            @focus=${this.onFocus} />
          ${t != null ? t : this.renderDefaultContent()}
        </div>
        <span
          part="addon-after"
          class=${r({
      "input__addon-after": !!this._hasAddonAfter,
      [`input__addon-after--${this.effectiveSize}`]: !!this._hasAddonAfter,
      "input__addon-after--disabled": !!this._hasAddonAfter && this.disabled,
      "input__addon-after--readonly": !!this._hasAddonAfter && this.readonly,
      "input__addon-after--success": !!this._hasAddonAfter && this.status === "success",
      "input__addon-after--error": !!this._hasAddonAfter && this.status === "error"
    })}>
          <slot name="addon-after"></slot>
        </span>
      </span>
      ${this.feedback && this._renderFeedback()}
    `;
  }
  _renderFeedback() {
    return d`
      <dap-ds-feedback
        part="feedback"
        role="alert"
        feedbackType=${s(this.feedbackType)}
        feedbackSize="${s(this.effectiveSize)}"
        .subtle=${this.subtle}
        id="feedback">
        <slot
          name="feedback-icon"
          @slotchange="${this._handleSlotChange}"></slot>
        ${this.feedback}
      </dap-ds-feedback>
    `;
  }
};
f.styles = g($);
let e = f;
i([
  m("#input")
], e.prototype, "input");
i([
  h({ slot: "addon-before" })
], e.prototype, "_addonBeforeNode");
i([
  h({ slot: "addon-after" })
], e.prototype, "_addonAfterNode");
i([
  h({ slot: "prefix" })
], e.prototype, "_prefixNode");
i([
  h({ slot: "postfix" })
], e.prototype, "_postfixNode");
i([
  a()
], e.prototype, "type");
i([
  a()
], e.prototype, "placeholder");
i([
  a({ type: Number })
], e.prototype, "minlength");
i([
  a({ type: Number })
], e.prototype, "maxlength");
i([
  a({ type: Number })
], e.prototype, "min");
i([
  a({ type: Number })
], e.prototype, "max");
i([
  a()
], e.prototype, "pattern");
i([
  a({ type: Number })
], e.prototype, "step");
i([
  a()
], e.prototype, "inputmode");
i([
  a({ type: Boolean, reflect: !0 })
], e.prototype, "loading");
i([
  a({ type: Boolean })
], e.prototype, "manualValueSet");
i([
  a({ type: Boolean })
], e.prototype, "disableEnter");
i([
  p()
], e.prototype, "_hasAddonBefore");
i([
  p()
], e.prototype, "_hasAddonAfter");
i([
  p()
], e.prototype, "_hasPrefix");
i([
  p()
], e.prototype, "_hasPostfix");
export {
  e as InputBaseElement
};
//# sourceMappingURL=input-base-element.js.map