hologram-web-library/src/web-components/hw-form-input.js

Hologram Web Library components

import HTMLParsedElement from "./hw-common";
import HWStringUtils from "../utils/hw-string-utils";

export const hwFormInputObservedAttributes = [
    "errors",
    "container-styles",
    "auto-complete",
    "disabled",
    "button-appearance",
    "button-status",
    "button-label",
    "value"
];

class HWFormInput extends HTMLParsedElement {
  input;

  errorsContainer;

  constructor() {
    super();
    this.input = document.createElement("input");
    this.innerWrapper = document.createElement("div");
    this.errorsContainer = document.createElement("div");
    this.label = document.createElement("label");
    this.editButton = document.createElement("hw-button");
    this.innerWrapper.appendChild(this.label);
    this.innerWrapper.appendChild(this.input);
  }

  parsedCallback() {
    this.getAttributeNames().forEach((attr) => {
      if (attr === "label") {
        this.label.innerHTML = this.getAttribute("label");
      } else if (attr === "phone-format") {
        let _input = this.input;
        this.input.addEventListener('input', (e) => {
          _input.value = HWStringUtils.formatPhoneNumber(_input.value, this.getAttribute(attr));
        });
      } else if (hwFormInputObservedAttributes.indexOf(attr) < 0 && attr !== "class") {
        this.input?.setAttribute(attr, this.getAttribute(attr) || "");
        this.removeAttribute(attr);
      } else if (attr === "container-styles") {
        this.getAttribute("container-styles")
          ?.split(" ")
          .forEach((className) => {
            this.classList.add(className);
          });
      }
    });

    this.classList.add("hw-form-input-wrapper");
    this.innerWrapper.classList.add("hw-form-input-inner-wrapper");
    this.input.classList.add("hw-form-input");
    this.input.classList.add("auto-complete");

    this.appendChild(this.innerWrapper);
    this.appendChild(this.errorsContainer);

    let buttonLabel = this.getAttribute("button-label");

    if (buttonLabel) {
      this.editButton.setAttribute("styles", "no-hover edit-button");
      this.editButton.setAttribute("appearance", this.getAttribute("button-appearance") || "primary");
      this.editButton.setAttribute("status", this.getAttribute("button-status") || "outline");
      this.editButton.setAttribute("size", "sm");
      this.input.classList.add("pr-24");
      this.input.classList.add("text-ellipsis");
      this.editButton.innerHTML = buttonLabel;
      this.appendChild(this.editButton);
    }

  }

  static get observedAttributes() {
    return hwFormInputObservedAttributes;
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === "errors") {
      // Clear old error messages
      this.handleError(oldValue, newValue);
    }
    if (attrName === "type") {
      this.input.setAttribute(attrName, newValue);
    }
    if (attrName === "auto-complete") {
      this.input.setAttribute(attrName, newValue);
    }
    if (attrName === "disabled") {
      if (!this.getAttribute(attrName) || this.getAttribute(attrName) === "false") {
        this.input.removeAttribute("disabled");
      } else {
        this.input.setAttribute("disabled", "disabled");
      }
    }

    if (attrName === "button-label") {
      if (this.editButton.querySelector("button")) {
        this.editButton.querySelector("button").innerHTML = this.getAttribute(attrName);
      }
    }

    if (attrName === "button-appearance") {
      this.editButton.setAttribute("appearance", this.getAttribute(attrName) || "primary");
    }

    if (attrName === "button-status") {
      this.editButton.setAttribute("status", this.getAttribute(attrName) || "outline");
    }

    if (attrName === "value") {
      if (this.getAttribute("phone-format")) {
        this.input.value = HWStringUtils.formatPhoneNumber(this.getAttribute(attrName), this.getAttribute("phone-format"));
      } else {
        this.input.value = this.getAttribute(attrName);
      }
    }
  }

  handleError(oldValue, newValue) {
    this.errorsContainer.innerHTML = "";

    if (!newValue || oldValue === newValue) {
      this.errorsContainer.classList.add("hidden");
      this.innerWrapper.classList.remove("has-error");
      return;
    }

    this.innerWrapper.classList.add("has-error");
    this.errorsContainer.classList.remove("hidden");

    const errorMessage = document.createElement("p");
    errorMessage.classList.add("hw-form-input-error-message");
    errorMessage.textContent = newValue;
    this.errorsContainer.appendChild(errorMessage);
  }
}

if (!customElements.get("hw-form-input")) {
  customElements.define("hw-form-input", HWFormInput);
}