class PhoneinputElement extends HTMLElement {
  constructor() {
    super();
  }

  async connectedCallback() {
    const id = this.getAttribute("data-id") || "";
    const label = this.getAttribute("data-label") || "";
    const customClass = this.getAttribute("data-class") || "";
    const validation = this.getAttribute("data-validation") || "";
    const description = this.getAttribute("data-description") || "";
    const value = this.getAttribute("data-value") || "";

    const isRequired =
      (this.getAttribute("data-isrequired") || "true") == "true";
    const isReadonly =
      (this.getAttribute("data-isreadonly") || "false") == "true";

    const style = document.createElement("style");
    style.textContent = `
        ._phone_input_holder{
          position: relative;
        }

        ._phone_input_holder > ul {
          top: 100% !important;
          transform: translateY(0%) !important;
        }

        ._phone_input_text{
          padding-left: 50px;
        }

        .selected-flag{
          margin-top: 14px;
        }
      `;

    this.appendChild(style);

    const input = document.createElement("div");
    input.innerHTML = /*html*/ `
        <div class="_input_holder _phone_input_holder">
          <label class="_phone_input_label _input_label ${
            isRequired ? "_required_label" : ""
          }">${label}</label>
          <div class="_input_description">${description}</div>
          <input value="${value}" class="_phone_input_text _input_text __input _phone ${
      isRequired ? "_required" : ""
    } ${customClass}" data-validation = "${validation}" id="${id}" name="phone" type="tel" ${
      isReadonly ? "readonly" : ""
    }/>
    <div class="_input_error_text"></div>
        </div>
      `;

    this.appendChild(input);
  }
}

window.customElements.define("phone-element", PhoneinputElement);